473 lines
11 KiB
Vue
473 lines
11 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="top">
|
|
<view class="top-cont">
|
|
<view class="top-cont-name">法律咨询服务包</view>
|
|
<view class="top-cont-text">请仔细填写以下信息</view>
|
|
</view>
|
|
<image class="top-img" src="https://cdn.douhuofalv.com/images/2023/04/20/2ea5fc20ffc90e7feec7ba2650b81c99.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="idcardBorder">
|
|
<!-- 表单部分 -->
|
|
<view class="idcardAdd-block">
|
|
<block v-for="(item, keyIndex) in paramsArr" :key="keyIndex">
|
|
<view class="idcardAdd-block-name">
|
|
<view class="idcardAdd-block-see">
|
|
<text v-if="item.is_required == 1">*</text>{{item.title}}
|
|
</view>
|
|
</view>
|
|
<!-- 单输入框 -->
|
|
<view class="idcardAdd-block-write" v-if="item.type === 'text'">
|
|
<input class="idcardAdd-input" type="text" v-model="item.value" :placeholder="'请输入' + item.title" />
|
|
</view>
|
|
<view class="idcardAdd-block-write" v-if="item.type === 'number' || item.type === 'mobile' || item.type === 'day'">
|
|
<input class="idcardAdd-input" type="number" v-model="item.value" :placeholder="'请输入' + item.title" />
|
|
</view>
|
|
<!-- 价格输入框 -->
|
|
<view class="idcardAdd-block-write" v-if="item.type === 'price'">
|
|
<input class="idcardAdd-input" type="digit" v-model="item.value" :placeholder="'请输入' + item.title" />
|
|
</view>
|
|
<!-- 密码输入框 -->
|
|
<view class="idcardAdd-block-write" v-if="item.type === 'password'">
|
|
<input class="idcardAdd-input" type="safe-password" v-model="item.value" :placeholder="'请输入' + item.title" />
|
|
</view>
|
|
|
|
<!-- 下拉框 -->
|
|
<view class="idcardAdd-block-write" v-if="item.type === 'select'">
|
|
<picker class="idcardAdd-picker" :range="item.options" :value="item.value" @change="item.value = $event.detail.value">
|
|
<view class="nowrap">
|
|
<!-- {{item.options[item.value]}} -->
|
|
{{item.options[item.value]}}
|
|
</view>
|
|
<image class="idcardAdd-picke-image" src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
|
|
</picker>
|
|
</view>
|
|
|
|
<!-- 单选 -->
|
|
<view class="idcardAdd-aline" v-if="item.type === 'radio'">
|
|
<radio-group @change="item.value = $event.detail.value">
|
|
<label class="idcardAdd-aline-write" v-for="(radioItem, radioIndex) in item.options" :key="radioIndex">
|
|
<radio :value="radioIndex" color="#446EFE" style="transform:scale(.65)" :checked="item.value === radioIndex" /><text>{{radioItem}}</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
|
|
<!-- 被告所在地 -->
|
|
<block v-if="item.type === 'pro_city' && item.key === 'defendant_address'">
|
|
<view class="idcardAdd-block-write">
|
|
<uni-data-picker
|
|
:localdata="cityPicker"
|
|
:border="false"
|
|
split="-"
|
|
placeholder="选择城市"
|
|
@change="defendantPicker"
|
|
></uni-data-picker>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- 目前所在地 -->
|
|
<block v-if="item.type === 'pro_city' && item.key === 'address'">
|
|
<view class="idcardAdd-block-write">
|
|
<uni-data-picker
|
|
:localdata="cityPicker"
|
|
:border="false"
|
|
split="-"
|
|
placeholder="选择城市"
|
|
@change="addressPicker"
|
|
></uni-data-picker>
|
|
</view>
|
|
</block>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view class="idcardBtn">
|
|
<button class="idcardBtn-go" type="default" @click="onSubmit">确认提交</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { yearSynthInfo, yearSynthPost } from '@/apis/interfaces/synthesis'
|
|
import { createCity } from '@/apis/interfaces/user'
|
|
import mouldInput from '@/components/mould-input.vue'
|
|
export default {
|
|
components: {
|
|
mouldInput
|
|
},
|
|
data() {
|
|
return {
|
|
paramsArr : [], // 信息
|
|
cityPicker : [], // 地址
|
|
|
|
// 被告所在地
|
|
defendant : {},
|
|
|
|
// 目前所在地
|
|
address : {},
|
|
orderId : '', // 订单 ID
|
|
orderType : '', // 订单类型
|
|
price : ''
|
|
}
|
|
},
|
|
created() {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
|
|
// 获取综法咨询-详情
|
|
this.getBusiness();
|
|
|
|
// 省市区
|
|
createCity().then(res => {
|
|
this.cityPicker = res;
|
|
}).catch( err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
methods: {
|
|
// 综法咨询-详情
|
|
getBusiness(){
|
|
yearSynthInfo(this.$Route.query.serveId).then(res => {
|
|
let { params, price } = res;
|
|
params.map(val => {
|
|
if(val.type === 'checkbox'){
|
|
val.value = []
|
|
}else if(val.type === 'select'){
|
|
val.value = 0
|
|
}else{
|
|
val.value = ""
|
|
}
|
|
})
|
|
this.price = price
|
|
this.paramsArr = params
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
}).finally(() => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
|
|
// 被告所在地-选择城市
|
|
defendantPicker(e){
|
|
let { value } = e.detail
|
|
let dataArr = {
|
|
province_id: value[0].value,
|
|
city_id: value[1].value
|
|
}
|
|
this.defendant = dataArr
|
|
},
|
|
|
|
// 目前所在地-选择城市
|
|
addressPicker(e){
|
|
let { value } = e.detail
|
|
let dataArr = {
|
|
province_id: value[0].value,
|
|
city_id: value[1].value
|
|
}
|
|
this.address = dataArr
|
|
},
|
|
|
|
// 提交订单数据
|
|
onSubmit(){
|
|
uni.showLoading({
|
|
title: '提交中...',
|
|
mask : true
|
|
})
|
|
let subData = {};
|
|
let dataArr = [];
|
|
for(let val of this.paramsArr){
|
|
if(val.type === 'pro_city'){
|
|
subData[val.key] = this.address
|
|
}else{
|
|
subData[val.key] = val.value
|
|
}
|
|
}
|
|
|
|
for(let key in subData){
|
|
dataArr.push({
|
|
key,
|
|
value: subData[key]
|
|
})
|
|
}
|
|
yearSynthPost(this.$Route.query.serveId, {
|
|
data: dataArr,
|
|
type: 'self',
|
|
channel: 'app',
|
|
user_id: ''
|
|
}).then(res => {
|
|
uni.hideLoading()
|
|
this.expressSheet(res.service_order_id, res.order_type, res.can )
|
|
}).catch( err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
// 选择支付方式
|
|
expressSheet(id, type, can) {
|
|
this.orderId = id
|
|
this.orderType = type
|
|
// 仅支持线下打款
|
|
if(!can.online){
|
|
this.onToBankPay()
|
|
return
|
|
}
|
|
// 选择线上、下支付方式
|
|
uni.showActionSheet({
|
|
itemList: ['线上支付', '线下支付'],
|
|
success: sheetRes => {
|
|
if(sheetRes.tapIndex == 0){
|
|
this.$Router.replace({
|
|
name: 'Pay',
|
|
params: {
|
|
paytype : 'synthesize',
|
|
orderId : id,
|
|
orderType : type.replace(/\\/g, '-')
|
|
},
|
|
})
|
|
return
|
|
}
|
|
this.onToBankPay()
|
|
}
|
|
})
|
|
},
|
|
// 去线下打款
|
|
onToBankPay(){
|
|
this.$Router.replace({
|
|
name: 'BankPay',
|
|
params: {
|
|
orderId : this.orderId,
|
|
orderType : this.orderType.replace(/\\/g, '-'),
|
|
price : this.price
|
|
},
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
background-color: #111e4b;
|
|
width: 100vw;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
position: fixed;
|
|
|
|
}
|
|
|
|
.top {
|
|
position: relative;
|
|
height: 150rpx;
|
|
.top-img {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 35%;
|
|
}
|
|
.top-cont {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
padding: 40rpx 30rpx;
|
|
box-sizing: border-box;
|
|
.top-cont-name {
|
|
font-weight: 600;
|
|
font-size: 44rpx;
|
|
background-image: linear-gradient(to right,#f1c694, #fffbf6 42%);
|
|
-webkit-background-clip:text;
|
|
-webkit-text-fill-color:transparent;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.top-cont-text {
|
|
font-size: 34rpx;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.idcardBorder {
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.idcardAdd-block {
|
|
padding: $padding + 20 $padding;
|
|
box-sizing: border-box;
|
|
background-color: #ffffff;
|
|
border-radius: $radius;
|
|
position: relative;
|
|
}
|
|
|
|
.idcardAdd-block-write {
|
|
background-color: #f7faff;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
border-radius: 20rpx;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
font-size: 30rpx;
|
|
margin-bottom: 40rpx;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.idcardAdd-input {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
border: none;
|
|
background-color: transparent;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.idcardAdd-picker {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.idcardAdd-picke-image {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
position: absolute;
|
|
top: $margin;
|
|
right: $margin;
|
|
}
|
|
|
|
.idcardAdd-block-name {
|
|
margin-bottom: $margin;
|
|
display: flex;
|
|
.idcardAdd-block-see {
|
|
color: $text-color;
|
|
margin-right: $margin;
|
|
font-size: 30rpx;
|
|
text {
|
|
color: $main-color;
|
|
padding-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.idcardAdd-aline {
|
|
display: flex;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
// 按钮
|
|
.idcardBtn {
|
|
background-color: #111e4b;
|
|
width: 100%;
|
|
padding: 20rpx 60rpx 60rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
.idcardBtn-go {
|
|
width: 100%;
|
|
background-image: linear-gradient(to bottom, #fff2d2, #f9cd9e);
|
|
color: #582700;
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
border-radius: $radius * 3;
|
|
height: 94rpx;
|
|
line-height: 94rpx;
|
|
box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, .5);
|
|
text-align: center;
|
|
&[disabled] {
|
|
background-color: #f9f9f9;
|
|
border-color: #e2e2e2;
|
|
color: #959595;
|
|
}
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 打款凭证弹出
|
|
.voucherBack {
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99;
|
|
background-color: rgba(0, 0, 0, .6);
|
|
display: none;
|
|
&.active {
|
|
display: block;
|
|
}
|
|
}
|
|
.voucherPop {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-pack: center;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
padding: 0 10%;
|
|
box-sizing: border-box;
|
|
display: none;
|
|
&.active {
|
|
display: -webkit-box;
|
|
}
|
|
.tipsWhite {
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
.voucherPop-img {
|
|
position: absolute !important;
|
|
top: -80rpx;
|
|
right: calc(50% - 100rpx);
|
|
width: 200rpx;
|
|
}
|
|
.voucherPop-title {
|
|
box-sizing: border-box;
|
|
padding: 50rpx 70rpx;
|
|
margin-top: 100rpx;
|
|
text-align: center;
|
|
.voucherPop-name {
|
|
font-weight: 600;
|
|
font-size: 38rpx;
|
|
}
|
|
.voucherPop-text {
|
|
padding: 30rpx 0 35rpx;
|
|
line-height: 44rpx;
|
|
}
|
|
.voucherPop-btn {
|
|
display: flex;
|
|
.voucherPop-go {
|
|
flex: 2;
|
|
text-align: center;
|
|
border: 2rpx solid #da2b56;
|
|
color: #da2b56;
|
|
margin: 0 15rpx;
|
|
line-height: 74rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #ffffff;
|
|
&.voucherPop-up {
|
|
background-color: #da2b56;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |