pet_server/pages/order/settle.vue

<template>
	<view class="content">
		<view class="card">
			<u-form :model="form" ref="uForm">
				<u-form-item label-align="right" label="取件费：" prop="fee_1" label-width="150">
					<input v-model="form.fee_1" @blur="inputed" />
				</u-form-item>
				<u-form-item label-align="right" label="运输费：" prop="fee_2" label-width="150">
					<input v-model="form.fee_2" @blur="inputed" />
				</u-form-item>
				<u-form-item label-align="right" label="派送费：" prop="fee_3" label-width="150">
					<input v-model="form.fee_3" @blur="inputed" />
				</u-form-item>
				<u-form-item label-align="right" label="笼具费：" prop="fee_4" label-width="150">
					<input v-model="form.fee_4" @blur="inputed" />
				</u-form-item>
				<u-form-item label-align="right" label="寄养费：" prop="fee_5" label-width="150">
					<input v-model="form.fee_5" @blur="inputed" />
				</u-form-item>
				<u-form-item label-align="right" label="其他：" prop="fee_6" label-width="150">
					<input v-model="form.fee_6" @blur="inputed" />
				</u-form-item>
				<u-form-item label-align="right" label="合计" label-width="150" :border-bottom="false">
					<input disabled="true" v-model="money" />
				</u-form-item>
			</u-form>
		</view>
		<view class="bottom-btn">
			<view class="buttom-dom" @click="push">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import {
		numAdd
	} from '@/utils/operation.js'
	export default {
		data() {
			return {
				// 订单id
				id: '',
				// 合计
				money: '0.00',
				// 取件费 运输费 派送费 笼具费 寄养费 其他费用
				form: {
					fee_1: '',
					fee_2: '',
					fee_3: '',
					fee_4: '',
					fee_5: '',
					fee_6: '',
				},
				rules: {
					fee_1: [{
						required: true,
						message: '请输入取件费',
						trigger: ['change','blur'],
					}],
					fee_2: [{
						required: true,
						message: '请输入运输费',
						trigger: ['change','blur'],
					}],
					fee_3: [{
						required: true,
						message: '请输入派送费',
						trigger: ['change','blur'],
					}],
					fee_4: [{
						required: true,
						message: '请输入笼具费',
						trigger: ['change','blur'],
					}],
					fee_5: [{
						required: true,
						message: '请输入寄养费',
						trigger: ['change','blur'],
					}],
					fee_6: [{
						required: true,
						message: '请输入其他费用',
						trigger: ['change','blur'],
					}],
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(e) {
			this.id = e.id
		},
		methods: {
			// 输入完成计算合计金额
			inputed() {
				let money = 0;
				for (let s of Object.keys(this.form)) {
					money = numAdd(money, this.form[s])
				}
				this.money = money
			},
			// 提交
			push() {
				// if (this.money === '') {
				// 	this.$u.toast('请输入计算金额')
				// 	return false
				// }
				this.$refs.uForm.validate(valid => {
					if(valid){
						let data = this.form;
						data.id = this.id;
						this.request('/sender_order_controller/settle', data, "GET").then(res => {
							console.log(res)
							if(res.code === 1){
								this.$u.toast('提交成功')
								setTimeout(()=>{
									uni.navigateBack({
										delta:1
									})
								},2000)
							}
						})
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 40rpx;
	}

	.card {
		width: 93%;
		margin: 0 auto;
		background-color: #FFFFFF;
		padding: 30rpx;
		border-radius: 20rpx;
	}

	.bottom-btn {
		width: 100vw;
		height: 10vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 30rpx;

		.buttom-dom {
			height: 80rpx;
			width: 93%;
			background-color: #F6B301;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			color: #FFFFFF;
			border-radius: 80rpx;
		}
	}
</style>