fb/fb-app/pages/pay/pay.vue

<template>
	<view>
		<u-navbar title="预定" :border-bottom="false"></u-navbar>
		<view class="recharge-icon">
			<image class="app-logo" src="/static/bico_package.png"></image>
		</view>
		<view class="recharge-form-panel">
			<view class="recharge-form">
				<view class="canteen-select">
					<u-input :border="border" type="select" :select-open="selectShow" v-model="model.canteen" placeholder="请选择食堂" @click="selectShow = true"></u-input>
					<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
				</view>
				<view class="button-wrapper">
					<u-button  type="primary" @click="confirmOrder" shape="circle" :custom-style="btnSubmit" :disabled="confirmOrderHide">订餐</u-button>
				</view>
				<u-checkbox-group @change="checkboxGroupChange" wrap="true" size=40>
					<view v-for="(item, index) in list" :key="index">
						<view class="weui_cell">
							<view class="weui_cell_hd weui_cell_primary recharge-form-text">{{item.name}}付费（已购买
							<span class="paycount"> {{item.number}} </span>份）</view>
						</view>
						<view class="weui_cell">
							<label class="weui-cell weui-check__label">
								<u-checkbox v-model="item.checked"  :name="item.name" :disabled="item.disabled"></u-checkbox>
							</label>
							<view class="weui_cell_hd  recharge-form-text ">金额：</view>
							<text>¥ {{item.money}}</text>
							<view class="weui_cell_hd weui_cell_primary recharge-form-text"></view>
							<view style="">数量：</view>
							<view class="weui_cell_ft algin-center">
								<u-number-box disabled-input=true v-model="item.mealcount" @minus="minusMealCount(item)" @plus="plusMealCount(item)"></u-number-box>
							</view>
						</view>
						<view class="meal-split" v-if="index!=list.length-1"></view>
					</view>
					
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectShow: false,
				confirmOrderHide: true,
				//食堂对象
				canteenObj: {},
				selectList: [],
				model: {
					canteen: '',
					canteenId: '',
					dataList: []
				},
				btnSubmit: {
					height: '30px',
					width: '150px',
				},
				list: [],
				checkName: [],
			}
		},
		methods: {
			selectConfirm(e) {
				this.model.canteen = '';
				e.map((val, index) => {
					this.model.canteenId= val.value;
					this.model.canteen += this.model.canteen == '' ? val.label : '-' + val.label;
				})
			},
			confirmOrder() {
				this.list.map((v,index) => {
					if(v.checked == true){
						this.model.dataList.push(v)
					}
				})
				console.log("已选中数据",this.model);
			},
			minusMealCount(item) {
				item.disabled = item.mealcount==0? true : false;
				item.money = item.mealcount*20;
			},
			plusMealCount(item) {
				item.disabled = false;
				item.money = item.mealcount*20;
			},
			checkboxGroupChange(e) {
				if(e.length == 0){
					this.confirmOrderHide = true; 
				}else{
					this.confirmOrderHide = false; 
				}
				this.checkName = e;
			}
		},
		onShow() {
			this.list=[];
			this.canteenObj=  uni.getStorageSync('canteenObj');
			for(var key in this.canteenObj){
				this.selectList.push({"value":key,"label":this.canteenObj[key]});
			}
			console.log("数据：",this.selectList[0]);
			//默认选中第一个食堂
			this.selectConfirm([this.selectList[0]]);
			//获取需要渲染的餐类型
			//餐类型
			let mealTypeList = uni.getStorageSync("mealTypeList");
			mealTypeList.map((v,index) => {
				this.list.push({
					name: v.dictLabel,
					value:v.dictValue,
					checked: false,
					disabled: true,
					money: 0,
					mealcount: 0,
					number:0
				});
			})
			//获取当前用户已订购的份数
		}
	}
</script>

<style lang="scss" scoped>
.canteen-select u-input {
    width: 206rpx;
}	
.recharge-icon {
	width: 750rpx;
	text-align: center;
	color: #ff4e00;
	align-items: center;
	justify-content: center;
}
.recharge-icon image {
    display: block;
    width: 206rpx;
    height: 206rpx;
    margin: 30rpx auto;
    border-radius: 4px;
}
.recharge-form-panel {
    width: 100%;
    background-color: #fbf9fe;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.recharge-form {
    text-align: center;
    width: 100%;
    margin: 0 0 20rpx 0;
}
.weui_cell {
    padding: 6px 15px;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border-bottom: 1px solid #dfdfdf;
}

.weui_cell_hd.align-right {
    text-align: right;
    padding-right: 20px;
}

.weui_cell_primary {
    -webkit-box-flex: 1;
    flex: 1;
}

.weui_cell_ft {
    text-align: right;
    color: #888;
}
.recharge-form-text {
    text-align: left;
}
.meal-split {
    height: 20rpx;
    background-color: #f2f2f2;
}
</style>