saas_miniprogram/pages/index/index.vue

<template>
	<view class="index">
		<u-navbar class="navbar" :is-back="false" :border-bottom="false"  title-color="#333333" back-icon-color="#ffffff">
			<view class="slot-wrap">
				<image @click="openLeft()" src="/static/logo2.png"></image>
			</view>
		</u-navbar>
		<view class="swiper">
			<swiper :indicator-dots="false" indicator-color="#fff" indicator-active-color="#007AFF" :style="{'height':swiperHeight+'rpx'}" @change="swiperChange" :interval="interval" :duration="duration"  :autoplay="autoplay" :circular="true">
				<swiper-item v-for="(swiper,index) in list" :key="index" @click="swiperClick(swiper)">
					<image @load="imageLoad" :src="$method.splitImgHost(swiper.adverUrl, true)" mode="widthFix"></image>
				</swiper-item>
				
				
			</swiper>
			<view class="dots">
				<view class="dot" :class="{'active':index == current}" v-for="(swiper,index) in list" :key="index"></view>
			</view>
		</view>
		<view class="content">
			<view class="notice" v-if="infoNums">
				<view class="notice__content">
					<image src="/static/icon/msg_icon1.png" class="icon"></image>
					<view class="text">
						您有{{infoNums}}条新的通知
					</view>
					<view class="btn" @click="jumpPage">立即查看</view>
				</view>
			</view>
			<view class="my-list">
				<view class="my-list__item my-list__item--course" @click="go('course')">
					<image src="../../static/mycourse.png"></image>
					<text>我的网课</text>
				</view>
				<view class="my-list__item my-list__item--bank" @click="go('bank')">
					<image src="../../static/mybank.png"></image>
					<text>我的题库</text>
				</view>
			</view>
			<u-tabs class="tabs" :current="tabCurrent" @change="tab" :list="menu" :activeStyle="{fontSize:'36rpx'}" :inactiveStyle="{color:'#EAEEF1',fontSize:'30rpx'}" sticky></u-tabs>
			<view class="menuSel" v-if="tabCurrent== 0"> 
				<picker class="picker" @change="cMenu" :value="paramList[0].subjectId" range-key='subjectName' :range="sList">
					<view class="uni-input">{{paramList[0].name}}</view>
				</picker>
				<u-icon name="arrow-down"></u-icon>
			 
			</view>
			<view class="menuSel" v-if="tabCurrent==1">
				<picker class="picker" @change="cMenu1" :value="paramList[1].subjectId" range-key='subjectName' :range="sList">
					<view class="uni-input">{{paramList[1].name}}</view>
				</picker>
				<u-icon name="arrow-down"></u-icon>
			  
			</view>
			<view class="menuSel" v-if="tabCurrent==2">
				<picker class="picker" @change="cMenu2" :value="paramList[2].subjectId" range-key='subjectName' :range="sList">
					<view class="uni-input">{{paramList[2].name}}</view>
				</picker>
				<u-icon name="arrow-down"></u-icon>
			  
			</view>
			<view class="course-list" v-show="tabCurrent==0">
				<navigator  hover-class="none" class="item" v-for="(item,index) in list1" :key="index" :url="'/pages3/course/detail?id='+item.goodsId">
					<view class="img">
						<image :src="$method.splitImgHost(item.coverUrl, true)"></image>
						<view class="time" v-if="item.year">{{item.year?item.year:''}}</view>
					</view>
					<view class="text">
						<view class="title">{{item.goodsName}}</view>
						<view class="desc">
							<view class="left">
								{{item.classHours || '-'}}
								<text>学时</text>
							</view>
							<view class="right">¥ {{toFixed(item.standPrice)}}</view>
						</view>
					</view>
					
				</navigator>
			</view>
			<view class="course-list" v-show="tabCurrent==1">
			 	<navigator  hover-class="none" class="item" v-for="(item,index) in list2" :key="index" :url="'/pages2/bank/detail?id='+item.goodsId">
					<view class="img">
						<image :src="$method.splitImgHost(item.coverUrl, true)"></image>
						<view class="time" v-if="item.year">{{item.year?item.year:''}}</view>
					</view>
					<view class="text">
						<view class="title">{{item.goodsName}}</view>
						<view class="desc">
							<view class="left" v-if="false">
								{{item.classHours || '-'}}
								<text>学时</text>
							</view>
							<view class="right">¥ {{toFixed(item.standPrice)}}</view>
						</view>
					</view>
					
				</navigator> 
			</view>
			<view class="course-list" v-show="tabCurrent==2">
			 	<navigator  hover-class="none" class="item" v-for="(item,index) in list3" :key="index" :url="'/pages2/bank/detail?id='+item.goodsId">
					<view class="img">
						<image :src="$method.splitImgHost(item.coverUrl, true)"></image>
						<view class="time" v-if="item.year">{{item.year?item.year:''}}</view>
					</view>
					<view class="text">
						<view class="title">{{item.goodsName}}</view>
						<view class="desc">
							<view class="left" v-if="false">
								{{item.classHours || '-'}}
								<text>学时</text>
							</view>
							<view class="right">¥ {{toFixed(item.standPrice)}}</view>
						</view>
					</view>
					
				</navigator> 
			</view>
		</view>
		
		<view v-show="show" class="popuBox">
		  <view class="flex-d">
		    <view class="contentZ">
		      <view class="lzs">
		        <view
		          class="tylsz"
		          v-for="(item, index) in eList"
		          :key="index"
		          @click="item.id === 0 ? activeAll(1) : active1(item)"
		          :class="item.id === selObj.eId ? 'activeStys' : ''"
		          >{{ item.educationName }}</view
		        >
		      </view>
		      <view class="rzs">
		        <view
		          class="tylszB"
		          v-for="(item, index) in bList"
		          :key="index"
		          @click="item.id === 0 ? activeAll(2) : active2(item)"
		          :class="item.id === selObj.bId ? 'activeStys2' : ''"
		          >{{ item.projectName }}-{{ item.businessName }}</view
		        >
		      </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
// import { websocket } from '@/common/socket.js';
import { socket_url, version} from '@/common/request.js';
export default {
	components: {},
	data() {
		return {
			infoNums:0,
      show: false,
			list:[],
			tabCurrent:0,
			current:0,
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			swiperHeight:0,
			menu: [
        {
          name: "网课",
        },
        {
          name: "题库通",
        },
        {
          name: "直播课",
        },
      ],
			goodsIndex: 0,
			goodsItem: 0,
			workList: [],
			workTextList: [],
			planGoodsList: [],
			menuIndex: 0,
			menuIndex1: 0,
			paramList: [
			  {
			    pageNum: 1,
			    pageSize: 10,
			    total: 0,
			    showStatus: 0,
			    goodsType: 1,
			    subjectId: 0,
					name:'全部'
			  },
			  {
			    pageNum: 1,
			    pageSize: 10,
			    total: 0,
			    showStatus: 0,
			    goodsType: 2,
			    subjectId: 0,
					name:'全部'
			  },
			  {
			    pageNum: 1,
			    pageSize: 10,
			    total: 0,
			    showStatus: 0,
			    goodsType: 6,
			    subjectId: 0,
					name:'全部'
			  },
			],
			list1: [],
			list2: [],
			list3: [],
			eList: [],
			bList: [],
			sList: [],
			selObj: {
			  eName: "",
			  pName: "",
			  bName: "",
			  eId: 0,
			  bId: 0,
			  pId: 0,
			},
			isLogin:false,
			isOld:false
		};
	},
	onPullDownRefresh() {
	  let that = this;
	  this.initList();
	  setTimeout(function () {
	    uni.stopPullDownRefresh();
	  }, 500);
	},
	onReachBottom() {
	  if (this.tabCurrent == 0) {
	    if (this.list1.length < this.paramList[0].total) {
	      this.paramList[0].pageNum++;
	      this.courseList();
	    }
	  }
	  if (this.tabCurrent == 1) {
	    if (this.list2.length < this.paramList[1].total) {
	      this.paramList[1].pageNum++;
	      this.bankList();
	    }
	  }
		if (this.tabCurrent == 2) {
		  if (this.list3.length < this.paramList[2].total) {
		    this.paramList[2].pageNum++;
		    this.liveList();
		  }
		}
	},
	async onLoad(option) {
		let eduStr = uni.getStorageSync("eduObj");
		console.log(eduStr, 987);
		if (eduStr) {
		  this.selObj = JSON.parse(eduStr);
		  this.subjectList({
		    businessId: this.selObj.bId,
		    projectId: this.selObj.pId,
		    educationId: this.selObj.eId,
		  });
		  this.mergeBusiness();
		} else {
		  this.show = true;
		}
		this.initList();
		this.getAdvertising();
		if(this.$method.isLogin()) {
			try  {
				await this.getUserInfo()
				// websocket.sokcet(socket_url+this.userInfo.userId+'-'+this.$method.getRandomString(6))
				// websocket.sokcet(socket_url+this.userInfo.userAccount)
			}catch(err) {
				
			}
			
		} else {
			if(uni.getStorageSync('needToLogin')) {
				uni.removeStorageSync('needToLogin');
				uni.navigateTo({
					url:'/pages4/login/login'
				})
			}
		}
		
	},
	onShow() {
		uni.removeStorageSync('goPath')
		if (uni.getStorageSync('updateHome')){
			this.init()
			uni.removeStorageSync('updateHome'); //消费首页刷新事件
		}
		
		this.appCommonConfig({
			version
		});
		
		if(this.$method.isLogin()){
			this.$store.state.allowLoading = false;
			this.$api.getinfoAttached().then(res => {
				if(res.data.code ===200){
					this.infoNums = res.data.data.informSum
					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);
				}
			})
			this.$store.state.allowLoading = true;
		}else{
			this.$store.commit('tabNum', 0);
		}
	},
	onShareAppMessage(res) {
		var self = this;
		return {
			title: '中正',
			path: `/pages/index/index?inviteCode=` + userInfo == null ? '' : userInfo.userAccount
		};
	},
	methods: {
		...mapActions(['getUserInfo','appCommonConfig']),
		mergeBusiness() {
		  this.paramList[0].educationTypeId = this.selObj.eId;
		  this.paramList[0].businessId = this.selObj.bId;
		  this.paramList[0].subjectId = 0;
		  this.paramList[0].name = '全部';
		  this.paramList[1].educationTypeId = this.selObj.eId;
		  this.paramList[1].businessId = this.selObj.bId;
		  this.paramList[1].name = '全部';
		  this.paramList[2].educationTypeId = this.selObj.eId;
		  this.paramList[2].businessId = this.selObj.bId;
		  this.paramList[2].name = '全部';
		},
		subjectList(data) {
		  var self = this;
		  this.$api.subjectList(data).then((res) => {
		    if (res.data.code == 200) {
		      self.sList = res.data.rows;
		      let allItem = { id: 0, subjectName: "全部" };
		      self.sList.unshift(allItem);
		    }
		  });
		},
		active2(item) {
		  this.selObj.bId = item.id;
		  this.show = false;
		  this.selObj.pId = item.projectId;
		  this.selObj.bName = item.businessName;
		  this.selObj.pName = item.projectName;
		  uni.setStorageSync("eduObj", JSON.stringify(this.selObj));
		  this.subjectList({
		    businessId: item.id,
		    projectId: item.projectId,
		    educationId: this.selObj.eId,
		  });
		  this.mergeBusiness();
		  //初始化
		  this.initList();
		},
		businessList(data) {
		  var self = this;
		  this.$api.businessList(data).then((res) => {
		    if (res.data.code == 200) {
		      self.bList = res.data.rows;
		      console.log(self.bList, 66);
		    }
		  });
		},
		active1(item) {
		  this.selObj.eId = item.id;
		  this.selObj.eName = item.educationName;
		  this.businessList({ educationId: item.id });
		},
		openLeft() {
		  this.show = true;
		},
		toFixed(number) {
			if(number > 0) {
				return number.toFixed(2)
			} else {
				return '0.00'
			}
		},
		/**
		 * @param {Object} swiper 
		 * 点击轮播图
		 */
		swiperClick(swiper) {
			if(swiper.jumpType == 1) { //无跳转
				return;
			} else if(swiper.jumpType == 2) { //url
				let url = encodeURIComponent(swiper.jumpUrl)
				uni.navigateTo({
					url:'/pages/webview/index?url='+swiper.jumpUrl
				})
			} else if(swiper.jumpType == 3) { //内部接口
				uni.navigateTo({
					url:swiper.jumpUrl
				})
			} else if(swiper.jumpType == 4) { //外部接口
				uni.navigateToMiniProgram({
				  appId: swiper.remarks,
				  path: swiper.jumpUrl,
				  extraData: {
				    
				  },
				  success(res) {
				    // 打开成功
				  },
				  fail(err) {
					  console.log(err)
					 //  uni.showToast({
					 //  	title:'无效的appId，'+err.errMsg,
						// icon:'none'
					 //  })
				  }
				})
			}
		},
		/**
		 * banner图片加载完成
		 */
		imageLoad(e) {
			let winW = 750;
			let imgW = e.detail.width;
			let imgH = e.detail.height;
			this.swiperHeight = 750 * imgH / imgW;
		},
		async getAdvertising() {
			await this.advertisingHomeLocation();
			await this.advertisingList();
		},
		
		advertisingHomeLocation() {
			return new Promise(resolve => {
				this.$api.advertisingHomeLocation().then(res => {
					this.interval = res.data.data.intervalTime * 1000
					resolve()
				})
			})
		},
		advertisingList() {
			return new Promise(resolve => {
				this.$api.advertisingList({locationId:1}).then(res => {
					this.list = res.data.rows;
					resolve()
				})
			})
		},
		jumpPage(){
			this.$navTo.togo('/pages4/msg/index')
		},
		go(type) {
			if (!this.$method.isLogin()) {
				if(type == 'course') {
					
						uni.setStorageSync('goPath','course')
				} else if(type == 'bank' ) {
					
						uni.setStorageSync('goPath','bank')
				}
				this.$navTo.togo('/pages4/login/login');
			} else {
				if(type == 'course') {
					uni.navigateTo({
						url:'/pages2/wd/class'
					})
				} else if(type == 'bank') {
					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'
							})
					  }
					})
				}
			}
			
		},
		//课程
		courseList() {
		  var self = this;
		  var param = this.paramList[0];
		  this.$api.goodsList(param).then((res) => {
		    self.paramList[0].total = res.data.total;
		    self.list1.push.apply(self.list1, res.data.rows);
		    if (self.list1.length === res.data.total) {
		      self.paramList[0].showStatus = true;
		    }
		  });
		},
		//题库
		bankList() {
		  var self = this;
		  var param = this.paramList[1];
		  this.$api.goodsList(param).then((res) => {
		    self.paramList[1].total = res.data.total;
		    self.list2.push.apply(self.list2, res.data.rows);
		    if (self.list2.length === res.data.total) {
		      self.paramList[1].showStatus = true;
		    }
		  });
		},
		//直播
		liveList() {
		  var self = this;
		  var param = this.paramList[2];
		  this.$api.goodsList(param).then((res) => {
		    self.paramList[2].total = res.data.total;
		    self.list3.push.apply(self.list3, res.data.rows);
		    if (self.list3.length === res.data.total) {
		      self.paramList[2].showStatus = true;
		    }
		  });
		},
		educationList() {
		  var self = this;
		  this.$api.educationTypeList().then((res) => {
		    if (res.data.code == 200) {
		      self.eList = res.data.rows;
		      if (self.selObj.eId) {
		        self.businessList({ educationId: self.selObj.eId });
		      } else {
		        this.active1(self.eList[0]);
		      }
		    }
		  });
		},
		initList() {
		  this.paramList[0].pageNum = 1;
		  this.paramList[1].pageNum = 1;
		  this.list1 = [];
		  this.list2 = [];
		  this.list3 = [];
		  this.courseList();
		  this.bankList();
		  this.liveList();
		  this.educationList();
		},
		cMenu(e) {
		  this.paramList[0].pageNum = 1;
		  this.paramList[0].subjectId = this.sList[e.detail.value].id;
		  this.paramList[0].name = this.sList[e.detail.value].subjectName;
		  this.list1 = [];
		  //	this.menuIndex
		  this.courseList();
		},
		cMenu1(e) {
		  this.paramList[1].pageNum = 1;
		  this.paramList[1].subjectId = this.sList[e.detail.value].id;
		  this.paramList[1].name = this.sList[e.detail.value].subjectName;
		  this.list2 = [];
		  //	this.menuIndex1 = index;
		  this.bankList();
		},
		
		cMenu2(e) {
		  this.paramList[2].pageNum = 1;
		  this.paramList[2].subjectId = this.sList[e.detail.value].id;
		  this.paramList[2].name = this.sList[e.detail.value].subjectName;
		  this.list3 = [];
		  //	this.menuIndex1 = index;
		  this.liveList();
		},
		swiperChange(e) {
			this.current = e.detail.current;
		},
		tab(e) {
			this.tabCurrent = e;
		},
	},
	computed: { ...mapGetters(['userInfo']) }
};
</script>
<style>
	page {
		background: #eaeef1;
		font-size: 28rpx;
	}
</style>
<style lang="scss" scoped>

.index {
	.navbar {
		/deep/ .u-navbar-inner {
			margin-right:0!important;
		}
		
		.slot-wrap {
			width:100%;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 178rpx;
				height: 31rpx;
			}
		}
	}
	
	
	.swiper {
		width:100%;
		position: relative;
		
		.dots {
			position:absolute;
			left:0;
			bottom:8rpx;
			width:100%;
			display: flex;
			justify-content: center;
			
			.dot {
				width: 8rpx;
				height: 8rpx;
				background: #FFFFFF;
				border-radius: 50%;
				margin:0 4rpx;
				transition: all 0.3s;
				
				&.active {
					width: 24rpx;
					height: 8rpx;
					background: #007AFF;
					border-radius: 4rpx;
				}
			}
		}
		image {
			width:100%;
		}
		

	}
	
	.content {
		overflow: hidden;
		padding:0 16rpx 16rpx;
		background: rgba(234, 238, 241, 1);
		
		.notice {
			background:#fff;
			border-radius: 16rpx;
			margin-top:32rpx;
			overflow: hidden;
			&__content {
				padding:0 8rpx;
				height: 56rpx;
				background: linear-gradient(-90deg, rgba(255, 209, 0, 0.3), rgba(255, 255, 255, 0.3));
				display: flex;
				align-items: center;
			}
			
			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
			
			.text {
				flex:1;
				font-size: 24rpx;
				color: #333333;
				position: relative;
			}
			
			.btn {
				font-size: 24rpx;
				color: #007AFF;
			}
		}
		
		
		
		.tabs {
			
			/deep/  .u-tabs {
				background:none!important;
			}
		}
		
		.course-list {
			
			.item {
				background:#fff;
				box-shadow: 0px 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
				padding:24rpx 16rpx;
				border-radius: 16rpx;
				border-bottom:1rpx solid #eeeeee;
				display: flex;
				margin-bottom:20rpx;
				
				.img {
					position:relative;
					margin-right:10rpx;
					border-radius: 16rpx ;
					overflow: hidden;
					width: 320rpx;
					height: 180rpx;
					
					image {
						width:100%;
						height:100%;
					}
					
					.time {
						position:absolute;
						bottom:0;
						right:0;
						width: 80rpx;
						height: 32rpx;
						background: rgba(1, 25, 45, 0.4);
						color:#fff;
						text-align: center;
						line-height: 32rpx;
						font-size: 24rpx;
						border-radius: 10rpx 0px 10rpx 0px;
					}
				}
				
				.text {
					flex:1;
					padding-right:10rpx;
					position: relative;
					.title {
						font-size: 30rpx;
						color: #333333;
					}
					
					.desc {
						margin-top:40rpx;
						display: flex;
						position: absolute;
						bottom: 0;
						width: 100%;
						.left {
							flex:1;
							color:#333;
							font-size: 26rpx;
							
							text {
								font-size: 24rpx;
								color:#999;
							}
						}
						
						.right {
							font-size: 24rpx;
							font-weight: bold;
							color: #FF2D55;
						}
					}
				}
			}
		}
	}
	
	.my-list {
		margin:32rpx 0;
		display:flex;
		justify-content: space-between;
		&__item {
			width:351rpx;
			height:96rpx;
			position:relative;
			padding:25rpx 0 0 25rpx;
				font-size: 32rpx;
			
			&--bank {
				text {
					position: relative;
					z-index: 2;
					color:#00998A;
				}
				
			}
			
			&--course {
				text {
					position: relative;
					z-index: 2;
					color:#0062D9;
				}
			}
			
			image {
				width:100%;
				height:100%;
				left:0;
				top:0;
				position:absolute;
				z-index: 1;
			}
		}
	}
}
.popuBox {
	z-index: 99;
  top: 68px;
  width: 100%;
  bottom: 0;
  position: absolute;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: #ffffff;
}
.activeStys2 {
  background: #007aff !important;
  color: #ffffff;
}
.tylszB {
  text-align: center;
  padding: 20rpx 10rpx;
  background: #ffffff;
  border: 2rpx solid #eeeeee;
  border-radius: 16rpx;
  margin-top: 15rpx;
  font-size: 30rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.activeStys {
  background: linear-gradient(
    90deg,
    rgba(1, 94, 234, 0.2),
    rgba(255, 255, 255, 0.6)
  );
  border-radius: 16rpx;
  font-weight: bold;
  color: #007aff !important;
}
.tylsz {
  color: #666;
  font-size: 30rpx;
  padding: 20rpx 10rpx;
  margin-top: 15rpx;
  white-space: nowrap;
}
.popup_t1 {
  padding-left: 35rpx;
  border-bottom: 1rpx solid #eee;
  height: 57rpx;
  margin-top: 86rpx;
  font-weight: bold;
  color: #007aff;
  font-size: 27rpx;
}
.flex-d {
  height: 100%;
  background-color: #ffffff;
  padding: 0 5%;
  font-size: 30rpx;
}
.contentZ {
  display: flex;
  height: 100%;
  padding: 10rpx;

  .lzs {
    width: 200rpx;
    height: 100%;
    overflow-y: scroll;
  }

  .rzs {
    margin-left: 40rpx;
    flex: 1;
    height: 100%;
    overflow-y: scroll;
  }
}
.contentZ::-webkit-scrollbar {
  display: none;
}
.menuSel {
	padding:0 24rpx;
	margin:24rpx 0;
  width: 100%;
  height: 70rpx;
  background: #fff;
	display: flex;
	align-items: center;
	background:#fff;
	border-radius: 16rpx;
	
	.picker {
		flex:1;
	}
}
.r_sliper {
  padding: 0 20rpx;
}
.r_t1 {
  height: 48rpx;
  background: #007aff;
  border-radius: 16rpx;
  padding: 3rpx 8rpx;
  margin-top: 11rpx;
  color: #ffffff;
}
.r_t2 {
  height: 48rpx;
  background: #ffffff;
  border: 2rpx solid #eeeeee;
  border-radius: 16rpx;
  padding: 3rpx 8rpx;
  margin-top: 11rpx;
  color: #666666;
  font-size: 30rpx;
}
</style>