[抖火申请支付]
This commit is contained in:
630
pages/sheet/basic备份.vue
Normal file
630
pages/sheet/basic备份.vue
Normal file
@@ -0,0 +1,630 @@
|
||||
<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="@/static/imgs/basic_tips.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 ? '/static/imgs/addType_icon1.png' : '/static/imgs/addType_icon2.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>
|
||||
Reference in New Issue
Block a user