fb/fb-app/pages/store/store.vue

<template>
	<view >
		<u-navbar title="消费" :border-bottom="false"></u-navbar>
		<view class="recharge-icon">
			<view class="app-info">
				<image class="app-logo" src="/static/bico_cart.png"></image>
			</view>
		</view>
		<view class="recharge-form">
			<text>付款金额 ¥</text>
			<u-input placeholder="请输入" v-model="form.payment" type="number"></u-input>		
		</view>
		<view class="radio-group u-margin-bottom-20">
			<u-radio-group v-model="value" wrap="true" width="50%">
				<u-radio 
					@change="radioChange(item.value)" 
					v-for="(item, index) in mealItems" :key="index" 
					:name="item.name"
					:disabled="item.disabled"
				>
					{{item.name}}
				</u-radio>
			</u-radio-group>
		</view>
		<view class="recharge-form">
			<u-button type="primary" @click="save" style="width: 300rpx;">提交</u-button>
		</view>
		<u-modal v-model="show" :show-cancel-button="true" confirm-text="确认" title="提示" :content="content" @confirm="confirm">
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					payment: 0,
					tradeType: '',
					remark: '',
					canteenId: ''
				},
				value:"",
				mealItems: [
					{
						name: '小卖部',
						checked: true,
						disabled: false,
						value: "xiao"
					},
					{
						name: '早餐',
						checked: false,
						disabled: false,
						value: "zao"
					},
					{
						name: '午餐',
						checked: false,
						disabled: false,
						value: "wu"
					},
					{
						name: '下午茶',
						checked: false,
						disabled: false,
						value: "xia"
					},
					{
						name: '晚餐',
						checked: false,
						disabled: false,
						value: "wan"
					}
				],
				show: false,
				content:""
			}
		},
		methods: {
			radioChange(v) {
				this.form.tradeType = v;
				console.log(v);
			},
			save() {
				console.log("选中数据",this.form);
				var numReg = /^[0-9]*$/
				var numRe = new RegExp(numReg);
				if (!numRe.test(this.form.payment)) {
				  this.$refs.uToast.show({
				  	title: '请输入数字',
				  	type: 'error'
				  })
				  return;
				}
				//如果非小卖部时，给备注增加补餐参数
				if(this.form.tradeType !='xiao'){
					this.form.remark='补餐';
				}
				this.show = true;
				this.content= '确认消费¥'+this.form.payment;
			},
			confirm() {
				if(this.form.payment == 0){
					this.$refs.uToast.show({
						title: '请输入金额',
						type: 'error'
					})
					return;
				}
				this.$u.api.addCanteenTrade(this.form).then((res) => {
					if(res.code == 200){
						this.$refs.uToast.show({
							title: '提示：'+res.msg,
							type: 'success',
							duration: 10000
						})
					}else{
						this.$refs.uToast.show({
							title: '提示：'+res.msg,
							type: 'error',
							duration: 10000
						})
					}
					this.form.payment = 0;
				})
			}
		},
		onShow() {
			this.value = this.mealItems[0].name;
			this.form.tradeType = this.mealItems[0].value;
		}
	}
</script>

<style lang="scss" scoped>
.recharge-icon {
    text-align: center;
    color: #F46837;
}

.app-info {
    position: relative;
    padding: 20px;
    text-align: center;
}

.app-info:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    color: #E5E5E5;
    transform-origin: 0 100%;
    transform: scaleY(0.5);
}

.app-info .app-logo {
    display: block;
    width: 192rpx;
    height: 185rpx;
    margin: 0px auto;
    border-radius: 4px;
}

.recharge-form {
    margin: 0 0 20px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.recharge-form u-input {
    border-bottom: 1rpx solid darkgrey;
    width: 200rpx;
    height: 80rpx;
    padding-left: 10rpx;
}

.radio-group {
	margin: 0 auto;
    width: 200rpx;
}

</style>