zc_saas_h5/pages2/order/confirm_list.vue

<template>
	<view>
		<view style="padding: 30rpx;padding-bottom: 98rpx;">
			<view  >
				<view class="item">
					<view style="display: flex;justify-content: space-between;padding: 16rpx;">
						<image :src="$method.splitImgHost(detail.coverUrl)" style="height: 134rpx;width: 278rpx;border-radius: 16rpx;"></image>
						<view style="margin-left: 20rpx;">
							<view style="color: #333333;font-size: 30rpx;font-weight: bold;">
								{{detail.goodsName}}
							</view>
							<view class="priceTag">
								¥ {{detail.standPrice}}
							</view>
						</view>
					</view>
					<view v-if="detail.templateType!=null&&detail.goodsType==1">
						<u-line color="#D6D6DB" />
						<view v-if="detail.templateType=='class'" style="display: flex;justify-content: space-between;align-items: center;height: 80rpx;padding:16rpx;" @click="openPopup(0)">
							<view style="color: #666666;font-size: 24rpx;">{{gradeIndex < 0 ?'选择班级':gradeList[gradeIndex].className}}</view>
							<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
						</view>
						<view v-if="detail.templateType=='apply'"  style="display: flex;justify-content: space-between;align-items: center;height: 80rpx;padding:16rpx;" @click="openPopup(1)">
							<view style="color: #666666;font-size: 24rpx;" >{{!applyAreas.areaName?'报考地区':examDate.examineName+'-'+applyAreas.areaName+'-'+applyAreas.cityName}}</view>
							<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomBox safeArea">
			<view class="priceTag">¥ {{detail.standPrice}}</view>
			<view style="display: flex;color: #FFFFFF;align-items: center;">
				<view class="btn2" :class="{able:isAble()}" @click="goBuy()">确认购买</view>
			</view>
		</view>
		
		<u-popup v-model="show" mode="bottom" border-radius="40">
			<view class="popup_box">
				<view style="margin-bottom: 20rpx;">
					<view class="line1"></view>
					<view class="grade">选择班级</view>
				</view>
				<u-line color="#D6D6DB" />
				<view>
					<scroll-view scroll-y="true" style="height: 500rpx;">
						<view>
							<u-radio-group v-model="gradeValue" @change="radioGroupChange">
								<view v-for="(item, index) in gradeList" :key="index" >
									<view style="display: flex;align-items: center;padding: 20rpx;">
										<view>
											<u-radio
												shape="circle"
												:name="index"
												:disabled="item.studentNum > 0 && item.studentNum == item.studentUpper"
											>
												<view :class="item.checked?'white-box blue-box':'white-box'" >
													<view>
														<view class="blackTxt">{{item.className}}</view>
														<view class="redTxt" v-if="item.classEndTime">有效期至：{{$method.timestampToTime(item.classEndTime)}}</view>
														<view class="redTxt" v-if="item.classEndTime">本班还剩{{$method.GetRTime(item.classEndTime)}}天将结束学习</view>
													</view>
												</view>
											</u-radio>
										</view>
										
									</view>
								</view>
							</u-radio-group>
						</view>
					</scroll-view>
				</view>
				<view class="confrim-btn">
					<view class="okBtn" @click="okPopup(0)">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show1" mode="bottom" border-radius="40">
			<view class="popup_box">
				<view style="margin-bottom: 20rpx;">
					<view class="line1"></view>
					<view class="grade">选择考期/地区</view>
				</view>
				<u-line color="#D6D6DB" />
				<view style="display: flex;height: 500rpx;">
					<view style="width: 50%;">
						<view class="topTxt">考期</view>
						<view>
							<picker-view  :indicator-style="indicatorStyle" :value="value" @change="bindChangeE" class="picker-view">
								<picker-view-column>
									<view class="picker-item" v-for="(item,index) in examine" :key="index">{{item.examineName}}</view>
								</picker-view-column>
							</picker-view>
						</view>
					</view>
					<view style="width: 50%;">
						<view class="topTxt">地区</view>
						<view>
							<picker-view  :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
								<picker-view-column>
									<view class="picker-item" v-for="(item,index) in provinceList" :key="index">{{item.areaName}}</view>
								</picker-view-column>
								<picker-view-column>
									<view class="picker-item" v-for="(item,index) in cityList" :key="index">{{item.areaName}}</view>
								</picker-view-column>
							</picker-view>
						</view>
					</view>
				</view>
				<view class="confrim-btn">
					<view class="okBtn" @click="okPopup(1)">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>

import { mapGetters } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			gradeValue:-1,
			gradeIndex:-1,
			id:0,
			indicatorStyle: `height: 50px;`,
			showArea:true,
			show1:false,
			value1:'',
			show:false,
			detail:{},
			gradeList:[],
			provinceList:[],
			cityList:[],
			pAreaIndex:0,
			cAreaIndex:0,
			examine:[],
			examIndex:0,
			applyAreas:{},
			examDate:{},
			applyObj:{
				applyAreasJson:null,
				examDateJson:null
			},
			isBK:'',//是不是补考商品
		};
	},
	onPullDownRefresh(){
	},
	onLoad(option) {
		this.id = option.id;
		this.isBK = option.isBK
		this.getDetail()
	},
	onShow() {
		/* if(this.current === 2 && this.$method.isLogin()){
			this.$refs.refMy.init();
		} */
	},
	methods: {
		getExamine(id) {
			let self = this
			this.$api.getExamine({projectId:id}).then(res => {
				if(res.data.code==200){
					self.examine = res.data.rows
				}
			});
		},
		getCityList(id) {
			let self = this
			this.$api.getCityList({parentId:id}).then(res => {
				if(res.data.code==200){
					self.cityList = res.data.rows
				}
			});
		},
		getProvinceList() {
			let self = this
			if(self.provinceList.length>0){
				return
			}
			this.$api.getProvinceList().then(res => {
				if(res.data.code==200){
					self.provinceList = res.data.rows
					if(self.provinceList.length>0){
						self.getCityList(self.provinceList[0].areaId)
					}
					
				}
			});
		},
		//弹出框确定
		okPopup(index){
			if(index==0){
				if(!this.checkData()){
					return
				}
				this.gradeIndex = this.gradeValue
				this.detail.gradObj = this.gradeList[this.gradeIndex]
				this.show = false
			}else{
				if(!this.checkAreaData()){
					return
				}
				this.examDate = this.examine[this.examIndex]
				let pData = this.provinceList[this.pAreaIndex]
				let cData = this.cityList[this.cAreaIndex]
				this.applyAreas = {areaName:pData.areaName,areaId:pData.areaId,cityId:cData.areaId,cityName:cData.areaName}
				this.applyObj.applyAreasJson = JSON.stringify(this.applyAreas)
				this.applyObj.examDateJson = JSON.stringify(this.examDate)
				this.detail.examDate = this.examDate
				this.detail.applyAreas = this.applyAreas
				this.show1 = false
			}
		},
		checkAreaData(){
			if(this.examine.length==0){
				uni.showModal({
					title: "提示",
					content: '请选择考期',
					showCancel: false
				})
				return false
			}
			// if(this.provinceList.length==0){
			// 	uni.showModal({
			// 		title: "提示",
			// 		content: '请选择报考地区',
			// 		showCancel: false
			// 	})
			// 	return false
			// }
			// if(this.cityList.length==0){
			// 	uni.showModal({
			// 		title: "提示",
			// 		content: '请选择报考地区',
			// 		showCancel: false
			// 	})
			// 	return false
			// }
			return true
		},
		isAble() {
			if(this.detail.templateType=='class'&&this.detail.goodsType==1){
				if(this.gradeValue<0){
					return false
				}
			}
			else if(this.detail.templateType=='apply'&&this.detail.goodsType==1){
				if(!this.applyObj.examDateJson){
					uni.showModal({
						title: "提示",
						content: '请选择考期',
						showCancel: false
					})
					return false
				}
			}
			return true;
		},
		checkData(){
			if(this.detail.templateType=='class'&&this.detail.goodsType==1){
				if(this.gradeValue<0){
					uni.showModal({
						title: "提示",
						content: '请选择班级',
						showCancel: false
					})
					return false
				}
			}
			else if(this.detail.templateType=='apply'&&this.detail.goodsType==1){
				// if(!this.applyObj.applyAreasJson){
				// 	uni.showModal({
				// 		title: "提示",
				// 		content: '请选择报考地区',
				// 		showCancel: false
				// 	})
				// 	return false
				// }
				if(!this.applyObj.examDateJson){
					uni.showModal({
						title: "提示",
						content: '请选择考期',
						showCancel: false
					})
					return false
				}
			}
			return true;
		},
		radioGroupChange(e){
			console.log(e);
		},
		goodsGradeList() {
			let self = this
			this.$api.goodsGradeList({goodsId:this.id}).then(res => {
				if(res.data.code==200){
					self.gradeList = res.data.rows
					
					if(self.gradeList.length==0){
						let item = {
							className:'系统分班',
							gradeId:0
						}
						self.gradeList.push(item)
					} else {
						let isGradeFull = self.gradeList.every(item => (item.studentNum > 0 && item.studentNum == item.studentUpper))
						//所有班级都满了
						if(isGradeFull) {
							let item = {
								className:'系统分班',
								gradeId:0
							}
							self.gradeList.unshift(item)
						}
					}
				}
			});
		},
		goBuy(){
			if(!this.checkData()){
				return
			}
			let checkGoodsList = []
			checkGoodsList.push(this.detail)
			this.$store.commit('setShoppingCartList', {shoppingCartList  :checkGoodsList});
			if(this.isBK == '1'){
				this.$navTo.togo('/pages2/order/confirm_pay',{
					isBK : '1'
				});
			}else{
				this.$navTo.togo('/pages2/order/confirm_pay');
			}
		},
		getDetail() {
			let self = this
			this.$api.commonGoodsDetail(this.id).then(res => {
				if(res.data.code==200){
					self.detail = res.data.data
					self.getExamine(self.detail.projectId)
				}
			});
		},
		bindChangeE(e){
			console.log(e.detail.value)
			this.examIndex = e.detail.value[0]
		},
		bindChange(e) {
			const val = e.detail.value
			if(this.pAreaIndex!=e.detail.value[0]){
				this.pAreaIndex = e.detail.value[0]
				this.getCityList(this.provinceList[this.pAreaIndex].areaId)
			}
			if(this.cAreaIndex!=e.detail.value[1]){
				this.cAreaIndex = e.detail.value[1]
			}
			
		},
		openPopup(index){
			if(index==0){
				this.show = true
				this.goodsGradeList()
			}else{
				this.show1 = true
				this.getProvinceList()
			}
			
		}
	},
	onReachBottom() {},
	computed: { ...mapGetters(['userInfo']) }
};
</script>
<style >
	page{
		background-color: #EAEEF1;
	}
</style>
<style scoped lang="scss">
	.picker-item {
	        height: 50px;
	        align-items: center;
	        justify-content: center;
	        text-align: center;
	    }
	.picker-view {
		width: 100%;
		height: 420rpx;
		text-align: center;
	}
	.topTxt{
		font-size: 30rpx;
		color: #666666;
		text-align: center;
		padding: 20rpx 0;
	}
	.blackTxt{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
	.redTxt{
		font-size: 30rpx;
		font-family: PingFang SC;
		color: #FF2D55;
		margin-top: 13rpx;
	}
	.blue-box{
		background: #EBF5FF;
	}
	.white-box{
		width: 646rpx;
		border-radius: 24rpx;
		align-items: center;
		display: flex;
		padding-left: 15rpx;
	}
	.okBtn{
		width: 200rpx;
		height: 64rpx;
		background: linear-gradient(0deg, #015EEA, #00C0FA);
		border-radius: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 64rpx;
	}
	.confrim-btn{
		height: 98rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content:center;
	}
	.grade{
		height: 23rpx;
		font-size: 24rpx;
		color: #999999;
		margin: 0 auto;
		margin-top: 15rpx;
		text-align: center;
	}
	.line1{
		width: 80rpx;
		height: 8rpx;
		background: #999999;
		border-radius: 4rpx;
		margin: 0 auto;
		margin-top: 15rpx;
	}
	.popup_box {
		height: 700rpx;
		box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}
	.item{
		width: 100%;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}
	.priceTag{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF2D55;
		display: flex;
		flex-direction: row-reverse;
	}
	.btn2{
		width: 200rpx;
		height: 64rpx;
		background: linear-gradient(0deg, #015EEA, #00C0FA);
		opacity: 0.6;
		border-radius: 32rpx;
		text-align: center;
		line-height: 64rpx;
		
		&.able {
			opacity: 1;
		}
	}
	.bottomBox{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height:98rpx ;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: unset;
		>view{
			margin: 0 30rpx;
		}
	}
</style>