saas_miniprogram/pages/course/index.vue

<template>
  <view class="study-center">
    <u-navbar
      :is-back="false"
      title="学习中心"
      class="navbar"
      :border-bottom="false"
      title-color="#333333"
      back-icon-color="#ffffff"
    >
      <view class="slot-wrap">
        <image
          src="/static/logo2.png"
          style="width: 178rpx; height: 31rpx; margin-left: 30rpx"
        ></image>
      </view>
    </u-navbar>
		
		<view class="no-course" v-if="false">
			<image class="img" src="/static/no-course.png" mode="widthFix"></image>
			<view class="title">暂无学习内容</view>
			<view class="title">请先购买课程/题库</view>
			<view class="btn" @click="goIndex">马上选课/选题</view>
		</view>
		
		<view class="note-list">
			<picker class='picker' :range="list" range-key="name" @change="change">
				<view class="text">{{businessName || '请选择业务层次'}}</view>
				
			</picker>
			<u-icon name="arrow-down"></u-icon>
		</view>
		
		
		<view class="course-list">
			<navigator
			  hover-class="none"
			  url="/pages5/liveDetail/list"
			  class="menu_box"
			>
			  <view class="box_left">
			    <image src="/static/icon/my_icon3.png" class="my_icon">
					</image>
					<view class="point" v-if="total2 > 0"></view>
			    <view>我的网课</view>
			  </view>
			  <view class="box_right">
			    <text>{{ total2 }}</text>
			    个课程直播中
			  </view>
			</navigator>
			<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 class="point" v-if="total2 > 0"></view>
			    <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 class="point" v-if="userNums.periodSum > 0"></view>
			    <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 class="point" v-if="total1 > 0"></view>
			    <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 class="point" v-if="userNums.subscribeSum > 0"></view>
			    <view>我的考试</view>
			  </view>
			  <view class="box_right">
			    <text>{{ userNums.subscribeSum }}</text>
			    考试预约
			  </view>
			</navigator>
		</view>
		
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      list:[{name:'继续教育-建造师-二级',id:1},{name:'继续教育-建造师-一级',id:2}],
			businessId:'',
			businessName:'',
			userNums: {},
			total1: 0,
			total2: 0,
    };
  },
  onPullDownRefresh() {
    
  },
  onLoad(option) {
    
  },
	onShow() {
		if (this.$method.isLogin()) {
			this.orderUserAllBusinessList();
		}
	},
  methods: {
		orderUserAllBusinessList() {
			this.$api.orderUserAllBusinessList().then(res => {
				console.log(res)
			})
		},
		change(e) {
			this.businessId = this.list[e.detail.value].id
			this.businessName = this.list[e.detail.value].name
			
			this.isLogin = this.$method.isLogin();
			if (this.isLogin) {
			  this.$store.state.allowLoading = false;
			  this.getCount();
			  this.goodsLivingSectionList();
				this.getNums()
			  this.$store.state.allowLoading = true;
			}
		},
		getCount() {
		  this.$api
		    .mockSubscribeListSubscribe({
		      mockStatus: 0,
		      pageNum: 1,
		      pageSize: 1,
		    })
		    .then((res) => {
		      this.total1 = res.data.total;
		    });
		},
		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);
		    }
		  });
		},
		goodsLivingSectionList() {
		  this.$api.goodsLivingSectionList().then((res) => {
		    this.total2 = res.data.data.length;
		  });
		},
		
    goIndex() {
			uni.switchTab({
				url:'../index/index'
			})
		}
  },
  onReachBottom() {
    
  },
  computed: { ...mapGetters(["userInfo"]) },
};
</script>
<style >
page {
  background-color: #EAEEF1;
}
</style>
<style scoped lang="scss">
.study-center {
	
	.navbar {
		
		/deep/ .u-navbar-inner {
			margin-right: 0 !important;
		}
		
		.slot-wrap {
			width: 100%;
		}
	}
	
	.no-course {
		margin: 80rpx auto 0;
		text-align: center;
		
		.img {
			width:360rpx;
		}
		
		.title {
			margin-top:10rpx;
			font-size: 32rpx;
			text-align: center;
			color: #999999;
		}
		
		.btn {
			margin:40rpx auto 0;
			width: 280rpx;
			text-align: center;
			line-height: 64rpx;
			color:#fff;
			font-size: 30rpx;
			height: 64rpx;
			background: #007AFF;
			border-radius: 32rpx;
		}
	}
	
	
	.note-list {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding:0 32rpx;
		
		.picker {
			line-height: 80rpx;
			height: 80rpx;
			flex:1;
		}
		
	}
	
	.course-list {
		padding:0 32rpx;
		
		.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;
				position:relative;
				
				.point {
					width:16rpx;
					height:16rpx;
					border-radius:50%;
					background: red;
					position:absolute;
					left:50rpx;
					top:0;
				}
		  }
		
		  .box_right {
		    font-size: 32rpx;
		
		    text {
		      color: #007aff;
		      margin: 0 5rpx;
		    }
		  }
		}
		
		
		.my_icon {
		  width: 56rpx;
		  height: 56rpx;
		  margin-right: 20rpx;
		}
	}
}

</style>