zhishifufei_uniapp/pages/mine/index.vue

<template>
  <BaseContainer class="user-page" :fixedNav="false">
    <image :src="getImgPath('/static/frontend/mine-bg.png')" mode="aspectFill" class="bg"></image>
    <view class="header">
      <view class="user-section"  data-eventsync="true" @tap="goProfilePage"  >
				<image mode="aspectFill" class="img" :src="userInfo.avatar" v-if="isLogin" />
				<image mode="aspectFill"  class="img" :src="getImgPath('/wap/first/zsff/images/avatar_default.jpg')" v-else />
				<view class="text-wrap">
					<template v-if="isLogin">
						<view class="name">{{ userInfo.nickname }}</view>
						<view class="info info-vip" v-if="userInfo.level == 0">
							<image mode="aspectFill" class="icon" :src="getImgPath('/static/frontend/vip.png')" />
							<text>vip会员</text>
						</view>
						<view class="info" v-else>
							<text>尚未开通会员</text>
						</view>
					</template>
					<view class="name"  v-else>请登录</view>
				</view>
				<view class="iconfont iconxiangyou"></view>
			</view>
			<view v-if="isLogin" class="notice header-info" @click="toNoticeList">
					<image src="@/static/images/notice.png" mode="aspectfill"></image>
					<text v-if="unReadMsgNum > 0" class="notice-num">{{ unReadMsgNum }}</text>
			</view>
    </view>
   
    <view class="member-section" @click="memberUrl">
      <view>
        <image mode="aspectFill" src="@/static/images/vip.png" />
				<text>V</text>
      </view>
      <view>
        <view v-if="!isLogin || userInfo.level == 0" class="member_title">会员可享多项课程特权</view>
        <view v-else class="member_title">有效期至{{ overdue_time }}</view>
      </view>
      <view v-if="isLogin">
        <view  style="white-space: nowrap;">
          <button class="flex flex-center" v-if="userInfo.level == 1">
            立即查看
          </button>
          <button class="flex flex-center" v-else>立即激活</button>
        </view>
      </view>
      <button class="flex flex-center" v-else>立即激活</button>
    </view>
		<view class="func-box">
			<view class="tool-section">
				<view @click="goUrl('/pages/special/grade_special', 1)">
					<image mode="heightFix" :src="getImgPath('/static/frontend/course.png')" />
					<span>我的课程</span> 
				</view>
				<view @click="goUrl('/pages/special/record', 1)">
					<image mode="heightFix" :src="getImgPath('/static/frontend/record.png')" />
					<span>学习记录</span>
				</view>
				<view @click="goUrl('/pages/special/order_store_list', 1)" v-if="is_store_switch == 1">
					<image mode="heightFix" src="@/static/images/my/order.png" />
					<span>商品订单</span>
				</view>
			</view>
			<view class="question">
				<view v-if="question.length" class="question-section">
					<view class="question-item flex " v-for="(item, index) in question" :key="item.id"
						@click="goUrl(item.url, 1)">
						<image mode="heightFix" :src="getImgPath(`/static/frontend/question-${index}.png`)" />
						<view>
							<view>{{ item.title }}</view>
							<view>{{ item.explain }}</view>
						</view>
					</view>
				</view>
			</view>
	 
			<view class="serve-section" v-if="menuList.length">
				<view class="section-bd">
					<!-- <view class="section-link" v-for="item in menuList" :key="item.id" @click="goUrl(item, 2)" v-if="item.title != '咨询客服' && TOUTIAO_STATUS">
						<image mode="aspectFill" :src="item.icon" />
						{{ item.title }}
						<view class="menu-more"></view>
					</view>
					<button class="section-link"  open-type="im" :data-im-id="imId" bindim="imCallback"  binderror="onimError" v-if="TOUTIAO_STATUS"> 
						<image mode="aspectFill" :src="getImgPath('/wap/first/zsff/images/chats.png')" />
						咨询客服
						<view class="menu-more"></view>
					</button> -->


					<view  v-if="!TOUTIAO_STATUS" class="section-link" v-for="item in menuList.slice(0, 6)" :key="item.id" @click="goUrl(item, 2)" >
						<image mode="aspectFill" :src="item.icon" />
						{{ item.title }}
						<view class="menu-more"></view>
					</view>
				</view>
				<view class="section-bd" v-if="menuList.length > 6">
				
				
						<view  v-if="!TOUTIAO_STATUS" class="section-link" v-for="item in menuList.slice(6, menuList.length)" :key="item.id" @click="goUrl(item, 2)" >
							<image mode="aspectFill" :src="item.icon" />
							{{ item.title }}
						<view class="menu-more"></view>
					</view>
				</view>
			</view>
			<!-- <view v-if="copyright && hasCopyright" class="copyright">{{ copyrigh.nncnL_crmeb_copyright }}</view>
			<image mode="widthFix" v-if="!copyright && hasCopyright" class="support"
				:src="getImgPath('/wap/first/zsff/images/crmeb_my.png')" /> -->

			<!-- <template v-if="is_official_account_switch">
				<view v-if="isfollow">
					<view class="mask" @touchmove.prevent></view>
					<view class="follow">
						<view>立即绑定微信公众号用户</view>
						<image mode="aspectFill" :src="codeUrl" />
						<button @click.stop="skip">跳过</button>
					</view>
				</view>
			</template> -->
			<!-- <BaseLogin :login-show="loginShow" :site-name="site_name" @login-close="logComplete" /> -->
			<!-- 申请讲师状态 -->
			<ApplyDialog :show.sync="applyVisible" :status="applyStatus" :thetype="entry_type" :fail="failMessage" />
			<view style="height: var(--tab-bar-height)"></view>
			<Modification :tipIsVisable="tipIsVisable" :avatar="avatar" @changes="childClick"></Modification>
		</view>
  </BaseContainer>
</template>

<script>
  import {
    getQuestionModule,
    getMenus,
    getCopyrightInfo,
    getUserBaseData,
    saveUserInfo,
		unReadMsgNum
  } from "@/api/user";
  import { VALID_LOGIN_STATUS } from "@/store/types/action-types";
  import { getMerchantApplyStatus } from "@/api/merchant";
  import userInfoMixin from "@/mixins/userInfo";
  import { UPDATE_USER_INFO } from "@/store/types/muations-types";
  import ApplyDialog from "@/components/ApplyDialog/index.vue";
  import Modification from "@/components/Modification/index.vue";

  import { getSupportData } from "@/api/public";
  import Routine from '@/libs/routine';
  import { SET_LOGIN } from "@/store/types/muations-types";
  import uniFabVue from '@/uni_modules/uni-fab/components/uni-fab/uni-fab.vue';
  const app = getApp();

  export default {
    mixins: [userInfoMixin],
    components: {
      ApplyDialog,
      Modification
    },
    data() {
      return {
        tipIsVisable:false,
        avatar: '/static/images/avatar.png',
        is_official_account_switch: false,
        overdue_time: 0,
        appear: true,
        codeUrl: "",
        isfollow: false,
        site_name: "",
        isyue: 0,
        phone: "",
        isWechat: 0,
        menuList: [],
        question: [],
        loginShow: false,
        is_store_switch: 0,
        applyStatus: null,
        entry_type:0,
        failMessage: "",
        applyVisible: false,
        clickedLink: "",
        hasCopyright: false,
        copyright: "",
        canUseGetUserProfile: false,
        code: '',
        userid: 0,
        teacherInfo: null,
        TOUTIAO_STATUS:false,
        imId:'',
				unReadMsgNum: 0,
      };
    },
    computed: {
      url() {
        return this.isWechat ? "/pages/index/login" : "/pages/login/phone_check";
      },
    },
    
    onShow() {
      this.getUserBaseData();
      this.getQuestion();
      this.getMenu();
      this.get_copyright();
			this.getUnReadMsgNum();
      if (uni.getUserProfile) {
        this.canUseGetUserProfile = true
      }
      /* #ifdef MP-TOUTIAO */
      this.TOUTIAO_STATUS = true;
      /* #endif */
    },
    watch: {
      isLogin() {
        this.getMenu();
				this.getUserBaseData();
				this.getUnReadMsgNum();
      }
    },
    methods: {
			async getUnReadMsgNum() {
			  try {
			    const { data } = await unReadMsgNum({});
					this.unReadMsgNum = data.unReadMsgNum;
			  } catch (err) {
					console.log(err);
				}
			},
      async childClick(e) {
        console.log(e)
          const result = await saveUserInfo({
            nickname:e.username,
            avatar:e.currentAvatar,
          });
          this.tipIsVisable = false;
          this.$store.dispatch("app/" + VALID_LOGIN_STATUS);
        },
      async getUserBaseData() {
        try {
          const { data } = await getUserBaseData();
          const {
            userInfo,
            site_name,
            store_switch: is_store_switch,
            isyue,
            phone,
            isWechat,
            is_official_account_switch,
            overdue_time,
            d_im
          } = data;
          Object.assign(this, {
            site_name,
            is_store_switch,
            isyue,
            phone,
            isWechat,
            is_official_account_switch,
            overdue_time,
            imId:d_im
          });
          if (this.isLogin && userInfo) {
            this.$store.commit("app/" + UPDATE_USER_INFO, userInfo);
          }
        } catch (error) { }
      },
      async getMenu() {
        try {
          const { data } = await getMenus();
          this.menuList = data.menuList;
          this.teacherInfo = data.teacherInfo
        } catch (err) { }
      },
      skip: function () {
        this.isfollow = false;
        this.appear = true;
        setTimeout(function () {
          window.location.reload();
        }, 800);
      },
      logComplete: function (data) {
        var that = this;
        that.loginShow = false;
      },
      /**
       * 获取个人用户信息
       */
      getUserInfo: function () {
        let that = this;
        getUserInfo().then(res => {
          uni.hideLoading();
          that.userInfo = res.data;
          that.$store.commit('app/UPDATE_USERINFO', res.data);
          that.$util.showMsg('登录成功');
        });
      },
      goProfilePage() {
        this.$util.checkLogin(() => {
          uni.navigateTo({
            url: "/pages/my/user_info",
          });
        }, this.showLoginPage);
      },
      showLoginPage() {
        let that=this
        /* #ifdef MP-TOUTIAO */
        uni.getUserProfile({
          success:function(res){
            that.$util.getDYUserProfile(this,res)
          }
        })
        /* #endif */
        /* #ifndef MP-TOUTIAO */
        this.$util.jumpLogin(this)
        /* #endif */
       
      },
      
      goUrl(item, type) {
		  console.log(type)
        if (this.isLogin) {
          if (type === 1) {
            uni.navigateTo({ url: item });
          } else if (item.type === 12) {
            uni.navigateTo({
              url: "/pages/customer/dashboard"
            });
          } else if (type === 2) {
            // 讲师申请
            console.log(item.link)
            if (item.link.indexOf("entrytype/index") !== -1) {
              this.is_apply(item.link);
              return false;
            }
            // 讲师中心
            if (item.link.indexOf("merchant/teacher_detail") !== -1) {
              this.is_teacher(item.link);
              return false;
            }
            // 咨询客服
            if (item.link.indexOf("service/service_list") !== -1) {
              this.$util.goSupport();
              return false;
            }
            uni.navigateTo({ url: item.link });
          }
        } else {
          this.$util.jumpLogin(this)
        }
      },
      memberUrl() {
        this.$util.checkLogin(
          () => {
            uni.navigateTo({
              url: "/pages/special/member_recharge",
            });
          },
          () => {
            this.$util.showMsg("请登录后再进行访问!");
          }
        );
      },
			toNoticeList() {
				this.$util.checkLogin(
				  () => {
				    uni.navigateTo({
				      url: "/pages/my/noticeList",
				    });
				  },
				  () => {
				    this.$util.showMsg("请登录后再进行访问!");
				  }
				);
			},
      //所有插件回调处理事件
      changeVal: function (opt) {
        if (typeof opt != "object") opt = {};
        var action = opt.action || "";
        var value = opt.value || "";
        this[action] && this[action](value);
      },
      enter: function () {
        this.appear = false;
      },
      change: function (title) {
        this.appear = title;
      },
      // 练习考试模块
      async getQuestion() {
        try {
          const { data } = await getQuestionModule();
          this.question = data;
        } catch (err) { }
      },
      //讲师状态
      is_teacher(link) {
        switch (this.teacherInfo.status) {
          case 0:
            this.$util.showMsg("讲师已锁定")
            break;
          case 1:
            uni.navigateTo({
              url:this.teacherInfo.the_type_status == 0  ?  `${link}?id=${this.teacherInfo.lecturer_id}` : `/pages/merchant/institution_detail?id=${this.teacherInfo.lecturer_id}`,
            });
            break;
        }
      },
      // 申请状态
      is_apply(link) {
        getMerchantApplyStatus().then(({ data }) => {
          if (data) {
            this.applyStatus = data.status;
          }
          if (!data || data.status === null || data.status === 2 || data.status == undefined) {
            uni.navigateTo({
              url: link,
            });
          } else {
            this.applyVisible = true;
            this.entry_type =  data.entry_type
            console.log(this.entry_type)
            if (data.status === -1) {
              this.failMessage = data.fail_message;
            }
          }
        });
      },
      goApply() {
        uni.navigateTo({
          url: this.clickedLink,
        });
      },
      // 版权信息
      async get_copyright() {
        try {
          const { data } = await getCopyrightInfo();
          this.hasCopyright = true;
          this.copyright = data;
        } catch (err) {
          this.hasCopyright = true;
        }
      },
    },
  };
</script>

<style>
  page {
    /* background-image: linear-gradient(#ffffff, #f5f5f5); */
    background: #F7F8F9;
  }
</style>

<style lang="scss" scoped>
  .copyright {
    margin: 20rpx;
    overflow: hidden;
    word-break: keep-all;
    text-align: center;
    font-size: 28rpx;
    color: #bbbbbb;
  }

  a[href^="tel"] {
    color: #2c8eff;
  }

  /* 个人中心 */
	.user-page {
		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 522rpx;
			z-index: 0;
		}
	}
  .user-page .user-section {
		position: relative;
    display: flex;
    align-items: center;
    padding: calc(80rpx + var(--safe-top)) 30rpx 36rpx 40rpx;
     /* #ifdef MP-WEIXIN */
     padding: calc(110rpx + var(--safe-top)) 30rpx 36rpx 40rpx;
    /* #endif */
  }
	.user-page .notice {
		position: absolute;
		right: 45rpx;
		top: 60rpx;
		/* #ifdef MP-WEIXIN */
     top: calc(90rpx + var(--safe-top));
    /* #endif */
		image {
			width: 44rpx;
			height: 44rpx;
		}
		.notice-num {
			position: absolute;
			width: 22rpx;
			height: 22rpx;
			top: -3rpx;
			right: -1rpx;
			color: #fff;
			font-size: 18rpx;
			font-weight: bold;
			background: #FE4944;
			border-radius: 50%;
			line-height: 22rpx;
			text-align: center;
		}
	}

  .user-page .user-section .img {
    width: 120rpx;
    height: 120rpx;
    border: 4rpx solid #ebebeb;
    border-radius: 50%;

    object-fit: cover;
  }

  .user-page .user-section .text-wrap {
    flex: 1;
    min-width: 0;
    margin-right: 20rpx;
    margin-left: 20rpx;
  }

  .user-page .user-section .name {
    font-size: 36rpx;
    line-height: 50rpx;
    color: #282828;
  }

  .user-page .user-section .info {
    display: inline-block;
    height: 50rpx;
    padding-right: 14rpx;
    padding-left: 14rpx;
    border-radius: 25rpx;
    margin-top: 15rpx;
    line-height: 50rpx;
		color: #666666;
		font-size: 24rpx;
		&.info-vip {
			background-color: rgba(247, 247, 247, 0.5);
			color: #56AEF9;
			>image {
				width: 48rpx;
				height: 39rpx;
				margin-right: 6rpx;
			}
		}
  }

  .user-page .user-section .icon {
    width: 23rpx;
    height: 16rpx;
    vertical-align: middle;
  }

  .user-page .user-section .time {
    margin-left: 6rpx;
    vertical-align: middle;
    font-size: 20rpx;
    color: #9f620e;
  }

  .user-page .user-section .iconxiangyou {
    font-size: 28rpx;
    color: #999999;
  }

  .user-page .member-section {

    width: 686rpx;
    height: 124rpx;
    background: linear-gradient(270deg, #151312 0%, #1F2121 100%);
    border-radius: 24rpx 24rpx 0 0;
    display: flex;
    align-items: center;
    padding: 0 28rpx 0 30rpx;
    margin: 20rpx 30rpx 0;
    margin-top: -20rpx;
		height: 112rpx;
		position: relative;
		z-index: 10;
  }
	
	.user-page .member-section>view {
		position: relative;
		>text {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 5rpx;
			font-size: 22rpx;
			line-height: 10rpx;
			overflow: hidden;
			color: #874f02;
		}
	}


  .user-page .member-section image {
    display: block;
    width: 48rpx;
    height: 39rpx;
    pointer-events: none;
    -webkit-touch-callout: none;
  }

  .user-page .member-section view:nth-child(2) {
    flex: 1;
    margin-left: 30rpx;
    font-weight: bold;
    font-size: 30rpx;
    color: #e3e5d3;
		background: linear-gradient(0deg, #f3cfa3 20%, #fae7cf 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		
  }

  .user-page .member-section button {
    
    width: 160rpx;
    height: 60rpx;
    // padding-right: 32rpx;
    // padding-left: 32rpx;
    border-radius: 30rpx;
    background: linear-gradient(90deg, #F3cfa3, #fae7cf);
    font-family: inherit;
    font-weight: 400;
    font-size: 24rpx;
    color: #212f45;
  }
  .member_text{
		font-weight: 600;
		font-size: 32rpx;
		color: #F5D294;
	}
	.member_title{
		
		font-size: 24rpx;
		font-weight: 400;
		color: #F5D294;
	}
	.func-box {
		background: #f6f6f6;
		padding-top: 40rpx;
		border-radius: 46rpx 46rpx 0 0;
		position: relative;
		z-index: 10;
	}
  .user-page .tool-section {
    display: flex;
    border-radius: 16rpx;
    // margin: 20rpx;
    background-color: #ffffff;
  }

  .user-page .tool-section view {
    flex: 1;
    padding-top: 33rpx;
    padding-bottom: 30rpx;
    font-size: 24rpx;
    text-align: center;
    color: #282828;
  }

  .user-page .tool-section image {
    display: block;
    height: 78rpx;
    margin: 0 auto;
    pointer-events: none;
    -webkit-touch-callout: none;
  }
  .user-page .question{
    width: 686rpx;
    margin: auto;
  }
  .user-page .question-section {
    display: flex;
    margin-top: 24rpx;
   
  }

  .user-page .question-section .question-item {
    // min-width: 0;
    width: 332rpx;
    height: 147rpx;
		position: relative;
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: bold;

  }

  .user-page .question-section .question-item~.question-item {
    margin-left: 22rpx;
  }

  .user-page .question-section .question-item:first-child {
    border-radius: 24rpx;
		color: #364f97;
  }

  .user-page .question-section .question-item:last-child {
    border-radius: 24rpx;
		color: #9c573c;
  }

  .user-page .question-section image {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    pointer-events: none;
    -webkit-touch-callout: none;
  }

  .user-page .question-section .question-item>view {
    position: absolute;
		top: 50%;
		left: 33rpx;
		transform: translateY(-50%);
  }
	.user-page .question-section .question-item>view>view:last-child {
		font-size: 24rpx;
		line-height: 24rpx;
		margin-top: 18rpx;
		opacity: 0.55;
		font-weight: normal;
	}

  .user-page .serve-section {
		width: 690rpx;
    margin: 0 auto;
  }

  .user-page .serve-section .section-bd {
    padding-left: 30rpx;
    font-weight: bold;
    font-size: 30rpx;
    color: #282828;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-top: 20rpx;
  }

  .user-page .serve-section .section-link {
		display: flex;
		align-items: center;
    font-size: 24rpx;
    color: #333;
		height: 103rpx;
		border-bottom: 1px solid #eeeff7;
		padding-right: 30rpx;
  }
	.user-page .serve-section .section-link .menu-more {
		width: 14rpx;
		height: 14rpx;
		border-width: 2px 2px 0 0;
		border-color: #ccc;
		border-style: solid;
		-webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		vertical-align: top;
		margin-left: auto;
	}
.section-link::after{
  border:none;
}
  .user-page .serve-section image {
    display: block;
    width: 44rpx;
    height: 44rpx;
    margin-right: 22rpx;
  }

  .user-page .support {
    display: block;
    width: calc(100% / 3);
    margin: 30rpx auto;
  }

  .user-page .follow {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 56;
    width: 100%;

    transform: translate(-50%, -50%);
    text-align: center;
  }

  .user-page .follow view {
    font-weight: 600;
    font-size: 50rpx;
    color: #ffffff;
  }

  .user-page .follow image {
    display: block;
    width: 500rpx;
    height: 500rpx;
    margin: 100rpx auto;
  }

  .user-page .follow button {
    width: 150rpx;
    height: 60rpx;
    border-radius: 30rpx;
    background-color: #509efb;
    font-family: inherit;
    font-weight: normal;
    font-size: 28rpx;
    color: #ffffff;
  }
  .header{
      /* #ifdef MP-WEIXIN || APP-PLUS */
        height: 376rpx;

        /* #endif */
      /* #ifdef H5  */
       height: 286rpx;

        /* #endif */
				position: relative;
				z-index: 10;

    // background: linear-gradient(180deg, #86ccf0 0%, #F7F8F9 100%);
  }
  .tool-section{
    width: 686rpx;
    height: 188rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    padding-top: 20rpx;
    margin: auto;
span{
  color:#7A808A;
}
  }
</style>