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="list.length == 0">
			<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>
		
		<template v-else>
			<view class="note-list">
				<picker class='picker' :range="list" range-key="aliasName" @change="change">
					<view class="text">{{businessName || '请选择业务层次'}}</view>
					
				</picker>
				<u-icon name="arrow-down"></u-icon>
			</view>
			
			<view class="course-list">
				<template v-if="getSelectType() == 1">
					<navigator
					  hover-class="none"
					  :url="'/pages2/wd/class?projectId='+projectId+'&businessId='+businessId+'&educationId='+educationId+''"
					  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="'/pages2/learn/my_learn?projectId='+projectId+'&businessId='+businessId+'&educationId='+educationId+''"
					  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/liveDetail/list?projectId='+projectId+'&businessId='+businessId+'&educationId='+educationId+''"
					  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>
					
					<view
					  hover-class="none"
						@click="goBank()"
					  class="menu_box"
					>
					  <view class="box_left">
					    <image src="/static/icon/my_icon4.png" class="my_icon">
							</image>
					    <view>我的题库</view>
					  </view>
					  <view class="box_right">
					    <text>{{ total2 }}</text>
					    个课程直播中
					  </view>
					</view>
				</template>
				
				<template v-if="getSelectType() == 2">
					<navigator
					  hover-class="none"
					  :url="'/pages2/wd/class?projectId='+projectId+'&businessId='+businessId+'&educationId='+educationId+''"
					  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?projectId='+projectId+'&businessId='+businessId+'&educationId='+educationId+''"
					  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>
					
					<view
					  hover-class="none"
						@click="goBank()"
					  class="menu_box"
					>
					  <view class="box_left">
					    <image src="/static/icon/my_icon4.png" class="my_icon">
							</image>
					    <view>我的题库</view>
					  </view>
					  <view class="box_right">
					    <text>{{ total2 }}</text>
					    个课程直播中
					  </view>
					</view>
					
					<navigator hover-class="none" :url="'/pages5/exam/index?projectId='+projectId+'&businessId='+businessId+'&educationId='+educationId+''" 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>
				</template>
				
				<template v-if="getSelectType() == 3">
					<navigator
					  hover-class="none"
					  :url="'/pages2/wd/class?projectId='+projectId+'&businessId='+businessId+'&educationId='+educationId+''"
					  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="'/pages2/learn/my_learn?projectId='+projectId+'&businessId='+businessId+'&educationId='+educationId+''"
					  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="'/pages2/exam/index?projectId='+projectId+'&businessId='+businessId+'&educationId='+educationId+''" 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>
					
					<navigator
					  hover-class="none"
					  :url="'/pages5/liveDetail/list?projectId='+projectId+'&businessId='+businessId+'&educationId='+educationId+''"
					  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>
					
					<view
					  hover-class="none"
						@click="goBank()"
					  class="menu_box"
					>
					  <view class="box_left">
					    <image src="/static/icon/my_icon4.png" class="my_icon">
							</image>
					    <view>我的题库</view>
					  </view>
					  <view class="box_right">
					    <text>{{ total2 }}</text>
					    个课程直播中
					  </view>
					</view>
				</template>
				
				<template v-if="getSelectType() == null">
					<navigator
					  hover-class="none"
					  :url="'/pages2/wd/class?projectId='+projectId+'&businessId='+businessId+'&educationId='+educationId+''"
					  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?projectId='+projectId+'&businessId='+businessId+'&educationId='+educationId+''"
					  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>
					
					<view
					  hover-class="none"
						@click="goBank()"
					  class="menu_box"
					>
					  <view class="box_left">
					    <image src="/static/icon/my_icon4.png" class="my_icon">
							</image>
					    <view>我的题库</view>
					  </view>
					  <view class="box_right">
					    <text>{{ total2 }}</text>
					    个课程直播中
					  </view>
					</view>
				</template>
			</view>
		</template>
		
		
			
			<!-- <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_icon4.png" class="my_icon">
					</image>
			    <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>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  data() {
    return {
      list:[],
			businessId:'',
			educationId:'',
			projectId:'',
			businessName:'',
			userNums: {},
			total1: 0,
			total2: 0,
			selectItem:null,
    };
  },
  onPullDownRefresh() {
    
  },
  onLoad(option) {
    
  },
	onShow() {
		if (this.$method.isLogin()) {
			this.orderUserAllBusinessList();
		}
	},
  methods: {
		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?projectId='+this.projectId+'&businessId='+this.businessId+'&educationId='+this.educationId+'',
		        });
		      }
		    });
		},
		orderUserAllBusinessList() {
			this.$api.orderUserAllBusinessList().then(res => {
				this.list = res.data.rows;
			})
		},
		getSelectType() {
			if(!this.selectItem) {
				return null
			}
			
			if(this.selectItem.educationName == '继续教育') {
				if(this.selectItem.businessName == '一级') {
					if(this.selectItem.projectName == '建造师') {
						return 1;
					} else {
						return null;
					}
				} else if (this.selectItem.businessName == '二级') {
					if(this.selectItem.projectName == '建造师' || this.selectItem.projectName == '造价工程师') {
						return 1;
					} else {
						return null;
					}
				} else if (this.selectItem.businessName == '职称继续教育' && this.selectItem.projectName == '专业技术人员') {
					return 1
				} else {
					return null;
				}
			}
			
			if(this.selectItem.educationName == '考前培训') {
				if(this.selectItem.businessName == '二级' || this.selectItem.businessName == '一级') {
					if(this.selectItem.projectName == '建造师') {
						return 2;
					} else {
						return null;
					}
				} else if(this.selectItem.businessName == '七大员' && this.selectItem.projectName == '施工现场专业人员') {
					return 3;
				} else{
					return null;
				}
				
			}
			
			return null
		},
		change(e) {
			this.selectItem = this.list[e.detail.value]
			this.businessId = this.list[e.detail.value].businessId
			this.projectId = this.list[e.detail.value].projectId
			this.educationId = this.list[e.detail.value].educationId
			this.businessName = this.list[e.detail.value].educationName +'-'+ this.list[e.detail.value].aliasName
			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>