saas_miniprogram/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
				     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>
							<u-line color="#D6D6DB" />
							<view style="display: flex;justify-content: space-between;align-items: center;height: 50rpx;" @click="openPopup(index)">
								<view style="color: #666666;font-size: 24rpx;margin-left: 60rpx;">选择班级</view>
								<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></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-checkbox-group @change="checkboxGroupChange1">
									<view v-for="(item, index) in list" :key="index" >
										<view style="display: flex;align-items: center;padding: 20rpx;">
											<view>
												<u-checkbox
													shape="circle"
													@change="checkboxChange1" 
													v-model="item.checked" 
													:name="item.name"
												></u-checkbox>
											</view>
											<view :class="item.checked?'white-box blue-box':'white-box'" >
												<view>
													<view class="blackTxt">2021年第1期二级建造师继续教育选修课（市政）标题过长换行显示</view>
													<view class="redTxt">有效期至：2021/11/30</view>
													<view class="redTxt">本班还剩41天将结束学习</view>
												</view>
											</view>
										</view>
									</view>
								</u-checkbox-group>
							</view>
						</scroll-view>
					</view>
					<view class="confrim-btn">
						<view class="okBtn">确定</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="bindChange" class="picker-view">
									<picker-view-column>
										<view class="picker-item" v-for="(item,index) in list1" :key="index">{{item.label}}</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 list2" :key="index">{{item.label}}</view>
									</picker-view-column>
									<picker-view-column>
										<view class="picker-item" v-for="(item,index) in list3" :key="index">{{item.label}}</view>
									</picker-view-column>
								</picker-view>
							</view>
						</view>
					</view>
					<view class="confrim-btn">
						<view class="okBtn">确定</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 {
				isLogin:false,
				allChecked:false,
				checkboxValue1:[],
				list: [
				],
				list1:[
						{
							value: '1',
							label: '2021年6月'
						},
						{
							value: '2',
							label: '2021年7月'
						}
					],
					list1:[
						{
							value: '1',
							label: '2021年6月'
						},
						{
							value: '2',
							label: '2021年7月'
						},
						{
							value: '3',
							label: '2021年8月'
						},
						{
							value: '4',
							label: '2021年9月'
						}
					],
					list2:[
						{
							value: '1',
							label: '广东'
						},
						{
							value: '2',
							label: '北京'
						}
					],
					list3:[
						{
							value: '1',
							label: '广州'
						},
						{
							value: '2',
							label: '深圳'
						}
					],
					value1:'',
				show:false,
				show1:false,
				totalPrice:0.00,
				isOld:false
			}
		},
		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: {
			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.$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
						}
						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(){
				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
				}
			},
			openPopup(index){
				if(index==0){
					this.show = true
				}else{
					this.show1 = true
				}
				
			},
			checkboxAllChange(n){
				this.totalPrice = 0.00
				if(n.value){
					for(let i =0;i<this.list.length;i++){
						this.list[i].checked = true
						this.totalPrice += this.list[i].standPrice
					}
				}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;
		height: 220rpx;
		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>