yf_xsn/discern/src/components/person/person.vue

<!--  -->
<template>
  <div class="person_box" :style="'height:' + fullHeight + 'px'">
    <!-- 头部 -->
    <div class="person_headrBox">
      <div class="person_divBox">
        <div class="person_headrBox-tlt">我的</div>
      </div>
    </div>

    <!-- main -->
    <div class="person_box-main">
      <!-- 信息列表 -->
      <ul class="person_box-ul">
        <!-- 个人 -->
        <li class="person_box-list">
          <div class="person_box-list-box1">
            <img
              preview="1"
              v-lazy="'http://192.168.1.8:8002/' + redata.user_photo"
              alt=""
              class="person_box-list-box1-img"
            />
            <div class="person_box-list-box1-div">
              <div class="person_box-list-box1-divName">
                {{ redata.user_remark == null || redata.user_remark == '' ? redata.username : redata.user_remark }}
              </div>
              <div class="person_box-list-box1Num">
                个人积分<span style="color: #000; margin: 0 0 0 0.15rem">{{
                  redata.integral
                }}</span>
              </div>
            </div>
          </div>

          <div
            class="person_box-list-box2"
            @click="noSignIn()"
            v-if="redata.sign == 0"
          >
            <i class="el-icon-date"></i>
            未签到
          </div>

          <div
            v-else
            class="person_box-list-box2"
            @click="signIn()"
            style="background: rgb(177, 175, 175)"
          >
            <i class="el-icon-date"></i>
            已签到
          </div>
        </li>

        <!-- 我的主页 -->
        <li class="person_box-liHome" @click="myHomepage(redata.user_photo)">
          <div class="person_box-liHome-box">
            <img
              src="../../assets/image/new/22.png"
              alt=""
              class="person_box-liHome-box-img"
            />
            <div class="person_box-liHome-box-name">我的主页</div>
          </div>
          <img
            src="../../assets/image/right.png"
            alt=""
            class="person_box-liHome-imgRight"
          />
        </li>

        <!-- 积分 -->
        <li class="person_box-liIntegral">
          <ul class="person_box-liHome-ul">
            <li
              class="person_box-liHome-list"
              style="border: 0"
              @click="myIntegral(redata.integral, redata.username)"
            >
              <div class="person_box-liHome-box">
                <img
                  src="../../assets/image/new/17.png"
                  alt=""
                  class="person_box-liHome-box-img"
                />
                <div class="person_box-liHome-box-name">我的积分</div>
              </div>
              <img
                src="../../assets/image/right.png"
                alt=""
                class="person_box-liHome-imgRight"
              />
            </li>

            <!-- <li class="person_box-liHome-list" style="border: 0">
              <div class="person_box-liHome-box">
                <img
                  src="../../assets/image/new/18.png"
                  alt=""
                  class="person_box-liHome-box-img"
                />
                <div class="person_box-liHome-box-name">积分讲解</div>
              </div>
              <img
                src="../../assets/image/right.png"
                alt=""
                class="person_box-liHome-imgRight"
              />
            </li> -->
          </ul>
        </li>

        <!-- 收藏、跟帖、识别记录 -->
        <li class="person_box-liIntegral" style="margin: 0.25rem 0 0 0">
          <ul class="person_box-liHome-ul">
            <li class="person_box-liHome-list" @click="enshrine()">
              <div class="person_box-liHome-box">
                <img
                  src="../../assets/image/new/21.png"
                  alt=""
                  class="person_box-liHome-box-img"
                />
                <div class="person_box-liHome-box-name">我的收藏</div>
              </div>
              <img
                src="../../assets/image/right.png"
                alt=""
                class="person_box-liHome-imgRight"
              />
            </li>

            <li class="person_box-liHome-list" @click="followUp()">
              <div class="person_box-liHome-box">
                <img
                  src="../../assets/image/new/15.png"
                  alt=""
                  class="person_box-liHome-box-img"
                />
                <div class="person_box-liHome-box-name">我的跟帖</div>
              </div>
              <img
                src="../../assets/image/right.png"
                alt=""
                class="person_box-liHome-imgRight"
              />
            </li>

            <li
              class="person_box-liHome-list"
              style="border: 0"
              @click="recognition()"
            >
              <div class="person_box-liHome-box">
                <img
                  src="../../assets/image/new/19.png"
                  alt=""
                  class="person_box-liHome-box-img"
                />
                <div class="person_box-liHome-box-name">识别记录</div>
              </div>
              <img
                src="../../assets/image/right.png"
                alt=""
                class="person_box-liHome-imgRight"
              />
            </li>
          </ul>
        </li>

        <!-- 系统设置 -->
        <li class="person_box-liIntegral" style="margin: 0.25rem 0 0 0">
          <ul class="person_box-liHome-ul">
            <li class="person_box-liHome-list" @click="aboutUs()">
              <div class="person_box-liHome-box">
                <img
                  src="../../assets/image/new/16.png"
                  alt=""
                  class="person_box-liHome-box-img"
                />
                <div class="person_box-liHome-box-name">关于我们</div>
              </div>
              <img
                src="../../assets/image/right.png"
                alt=""
                class="person_box-liHome-imgRight"
              />
            </li>

            <li
              class="person_box-liHome-list"
              style="border: 0"
              @click="setting()"
            >
              <div class="person_box-liHome-box">
                <img
                  src="../../assets/image/new/20.png"
                  alt=""
                  class="person_box-liHome-box-img"
                />
                <div class="person_box-liHome-box-name">设置</div>
              </div>
              <img
                src="../../assets/image/right.png"
                alt=""
                class="person_box-liHome-imgRight"
              />
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <!-- 底部导航 -->
    <bottomNav v-show="botNav"></bottomNav>
  </div>
</template>

<script>
import bottomNav from "../bottomNav/bottomNav"; //底部导航栏

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    bottomNav, //底部导航
  },
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight,
      botNav: true, //底部导航
      redata: {}, //用户个人信息
      isClick: true, //签到开关
    };
  },
  //监听属性 类似于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;
        })();
      };
    },

    // 获取当前页面的用户个人信息数据
    userData() {
      var that = this;
      that
        .$axios({
          method: "get",
          url: "http://192.168.1.8:8002/see_user",
        })
        .then((res) => {
          if (res.data) {
            that.redata = res.data;
          } else {
            console.log("没有");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 进入我的积分界面
    myIntegral(num, name) {
      var that = this;
      that.$router.push({
        name: 'share',
        query: {
          num: num,
          name: name,
          ret: 'myList'
        }
      })
    },

    //进入我的主页界面
    myHomepage(img) {
      var that = this;
      that.$router.push("/help");
      that.$router.push({
        name: "help",
        query: {
          img: img,
        },
      });
    },

    //进入我的跟帖界面
    followUp() {
      var that = this;
      that.$router.push("/followUp");
    },

    // 进入关于我们界面
    aboutUs() {
      var that = this;
      that.$router.push("/aboutUs");
    },

    // 进入识别记录界面
    recognition() {
      var that = this;
      that.$router.push("/memory");
    },

    // 进入我的收藏界面
    enshrine() {
      var that = this;
      that.$router.push("/collect");
    },

    // 进入设置界面
    setting() {
      var that = this;
      that.$router.push("/setting");
    },

    // 未签到
    noSignIn() {
      var that = this;
      var isClick = that.isClick;
      if (isClick === true) {
        that
          .$axios({
            method: "post",
            url: "http://192.168.1.8:8002/itegral_sign",
          })
          .then((res) => {
            if (res.data.code == "200") {
              that.$message({
                type: "success",
                message: "签到成功!",
                duration: 1500,
              });
              that.userData();
            } else {
              this.$notify.error({
                title: "错误",
                message: "签到失败",
                duration: 1500,
              });
            }
            console.log(res.data);
          })
          .catch((err) => {
            console.log(err);
            this.$notify.error({
              title: "错误",
              message: "签到失败",
              duration: 1500,
            });
          });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },

    // 已签到
    signIn() {
      var that = this;
      var isClick = that.isClick;
      if (isClick === true) {
        that.isClick = false;
        this.$notify.error({
          title: "错误",
          message: "您已签过到，不可重复",
          duration: 1500,
        });
        setTimeout(function () {
          that.isClick = true;
        }, 1500);
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.get_boderHeight();
    this.userData(); //用户个人信息
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss'>
@import "../../assets/scss/person.scss";
</style>