142 lines
3.8 KiB
Vue
142 lines
3.8 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="pickerIndex = $event.detail.value">
|
|
<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 class="from-block-item">
|
|
<label>业务价格</label>
|
|
<view class="from-block-val price">￥{{pickerArr[pickerIndex].price}}</view>
|
|
</view>
|
|
<view class="from-block-item">
|
|
<label>业务描述</label>
|
|
<view class="from-block-val">{{pickerArr[pickerIndex].subtitle}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="from-block">
|
|
<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" />
|
|
</view>
|
|
</view>
|
|
<button class="from-btn" @click="onSubmit">提交办理</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { accountManagement, accountFrom } from '@/apis/interfaces/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
pickerArr : [],
|
|
pickerIndex : 0,
|
|
name : '',
|
|
phone : ''
|
|
};
|
|
},
|
|
onLoad() {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
accountManagement().then(res => {
|
|
uni.hideLoading()
|
|
this.pickerArr = res;
|
|
this.pickerIndex = res.findIndex(val => val.id == this.$Route.query.id)
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
// 提交表单
|
|
onSubmit(){
|
|
let { name, phone, pickerArr, pickerIndex } = this
|
|
|
|
console.log(pickerArr[pickerIndex])
|
|
|
|
if(name === ''){
|
|
uni.showToast({
|
|
title: '请输入客户姓名',
|
|
icon : 'none'
|
|
})
|
|
return
|
|
}
|
|
if(phone === ''){
|
|
uni.showToast({
|
|
title: '请输入客户手机号码',
|
|
icon : 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.showLoading({
|
|
title: "提交中...",
|
|
mask : true
|
|
})
|
|
accountFrom({
|
|
name : name,
|
|
mobile : phone
|
|
}, pickerArr[pickerIndex].id).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'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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>
|