[抖火申请支付]

This commit is contained in:
2023-05-15 13:33:00 +08:00
commit c503bff7d2
294 changed files with 25144 additions and 0 deletions

792
pages/sheet/basic.vue Normal file
View File

@@ -0,0 +1,792 @@
<template>
<view class="content">
<view class="idcard">
<view class="idcardInfo-name">
{{userData.nickname}}
</view>
<view class="idcardInfo-label">
{{userData.username}}
</view>
</view>
<view class="idcardBorder">
<view class="idcardTitle">
添加基本信息
</view>
<!-- 信用卡信息 -->
<block v-if="serviceArr.length > 0">
<view class="idcardAdd" v-for="(item, index) in serviceArr" :key="index">
<view class="idcardBottom" :class="{active : item.openState}">
<!-- 机构 -->
<view class="idcardAdd-block">
<view class="idcardAdd-block-name">
<view class="idcardAdd-block-see">
<text>*</text>咨询类型
</view>
<view class="locationActive" v-if="!item.openState">
<text>{{item.institution[item.institutionIndex].title}}</text>
<text>{{item.fromType[item.fromIndex].title}}</text>
</view>
</view>
<view class="idcardAdd-block-write">
<picker :value="item.institutionIndex" @change="institutionChange($event, item, index)" :range="item.institution" range-key="title">
<view class="uni-input">{{item.institution[item.institutionIndex].title}}</view>
</picker>
<image src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
</view>
<view class="idcardAdd-block-remove" @click="onRemove(index)" v-if="serviceArr.length > 1">
<image src="@/static/imgs/removeIcon.png" mode="widthFix"></image>移出
</view>
</view>
<!-- 业务类型 -->
<view class="idcardAdd-block">
<view class="idcardAdd-block-name">
<view class="idcardAdd-block-see">
<text>*</text>业务类型
</view>
</view>
<view class="idcardAdd-block-write">
<picker class="idcardAdd-picker" :range="item.fromType" range-key="title" :value="item.fromIndex" @change="businessChange($event, item, index)">
<view class="institution-picker-text nowrap">{{item.fromType[item.fromIndex].title}}</view>
</picker>
<!-- <mouldPicker class="idcardAdd-picker" ref="child" :bank-list="item.fromType" :bank-value="item.fromIndex" @bankPicker="businessChange($event, item, index)"></mouldPicker> -->
<image src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
</view>
</view>
<!-- 表单部分 -->
<block v-for="(keyItem, keyIndex) in item.froms" :key="keyIndex" v-if="item.subVal[keyIndex.pre_key] == keyIndex.pre_value">
<view class="idcardAdd-block" v-if="keyItem.pre_key == null || keyItem.pre_value == item.subVal[keyItem.pre_key]">
<view class="idcardAdd-block-name">
<view class="idcardAdd-block-see">
<text>*</text>{{keyItem.title}}
</view>
</view>
<!-- 单输入框 -->
<view class="idcardAdd-block-write" v-if="keyItem.type === 'price' || keyItem.type === 'number' || keyItem.type === 'day' || keyItem.type === 'text'">
<mouldInput :blur-value="item.subVal[keyItem.key]" class="idcardAdd-input" :input-type="keyItem.type" @onValue="($event) => {item.subVal[keyItem.key] = $event}"></mouldInput>
</view>
<!-- 单选 -->
<view class="idcardAdd-aline" v-if="keyItem.type === 'radio'">
<radio-group @change="item.subVal[keyItem.key] = $event.detail.value">
<label class="idcardAdd-aline-write" v-for="(radioItem, radioIndex) in keyItem.options" :key="radioIndex">
<radio class="radio-input" color="#446EFE" style="transform:scale(.65)" :checked="radioIndex === item.subVal[keyItem.key]" :value="radioIndex"/>{{radioItem}}
</label>
</radio-group>
<!-- <mouldRadio :radio-list="keyItem.options" @onRadio="($event) => {item.subVal[keyItem.key] = $event}"></mouldRadio> -->
</view>
<!-- 多选 -->
<block v-if="keyItem.type === 'checkbox'">
<!-- <checkbox-group @change="item.subVal[keyItem.key] = $event.detail.value">
<view class="idcardAdd-multi-write" v-for="(letterItem, letterIndex) in keyItem.options" :key="letterIndex">
<checkbox :value="letterIndex.toString()" color="#4e7bfe" style="transform:scale(.6); margin-top: -3rpx;"/>
<text>{{letterItem}}</text>
</view>
</checkbox-group> -->
<mouldCheckbox :checkbox-list="keyItem.options" :checkbox-vlaue="item.subVal[keyItem.key] || []" @onCheckbox="($event) => {item.subVal[keyItem.key] = $event}"></mouldCheckbox>
</block>
<!-- 下拉框 -->
<view class="idcardAdd-block-write" v-if="keyItem.type === 'select'">
<picker class="idcardAdd-picker" :value="item.subVal[keyItem.key] ? item.subVal[keyItem.key] : '0'" :range="keyItem.options" @change="item.subVal[keyItem.key] = $event.detail.value">
<view class="uni-input" v-if="item.subVal[keyItem.key]">{{keyItem.options[item.subVal[keyItem.key]]}}</view>
<view class="uni-input" v-else>{{keyItem.options[0]}}</view>
</picker>
<image src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
</view>
<!-- 描述 -->
<view class="idcardAdd-block-write idcardAdd-depict" v-if="keyItem.type === 'textarea'">
<mouldText class="idcardAdd-depict-textarea" :blur-value="item.subVal[keyItem.key]" @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="onSubmit">
确认提交
</view>
</view>
<!-- 选择添加类型 -->
<view class="addType-back" v-if="addTypePop"></view>
<view class="addType-cont" v-if="addTypePop">
<view class="addType-title">
请选择业务类型
</view>
<block v-for="(item, index) in businessArr" :key="index">
<view class="create-type-item" :class="{'active': item.business_id == businessId}" @click="onAdd(item.business_id, item.title)">
<image class="create-type-icon" :src="item.cover_url" mode="aspectFill"></image>
<view class="create-type-text">
<view class="title nowrap">{{item.title || '-'}}</view>
<view class="submit nowrap">{{item.subtitle || '-'}}</view>
</view>
</view>
</block>
<image class="addType-close" src="/static/imgs/payClose.png" mode="aspectFill" @click="addTypePop = false"></image>
</view>
</view>
</template>
<script>
import { workIndex, workOne, workLevel, workStore } from '@/apis/interfaces/index'
import { userBasic } from '@/apis/interfaces/user'
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 {
businessArr: [],
businessId : '',
serviceArr : [],
addTypePop : false,
userData : '',
reminder : '', // 温馨提示
}
},
created() {
let { businessId, businessTitle } = this.$Route.query
this.getInstitution(businessId, businessTitle)
this.getBusiness()
},
onShow() {
// 获取用户姓名手机号性别
userBasic().then(res => {
this.userData = res
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
methods: {
// 获取主业务
getBusiness(){
workIndex().then(res => {
this.businessArr = res
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 获取主业务机构
getInstitution(businessId, businessTitle){
uni.showLoading({
title: '加载中...'
})
workOne(businessId).then(institutionArr => {
let forms = this.getForms(institutionArr[0].institution_id)
forms.then(val => {
this.servicePush( val, institutionArr, businessTitle, businessId )
})
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 获取业务类型
async getForms(businessId){
return await workLevel(businessId)
},
// 组织业务表单数据
servicePush( vals, institutionArr, businessTitle, businessId ){
let fromType = [],
fromsVal = {},
froms = vals[0].params
fromType = vals.map((val) => {
return {
type_id: val.type_id,
title : val.title
}
})
froms.map(val => {
fromsVal[val.key] = ''
})
// 新增卡片
this.serviceArr.push({
title : businessTitle,
institution : institutionArr,
allInstitution : vals,
institutionIndex: 0,
fromType : fromType,
openState : false,
fromIndex : 0,
froms : froms,
subVal : {
business_id : Number(businessId),
institution_id : institutionArr[0].institution_id,
type_id : fromType[0].type_id,
...fromsVal
}
})
this.serviceArr.forEach((item, index) => {
return index == (this.serviceArr.length - 1) ? item.openState = true : item.openState = false
})
},
// 机构变更更新业务
institutionChange(e, old, index){
let { value } = e.detail;
let businessId = old.subVal.business_id
// 获取机构的子业务类型
let forms = this.getForms(old.institution[value].institution_id)
forms.then(institutionVal => {
let newObj = old
let fromType = []
let params = institutionVal[0].params
let paramsVal = []
// 业务类型
fromType = institutionVal.map(val => {
return {
type_id: val.type_id,
title : val.title
}
})
// 提交字段
params.map(val => {
paramsVal[val.key] = ''
})
// 更新数据
newObj.allInstitution = institutionVal;
newObj.institutionIndex = value;
newObj.fromType = fromType;
newObj.fromIndex = 0;
newObj.froms = params;
newObj.subVal = {
business_id : old.subVal.business_id,
institution_id : old.institution[value].institution_id,
type_id : fromType[0].type_id,
...paramsVal
}
this.$set(this.serviceArr, index, newObj)
})
},
// 业务变更
businessChange(e, old, index){
let { value } = e.detail;
let businessId = old.subVal.business_id;
let allInstitution = old.allInstitution
let newObj = old
let params = allInstitution[value].params
let paramsVal = {}
params.map(val => {
paramsVal[val.key] = ''
})
newObj.fromIndex = value;
newObj.froms = params;
newObj.subVal = {
business_id : old.subVal.business_id,
institution_id : old.subVal.institution_id,
type_id : allInstitution[value].type_id,
...paramsVal
}
this.$set(this.serviceArr, index, newObj)
},
// 添加主业务
onAdd(id, title){
this.addTypePop = false
this.getInstitution(id, title)
},
// 列表展开
recordTap(index) {
var listData = this.serviceArr
var helpFlag = this.serviceArr[index].openState
listData.forEach((item) => {
item.openState = false
})
listData[index].openState = !helpFlag
this.serviceArr = listData
},
// 移出选项
onRemove(index){
this.serviceArr.splice(index, 1)
},
// 提交订单数据
onSubmit(){
let dataVal = this.serviceArr.map(val => {
return val.subVal
})
workStore({
type : 'self',
data : dataVal,
channel: 'h5'
}).then(res => {
this.$Router.push({name: 'sheetPay', params: {id: res.business_order_id}})
}).catch( err => {
uni.showToast({
title: err.message,
icon: "none"
})
})
},
// 多选
checkboxChange() {
}
}
}
</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: $mian-color;
color: #ffffff;
display: flex;
padding: $padding * 2 $padding $padding * 3;
.idcardInfo-name {
flex: 1;
}
}
.idcardTitle {
color: $mian-color;
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: 45rpx;
transition: .5s;
border-bottom: 100rpx solid transparent;
&.active {
height: auto;
}
}
.idcardAdd-block {
margin-bottom: $margin + 10;
position: relative;
.idcardAdd-block-name {
margin-bottom: $margin;
display: flex;
.idcardAdd-block-see {
color: $text-color;
font-weight: 600;
margin-right: $margin;
text {
color: $mian-color;
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;
width: 100%;
picker {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0 $padding;
box-sizing: border-box;
}
.idcardAdd-input {
width: 100%;
height: 100%;
display: flex;
}
.placeholderClass {
color: #999999;
}
image {
width: 24rpx;
height: 24rpx;
position: absolute;
top: $margin;
right: $margin;
}
}
&:last-child {
margin-bottom: 0;
}
.idcardAdd-block-remove {
background-color: #FBE7EE;
display: inline-block;
color: $mian-color;
position: absolute;
font-size: $title-size-sm;
padding: 0 $padding - 10;
line-height: 44rpx;
border-radius: 50rpx;
top: 0;
right: 0;
image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
vertical-align: -2rpx;
}
}
}
.open {
text-align: center;
position: absolute;
width: 100%;
background-color: #ffffff;
z-index: 2;
left: 0;
bottom: 0;
padding: $padding 0;
.open-text {
background-color: #FBE7EE;
display: inline-block;
color: $mian-color;
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-picker {
width: 100%;
height: 100%;
}
image {
width: 24rpx;
height: 24rpx;
position: absolute;
top: $margin;
right: $margin;
}
}
.idcardAdd-aline-name {
flex: 1;
text {
color: $mian-color;
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: #ff7331;
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%;
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);
font-size: $title-size-m;
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: $mian-color;
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: $mian-color;
color: $mian-color;
}
}
}
// 业务类型
.addType-back {
background-color: rgba(0, 0, 0, .6);
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
z-index: 99;
}
.addType-cont {
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
background-color: #ffffff;
padding: $padding $padding + 10;
box-sizing: border-box;
transition: .2s;
.addType-close {
position: absolute;
right: 30rpx;
top: 40rpx;
width: 38rpx;
height: 38rpx;
}
.addType-title {
line-height: 60rpx;
margin-bottom: $margin + 10;
font-size: $title-size + 2;
}
.addType-type {
padding: $padding;
box-sizing: border-box;
}
.create-type-item {
border-radius: $radius-m;
padding: $padding;
box-sizing: border-box;
margin-bottom: 30rpx;
border:solid 1rpx #f8f8f8;
box-sizing: border-box;
display: flex;
align-items: center;
box-shadow: 0 0 5rpx rgba(0, 0, 0, .05);
position: relative;
.create-type-icon{
width: 88rpx;
height: 88rpx;
margin-right: $margin;
background-color: white;
border-radius: $radius;
}
.create-type-text{
line-height: 50rpx;
.title{
font-size: 30rpx;
}
.submit{
color: gray;
font-size: 26rpx;
}
}
}
.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;
}
}
}
}
// 收起定位样式
.locationActive {
display: inline-block;
text {
display: inline-block;
background-color: #FFF7EB;
color: #FBAF3B !important;
font-weight: normal;
font-size: $title-size-sm;
margin-left: $margin - 10;
border-radius: $radius*3;
padding: 0 $padding - 10 !important;
height: 48rpx;
line-height: 48rpx;
}
}
</style>