233 lines
7.4 KiB
Vue
233 lines
7.4 KiB
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" v-if="pickertype == 'select'">
|
|
<label>资费类型</label>
|
|
<picker class="from-block-val" :range="selectP" :value="selectPIndex" range-key="name" @change="pickerSelectChange">
|
|
<view class="from-block-picker nowrap">{{selectP[selectPIndex].name}}
|
|
<u-icon class="from-block-picker-icon" name="arrow-down" color="#555" size="15"></u-icon>
|
|
</view>
|
|
</picker>
|
|
</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 class="from-block-item" v-if="needAmount > 0">
|
|
<label>{{priceTitle}}</label>
|
|
<input class="from-block-val from-block-input" type="number" v-model="amount" placeholder="请输入标的额"/>
|
|
</view>
|
|
<view class="from-block-item from-block-get" v-if="pickertype != 'free'">
|
|
<label>服务费</label>
|
|
<input class="from-block-val from-block-input" type="number" v-model="price" disabled />
|
|
<view class="from-block-get-btn" @click="settleInfo">计算费用</view>
|
|
</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" v-if="needDiff != 0">
|
|
<label>已缴服务费</label>
|
|
<input class="from-block-val from-block-input" type="number" placeholder="请输入已缴纳金额" v-model="diffPrice" />
|
|
</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 {
|
|
id : '',
|
|
pickerArr : [],
|
|
pickerIndex : 0,
|
|
pickertype : '',
|
|
name : '',
|
|
phone : '',
|
|
price : 0,
|
|
diffPrice : '',
|
|
priceValue : '',
|
|
amount : '',
|
|
needAmount : 0,
|
|
needDiff : 0,
|
|
selectP : [],
|
|
selectPIndex: 0,
|
|
priceTitle : '标的额'
|
|
};
|
|
},
|
|
onShow() {
|
|
const parentData = JSON.parse(decodeURIComponent(this.$Route.query.record))
|
|
console.log(parentData)
|
|
this.id = parentData.id
|
|
this.needDiff = parentData.need_diff
|
|
this.needAmount = parentData.need_amount
|
|
this.pickerArr = parentData.child.data
|
|
this.pickertype = parentData.type
|
|
this.selectP = parentData.select_p || []
|
|
this.priceTitle = parentData.price_title
|
|
if(parentData.child.has){
|
|
this.amountTypeInfo()
|
|
}
|
|
},
|
|
methods: {
|
|
// 标的额比例计算
|
|
settleInfo() {
|
|
let { pickerArr, pickerIndex } = this
|
|
let id = pickerArr.length > 0 ? pickerArr[pickerIndex].id : this.id
|
|
|
|
settleAmount({
|
|
amount : this.pickertype == 'select' ? this.selectP[this.selectPIndex].key : this.amount,
|
|
username: this.phone
|
|
}, id).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();
|
|
// 清空表单数据
|
|
this.onClerFrom()
|
|
},
|
|
|
|
// 选择资费信息
|
|
pickerSelectChange(e){
|
|
let { value } = e.detail
|
|
this.selectPIndex = value
|
|
// 清空表单数据
|
|
this.onClerFrom()
|
|
},
|
|
|
|
// 清空数据信息
|
|
onClerFrom(){
|
|
this.amount = ""
|
|
this.price = 0
|
|
this.priceValue = ""
|
|
this.name = ""
|
|
this.phone = ""
|
|
this.diffPrice = ""
|
|
},
|
|
// 三级分类服务费类型
|
|
amountTypeInfo() {
|
|
let { pickerArr, pickerIndex } = this
|
|
let id = pickerArr[pickerIndex].id
|
|
amountType(id).then(res => {
|
|
let { type, need_amount, select_p, need_diff, price_title } = res;
|
|
this.needDiff = need_diff
|
|
this.pickertype = type
|
|
this.needAmount = need_amount
|
|
this.selectP = select_p || []
|
|
this.priceTitle = price_title
|
|
// if(type == 'select'){
|
|
// this.settleInfo()
|
|
// }
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none',
|
|
mask:true,
|
|
duration:3000
|
|
})
|
|
})
|
|
},
|
|
|
|
// 提交表单
|
|
onSubmit(){
|
|
let { name, phone, pickerIndex, price, priceValue, amount, pickerArr, pickertype, selectP, selectPIndex, diffPrice } = this
|
|
uni.showLoading({
|
|
title: "提交中...",
|
|
mask : true
|
|
})
|
|
let params = {
|
|
big_id : pickerArr.length > 0 ? pickerArr[pickerIndex].id : this.$Route.query.bigFiveId,
|
|
name : name,
|
|
amount : amount || 0,
|
|
mobile : phone,
|
|
price : pickertype == 'free' ? priceValue : price,
|
|
select_key : selectP.length > 0 ? selectP[selectPIndex].key : '',
|
|
diff_price : diffPrice
|
|
}
|
|
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-get{ padding-right: 200rpx; position: relative; }
|
|
.from-block-get-btn{ font-size: 32rpx; line-height: 100rpx; border-left:solid 1rpx #f3f3f3; color: $main-color; width: 170rpx; text-align: center; position: absolute; right: 0; top: 0; }
|
|
.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>
|