564 lines
13 KiB
Vue
564 lines
13 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">
|
||
<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 === 'price' || item.type === 'number' || item.type === 'text' || item.type === 'password' || item.type === 'mobile' || item.type === 'day'">
|
||
<mouldInput class="idcardAdd-input" :blur-value="item.value" :input-type="item.type" :input-title="item.title" :input-key="item.key" @onValue="($event) => {item.value = $event}"></mouldInput>
|
||
</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 === '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>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" :disabled="disabled">{{disabled ? '数据正在提交中' : '确认提交'}}</button>
|
||
</view>
|
||
|
||
<!-- 打款凭证弹出 -->
|
||
<view class="voucherBack" :class="{active : voucherState}"></view>
|
||
<view class="voucherPop" :class="{active : voucherState}">
|
||
<view class="tipsWhite">
|
||
<image class="voucherPop-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/04/17/f4a3c45fe9aa7db143a362fc5b13b31d.png" mode="widthFix"></image>
|
||
<view class="voucherPop-title">
|
||
<view class="voucherPop-name">支付提示</view>
|
||
<view class="voucherPop-text">抱歉，此订单不支持线上支付，请上传打款凭证</view>
|
||
<view class="voucherPop-btn">
|
||
<view class="voucherPop-go" @click="cancelPay">
|
||
暂不支付
|
||
</view>
|
||
<view class="voucherPop-go voucherPop-up" @click="clickOpen">
|
||
上传凭证
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { entrustInfo, entrustPost } 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 : {},
|
||
|
||
disabled : false,
|
||
orderId : '', // 订单 ID
|
||
orderType : '', // 订单类型
|
||
orderPrice : '', // 订单金额
|
||
voucherState : false, // 上传凭证弹出
|
||
}
|
||
},
|
||
created() {
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask : true
|
||
})
|
||
|
||
// 获取综法咨询-详情
|
||
this.getBusiness();
|
||
|
||
// 省市区
|
||
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: {
|
||
// 综法咨询-详情
|
||
getBusiness(){
|
||
entrustInfo(this.$Route.query.entrustId).then(res => {
|
||
let froms = res.params
|
||
froms.map(val => {
|
||
if(val.type === 'checkbox'){
|
||
val.value = []
|
||
}else if(val.type === 'select'){
|
||
val.value = 0
|
||
}else{
|
||
val.value = ""
|
||
}
|
||
})
|
||
this.paramsArr = froms
|
||
}).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.$Route.query.entrustId, {
|
||
data: dataArr,
|
||
type: 'self',
|
||
channel: 'h5',
|
||
user_id: ''
|
||
}).then(res => {
|
||
this.disabled = true
|
||
this.expressSheet(res.entrust_order_id, res.order_type, res.can, res.price )
|
||
}).catch( err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 选择支付方式
|
||
expressSheet(id, type, can, price) {
|
||
this.orderId = id
|
||
this.orderType = type
|
||
this.orderPrice = price
|
||
uni.showActionSheet({
|
||
itemList: ['线上支付', '线下支付'],
|
||
success: sheetRes => {
|
||
if(sheetRes.tapIndex == 0) {
|
||
if(can.online) {
|
||
this.$Router.replace({name: 'FeePay', params: {orderId: id, orderType: type, price: price, payForm: 'entrust'}})
|
||
return
|
||
}
|
||
this.voucherState = true
|
||
} else if (sheetRes.tapIndex == 1) {
|
||
this.$Router.replace({name: 'VoucherOpen', params: {orderId: id, orderType: type, price: price}})
|
||
}
|
||
},
|
||
fail: sheetFail => {
|
||
uni.showToast({
|
||
title: '取消支付',
|
||
icon : 'none'
|
||
})
|
||
setTimeout(()=>{
|
||
this.$Router.replace({name: 'ExpandOrder'})
|
||
},3000)
|
||
}
|
||
})
|
||
},
|
||
|
||
// 取消支付
|
||
cancelPay() {
|
||
this.voucherState = false
|
||
uni.showToast({
|
||
title: '取消支付',
|
||
icon : 'none'
|
||
})
|
||
setTimeout(()=>{
|
||
this.$Router.replace({name: 'ExpandOrder'})
|
||
},3000)
|
||
},
|
||
|
||
// 上传凭证
|
||
clickOpen() {
|
||
this.voucherState = false
|
||
this.$Router.replace({name: 'VoucherOpen', params: {orderId: this.orderId, orderType: this.orderType, price: this.orderPrice}})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background-color: #111e4b;
|
||
width: 100vw;
|
||
height: 100%;
|
||
overflow-y: scroll;
|
||
position: fixed;
|
||
}
|
||
|
||
.top {
|
||
position: relative;
|
||
height: 180rpx;
|
||
.top-img {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 30%;
|
||
}
|
||
.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-depict-textarea {
|
||
background-color: #f7faff;
|
||
line-height: 90rpx;
|
||
border-radius: $radius-sm;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
width: 100%;
|
||
margin-bottom: 40rpx;
|
||
.textarea {
|
||
width: 100%;
|
||
padding: $padding 0;
|
||
box-sizing: border-box;
|
||
}
|
||
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: $radius-sm;
|
||
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%;
|
||
}
|
||
|
||
.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: $mian-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: $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> |