zc_saas_h5/pages/wd/index.vue

<template>
  <view>
    <!-- <image mode="widthFix" :src="isLogin ? '/static/wd_bg_login.jpg' : '/static/wd_bg.jpg'" :class="isLogin ? 'login_full_img' : 'full_img'"></image> -->
    <u-navbar
      :is-back="false"
      title="我的"
      :border-bottom="false"
      title-color="#333333"
      back-icon-color="#ffffff"
    >
      <view class="slot-wrap">
        <image
          :src="$method.splitImgHost(config.h5Logo)"
          style="width: 178rpx; height: 31rpx; margin-left: 30rpx"
        ></image>
      </view>
    </u-navbar>
    <view v-if="isLogin" class="imgs_bg">
      <view class="infos">
        <image
          :src="userInfo ? $method.splitImgHost(userInfo.avatar, true) : ''"
          class="avatar"
        ></image>
        <!-- <view style="margin-left: 20rpx;z-index: 999;"> -->
        <view style="color: #ffffff; font-size: 32rpx">{{
          userInfo.nickname
        }}</view>
        <view style="color: #ffffff; font-size: 20rpx; margin-top: 17rpx">{{
          userInfo.telphone
        }}</view>
        <!-- </view> -->
      </view>
      <image src="/static/me/me_bgpic.jpg" class="bg_pic"></image>
    </view>
    <view class="login_wrap" v-if="!isLogin">
      <view class="login_text">您还没有登录哦~</view>
      <view class="loginBtn" @click="jumpLogin">立即登录/注册</view>
    </view>
    <view v-if="isLogin" class="loginBox">
      <view class="contents">
        <!-- <view style="width: 100%;height: 40px;background-color: #F0F1F5;position: fixed;top: 150px;z-index: 100;"></view>
			<view style="display: flex;height: 160rpx;align-items: center; position: fixed;z-index: 999;top: 110px;" v-if="isLogin">
				<image :src="userInfo ? $method.splitImgHost(userInfo.avatar, true) : ''" class="avatar"></image>
				<view style="margin-left: 20rpx;z-index: 999;">
					<view style="color: #FFFFFF;font-size: 36rpx;padding: 10rpx;">{{ userInfo.nickname }}</view>
					<view style="color: #333333;font-size: 36rpx;padding: 10rpx;">{{ userInfo.telphone }}</view>
				</view>
				<view style="background-color: #F0F1F5;height:80rpx;"></view>
			</view>
			<view style="top: 195px;position: relative;padding-bottom: 30rpx;"> -->
        <!-- <navigator  hover-class="none" url="/pages2/plan/index" class="menu_box">
					<view class="box_left">
						<image src="/static/icon/my_icon1.png" class="my_icon"></image>
						<view>学习计划</view>
					</view>
					<view class="box_right">
						今天有
						<text>{{ userNums.planSum }}</text>
						个学习任务
					</view>
				</navigator> -->
        <!-- <view class="two_menu">
					<navigator  hover-class="none" url="/pages2/wd/class" class="small_menu">
						<image src="/static/icon/my_icon3.png" class="my_icon"></image>
						<view>我的网课</view>
					</navigator>
					<view @click="goBank()" class="small_menu">
						<image src="/static/icon/my_icon4.png" class="my_icon"></image>
						<view>我的题库通</view>
					</view>
				</view> -->
        <!-- <navigator  hover-class="none" url="/pages5/liveDetail/list" class="menu_box" >
					<view class="box_left">
						<image src="/static/icon/my_icon12.png" class="my_icon"></image>
						<view>我的直播课</view>
					</view>
					<view class="box_right">
						
						<text>{{ total2 }}</text>
						个课程直播中
					</view>
				</navigator> -->
        <navigator
          hover-class="none"
          url="/pages2/learn/my_learn"
          class="menu_box"
        >
          <view class="box_left">
            <image src="/static/icon/my_icon2.png" class="my_icon"></image>
            <view>我的学时</view>
          </view>
          <view class="box_right">
            累计
            <text>{{ userNums.periodSum }}</text>
            学时未通过
          </view>
        </navigator>
        <navigator hover-class="none" url="/pages5/exam/index" class="menu_box">
          <view class="box_left">
            <image src="/static/icon/my_icon11.png" class="my_icon"></image>
            <view>我的模考</view>
          </view>
          <view class="box_right">
            <text>{{ total1 }}</text>
            个模考预约
          </view>
        </navigator>
        <!--    /pages2/exam/index-->
        <navigator
          hover-class="none"
          url="/pages2/exam/exam_appointment"
          class="menu_box"
        >
          <view class="box_left">
            <image src="/static/icon/my_icon10.png" class="my_icon"></image>
            <view>我的考试</view>
          </view>
          <view class="box_right">
            <text>{{ userNums.subscribeSum }}</text>
            考试预约
          </view>
        </navigator>
        <navigator
          hover-class="none"
          v-if="!hideBuyState"
          url="/pages2/order/index"
          class="menu_box"
        >
          <view class="box_left">
            <image src="/static/icon/my_icon7.png" class="my_icon"></image>
            <view>我的订单</view>
          </view>
          <view class="box_right">
            <text>{{ userNums.orderSum }}</text>
            笔待支付
          </view>
        </navigator>
        <navigator hover-class="none" url="/pages2/msg/index" class="menu_box">
          <view class="box_left">
            <image src="/static/icon/my_icon8.png" class="my_icon"></image>
            <view>我的消息</view>
          </view>
          <view class="box_right">
            <text>{{ userNums.informSum }}</text>
            条未读
          </view>
        </navigator>
        <navigator hover-class="none" url="/pages2/wd/info" class="menu_box">
          <view class="box_left">
            <image src="/static/icon/my_icon9.png" class="my_icon"></image>
            <view>我的资料</view>
          </view>
          <view class="box_right">
            <u-icon name="arrow-right" color="#999" size="24"></u-icon>
          </view>
        </navigator>
      </view>
      <view class="logout" @click="logout">退出</view>
    </view>

    <!-- <u-navbar :is-back="false" title="我的" :border-bottom="false" background="{ background: '#ffffff',opacity:0.4; }" title-color="#ffffff" back-icon-color="#ffffff">
			<view class="slot-wrap"><image src="/static/logo.png" style="width: 178rpx;height: 31rpx;margin-left: 30rpx;"></image></view>
		</u-navbar> -->

    <!-- <tab-bar v-model="current" :list="tabbarlist" :mid-button="true" :mid-button-size="50" class="tab_items"></tab-bar> -->
  </view>
</template>

<script>
// import { websocket } from '@/common/socket.js';
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      list: [23, 24, 25, 26, 27, 28, 29],
      content: "此功能暂未开放",
      show: false,
      isLogin: false,
      userNums: {},
      total1: 0,
      total2: 0,
      current: 4,
    };
  },
  onLoad(option) {
    // console.log(option,987)
  },
  onShow() {
    this.isLogin = this.$method.isLogin();
    if (this.isLogin) {
      this.$store.state.allowLoading = false;
      this.getNums();
      this.getCount();
      this.goodsLivingSectionList();
      this.$store.state.allowLoading = true;
      !this.userInfo && this.$api.refreshUserInfo();
    }
    // this.$store.dispatch('changeTabsNum')
  },
  methods: {
    getCount() {
      this.$api
        .mockSubscribeListSubscribe({
          mockStatus: 0,
          pageNum: 1,
          pageSize: 1,
        })
        .then((res) => {
          this.total1 = res.data.total;
        });
    },
    goodsLivingSectionList() {
      this.$api.goodsLivingSectionList().then((res) => {
        this.total2 = res.data.data.length;
      });
    },
    goBank() {
      this.$api
        .lockLockStatus({
          action: "bank",
        })
        .then((res) => {
          if (res.data.code == 200) {
            //有其他端在操作，不能学习
            uni.showToast({
              icon: "none",
              title: res.data.msg,
              duration: 3000,
            });
          } else if (res.data.code == 500) {
            //可以学习

            uni.navigateTo({
              url: "/pages2/wd/question_bank",
            });
          }
        });
    },
    getNums() {
      this.$api.getinfoAttached().then((res) => {
        if (res.data.code === 200) {
          this.userNums = res.data.data;
          const nums =
            res.data.data.informSum +
            res.data.data.orderSum +
            res.data.data.periodSum +
            res.data.data.planSum +
            res.data.data.subscribeSum;
          this.$store.commit("tabNum", nums);
        }
      });
    },
    logout() {
      // websocket.stop()
      this.$method.exit();
      this.isLogin = this.$method.isLogin();
    },
    jumpLogin() {
      this.$navTo.togo("/pages4/login/login");
    },
  },
  computed: { ...mapGetters(["userInfo", "hideBuyState", "config"]) },
};
</script>
<style>
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
page {
  background-color: #f0f1f5;
}
</style>
<style scoped lang="scss">
.login_wrap {
  text-align: center;
  margin-top: 100rpx;

  .login_text {
    color: #007aff;
    font-size: 36rpx;
    font-weight: bold;
  }

  .loginBtn {
    width: 526rpx;
    height: 80rpx;
    background: linear-gradient(90deg, #015eea, #00c0fa);
    box-shadow: 0rpx 10rpx 16rpx 4rpx rgba(1, 99, 235, 0.04);
    border-radius: 40rpx;
    color: #ffffff;
    line-height: 80rpx;
    margin: 0 auto;
    margin-top: 50rpx;
  }
}
.imgs_bg {
  width: 100%;
  height: 429rpx;
  position: fixed;
  z-index: 999;
  .infos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .bg_pic {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
  }
}
.avatar {
  height: 160rpx;
  width: 160rpx;
  border-radius: 50%;
  margin: 110rpx 0rpx 37rpx 0rpx;
}
.small_menu {
  width: 45%;
  height: 104rpx;
  background: #ffffff;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  margin-top: 30rpx;
}
.two_menu {
  font-size: 32rpx;
  color: #666;
  display: flex;
  justify-content: space-between;
}
.my_icon {
  width: 56rpx;
  height: 56rpx;
  margin-right: 20rpx;
}
.menu_box {
  height: 130rpx;
  background: #ffffff;
  // border-radius: 24rpx;
  // margin-top: 30rpx;
  display: flex;
  align-items: center;
  // padding: 0 20rpx;
  justify-content: space-between;
  color: #666666;
  font-size: 30rpx;
  font-weight: 500;
  border-bottom: 1rpx solid #eeeeee;
  .box_left {
    display: flex;
    align-items: center;
  }

  .box_right {
    font-size: 32rpx;

    text {
      color: #007aff;
      margin: 0 5rpx;
    }
  }
}
.loginBox {
  position: relative;
  padding: 0 30rpx 50rpx 30rpx;
  top: 430rpx;
  width: 100%;
  height: 100%;
  margin-top: 30rpx;
  .contents {
    width: 100%;
    height: 100%;
    border-radius: 24rpx;
    background-color: #ffffff;
    padding: 0rpx 30rpx 0rpx 20rpx;
  }
}
.login_full_img {
  display: block;
  width: 100%;
  height: 150px !important;
  z-index: 300;
  top: 0;
  position: fixed;
}
.full_img {
  display: block;
  width: 100%;
  z-index: -999;
  top: 0;
}

.logout {
  color: #999999;
  text-align: center;
  font-size: 32rpx;
  margin-top: 50rpx;
}
</style>