dou_fire/pages/business/handle.vue

<template>
	<view class="from-content">
		<view class="from-block" v-if="pickerArr.length > 0" >
			<view class="from-block-item">
				<label>办理业务</label>
				<picker class="from-block-val" :range="pickerArr" :value="pickerIndex" range-key="title" @change="pickerChange">
					<view class="from-block-picker nowrap">{{pickerArr[pickerIndex].title}}
						<u-icon class="from-block-picker-icon" name="arrow-down" color="#555" size="15"></u-icon>
					</view>
				</picker>
			</view>
		</view>
		<view class="from-block">
			<view class="from-block-item">
				<label>标的额</label>
				<input class="from-block-val from-block-input" type="number" placeholder="请输入标的额" @input="onKeyInput" />
			</view>
			<view class="from-block-item" v-if="pickertype != 'free'">
				<label>服务费</label>
				<input class="from-block-val from-block-input" type="number" :value="price || '0'" disabled />
			</view>
			<view class="from-block-item" v-else>
				<label>服务费</label>
				<input class="from-block-val from-block-input" type="number" placeholder="请输入客户服务费(元)" v-model="priceValue" />
			</view>
			
			<view class="from-block-item">
				<label>客户姓名</label>
				<input class="from-block-val from-block-input" placeholder="请输入客户姓名" v-model="name" />
			</view>
			<view class="from-block-item">
				<label>手机号码</label>
				<input class="from-block-val from-block-input" type="number" placeholder="请输入客户手机号码" v-model="phone" maxlength="11" />
			</view>
		</view>
		<button class="from-btn" @click="onSubmit">提交办理</button>
	</view>
</template>

<script>
	import { customTypes,customTypeStore } from '@/apis/interfaces/custom.js'
	import { settleAmount, amountType, bigfiveStore } from '@/apis/interfaces/index.js'
	export default {
		data() {
			return {
				pickerArr	: [],
				pickerIndex	: 0,
				pickertype  : '',
				name		: '',
				phone		: '',
                price       : '',
				priceValue  : '',
				amount      : ''
			};
		},
		onShow() {
			const parentData = JSON.parse(decodeURIComponent(this.$Route.query.record))
			this.pickerArr   = parentData.child.data
			this.pickertype  = parentData.type
		},
		methods: {
			// 获取标的额
			onKeyInput(e) {
				this.amount = e.detail.value
				this.settleInfo()
			},
			
			// 标的额比例计算
			settleInfo() {
				settleAmount({amount: this.amount}, this.$Route.query.bigFiveId).then(res => {
					this.price = res.price
				}).catch(err => {
					this.price = 0
					uni.showToast({
						title: err.message,
						icon : 'none',
				        mask:true,
				        duration:3000
					})
				})
			},
			
			// 选择办理业务
			pickerChange(e) {
				this.pickerIndex = e.detail.value
				
				// 获取三级分类服务费类型
				this.amountTypeInfo();
			},
			
			// 三级分类服务费类型
			amountTypeInfo() {
				amountType(this.$Route.query.bigFiveId).then(res => {
					this.pickertype  = res.type
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none',
				        mask:true,
				        duration:3000
					})
				})
			},
			
			// 提交表单
			onSubmit(){
				let { name, phone, pickerIndex, price, priceValue, amount, pickerArr, pickertype} = this
				if(pickertype != 'free') {
					if(amount === ''){
						uni.showToast({
							title: '请输入标的额',
							icon : 'none'
						})
						return
					}
				} else {
					if(priceValue === ''){
						uni.showToast({
							title: '请输入服务费金额',
							icon : 'none'
						})
						return
					}
				}
				if(name === ''){
					uni.showToast({
						title: '请输入客户姓名',
						icon : 'none'
					})
					return
				}
				if(phone === ''){
					uni.showToast({
						title: '请输入客户手机号码',
						icon : 'none'
					})
					return
				}
				uni.showLoading({
					title: "提交中...",
					mask : true
				})
				
				let params = {
					big_id  :   pickerArr.length > 0 ? pickerArr[pickerIndex].id : this.$Route.query.bigFiveId,
				    name    :   name,
					amount  :   amount || '',
				    mobile  :   phone,
				    price   :   pickertype == 'free' ? priceValue : price
				}
				bigfiveStore(params).then(res => {
					let { order_type, order_id, order_no } = res;
					this.$Router.replace({
						name	: 'Pay',
						params	: {
							paytype		: 'synthesize',
							orderId		: order_id,
							orderType	: order_type.replace(/\\/g, '-')
						},
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none',
                        mask:true,
                        duration:3000
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.from-content{
		min-height: 100vh;
		padding: 30rpx;
		background: #f7f8f9;
	}
	.from-block{
		background: white;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
	}
	.from-block-item{
		min-height: 70rpx;
		display: flex;
		font-size: 32rpx;
		border-bottom: solid 1rpx #f3f3f3; 
		padding: 15rpx 0;
		&:last-child{ border: none; }
		label{ width: 200rpx; line-height: 70rpx; }
		.from-block-val{ width: calc(100% - 200rpx); text-align: right; line-height: 70rpx;
			&.price{ color: $main-color; font-weight: bold; }
		}
		.from-block-input{ height: 70rpx; font-size: 32rpx; }
		.from-block-picker{ padding-right: 50rpx; position: relative; }
		.from-block-picker-icon{ position: absolute; right: 0; top: 50%; margin-top: -15rpx; }
	}
	.from-btn{ width: 100%; background-color: $main-color; color: white; line-height: 95rpx; height: 95rpx; border-radius: 45rpx; font-size: 32rpx; font-weight: bold;
		&::after{ display: none; }
	}
</style>