zc_saas_h5/pages2/order/confirm_list.vue

<template>
	<view>
		<view style="padding: 30rpx;padding-bottom: 98rpx;">
			<view v-for="(item,index) in list" :key="index" >
				<view class="item">
					<view style="display: flex;justify-content: space-between;padding-bottom: 15rpx;">
						<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;">选择班级</view>
						<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomBox">
			<view class="priceTag">¥ 999.00</view>
			<view style="display: flex;color: #FFFFFF;align-items: center;">
				<view class="btn2" @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-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>

import { mapGetters } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			indicatorStyle: `height: 50px;`,
			showArea:true,
			show1:false,
			list:[{
					name: 'apple',
					checked: false,
					disabled: false
				},
				{
					name: 'banner',
					checked: false,
					disabled: false
				},
				{
					name: 'orange',
					checked: false,
					disabled: 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
		};
	},
	onPullDownRefresh(){
	},
	onLoad(option) {
		
	},
	onShow() {
		/* if(this.current === 2 && this.$method.isLogin()){
			this.$refs.refMy.init();
		} */
	},
	methods: {
		goBuy(){
			this.$navTo.togo('/pages2/order/confirm_pay');
		},
		bindChange(e) {
			const val = e.detail.value
		},
		checkboxChange(e) {
			//console.log(e);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			// console.log(e);
		},
		// 全选
		checkedAll() {
			this.list.map(val => {
				val.checked = true;
			})
		},
		openPopup(index){
			if(index==0){
				this.show = true
			}else{
				this.show1 = true
			}
			
		}
	},
	onReachBottom() {},
	computed: { ...mapGetters(['userInfo']) }
};
</script>
<style >
	page{
		background-color: #EAEEF1;
	}
</style>
<style scoped>
	.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;
	}
	.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;
	}
	.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>