zycp-demo/src/views/user/ucenter/index.vue

<template>
  <div class="content my-content main-content">
    <!-- 头部 -->
    <div :class="{ header: true, 'scroll white': isScrollTop }">
      <div class="back"></div>
      <div class="header-title">我的</div>
    </div>
    <!-- 轮播图 -->
    <div class="banner my-banner">
      <img src="../../../assets/images/user/banner.jpg" alt="" />
      <div class="my-photo">
        <span>
          <img v-if="userData.avatar" :src="userData.avatar" />
         <img v-else src="../../../assets/images/user/photo.png" />
        </span>
        <p v-if="userData.nick_name">{{userData.nick_name}}</p>
        <p v-else>未填写个人信息</p>
      </div>
    </div>
    <!-- 免费咨询卡 -->
    <div class="user-receive" @click="toPage()" v-if="isUse == 0">
      <img src="../../../assets/images/user/card.png" alt="" />
      <div class="receive-txt">
        <span class="use-btn" v-if="isReceive == 1">立即使用</span>
        <span class="receive-btn" v-if="isReceive == 0">立即领取</span>
        <p>有效期：2022.2.1-2022.2.15</p>
      </div>
    </div>
    <div class="line" v-if="isReceive == 1"></div>
    <ul class="student-information">
      <li @click="goPage('/bind')" >
        <span
          ><img src="../../../assets/images/user/icon-phone.png" alt=""
        /></span>
        <p>手机号<em>{{userData.mobile}}</em></p>
        <img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
      </li>
      <li @click="goPage('/info')">
        <span
          ><img src="../../../assets/images/user/icon-student.png" alt=""
        /></span>
        <p>考生信息</p>
        <img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
      </li>
    </ul>
    <div class="feedback" @click="goPage('/feedback')">
      <span
        ><img src="../../../assets/images/user/icon-feedback.png" alt=""
      /></span>
      <p>意见和反馈</p>
      <img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
    </div>
    <div :class="{ 'my-report': true, open: isOpen }" @click="isOpen = !isOpen">
      <span
        ><img src="../../../assets/images/user/icon-report.png" alt=""
      /></span>
      <p>我的报告</p>
      <img src="../../../assets/images/home/expert/arrow-right.png" alt="" />
    </div>
    <ul :class="{ 'report-list': true, open: isOpen }">
      <li @click="goPage('/report')">
        <p>职业与专业定位整合测试（融合版）</p>
        <span>2022-05-12 13:28</span>
      </li>
      <li @click="goPage('/report')">
        <p>职业与专业定位整合测试（融合版）</p>
        <span>2022-05-12 13:28</span>
      </li>
      <li @click="goPage('/report')">
        <p>霍兰德职业兴趣测评（完整版）</p>
        <span>2022-05-12 13:28</span>
      </li>
      <li @click="goPage('/report')">
        <p>DISC性格测评</p>
        <span>2022-05-12 13:28</span>
      </li>
      <li @click="goPage('/report')">
        <p>职业与专业定位整合测试（融合版）</p>
        <span>2022-05-12 13:28</span>
      </li>
      <li @click="goPage('/report')">
        <p>职业与专业定位整合测试（融合版）</p>
        <span>2022-05-12 13:28</span>
      </li>
      <li @click="goPage('/report')">
        <p>霍兰德职业兴趣测评（完整版）</p>
        <span>2022-05-12 13:28</span>
      </li>
      <li @click="goPage('/report')">
        <p>DISC性格测评</p>
        <span>2022-05-12 13:28</span>
      </li>
    </ul>
    <div class="feedback-btn">退出登录</div>
		<tabbar :current="4"></tabbar>
	</div>
</template>

<script>
	import tabbar from '../../../components/tabbar.vue'
	export default {
		name: "expert",
		components: {
			tabbar
		},
  data() {
    return {
      isScrollTop: false,
      isReceive: 1, //是否领取咨询机会
      isUse: 0, //是否使用
      isOpen: false,
      userData:{
        avatar: ""       ,
       consult_amount: 0,
       create_time: "",
       ding_code: "",
       expert_id: 0,
       gender: 0,
       id: 31,
       im_uid: "",
       lat: "",
       lng: "",
       login_time: "",
       mobile: "",
       nick_name: "",
       open_id: "",
       real_name: "",
       tags: "",
       tel: "",
       type: 0,
       unionid: "",
       update_time: "",
       user_code: ""
      },
      
    };
  },
  created() {
    this.isScroll = true;
    window.addEventListener("scroll", this.eventScrollTop);
    this.getUserData();
  },
  methods: {
    // 判断跳转方式
    toPage() {
      if (this.isReceive == 1) {
        this.$router.push("/expert");
      } else if (this.isReceive == 0) {
        this.$router.push("/information");
      } else {
        return false;
      }
    },
    // 页面跳转
    goPage(path) {
      this.$router.push(path);
    },
    // 获取用户信息
    getUserData() {
      let that = this;
      this.axios.post(this.HOME + "/api/user/center-info").then(function (res) {
        that.userData = res.data.data;
        location.centerUserData=JSON.stringify( that.userData )
      });
    },
    // 滚动改变样式
    eventScrollTop() {
      let scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop >= 5) {
        if (this.isScroll) {
          this.isScroll = false;
          this.isScrollTop = true;
        }
      } else {
        if (!this.isScroll) {
          this.isScroll = true;
          this.isScrollTop = false;
        }
      }
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.eventScrollTop);
  },
  //keep-alive进入时触发
  activated() {
    this.isScroll = true;
    window.addEventListener("scroll", this.eventScrollTop);
  },
  //keep-alive离开时触发
  deactivated() {
    window.removeEventListener("scroll", this.eventScrollTop);
  },
};
</script>

<style scoped>
	.banner,
	.banner img {
		width: 100%;
	}
</style>