saas_miniprogram/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>

    <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
        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>
        <navigator hover-class="none" url="/pages2/exam/index" 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>
        </navigator>
        <view class="logout" @click="logout">退出</view>
      </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>
  </view>
</template>

<script>
// import { websocket } from '@/common/socket.js';
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      list: [23, 24, 25, 26, 27, 28, 29],
      content: "此功能暂未开放",
      show: false,
      isLogin: false,
      userNums: {},
      total1: 0,
      total2: 0,
    };
  },
  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.$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"]) },
};
</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: 60rpx;

  .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;
  }
}
.avatar {
  height: 70rpx;
  width: 70rpx;
  border-radius: 50%;
}
.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: 104rpx;
  background: #ffffff;
  border-radius: 24rpx;
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  justify-content: space-between;
  color: #666666;
  font-size: 32rpx;

  .box_left {
    display: flex;
    align-items: center;
  }

  .box_right {
    font-size: 32rpx;

    text {
      color: #007aff;
      margin: 0 5rpx;
    }
  }
}
.loginBox {
  position: relative;

  padding: 0 30rpx;
}
.avatar {
  width: 80px;
  height: 80px;
}
.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>