yf_xsn/discern/src/components/help/help.vue

<!--  -->
<template>
  <div class="help_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部信息 -->
    <div class="help_box-head">
      <div class="help_box-headBox">
        <img
          src="../../assets/image/user.jpg"
          alt=""
          class="help_box-headImg"
        />
      </div>
    </div>

    <!-- 主内容 -->
    <div class="help_box-main">
      <!-- 标题 -->
      <div class="navlist">
        <ul>
          <li
            class="navli"
            v-for="(item, index) in navList"
            :class="{ activeT: nowIndex === index }"
            @click="tabClick(index)"
            :key="index"
          >
            <div class="navliVal">{{ item.name }}</div>
          </li>
        </ul>
      </div>

      <!-- 相应内容 -->
      <div
        class="swiper-container swiper_con"
        style="background: #f7f8fc; margin-bottom: 1rem"
      >
        <div class="swiper-wrapper">
          <!-- 交流 -->
          <div class="swiper-slide" ref="viewBox">
            <ul class="help_box-main-ulA">
              <li
                class="help_box-main-listA"
                v-for="(item, index) in this.interflowDat"
                :key="index"
              >
                <!-- 用户信息 -->
                <div class="help_box-main-listA-userBox">
                  <img
                    preview="1"
                    v-lazy="'/bigservers' + item.photo"
                    alt
                    class="help_box-main-listA-userBox-img"
                  />

                  <div class="help_box-main-listA-userBox-txt">
                    <div class="help_box-main-listA-userBox-name">
                      {{ item.user_remark }}
                    </div>
                    <div class="help_box-main-listA-userBox-time">
                      {{ item.time }}
                    </div>
                  </div>
                </div>

                <!-- 交流内容-文字 -->
                <div class="help_box-main-listA-writing">
                  {{ item.problem }}
                </div>

                <!-- 交流图片 -->
                <div class="help_box-main-listA-image">
                  <ul class="help_box-main-listA-image-ul">
                    <li
                      class="help_box-main-listA-image-list"
                      v-for="itemA in item.img"
                      :key="itemA"
                      @click="imgShow(itemA)"
                      preview="1"
                    >
                      <img
                        v-lazy="'/bigservers' + itemA"
                        alt
                        class="help_box-main-listA-imageList"
                      />
                    </li>
                  </ul>
                </div>

                <!-- 交流数据的查看评论点赞 -->
                <div class="help_box-main-listA-operation">
                  <ul class="help_box-main-listA-operation-ul">
                    <li class="help_box-main-listA-operation-list">
                      <img
                        src="../../assets/image/new/8.png"
                        alt
                        class="help_box-main-listA-operation-listImg"
                      />
                      <div class="help_box-main-listA-operation-listNum">
                        {{ item.visit_num }}
                      </div>
                    </li>
                    <li class="help_box-main-listA-operation-list">
                      <img
                        src="../../assets/image/new/10.png"
                        alt
                        class="help_box-main-listA-operation-listImg"
                      />
                      <div class="help_box-main-listA-operation-listNum">
                        {{ item.replys }}
                      </div>
                    </li>
                    <li class="help_box-main-listA-operation-list">
                      <!-- 未点赞 -->
                      <img
                        @click.stop="like(item.id, index)"
                        v-if="item.like === '0'"
                        src="../../assets/image/new/3.png"
                        alt
                        class="help_box-main-listA-operation-listImg"
                      />
                      <!-- 点赞了 -->
                      <img
                        v-else
                        @click.stop="noLike(item.id, index)"
                        src="../../assets/image/new/23.png"
                        alt
                        class="help_box-main-listA-operation-listImg"
                      />
                      <div class="help_box-main-listA-operation-listNum">
                        {{ item.like_num }}
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>

          <!-- 鉴定 -->
          <div class="swiper-slide">
            <ul class="help_box-main-authenticateUl">
              <li class="help_box-main-authenticateList">
                <div class="help_box-main-authenticateList-box1">
                  <img
                    src="../../assets/image/timg4.jpg"
                    alt
                    class="help_box-main-authenticateList-box1-img"
                  />
                  <div class="help_box-main-authenticateList-box1-txt">
                    这是什么虫子？以前好像见过
                  </div>
                </div>

                <div class="help_box-main-authenticateList-box2">
                  <div class="help_box-main-authenticateList-box3">
                    <img
                      src="../../assets/image/user.jpg"
                      alt
                      class="help_box-main-authenticateList-box3-img"
                    />
                    <div class="help_box-main-authenticateList-box3-name">
                      用户123456
                    </div>
                  </div>
                  <img
                    src="../../assets/image/new/10.png"
                    alt
                    class="help_box-main-authenticateList-box4-img"
                  />
                </div>
              </li>

              <li class="help_box-main-authenticateList">
                <div class="help_box-main-authenticateList-box1">
                  <img
                    src="../../assets/image/timg4.jpg"
                    alt
                    class="help_box-main-authenticateList-box1-img"
                  />
                  <div class="help_box-main-authenticateList-box1-txt">
                    这是什么虫子？以前好像见过
                  </div>
                </div>

                <div class="help_box-main-authenticateList-box2">
                  <div class="help_box-main-authenticateList-box3">
                    <img
                      src="../../assets/image/user.jpg"
                      alt
                      class="help_box-main-authenticateList-box3-img"
                    />
                    <div class="help_box-main-authenticateList-box3-name">
                      用户123456
                    </div>
                  </div>
                  <img
                    src="../../assets/image/new/10.png"
                    alt
                    class="help_box-main-authenticateList-box4-img"
                  />
                </div>
              </li>

              <li class="help_box-main-authenticateList">
                <div class="help_box-main-authenticateList-box1">
                  <img
                    src="../../assets/image/timg4.jpg"
                    alt
                    class="help_box-main-authenticateList-box1-img"
                  />
                  <div class="help_box-main-authenticateList-box1-txt">
                    这是什么虫子？以前好像见过
                  </div>
                </div>

                <div class="help_box-main-authenticateList-box2">
                  <div class="help_box-main-authenticateList-box3">
                    <img
                      src="../../assets/image/user.jpg"
                      alt
                      class="help_box-main-authenticateList-box3-img"
                    />
                    <div class="help_box-main-authenticateList-box3-name">
                      用户123456
                    </div>
                  </div>
                  <img
                    src="../../assets/image/new/10.png"
                    alt
                    class="help_box-main-authenticateList-box4-img"
                  />
                </div>
              </li>

              <li class="help_box-main-authenticateList">
                <div class="help_box-main-authenticateList-box1">
                  <img
                    src="../../assets/image/timg4.jpg"
                    alt
                    class="help_box-main-authenticateList-box1-img"
                  />
                  <div class="help_box-main-authenticateList-box1-txt">
                    这是什么虫子？以前好像见过
                  </div>
                </div>

                <div class="help_box-main-authenticateList-box2">
                  <div class="help_box-main-authenticateList-box3">
                    <img
                      src="../../assets/image/user.jpg"
                      alt
                      class="help_box-main-authenticateList-box3-img"
                    />
                    <div class="help_box-main-authenticateList-box3-name">
                      用户123456
                    </div>
                  </div>
                  <img
                    src="../../assets/image/new/10.png"
                    alt
                    class="help_box-main-authenticateList-box4-img"
                  />
                </div>
              </li>

              <li class="help_box-main-authenticateList">
                <div class="help_box-main-authenticateList-box1">
                  <img
                    src="../../assets/image/timg4.jpg"
                    alt
                    class="help_box-main-authenticateList-box1-img"
                  />
                  <div class="help_box-main-authenticateList-box1-txt">
                    这是什么虫子？以前好像见过
                  </div>
                </div>

                <div class="help_box-main-authenticateList-box2">
                  <div class="help_box-main-authenticateList-box3">
                    <img
                      src="../../assets/image/user.jpg"
                      alt
                      class="help_box-main-authenticateList-box3-img"
                    />
                    <div class="help_box-main-authenticateList-box3-name">
                      用户123456
                    </div>
                  </div>
                  <img
                    src="../../assets/image/new/10.png"
                    alt
                    class="help_box-main-authenticateList-box4-img"
                  />
                </div>
              </li>

              <li class="help_box-main-authenticateList">
                <div class="help_box-main-authenticateList-box1">
                  <img
                    src="../../assets/image/timg4.jpg"
                    alt
                    class="help_box-main-authenticateList-box1-img"
                  />
                  <div class="help_box-main-authenticateList-box1-txt">
                    这是什么虫子？以前好像见过
                  </div>
                </div>

                <div class="help_box-main-authenticateList-box2">
                  <div class="help_box-main-authenticateList-box3">
                    <img
                      src="../../assets/image/user.jpg"
                      alt
                      class="help_box-main-authenticateList-box3-img"
                    />
                    <div class="help_box-main-authenticateList-box3-name">
                      用户123456
                    </div>
                  </div>
                  <img
                    src="../../assets/image/new/10.png"
                    alt
                    class="help_box-main-authenticateList-box4-img"
                  />
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
import "swiper/js/swiper.min.js";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      navList: [{ name: "交流" }, { name: "鉴定" }],
      nowIndex: 0,
      mySwiper: "",
      // 交流
      interflowDat: [], //交流列表数据
      isClick: true, //点赞开关
      amplificationShow: false, //查看大图
      imgList: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // tab切换交流、鉴定、方案
    initSwiper() {
      var that = this;
      that.mySwiper = new Swiper(".swiper-container", {
        initialSlide: 0,
        autoplay: false,
        keyboardControl: true,
        autoHeight: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,
        autoplayDisableOnInteraction: false, //解决拖动之后不能自动轮播
        preventLinksPropagation: false, // 阻止点击事件冒泡
        onSlideChangeStart: function (swiper) {
          //这个是当swiper被改变是的回调函数，可以拿到当前索引
          console.log(swiper.activeIndex);
          // alert(swiper.activeIndex);
          that.nowIndex = swiper.activeIndex;
        },
        onSlideChangeTransitionStart: function (swiper, event) {},
      });
    },
    tabClick(index) {
      this.nowIndex = index;
      if (!this.mySwiper.slideTo) {
        this.initSwiper();
      }
      this.mySwiper.slideTo(index, 300, false);
    },

    // 交流列表数据接口
    interflowData() {
      var that = this;
      that
        .$axios({
          method: "get",
          url: "bigservers/user_farm_show",
          params: {
            page: 1,
          },
        })
        .then((res) => {
          if (res.data.num !== 0) {
            var data = res.data.dat;
            that.interflowDat = data;
          } else if (res.data.num === 0) {
            this.gerenShow = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 交流点赞
    like(id, index) {
      var that = this;
      var isClick = that.isClick;
      var postData = that.$qs.parse({
        id: id, //id
        ret: "add", //点赞
        req: "title", //主问题
      });
      if (isClick === true) {
        that.isClick = false;
        that
          .$axios({
            method: "post",
            url: "bigservers/farm_likes",
            data: postData,
          })
          .then((res) => {
            if (res.data === 0) {
              this.$message({
                type: "success",
                message: "点赞成功!",
                duration: 1500,
              });
              that.interflowDat[index].like = "1"; //改变点赞状态
              that.interflowDat[index].like_num =
                that.interflowDat[index].like_num + 1; //改变点赞数据
            } else if (res.data === 1) {
              this.$notify.error({
                title: "错误",
                message: "点赞出错了！！",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },
    // 交流取消点赞
    noLike(id, index) {
      var that = this;
      var isClick = that.isClick;
      var postData = that.$qs.parse({
        id: id, //id
        ret: "off", //点赞
        req: "title", //主问题
      });
      if (isClick === true) {
        that.isClick = false;
        that
          .$axios({
            method: "post",
            url: "bigservers/farm_likes",
            data: postData,
          })
          .then((res) => {
            if (res.data === 0) {
              that.$message({
                type: "success",
                message: "取消点赞成功！",
                duration: 1500,
              });
              that.interflowDat[index].like = "0"; //改变点赞状态
              that.interflowDat[index].like_num =
                that.interflowDat[index].like_num - 1; //改变点赞数量
            } else if (res.data === 1) {
              that.$notify.error({
                title: "错误",
                message: "取消点赞出错了！！",
                duration: 1500,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },
    //点击轮播图片进行放大
    imgShow(img) {
      this.amplificationShow = true;
      this.imgList = img;
      console.log(img);
      console.log(111);
      console.log(this.imgList);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_boderHeight();
    this.initSwiper(); //tab切换交流、鉴定、方案
    this.interflowData(); //交流列表接口
  },
};
</script>
<style lang='scss'>
@import "../../assets/scss/help.scss";
//@import url(); 引入公共css类
</style>