zc_saas_h5/pages/shopping/shoppingCart.vue

<template>
	<view>
		<u-navbar :is-back="false" title="购物车" :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 v-show="isLogin">
			<view style="padding: 30rpx;padding-bottom: 98rpx;">
				<uni-swipe-action>
				 <u-checkbox-group
				 @change="checkboxGroupChange"
				     placement="column">
						  <view>
				<uni-swipe-action-item :autoClose="false" @change="swipeChange($event, item)" :show="item.show" v-for="(item,index) in list" :key="index" >
					<view class="item">
						<view style="width: 100%;">
							
							<view style="display: flex;padding-bottom: 15rpx;">
								<view style="display: flex;align-items:center;">
									<u-checkbox
									@change="checkboxChange" 
									v-model="list[index].checked" 
									shape="circle"
									:name="index">
									</u-checkbox>
								</view>
								<view>
									<image :src="$method.splitImgHost(item.coverUrl, true)" style="width: 278rpx;height: 134rpx;"></image>
								</view>
								<view style="margin-left: 20rpx;flex: 1;">
									<view style="color: #333333;font-size: 30rpx;font-weight: bold;">
										{{item.goodsName}}
									</view>
									<view class="priceTag">
										¥ {{item.standPrice}}
									</view>
								</view>
								
							</view>
							<view v-if="item.templateType!=null">
								<u-line color="#D6D6DB" />
								<view v-if="item.templateType=='class'" style="display: flex;justify-content: space-between;align-items: center;height: 50rpx;" @click="openPopup(0,item,index)">
									<view style="color: #666666;font-size: 24rpx;">{{!item.gradObj.className?'选择班级':item.gradObj.className}}</view>
									<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
								</view>
								<view v-if="item.templateType=='apply'"  style="display: flex;justify-content: space-between;align-items: center;height: 50rpx;" @click="openPopup(1,item,index)">
									<view style="color: #666666;font-size: 24rpx;" >{{!item.applyAreas.areaName?'报考地区':item.examDate.examineName+'-'+item.applyAreas.areaName+'-'+item.applyAreas.cityName}}</view>
									<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
								</view>
							</view>
						</view>
					</view>
					<template v-slot:right>
						<view class="operate" @click="delItem(item)">
							<view ><text>删除</text></view>
							
						</view>
					</template>
				</uni-swipe-action-item>
				</view>
				 </u-checkbox-group>
				</uni-swipe-action>
			</view>
			<view class="bottomBox">
				<view>
					<u-checkbox
						label="all"
						name="all"
						shape="circle"
						@change="checkboxAllChange"
						v-model="allChecked" 
					>
					</u-checkbox>
					<text>全选</text>
				</view>
				<view style="display: flex;align-items: center;">
					<view style="color: #999999;margin-right: 8rpx;">合计</view>
					<view class="priceTag">¥ {{totalPrice}}</view>
					<view style="display: flex;color: #FFFFFF;align-items: center;">
						<view class="btn2" @click="goBuy()">结算</view>
					</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" >
								<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"
											></u-radio>
										</view>
										<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>
									</view>
									<u-line color="#D6D6DB" />
								</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>
		<view v-show="!isLogin">
			<view style="display: flex;align-items:center;flex-direction: column;margin-top: 40%;font-size: 32rpx;">
				<view style="color: #999999;">您还没有登录哦~</view>
				<view style="margin-top: 30rpx;" ><u-button type="primary" @click="login">去登录</u-button></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gradeValue:-1,
				isLogin:false,
				allChecked:false,
				checkboxValue1:[],
				list: [
				],	
				value1:'',
				show:false,
				show1:false,
				totalPrice:0.00,
				isOld:false,
				checkboxList:[],
				gradeList:[],
				examine:[],
				provinceList:[],
				cityList:[],
				detail:{},
				detailIndex:-1,
				applyObj:{
					applyAreasJson:null,
					examDateJson:null
				},
				pAreaIndex:0,
				cAreaIndex:0,
				examIndex:0,
			}
		},
		onLoad(option) {
			
		},
		onShow() {
			this.isLogin = this.$method.isLogin()
			if(this.isLogin){
				if(uni.getStorageSync('updateCart')||!this.isOld){
					this.isOld = true
					this.cartList()
					uni.removeStorageSync('updateCart')//消费购物车刷新事件
				}
				
			}
			
		},
		methods: {
			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]
				}
				
			},
			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
			},
			checkData(){
				if(this.detail.templateType=='class'){
					if(this.gradeValue<0){
						uni.showModal({
							title: "提示",
							content: '请选择班级',
							showCancel: false
						})
						return false
					}
				}
				else if(this.detail.templateType=='apply'){
					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;
			},
			//弹出框确定
			okPopup(index){
				if(index==0){
					if(!this.checkData()){
						return
					}
					this.gradeIndex = this.gradeValue
					this.list[this.detailIndex].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.list[this.detailIndex].examDate = this.examDate //商品赋值选中考期地区
					this.list[this.detailIndex].applyAreas = this.applyAreas //商品赋值选中考期地区
					this.show1 = false
				}
			},
			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)
						}
						
					}
				});
			},
			goodsGradeList(goodsId) {
				let self = this
				this.$api.goodsGradeList({goodsId:goodsId}).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)
						}
					}
				});
			},
			openPopup(index,item,itemIndex){
				this.detail = item
				this.detailIndex = itemIndex
				if(index==0){
					this.gradeValue = -1
					this.show = true
					this.goodsGradeList(item.goodsId)
				}else{
					this.applyObj={
						applyAreasJson:null,
						examDateJson:null
					}
					this.pAreaIndex=0,
					this.cAreaIndex=0,
					this.examIndex=0,
					this.show1 = true
					this.getProvinceList()
					this.getExamine(item.projectId)
				}
			},
			checkboxGroupChange(e){
				this.checkboxList = e
			},
			countPrice(list){
				
			},
			checkboxChange1(e) {
				//console.log(e);
			},
			
			login(){
				uni.navigateTo({url:'/pages/login/login'});
			},
			cartList() {
				let self = this
				this.allChecked = false
				this.totalPrice = 0.00
				this.checkboxList =[]
				this.$api.cartList().then(res => {
					if(res.data.code==200){
						for (let i = 0; i < res.data.rows.length; i++) {
							let item = res.data.rows[i]
							item.checked = false
							 if(item.status!=1||item.goodsStatus!=1){
								item.disabled = true
							}else{
								item.disabled = false
							}
							item.show = false
							item.gradObj = {} //存储班级
							item.applyAreas = {} 
							item.examDate = {} 
						}
						self.list = res.data.rows
					}
				});
			},
			delItem(item) {
				let self = this
				this.$api.deleteCart(item.id).then(res => {
					if(res.data.code==200){
						self.cartList()
					}
				});
			},
			swipeChange(e, item) {
				item.show = e;
			},
			goBuy(){
				if(this.checkboxList.length==0){
					uni.showModal({
						title: "提示",
						content: '请选择商品',
						showCancel: false
					})
					return 
				}
				let checkGoodsList = []
				for(let i =0;i<this.checkboxList.length;i++){
					let index = this.checkboxList[i]
					let item = this.list[index]
					checkGoodsList.push(item)
					if(item.templateType=='class'){
						if(!item.gradObj.className){
							uni.showModal({
								title: "提示",
								content: '请选择班级',
								showCancel: false
							})
							return false
						}
					}
					if(item.templateType=='apply'){
						if(!item.applyAreas.areaName){
							uni.showModal({
								title: "提示",
								content: '请选择报考地区',
								showCancel: false
							})
							return false
						}
					}
				}
				this.$store.commit('setShoppingCartList', {shoppingCartList  :checkGoodsList});
				this.$navTo.togo('/pages2/order/confirm_pay');
			},
			checkboxChange(n) {
				console.log('change', n);
				if(n.value){
					this.totalPrice += this.list[n.name].standPrice
				}else{
					this.totalPrice -= this.list[n.name].standPrice
				}
			},
			checkboxAllChange(n){
				this.totalPrice = 0.00
				this.checkboxList = []
				if(n.value){
					for(let i =0;i<this.list.length;i++){
						this.list[i].checked = true
						this.totalPrice += this.list[i].standPrice
						this.checkboxList.push(i)
					}
				}else{
					for(let i =0;i<this.list.length;i++){
						this.list[i].checked = false
						
					}
				}
			}
		}
	}
</script>
<style >
	page{
		background-color: #EAEEF1;
	}
</style>
<style scoped>
	.operate{
		background-color: #FF3B30;
		color: #FFFFFF;
		border-top-right-radius: 16rpx;
		border-bottom-right-radius: 16rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items:center;
		justify-content:center;
		padding: 0 20rpx;
		
		
	}
	.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;
		padding: 15rpx;
		display: flex;
		
	}
	.priceTag{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF2D55;
		display: flex;
		flex-direction: row-reverse;
		margin-right: 8rpx;
	}
	.btn2{
		width: 200rpx;
		height: 64rpx;
		background: linear-gradient(0deg, #015EEA, #00C0FA);
		border-radius: 32rpx;
		text-align: center;
		line-height: 64rpx;
	}
	.bottomBox{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height:98rpx ;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}
</style>