517 lines
14 KiB
Vue
517 lines
14 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- 银行基础信息 -->
|
|
<view class="block header-flex">
|
|
<image class="header-logo" :src="baseInfo.cover" mode="aspectFit"></image>
|
|
<view class="header-text">
|
|
<view class="title">{{baseInfo.title}}</view>
|
|
<view class="type">{{baseInfo.type}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 表单 -->
|
|
<view class="block form">
|
|
<block
|
|
v-for="(item, index) in params"
|
|
:key="index"
|
|
v-if="item.pre_key != null ? isShowBlock(params, item): true"
|
|
>
|
|
<view class="from-item" :class="item.flex == 50 ? 'from-item-50': 'from-item-100'">
|
|
<block v-if="item.type == 'text' || item.type == 'region'">
|
|
<label>
|
|
<text v-if="item.is_required === 1">*</text>{{item.title}}
|
|
<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
|
|
</label>
|
|
<input class="from-input" v-model="item.value" :type="item.type" :placeholder="item.placeholder || '请输入'">
|
|
</block>
|
|
<!-- mobile -->
|
|
<block v-if="item.type == 'price' || item.type == 'number' || item.type == 'mobile' || item.type == 'day'">
|
|
<label>
|
|
<text v-if="item.is_required === 1">*</text>{{item.title}}
|
|
<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
|
|
</label>
|
|
<input class="from-input" v-model="item.value" type="number" :placeholder="item.placeholder || '请输入'">
|
|
</block>
|
|
<!-- password -->
|
|
<block v-if="item.type == 'password'">
|
|
<label>
|
|
<text v-if="item.is_required === 1">*</text>{{item.title}}
|
|
<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
|
|
</label>
|
|
<input class="from-input" v-model="item.value" type="safe-password" password :placeholder="item.placeholder || '请输入'">
|
|
</block>
|
|
<!-- date -->
|
|
<block v-if="item.type == 'date'">
|
|
<label>
|
|
<text v-if="item.is_required === 1">*</text>{{item.title}}
|
|
<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
|
|
</label>
|
|
<picker class="from-picker" mode="date" :value="item.value" @change="item.value = $event.detail.value">
|
|
<view class="from-picker-text">
|
|
<view class="text nowrap" :class="{'text-gray': item.value == ''}">{{item.value || '选择日期'}}</view>
|
|
<u-icon class="icon" name="calendar" color="#999" size="20"></u-icon>
|
|
</view>
|
|
</picker>
|
|
</block>
|
|
<!-- radio -->
|
|
<block v-if="item.type == 'radio'">
|
|
<view class="from-radio">
|
|
<label>
|
|
<text v-if="item.is_required === 1">*</text>{{item.title}}
|
|
<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
|
|
</label>
|
|
<radio-group @change="item.value = $event.detail.value">
|
|
|
|
<label class="from-radio-labe" v-for="(radioItem, radioIndex) in item.options" :key="radioIndex">
|
|
<radio :value="radioIndex" :checked="item.value === radioIndex" color="#446EFE" /><text>{{radioItem}}</text>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</block>
|
|
<!-- checkbox -->
|
|
<block v-if="item.type == 'checkbox'">
|
|
<label>
|
|
<text v-if="item.is_required === 1">*</text>{{item.title}}
|
|
<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
|
|
</label>
|
|
<checkbox-group @change="item.value = $event.detail.value">
|
|
<label class="checkbox-item" v-for="(checkboxItem, checkboxIndex) in item.options">
|
|
<checkbox class="checkbox-input" :checked="isChecked(checkboxIndex, item.value)" :value="checkboxIndex" color="#446EFE"></checkbox>{{checkboxItem}}
|
|
</label>
|
|
</checkbox-group>
|
|
</block>
|
|
<!-- select -->
|
|
<block v-if="item.type == 'select'">
|
|
<label>
|
|
<text v-if="item.is_required === 1">*</text>{{item.title}}
|
|
<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
|
|
</label>
|
|
<picker class="from-picker" :range="item.options" :value="item.value" @change="item.value = $event.detail.value">
|
|
<view class="from-picker-text">
|
|
<view class="nowrap" :class="{'text-gray': item.value == 0}">{{item.options[item.value]}}</view>
|
|
<u-icon class="icon" name="arrow-down-fill" color="#999" size="10"></u-icon>
|
|
</view>
|
|
</picker>
|
|
</block>
|
|
<!-- textarea -->
|
|
<block v-if="item.type == 'textarea'">
|
|
<label>
|
|
<text v-if="item.is_required === 1">*</text>{{item.title}}
|
|
<uni-icons v-if="item.reason.description" class="from-icon" type="info" size="18" color="red" @click="modifyToast(item.reason.description)"></uni-icons>
|
|
</label>
|
|
<view class="from-textarea">
|
|
<textarea v-model="item.value" :maxlength="item.number" :placeholder="item.placeholder"></textarea>
|
|
<view class="from-number">{{item.value.length}}/{{item.number}}</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<!-- 提交数据 -->
|
|
<view class="form-btns">
|
|
<button size="default" @click="onSubmit('local')">暂时保存</button>
|
|
<button size="default" @click="onSubmit('serve')">提交审核</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { baseBase, updBaseBase, historyBank, cacheBank, setCacheBank } from '@/apis/interfaces/order.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
submitId: '',
|
|
baseInfo: {
|
|
cover: '',
|
|
title: '',
|
|
type : ''
|
|
},
|
|
params : []
|
|
};
|
|
},
|
|
computed: {
|
|
isChecked(){
|
|
return (val, vals) => {
|
|
let valsArr = vals || []
|
|
return valsArr.findIndex(v => v == val) >= 0
|
|
}
|
|
},
|
|
isShowBlock(){
|
|
return (params, item) => {
|
|
if(item.pre_key != null){
|
|
let paramsValue = params.find(v => v.key == item.pre_key)
|
|
return paramsValue.value == item.pre_value
|
|
}
|
|
return true
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
// 获取银行机构信息
|
|
this.getBaseBase()
|
|
},
|
|
methods: {
|
|
// 银行机构信息
|
|
getBaseBase(){
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
baseBase(this.$Route.query.itemId).then(res => {
|
|
let { item, params, business_order_user_bank_id } = res;
|
|
cacheBank(business_order_user_bank_id).then(StorageRes => {
|
|
this.baseInfo = {
|
|
cover: item.institution.cover,
|
|
title: item.institution.title,
|
|
type : item.business_type.title
|
|
}
|
|
this.submitId = business_order_user_bank_id
|
|
uni.hideLoading()
|
|
if(StorageRes === ''){
|
|
this.params = params
|
|
return
|
|
}
|
|
let storageParams = []
|
|
storageParams = params.map(val => {
|
|
if(val.type == 'checkbox' && StorageRes[val.key].length > 0){
|
|
val.value = StorageRes[val.key]
|
|
return val
|
|
}
|
|
if(val.type == 'select' && StorageRes[val.key] === null){
|
|
val.value = 0
|
|
return val
|
|
}
|
|
val.value = StorageRes[val.key] === null ? "" : StorageRes[val.key]
|
|
return val;
|
|
})
|
|
this.params = storageParams
|
|
}).catch(StorageErr => {
|
|
uni.showToast({
|
|
title: StorageErr.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 提交银行资料
|
|
onSubmit(type){
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
let subData = {};
|
|
let dataArr = [];
|
|
for(let val of this.params){
|
|
if(val.type == 'checkbox'){
|
|
subData[val.key] = val.value || []
|
|
} else subData[val.key] = val.value
|
|
}
|
|
if(type === 'local'){
|
|
setCacheBank(this.submitId, subData).then(res => {
|
|
uni.showToast({
|
|
title: '机构信息已暂存',
|
|
icon : 'none'
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
return
|
|
}
|
|
uni.hideLoading()
|
|
// 提交数据提示
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : '请确认资料无误，提交后在审核期间不可更改',
|
|
cancelText : '稍后',
|
|
confirmText : '确认无误',
|
|
success : ModalRes => {
|
|
if(ModalRes.confirm){
|
|
uni.showLoading({
|
|
title: '提交中...',
|
|
mask : true
|
|
})
|
|
// 组织提交数据
|
|
for(let key in subData){
|
|
dataArr.push({
|
|
key,
|
|
value: subData[key]
|
|
})
|
|
}
|
|
updBaseBase(this.submitId, {
|
|
data: dataArr
|
|
}).then(res => {
|
|
uni.hideLoading()
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : '机构资料已保存',
|
|
showCancel : false,
|
|
success : ModalRes => {
|
|
uni.removeStorageSync('institutions' + this.$Route.query.itemId)
|
|
this.$Router.back()
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 修改提示信息
|
|
modifyToast(text){
|
|
uni.showModal({
|
|
title : '驳回原因',
|
|
content : text || '-',
|
|
showCancel : false,
|
|
})
|
|
}
|
|
},
|
|
onBackPress() {
|
|
this.onSubmit('local')
|
|
},
|
|
onNavigationBarButtonTap() {
|
|
let { userBankId, isMy} = this.$Route.query
|
|
if(!isMy) {
|
|
uni.showToast({
|
|
title: '非个人订单无法使用账户信息',
|
|
icon : 'none'
|
|
})
|
|
return
|
|
}
|
|
if(!userBankId.user_bank_id) {
|
|
uni.showToast({
|
|
title: '暂无历史记录，无法使用账户历史信息，请手动填写',
|
|
icon : 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : '确认使用历史基础信息快捷提交审核吗？提交后在审核期间不可更改',
|
|
confirmText : '提交审核',
|
|
cancelText : '取消',
|
|
success : res => {
|
|
if(res.confirm){
|
|
uni.showLoading({
|
|
title: '提交中...',
|
|
mask : true
|
|
})
|
|
historyBank(this.submitId, userBankId.user_bank_id).then(res => {
|
|
uni.hideLoading()
|
|
uni.showModal({
|
|
title : '提示',
|
|
content : '资料已保存',
|
|
showCancel : false,
|
|
success : ModalRes => {
|
|
this.$Router.back()
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content{
|
|
padding-top: 1rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.block{
|
|
background: white;
|
|
margin: 30rpx 30rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
// 表单按钮
|
|
.form-btns{
|
|
padding: 0 15rpx 50rpx;
|
|
display: flex;
|
|
button[size="default"]{
|
|
width: calc(50% - 30rpx);
|
|
margin: 0 15rpx;
|
|
color: white;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
background-color: $main-color;
|
|
padding: 0;
|
|
border-radius: 20rpx;
|
|
font-size: 34rpx;
|
|
&:first-child{
|
|
line-height: 98rpx;
|
|
box-sizing: border-box;
|
|
background-color: white;
|
|
color: $main-color;
|
|
border:solid 1rpx $main-color;
|
|
}
|
|
&::after{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
// 表单
|
|
.form{
|
|
padding: 10rpx 15rpx 40rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: flex-start;
|
|
align-content: flex-start;
|
|
.from-item{
|
|
margin: 30rpx 15rpx 0;
|
|
label{
|
|
color: #111111;
|
|
font-size: 30rpx;
|
|
padding-bottom: 20rpx;
|
|
display: block;
|
|
& > text{
|
|
color: #FF0101;
|
|
margin-right: 5rpx;
|
|
display: inline-block;
|
|
}
|
|
.from-icon{
|
|
vertical-align: top;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
&.from-item-50{
|
|
width: calc(50% - 30rpx);
|
|
}
|
|
&.from-item-100{
|
|
width: calc(100% - 30rpx);
|
|
}
|
|
// input
|
|
.from-input{
|
|
background: #F6F6F6;
|
|
width: 100%;
|
|
height: 90rpx;
|
|
border-radius: 10rpx;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
font-size: 30rpx;
|
|
}
|
|
// textarea
|
|
.from-textarea{
|
|
padding: 20rpx 30rpx;
|
|
background: #F6F6F6;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-radius: 10rpx;
|
|
textarea{
|
|
font-size: 30rpx;
|
|
line-height: 50rpx;
|
|
height: 150rpx;
|
|
width: 100%;
|
|
}
|
|
.from-number{
|
|
padding-top: 20rpx;
|
|
text-align: right;
|
|
font-size: 30rpx;
|
|
color: gray;
|
|
}
|
|
}
|
|
// radio
|
|
.from-radio{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font-size: 30rpx;
|
|
height: 60rpx;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.from-radio-labe{
|
|
display: inline-block;
|
|
margin-left: 20rpx;
|
|
radio{
|
|
transform:scale(0.7)
|
|
}
|
|
text{
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
// picker
|
|
.from-picker{
|
|
.from-picker-text{
|
|
position: relative;
|
|
background: #F6F6F6;
|
|
width: 100%;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 30rpx;
|
|
padding: 0 30rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
& > .text{
|
|
width: calc(100% - 80rpx);
|
|
}
|
|
& > .text-gray{
|
|
color: gray;
|
|
}
|
|
}
|
|
}
|
|
// checkbox
|
|
.checkbox-item{
|
|
display: block;
|
|
color: #999999;
|
|
line-height: 70rpx;
|
|
.checkbox-input{
|
|
transform:scale(0.7);
|
|
vertical-align: middle;
|
|
margin-top: -5rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// header
|
|
.header-flex{
|
|
padding: 30rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.header-logo{
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
}
|
|
.header-text{
|
|
width: calc(100% - 128rpx);
|
|
.title{
|
|
font-weight: bold;
|
|
line-height: 40rpx;
|
|
font-size: 32rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.type{
|
|
font-size: 26rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
color: $main-color;
|
|
background: #ECF0FF;
|
|
display: inline-block;
|
|
padding: 0 15rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|