627 lines
15 KiB
Vue
627 lines
15 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">
|
|
<!-- 民事诉讼 -->
|
|
<view class="idcardAdd-types" v-if="sonArr.length > 0">
|
|
<view class="idcardAdd-block-name">
|
|
<view class="idcardAdd-block-see">
|
|
<text>*</text>民事诉讼
|
|
</view>
|
|
</view>
|
|
<view class="idcardAdd-block-write">
|
|
<picker class="idcardAdd-picker" @change="bindPickerChange" :value="indexValue" :range="sonArr" :range-key="'text'">
|
|
<view class="nowrap">{{ sonArr[indexValue].text }}</view>
|
|
<u-icon class="idcardAdd-picke-image" name="arrow-down"></u-icon>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 纠纷类型 -->
|
|
<view class="idcardAdd-types" v-if="childrenArr.length > 0">
|
|
<view class="idcardAdd-block-name">
|
|
<view class="idcardAdd-block-see">
|
|
<text>*</text>纠纷类型
|
|
</view>
|
|
</view>
|
|
<view class="idcardAdd-block-write">
|
|
<picker class="idcardAdd-picker" @change="childrenChange" :value="childrenValue" :range="childrenArr" :range-key="'text'">
|
|
<view class="nowrap">{{ childrenArr[childrenValue].text }}</view>
|
|
<u-icon class="idcardAdd-picke-image" name="arrow-down"></u-icon>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<block v-for="(item, keyIndex) in paramsArr" :key="keyIndex">
|
|
<block v-if="item.pre_key == null || isShow(item)">
|
|
<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]}}
|
|
</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 === 'checkbox'">
|
|
<checkbox-group @change="item.value = $event.detail.value">
|
|
<label class="checkbox-item" v-for="(checkboxItem, checkboxIndex) in item.options">
|
|
<checkbox class="checkbox-input" :value="checkboxIndex" color="#446EFE"></checkbox>{{checkboxItem}}
|
|
</label>
|
|
</checkbox-group>
|
|
</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>
|
|
|
|
<!-- 描述 -->
|
|
<view class="idcardAdd-depict-textarea" v-if="item.type === 'textarea'">
|
|
<textarea maxlength="500" class="textarea" :placeholder="'请输入' + item.title" v-model="item.value"></textarea>
|
|
<text>{{item.value.length}}/500</text>
|
|
</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>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<view class="idcardBtn">
|
|
<button class="idcardBtn-go" type="default" @click="onSubmit">确认提交</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { entrustSon, entrustInfo, entrustPost } from '@/apis/interfaces/synthesis'
|
|
import { createCity } from '@/apis/interfaces/user'
|
|
export default {
|
|
data() {
|
|
return {
|
|
submitObj : {}, // 提交数据
|
|
sonArr : [], // 民事二级类型
|
|
childrenArr : [], // 纠纷类型
|
|
paramsArr : [], // 信息
|
|
cityPicker : [], // 地址
|
|
indexValue : 0, // 民事类型下标
|
|
childrenValue : 0, // 纠纷类型下标
|
|
price : '0.00', // 订单金额
|
|
entrustId : '', // 表单详情
|
|
|
|
// 被告所在地
|
|
defendant : {},
|
|
// 目前所在地
|
|
address : {},
|
|
|
|
orderId : '', // 订单 ID
|
|
orderType : '', // 订单类型
|
|
voucherState : false, // 上传凭证弹出
|
|
}
|
|
},
|
|
created() {
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
|
|
// 案件委托子分类
|
|
this.yearSon();
|
|
|
|
// 省市区
|
|
createCity().then(res => {
|
|
this.cityPicker = res;
|
|
}).catch( err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon: "none"
|
|
})
|
|
})
|
|
},
|
|
|
|
computed: {
|
|
isShow(){
|
|
return (item) => {
|
|
if(item.pre_key != null){
|
|
let index = this.paramsArr.findIndex(val => val.key == item.pre_key)
|
|
return item.pre_value == this.paramsArr[index].value
|
|
}
|
|
return false
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// 民事类型列表
|
|
yearSon(){
|
|
entrustSon({parent_id: this.$Route.query.entrustId}).then(res => {
|
|
let froms = res
|
|
froms.map(val => {
|
|
val.indexValue = 0
|
|
})
|
|
this.sonArr = froms
|
|
|
|
let newChildren = froms[this.indexValue].children
|
|
newChildren.map(val => {
|
|
val.childrenValue = 0
|
|
})
|
|
this.childrenArr = newChildren
|
|
this.entrustId = newChildren[this.childrenValue].value
|
|
|
|
// 获取综法咨询-详情
|
|
this.getBusiness();
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
}).finally(() => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
|
|
// 选择民事类型
|
|
bindPickerChange(e){
|
|
this.indexValue = e.detail.value
|
|
this.childrenValue = 0
|
|
|
|
// 获取-案件委托子分类
|
|
this.yearSon();
|
|
},
|
|
|
|
// 选择纠纷类型
|
|
childrenChange(e){
|
|
this.childrenValue = e.detail.value
|
|
this.entrustId = this.childrenArr[e.detail.value].value
|
|
},
|
|
|
|
// 综法咨询-详情
|
|
getBusiness(){
|
|
entrustInfo(this.entrustId).then(res => {
|
|
let { price, params } = 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'
|
|
})
|
|
})
|
|
},
|
|
|
|
// 被告所在地-选择城市
|
|
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]
|
|
})
|
|
}
|
|
entrustPost(this.entrustId, {
|
|
data : dataArr,
|
|
type : 'self',
|
|
channel : 'app'
|
|
}).then(res => {
|
|
console.log(res)
|
|
let { order_id, order_type, can } = res;
|
|
this.expressSheet(order_id, order_type, can )
|
|
uni.hideLoading()
|
|
}).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;
|
|
overflow-y: scroll;
|
|
position: fixed;
|
|
}
|
|
|
|
.top {
|
|
position: relative;
|
|
height: 180rpx;
|
|
.top-img {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 40%;
|
|
}
|
|
.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: 54rpx;
|
|
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: 30rpx;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.idcardBorder {
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.idcardAdd-block {
|
|
padding: $padding + 20 $padding;
|
|
box-sizing: border-box;
|
|
background-color: #ffffff;
|
|
border-radius: 30rpx;
|
|
position: relative;
|
|
.idcardAdd-types {
|
|
margin-bottom: 40rpx;
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.idcardAdd-depict-textarea {
|
|
background-color: #f7faff;
|
|
line-height: 90rpx;
|
|
border-radius: 20rpx;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
width: 100%;
|
|
margin-bottom: 40rpx;
|
|
.textarea {
|
|
width: 100%;
|
|
padding: $padding 0;
|
|
box-sizing: border-box;
|
|
font-size: 30rpx;
|
|
height: 200rpx;
|
|
}
|
|
text {
|
|
width: 100%;
|
|
text-align: right;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.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%;
|
|
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%;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.idcardAdd-picke-image {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
position: absolute;
|
|
top: $margin;
|
|
right: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
// checkbox
|
|
.checkbox-item{
|
|
display: inline-block;
|
|
margin-right: 20rpx;
|
|
color: #999999;
|
|
line-height: 70rpx;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.checkbox-input{
|
|
transform:scale(0.6);
|
|
}
|
|
}
|
|
|
|
.idcardAdd-aline {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
margin-bottom: 40rpx;
|
|
.idcardAdd-aline-write {
|
|
margin-right: 30rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
// 按钮
|
|
.idcardBtn {
|
|
background-color: #111e4b;
|
|
width: 100%;
|
|
padding: 20rpx 60rpx 140rpx;
|
|
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: 45rpx;
|
|
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> |