工作台
This commit is contained in:
唐明明
427
pages/work/perfectInstitutions.vue
Normal file
427
pages/work/perfectInstitutions.vue
Normal file
@@ -0,0 +1,427 @@
|
||||
<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 == 'price' || item.type == 'number' || 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 == 'mobile'">
|
||||
<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">{{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">{{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>
|
||||
<textarea class="from-textarea" v-model="item.value" :placeholder="item.placeholder"></textarea>
|
||||
</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 } from '@/apis/interfaces/order.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
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.orderId).then(res => {
|
||||
let { item, params } = res;
|
||||
uni.getStorage({
|
||||
key : 'institutions' + this.$Route.query.orderId,
|
||||
success : StorageRes => {
|
||||
let { data } = StorageRes
|
||||
let storageParams = []
|
||||
storageParams = params.map(val => {
|
||||
if(val.type == 'checkbox' && data[val.key].length > 0){
|
||||
val.value = data[val.key]
|
||||
return val
|
||||
}
|
||||
val.value = data[val.key]
|
||||
return val
|
||||
})
|
||||
this.params = storageParams
|
||||
},
|
||||
fail : StorageErr => {
|
||||
this.params = params
|
||||
},
|
||||
complete: () => {
|
||||
this.baseInfo = {
|
||||
cover: item.institution.cover,
|
||||
title: item.institution.title,
|
||||
type : item.business_type.title
|
||||
}
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}).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'){
|
||||
uni.setStorage({
|
||||
key : 'institutions' + this.$Route.query.orderId,
|
||||
data : subData,
|
||||
success : res => {
|
||||
uni.showToast({
|
||||
title: '表单信息已存储',
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
// 组织提交数据
|
||||
for(let key in subData){
|
||||
dataArr.push({
|
||||
key,
|
||||
value: subData[key]
|
||||
})
|
||||
}
|
||||
updBaseBase(this.$Route.query.orderId, {
|
||||
data: dataArr
|
||||
}).then(res => {
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : '机构资料已保存',
|
||||
showCancel : false,
|
||||
success : ModalRes => {
|
||||
uni.removeStorageSync('institutions' + this.$Route.query.orderId)
|
||||
this.$Router.back()
|
||||
}
|
||||
})
|
||||
uni.hideLoading()
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 修改提示信息
|
||||
modifyToast(text){
|
||||
uni.showModal({
|
||||
title : '驳回原因',
|
||||
content : text || '-',
|
||||
showCancel : false,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
font-size: 30rpx;
|
||||
line-height: 50rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
// 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>
|
||||
Reference in New Issue
Block a user