630 lines
16 KiB
Vue
630 lines
16 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="idcard">
|
||
<view class="idcardInfo-name">
|
||
张曼曼
|
||
</view>
|
||
<view class="idcardInfo-label">
|
||
13836142496
|
||
</view>
|
||
</view>
|
||
|
||
<view class="idcardBorder">
|
||
<view class="idcardTitle">
|
||
添加基本信息
|
||
</view>
|
||
<!-- 信用卡信息 -->
|
||
<block v-if="publicArr.length > 0">
|
||
<view class="idcardAdd" v-for="(item, index) in publicArr" :key="index">
|
||
<!-- :class="{active : item.openState}" -->
|
||
<view class="idcardBottom active">
|
||
<view class="idcardAdd-block">
|
||
<view class="idcardAdd-block-name" @click="lsa">
|
||
<text>*</text>银行
|
||
</view>
|
||
<view class="idcardAdd-block-write">
|
||
<picker class="idcardAdd-picker" @change="bankChange($event, index)" :range="workOneArr" range-key="title">
|
||
<view class="uni-input">{{workOneArr[workOneIndex].title}}</view>
|
||
</picker>
|
||
<image src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<view class="idcardAdd-block" v-if="item.institution.length > 0">
|
||
<view class="idcardAdd-block-name">
|
||
<text>*</text>业务类型
|
||
</view>
|
||
<view class="idcardAdd-block-write">
|
||
<mouldPicker class="idcardAdd-picker" ref="child" :bank-list="item.institution" @bankPicker="workChange($event, index)"></mouldPicker>
|
||
<image src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<block v-for="(keyItem, keyIndex) in item.rootData" :key="keyIndex">
|
||
<view class="idcardAdd-block">
|
||
<view class="idcardAdd-block-name" v-if="keyItem.pre_key == null || keyItem.pre_value == item.subVal[keyItem.pre_key]">
|
||
<text>*</text>{{keyItem.title}}
|
||
</view>
|
||
|
||
<!-- 单输入框 -->
|
||
<block v-if="keyItem.pre_key == null || keyItem.pre_value == item.subVal[keyItem.pre_key]">
|
||
<view class="idcardAdd-block-write" v-if="keyItem.type === 'price' || keyItem.type === 'number'">
|
||
<!-- <mouldInput class="idcardAdd-input" @onValue="($event) => {item.subVal[keyItem.key] = $event.detail.value}"></mouldInput> -->
|
||
<mouldInput class="idcardAdd-input" :input-type="keyItem.type" @onValue="($event) => {item.subVal[keyItem.key] = $event}"></mouldInput>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 单选 -->
|
||
<view class="idcardAdd-aline" v-if="keyItem.type === 'radio'">
|
||
<mouldRadio :radio-list="keyItem.options" @onRadio="($event) => {item.subVal[keyItem.key] = $event}"></mouldRadio>
|
||
</view>
|
||
|
||
<!-- 多选 -->
|
||
<block v-if="keyItem.type === 'checkbox'">
|
||
<mouldCheckbox :checkbox-list="keyItem.options" @onCheckbox="($event) => {item.subVal[keyItem.key] = $event}"></mouldCheckbox>
|
||
</block>
|
||
|
||
<!-- 描述 -->
|
||
<view class="idcardAdd-block-write idcardAdd-depict" v-if="keyItem.type === 'textarea'">
|
||
<mouldText class="idcardAdd-depict-textarea" @onTextarea="($event) => {item.subVal[keyItem.key] = $event}"></mouldText>
|
||
</view>
|
||
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<view class="open">
|
||
<view class="open-text" @click="recordTap(index)">
|
||
<image src="@/static/imgs/openArrow.png" mode="widthFix" :class="{active : item.openState}"></image>{{item.openState ? '收起' : '展开'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="noContent">
|
||
<image class="noContent-img" src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/010d64c0ddbfd5e02030502a39109e8f.png" mode="widthFix"></image>
|
||
<view class="noContent-name">
|
||
什么都没有，好无聊......
|
||
</view>
|
||
<view class="noContent-btn" @click="addTypePop = true">
|
||
添加新信息
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="reminder">
|
||
<image class="reminder-img" src="@/static/imgs/reminderIcon.png"></image>
|
||
<view class="reminder-text">温馨提示：为给您匹配最准确方案，请您如实填写以上信息！</view>
|
||
</view>
|
||
<view class="idcardBtn">
|
||
<view class="idcardBtn-go active" @click="addTypePop = true">
|
||
添加新信息
|
||
</view>
|
||
<view class="idcardBtn-go" @click="basicSubmit">
|
||
确认提交
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择添加类型 -->
|
||
<view class="addType-back" v-if="addTypePop"></view>
|
||
<view class="addType-cont" v-if="addTypePop">
|
||
<view class="addType-white">
|
||
<view class="addType-title">
|
||
请选择业务类型
|
||
</view>
|
||
<scroll-view class="addType-list" scroll-x="true" show-scrollbar="false">
|
||
<view class="addType-item" :class="{active : workId == item.business_id}" @click="addClick(item.business_id)" v-for="(item, index) in workArr" :key="index">
|
||
<image class="addType-img" :src="item.business_id == 1 ? 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/9a6ac5384b1c3003fe1c139b00c1335c.png' : 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/78e39daf1b6ce98ada59aa7af16096da.png'" mode="widthFix"></image>
|
||
<view class="addType-name">
|
||
{{item.title}}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="addType-btn">
|
||
<view class="addType-labor" @click="addTypePop = false">
|
||
取消
|
||
</view>
|
||
<view class="addType-labor" @click="addCard">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { workIndex, workOne, workLevel, workStore } from '@/apis/interfaces/index'
|
||
|
||
import mouldCheckbox from '@/components/mould-checkbox.vue'
|
||
import mouldInput from '@/components/mould-input.vue'
|
||
import mouldRadio from '@/components/mould-radio.vue'
|
||
import mouldText from '@/components/mould-text.vue'
|
||
import mouldPicker from '@/components/mould-picker.vue'
|
||
export default {
|
||
components: {
|
||
mouldCheckbox,
|
||
mouldInput,
|
||
mouldRadio,
|
||
mouldText,
|
||
mouldPicker
|
||
},
|
||
data() {
|
||
return {
|
||
workArr : [], // 主业务数组
|
||
workId : 1, // 主业务类型 1为信用卡 2为网贷
|
||
addTypePop : false, // 业务类型弹框
|
||
wayState : false, // 催收状况是否显示
|
||
// 主业务机构选项
|
||
workOneArr : [],
|
||
workOneIndex : 0,
|
||
|
||
// 二级业务类型选项
|
||
workTwoIndex : 0,
|
||
|
||
// 添加信息卡片数组
|
||
publicArr : [],
|
||
|
||
business_orderId: '' // 临时方案id
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 获取主业务
|
||
this.workData();
|
||
},
|
||
methods: {
|
||
// 主业务数据
|
||
workData() {
|
||
workIndex().then(res => {
|
||
this.workArr = res
|
||
}).catch( err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 选择主业务类型 -- 弹出
|
||
addClick(e) {
|
||
this.workId = e
|
||
},
|
||
|
||
// 添加业务卡片
|
||
addCard(){
|
||
// 获取主业务机构
|
||
this.oneData();
|
||
},
|
||
|
||
// 主业务机构
|
||
oneData(){
|
||
workOne(this.workId).then(res => {
|
||
// res.unshift({
|
||
// institution_id: 0,
|
||
// title: "请选择"
|
||
// })
|
||
this.addTypePop = false;
|
||
this.workOneArr = res;
|
||
const dataArrItem = res[this.workOneIndex]
|
||
this.twoData(dataArrItem.institution_id);
|
||
}).catch( err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 二级业务类型
|
||
twoData(id) {
|
||
workLevel(id).then(res => {
|
||
const dataArrItem = res[this.workTwoIndex].params
|
||
let dataKeys = {
|
||
rootData : dataArrItem,
|
||
subVal : {}, // 活数据 -填写
|
||
institution : res,// 业务列表
|
||
typeId : res[this.workTwoIndex].type_id, // 业务类型id
|
||
bankId : this.workOneArr[this.workOneIndex].institution_id, // 银行/机构-类型
|
||
businessId : this.workId
|
||
}
|
||
dataArrItem.map(val => {
|
||
dataKeys.subVal[val.key] = '';
|
||
})
|
||
this.publicArr.push(dataKeys)
|
||
}).catch( err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 业务选择
|
||
bankChange(e, index) {
|
||
this.workTwoIndex = e.detail.value
|
||
},
|
||
|
||
// 机构/银行选择 子组件返回值
|
||
bankShow(e, index) {
|
||
let { detail } = e;
|
||
|
||
},
|
||
|
||
// 删除卡片
|
||
removeCard(index){
|
||
if(index === 0) return
|
||
this.symptomsArr.splice(index, 1)
|
||
},
|
||
|
||
// 展开全部
|
||
recordTap(index){
|
||
// let itemObj = this.symptomsArr[index]
|
||
// itemObj.recordShow = !itemObj.recordShow
|
||
},
|
||
|
||
// 提交信息
|
||
basicSubmit(){
|
||
let newArr = this.publicArr.map(val => {
|
||
val.subVal.institution_id = val.bankId
|
||
val.subVal.type_id = val.typeId
|
||
val.subVal.business_id = val.businessId
|
||
return val.subVal
|
||
})
|
||
|
||
workStore({
|
||
type: 'self',
|
||
data: newArr
|
||
}).then(res => {
|
||
// 临时的id,为了做跳转
|
||
this.$Router.push({name: 'sheetEstimate', params: {id: res.business_order_id}})
|
||
// this.business_orderId = res.business_order_id
|
||
}).catch( err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
// this.$Router.push({name: 'sheetEstimate'})
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.idcardBorder {
|
||
border-bottom: 200rpx solid transparent;
|
||
background-color: #ffffff;
|
||
border-radius: $radius * 2 $radius * 2 0 0;
|
||
position: relative;
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
top: -100rpx;
|
||
}
|
||
.idcard {
|
||
margin-bottom: $margin * 2;
|
||
background-color: #446EFE;
|
||
color: #ffffff;
|
||
display: flex;
|
||
padding: $padding * 2 $padding $padding * 3;
|
||
.idcardInfo-name {
|
||
flex: 1;
|
||
}
|
||
}
|
||
.idcardTitle {
|
||
color: #446EFE;
|
||
font-size: $title-size + 4;
|
||
font-weight: 600;
|
||
margin-bottom: $margin;
|
||
}
|
||
.idcardAdd {
|
||
background-color: #ffffff;
|
||
box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
|
||
border-radius: $radius;
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
margin-bottom: $margin;
|
||
overflow: hidden;
|
||
position: relative;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.idcardAdd-title {
|
||
display: flex;
|
||
.idcardAdd-name {
|
||
flex: 1;
|
||
color: #446EFE;
|
||
font-weight: 600;
|
||
}
|
||
.idcardAdd-tel {
|
||
display: flex;
|
||
font-size: $title-size-sm;
|
||
background-color: #ffeded;
|
||
color: #FF0000;
|
||
border-radius: $radius;
|
||
padding: 0 15rpx 0 10rpx;
|
||
line-height: 44rpx;
|
||
.idcardAdd-btn {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin: 7rpx 6rpx 0 0;
|
||
}
|
||
}
|
||
}
|
||
.idcardBottom {
|
||
height: 340rpx;
|
||
transition: .5s;
|
||
border-bottom: 100rpx solid transparent;
|
||
&.active {
|
||
height: auto;
|
||
}
|
||
}
|
||
.idcardAdd-block {
|
||
margin-top: $margin + 10;
|
||
position: relative;
|
||
.idcardAdd-block-name {
|
||
margin-bottom: $margin - 10;
|
||
color: #111111;
|
||
text {
|
||
color: #FF0000;
|
||
padding-right: 10rpx;
|
||
}
|
||
}
|
||
.idcardAdd-block-write {
|
||
background-color: #F6F6F6;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
border-radius: $radius-sm;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
display: flex;
|
||
.idcardAdd-picker {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.idcardAdd-input {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
}
|
||
.placeholderClass {
|
||
color: #999999;
|
||
}
|
||
image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
position: absolute;
|
||
top: $margin;
|
||
right: $margin;
|
||
}
|
||
}
|
||
}
|
||
.open {
|
||
text-align: center;
|
||
margin-top: $margin;
|
||
position: absolute;
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
z-index: 2;
|
||
left: 0;
|
||
bottom: 0;
|
||
padding: $padding 0;
|
||
.open-text {
|
||
background-color: #ecf0ff;
|
||
display: inline-block;
|
||
color: #446EFE;
|
||
padding: 0 $padding - 10;
|
||
line-height: 58rpx;
|
||
font-size: $title-size-m;
|
||
border-radius: $radius-sm;
|
||
image {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin-right: 10rpx;
|
||
transition: .2s;
|
||
&.active {
|
||
transform:rotate(180deg)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.idcardAdd-aline {
|
||
display: flex;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
.idcardAdd-aline-name {
|
||
flex: 1;
|
||
text {
|
||
color: #FF0000;
|
||
padding-right: 10rpx;
|
||
}
|
||
}
|
||
.idcardAdd-depict {
|
||
line-height: 28rpx !important;
|
||
height: auto !important;
|
||
position: relative;
|
||
.idcardAdd-depict-number {
|
||
position: absolute;
|
||
text-align: right;
|
||
bottom: $padding;
|
||
right: $padding;
|
||
color: #999999;
|
||
font-size: $title-size-sm;
|
||
}
|
||
.idcardAdd-depict-textarea {
|
||
padding: $padding 0;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
.noContent {
|
||
text-align: center;
|
||
padding-top: $padding * 5;
|
||
.noContent-img {
|
||
width: 43%;
|
||
margin: 0 auto;
|
||
}
|
||
.noContent-name {
|
||
line-height: 60rpx;
|
||
color: #999999;
|
||
font-size: $title-size-lg;
|
||
}
|
||
.noContent-btn {
|
||
display: inline-block;
|
||
background-color: #FEA044;
|
||
color: #ffffff;
|
||
border-radius: $radius * 5;
|
||
text-align: center;
|
||
font-size: $title-size-lg;
|
||
padding: 0 $padding + 10;
|
||
line-height: 78rpx;
|
||
margin-top: $margin + 10;
|
||
}
|
||
}
|
||
|
||
.reminder {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 150rpx;
|
||
background-color: #ffffff;
|
||
z-index: 10;
|
||
width: 100%;
|
||
height: 140rpx;
|
||
box-sizing: border-box;
|
||
padding: 25rpx $padding;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
color: #FEA044;
|
||
font-size: $title-size-lg;
|
||
border-bottom: 2rpx solid #f5f5f5;
|
||
.reminder-img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
.reminder-text {
|
||
width: calc(100% - 52rpx);
|
||
margin-left: 20rpx;
|
||
line-height: 42rpx;
|
||
}
|
||
}
|
||
|
||
.idcardBtn {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
background-color: #ffffff;
|
||
z-index: 9;
|
||
width: 100%;
|
||
height: 150rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
.idcardBtn-go {
|
||
width: calc(50% - 20rpx);
|
||
margin: $margin 10rpx;
|
||
background-color: #446EFE;
|
||
color: #ffffff;
|
||
border-radius: $radius-lg;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: $title-size;
|
||
text-align: center;
|
||
border: 2rpx solid #ffffff;
|
||
&.active {
|
||
background-color: #ffffff;
|
||
border-color: #446EFE;
|
||
color: #446EFE;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 业务类型
|
||
.addType-back {
|
||
background-color: rgba(0, 0, 0, .6);
|
||
position: fixed;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 99;
|
||
}
|
||
.addType-cont {
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-box-pack: center;
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
z-index: 100;
|
||
padding: 0 $padding * 2;
|
||
box-sizing: border-box;
|
||
.addType-white {
|
||
background-color: #ffffff;
|
||
border-radius: $radius-m;
|
||
padding: $padding 0;
|
||
.addType-title {
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
margin-bottom: $margin;
|
||
font-size: $title-size + 2;
|
||
}
|
||
.addType-list {
|
||
background-color: #fafafa;
|
||
padding: $padding + 10 $padding + 10 $padding;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
.addType-item {
|
||
display: inline-block;
|
||
border: 2rpx solid #f2f2f2;
|
||
overflow: hidden;
|
||
padding: $padding $padding + 10;
|
||
border-radius: $radius-m;
|
||
background-color: #ffffff;
|
||
margin-right: $margin + 10;
|
||
&.active {
|
||
border-color: #FEA044;
|
||
}
|
||
.addType-img {
|
||
width: 140rpx;
|
||
}
|
||
.addType-name {
|
||
margin-top: 10rpx;
|
||
color: #787878;
|
||
font-size: $title-size-m;
|
||
}
|
||
&.active {
|
||
.addType-name {
|
||
color: #FEA044;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.addType-btn {
|
||
display: flex;
|
||
padding: $padding + 10 $padding - 10 10rpx;
|
||
box-sizing: border-box;
|
||
.addType-labor {
|
||
flex: 2;
|
||
margin: 0 $margin - 10;
|
||
text-align: center;
|
||
background-color: #FEA044;
|
||
color: #ffffff;
|
||
border-radius: $radius-m;
|
||
line-height: 74rpx;
|
||
font-size: $title-size-lg;
|
||
border: 2rpx solid #FEA044;
|
||
&:first-child {
|
||
background-color: #ffffff;
|
||
color: #FEA044;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |