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 style="padding: 30rpx;padding-bottom: 98rpx;">
			<uni-swipe-action>
			 <u-checkbox-group
			            v-model="checkboxValue1"
			            placement="column"
			            @change="checkboxChange">
			<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>
						<view style="display: flex;justify-content: space-between;padding-bottom: 15rpx;">
							<view style="display: flex;align-items:center;">
								<u-checkbox
									v-model="item.checked" 
									shape="circle"
									:name="item.name">
								</u-checkbox>
							</view>
							<image src="/static/login_bg.jpg" style="height: 134rpx;width: 388rpx;border-radius: 16rpx;"></image>
							<view style="margin-left: 20rpx;">
								<view style="color: #333333;font-size: 30rpx;font-weight: bold;">
									2020年二建建筑工程管理与实
									务（实务专题班）
								</view>
								<view class="priceTag">
									¥ 999.00
								</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>
			</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">¥ 999.00</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="checkboxGroupChange">
								<view v-for="(item, index) in list" :key="index" >
									<view style="display: flex;align-items: center;padding: 20rpx;">
										<view>
											<u-checkbox
												shape="circle"
												@change="checkboxChange" 
												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>
</template>

<script>
	export default {
		data() {
			return {
				allChecked:false,
				checkboxValue1:[],
				list: [{
					name: 'apple',
					checked: false,
					disabled: false,
					show: false
				},
				{
					name: 'banner',
					checked: false,
					disabled: false,
					show: false
				},
				{
					name: 'orange',
					checked: false,
					disabled: false,
					show: false
				}
				],
				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
			}
		},
		methods: {
			delItem(option) {
				console.log(option)
			},
			swipeChange(e, item) {
				item.show = e;
			},
			goBuy(){
				this.$navTo.togo('/pages2/order/confirm_pay');
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			openPopup(index){
				if(index==0){
					this.show = true
				}else{
					this.show1 = true
				}
				
			},
			checkboxAllChange(n){
				console.log(this.allChecked,n)
				if(n.value){
					for(let i =0;i<this.list.length;i++){
						this.list[i].checked = true
					}
				}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>