536 lines
14 KiB
Vue
536 lines
14 KiB
Vue
<template>
|
||
<view class="content">
|
||
<block v-if="serviceArr.length > 0">
|
||
<view class="block" v-for="(item, index) in serviceArr" :key="index">
|
||
<view class="block-title">
|
||
{{item.title}}
|
||
<view class="block-remove" @click="onRemove(index)" v-if="serviceArr.length > 1">
|
||
<u-icon class="block-remove-icon" size="15" color="#446EFE" name="minus-circle"></u-icon>移出
|
||
</view>
|
||
</view>
|
||
<!-- 机构 -->
|
||
<view class="block-item">
|
||
<label class="block-item-label"><text>*</text>机构</label>
|
||
<!-- <picker :range="item.institution" range-key="title" :value="item.institutionIndex" @change="institutionChange($event, item, index)">
|
||
<view class="institution-picker">
|
||
<view class="institution-picker-text nowrap">{{item.institution[item.institutionIndex].title}}</view>
|
||
<u-icon size="12" color="#999" name="arrow-down-fill"></u-icon>
|
||
</view>
|
||
</picker> -->
|
||
<view class="institution-picker" @click="onShowInstitution(item.institution, item, index)">
|
||
<view class="institution-picker-text nowrap">{{item.institution[item.institutionIndex].title}}</view>
|
||
<u-icon size="12" color="#999" name="arrow-down-fill"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- 业务类型 -->
|
||
<view class="block-item">
|
||
<label class="block-item-label"><text>*</text>业务类型</label>
|
||
<picker :range="item.fromType" range-key="title" :value="item.fromIndex" @change="businessChange($event, item, index)">
|
||
<view class="institution-picker">
|
||
<view class="institution-picker-text nowrap">{{item.fromType[item.fromIndex].title}}</view>
|
||
<u-icon size="12" color="#999" name="arrow-down-fill"></u-icon>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<!-- 表单信 -->
|
||
<view
|
||
class="block-item"
|
||
v-for="(formItem, formIndex) in item.froms"
|
||
:key="formIndex"
|
||
v-if="item.subVal[formItem.pre_key] == formItem.pre_value"
|
||
>
|
||
<block v-if="formItem.type == 'price' || formItem.type == 'number' || formItem.type == 'day'">
|
||
<label class="block-item-label"><text v-if="formItem.is_required == 1">*</text>{{formItem.title}}</label>
|
||
<view class="inputs-flex">
|
||
<input
|
||
class="input"
|
||
v-model="item.subVal[formItem.key]"
|
||
:type="formItem.type == 'price' ? 'digit': 'number'"
|
||
:placeholder="'请输入' + formItem.title"
|
||
>
|
||
<text class="unit" v-if="formItem.type == 'price'">元</text>
|
||
<text class="unit" v-if="formItem.type == 'number' || formItem.type == 'day'">天</text>
|
||
</view>
|
||
</block>
|
||
<block v-if="formItem.type == 'radio'">
|
||
<view class="radio-flex">
|
||
<view class="radio-title"><text v-if="formItem.is_required == 1">*</text>{{formItem.title}}</view>
|
||
<radio-group @change="item.subVal[formItem.key] = $event.detail.value">
|
||
<label class="radio-label" v-for="(radioItem, radioIndex) in formItem.options" :key="radioIndex">
|
||
<radio class="radio-input" color="#446EFE" :checked="radioIndex === item.subVal[formItem.key]" :value="radioIndex"/>{{radioItem}}
|
||
</label>
|
||
</radio-group>
|
||
</view>
|
||
</block>
|
||
<block v-if="formItem.type == 'checkbox'">
|
||
<label class="block-item-label"><text v-if="formItem.is_required == 1">*</text>{{formItem.title}}(可多选)</label>
|
||
<checkbox-group @change="item.subVal[formItem.key] = $event.detail.value">
|
||
<label class="checkbox-item" v-for="(checkboxItem, checkboxIndex) in formItem.options">
|
||
<checkbox class="checkbox-input" :value="checkboxIndex" color="#446EFE"></checkbox>{{checkboxItem}}
|
||
</label>
|
||
</checkbox-group>
|
||
</block>
|
||
<block v-if="formItem.type == 'select'">
|
||
<label class="block-item-label"><text v-if="formItem.is_required == 1">*</text>{{formItem.title}}</label>
|
||
<picker :range="formItem.options" :value="item.subVal[formItem.key]" @change="item.subVal[formItem.key] = $event.detail.value">
|
||
<view class="institution-picker">
|
||
<view class="institution-picker-text nowrap" :class="{'institution-picker-gray': item.subVal[formItem.key] == 0}">{{formItem.options[item.subVal[formItem.key]]}}</view>
|
||
<u-icon size="12" color="#999" name="arrow-down-fill"></u-icon>
|
||
</view>
|
||
</picker>
|
||
</block>
|
||
<block v-if="formItem.type == 'textarea'">
|
||
<label class="block-item-label"><text v-if="formItem.is_required == 1">*</text>{{formItem.title}}</label>
|
||
<textarea
|
||
class="textarea"
|
||
:placeholder="'请输入' + formItem.title"
|
||
v-model="item.subVal[formItem.key]"
|
||
></textarea>
|
||
</block>
|
||
<block v-if="formItem.type == 'text'">
|
||
<label class="block-item-label"><text v-if="formItem.is_required == 1">*</text>{{formItem.title}}</label>
|
||
<view class="inputs-flex">
|
||
<input
|
||
class="text-input"
|
||
v-model="item.subVal[formItem.key]"
|
||
:placeholder="'请输入' + formItem.title"
|
||
>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view class="footer">
|
||
<view class="footer-text">温馨提示：为了匹配最准确方案，请如实填写信息</view>
|
||
<view class="footer-flex">
|
||
<button @click="onAdd">添加新信息</button>
|
||
<button @click="onSubmit">提交</button>
|
||
</view>
|
||
</view>
|
||
<!-- 机构弹出层 -->
|
||
<oct-mechanism-picker
|
||
ref="institutionPicker"
|
||
title="选择办理机构"
|
||
:columns="columns"
|
||
@choose="institutionChange"
|
||
/>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { institution, business, institutionType, submitStore } from '@/apis/interfaces/business.js';
|
||
import { octpicker } from '@/components/oct-picker.vue'
|
||
export default {
|
||
components: { octpicker },
|
||
data() {
|
||
return {
|
||
columns : [],
|
||
businessArr: [],
|
||
serviceUser: '',
|
||
serviceArr : [],
|
||
old : {},
|
||
cIndex : 0
|
||
};
|
||
},
|
||
created() {
|
||
let { businessId, serviceUser, businessTitle } = this.$Route.query
|
||
this.getInstitution(businessId, businessTitle)
|
||
this.getBusiness()
|
||
this.serviceUser = serviceUser
|
||
},
|
||
methods: {
|
||
// 显示选择机构
|
||
onShowInstitution(e, item, index){
|
||
this.columns = e
|
||
this.old = item
|
||
this.cIndex = index
|
||
this.$refs.institutionPicker.open()
|
||
},
|
||
// 移出选项
|
||
onRemove(index){
|
||
this.serviceArr.splice(index, 1)
|
||
},
|
||
// 获取主业务
|
||
getBusiness(){
|
||
business().then(res => {
|
||
this.businessArr = res
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
// 获取主业务机构
|
||
getInstitution(businessId, businessTitle){
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
})
|
||
institution(businessId).then(institutionArr => {
|
||
let forms = this.getForms(institutionArr[0].institution_id)
|
||
forms.then(val => {
|
||
this.servicePush( val, institutionArr, businessTitle, businessId )
|
||
})
|
||
uni.hideLoading()
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
// 获取业务类型
|
||
async getForms(businessId){
|
||
|
||
return await institutionType(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 => {
|
||
if(val.type === 'checkbox'){
|
||
fromsVal[val.key] = []
|
||
}else if(val.type === 'select'){
|
||
fromsVal[val.key] = 0
|
||
}else {
|
||
fromsVal[val.key] = ''
|
||
}
|
||
})
|
||
// 新增卡片
|
||
this.serviceArr.push({
|
||
title : businessTitle,
|
||
institution : institutionArr,
|
||
allInstitution : vals,
|
||
institutionIndex: 0,
|
||
fromType : fromType,
|
||
fromIndex : 0,
|
||
froms : froms,
|
||
subVal : {
|
||
business_id : Number(businessId),
|
||
institution_id : institutionArr[0].institution_id,
|
||
type_id : fromType[0].type_id,
|
||
...fromsVal
|
||
}
|
||
})
|
||
},
|
||
// 机构变更更新业务
|
||
institutionChange(e){
|
||
let index = this.cIndex
|
||
let old = this.old
|
||
let value = old.institution.findIndex(val => val.institution_id === e.val.institution_id);
|
||
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 => {
|
||
if(val.type === 'checkbox'){
|
||
paramsVal[val.key] = []
|
||
}else if(val.type === 'select'){
|
||
paramsVal[val.key] = 0
|
||
}else {
|
||
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 => {
|
||
if(val.type === 'checkbox'){
|
||
paramsVal[val.key] = []
|
||
}else if(val.type === 'select'){
|
||
paramsVal[val.key] = 0
|
||
}else {
|
||
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(){
|
||
let businessTitle = this.businessArr.map(val => {
|
||
return val.title
|
||
})
|
||
uni.showActionSheet({
|
||
itemList: businessTitle,
|
||
success : res=> {
|
||
let { tapIndex } = res;
|
||
this.getInstitution(this.businessArr[tapIndex].business_id, businessTitle[tapIndex])
|
||
}
|
||
})
|
||
},
|
||
// 提交订单数据
|
||
onSubmit(){
|
||
let dataVal = this.serviceArr.map(val => {
|
||
return val.subVal
|
||
})
|
||
if(this.serviceUser == ''){
|
||
uni.showToast({
|
||
title: '服务用户不能为空',
|
||
icon : 'none'
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '提交中...',
|
||
mask : true
|
||
})
|
||
submitStore({
|
||
type : this.$Route.query.createType,
|
||
user_id : this.serviceUser,
|
||
data : dataVal,
|
||
channel : 'app'
|
||
}).then(res => {
|
||
uni.showModal({
|
||
title : '提示',
|
||
content : '订单已创建，请尽快提醒用户完善用户资料',
|
||
showCancel : false,
|
||
success : () => {
|
||
this.$Router.back()
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content{
|
||
padding-top: 20rpx;
|
||
padding-bottom: 260rpx;
|
||
}
|
||
// 表单模块
|
||
.block{
|
||
background: white;
|
||
border-radius: $radius;
|
||
margin: 0 30rpx 20rpx;
|
||
padding: 30rpx;
|
||
.block-title{
|
||
font-weight: bold;
|
||
line-height: 60rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.block-remove{
|
||
background: rgba(68, 110, 254, .1);
|
||
color: #446EFE;
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
border-radius: 25rpx;
|
||
padding: 0 25rpx 0 20rpx;
|
||
&-icon{
|
||
display: inline-block;
|
||
margin-right: 10rpx;
|
||
margin-bottom: 5rpx;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
.block-item{
|
||
padding: 15rpx 0;
|
||
&-label{
|
||
padding-bottom: 10rpx;
|
||
display: block;
|
||
font-size: 30rpx;
|
||
color: #111111;
|
||
text{
|
||
color: #FF0000;
|
||
font-size: 28rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
// picker
|
||
.institution-picker{
|
||
background: #F6F6F6;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
border-radius: 10rpx;
|
||
padding: 0 30rpx 0 30rpx;
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
&-text{
|
||
width: calc( 100% - 60rpx );
|
||
}
|
||
&-gray{
|
||
color: gray;
|
||
}
|
||
}
|
||
// input
|
||
.inputs-flex{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.input{
|
||
background: #F6F6F6;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
border-radius: 10rpx;
|
||
padding: 0 30rpx 0 30rpx;
|
||
font-size: 30rpx;
|
||
box-sizing: border-box;
|
||
width: calc( 100% - 64rpx );
|
||
}
|
||
.unit{
|
||
width: 64rpx;
|
||
text-align: right;
|
||
}
|
||
.text-input{
|
||
background: #F6F6F6;
|
||
height: 84rpx;
|
||
line-height: 84rpx;
|
||
border-radius: 10rpx;
|
||
padding: 0 30rpx 0 30rpx;
|
||
font-size: 30rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
}
|
||
}
|
||
// radio
|
||
.radio-flex{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 10rpx 0;
|
||
.radio-title{
|
||
font-size: 30rpx;
|
||
color: #111111;
|
||
text{
|
||
color: #FF0000;
|
||
font-size: 28rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
.radio-label{
|
||
margin-left: 20rpx;
|
||
color: #999999;
|
||
.radio-input{
|
||
transform:scale(0.7);
|
||
}
|
||
}
|
||
}
|
||
// checkbox
|
||
.checkbox-item{
|
||
display: block;
|
||
color: #999999;
|
||
line-height: 70rpx;
|
||
.checkbox-input{
|
||
transform:scale(0.7);
|
||
vertical-align: middle;
|
||
margin-top: -5rpx;
|
||
}
|
||
}
|
||
// textarea
|
||
.textarea{
|
||
background: #F6F6F6;
|
||
width: 100%;
|
||
height: 200rpx;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx 30rpx;
|
||
font-size: 30rpx;
|
||
line-height: 40rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
// footer
|
||
.footer{
|
||
box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, .05);
|
||
background-color: white;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 99;
|
||
padding: 30rpx 30rpx 70rpx;
|
||
.footer-text{
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #FEA044;
|
||
line-height: 40rpx;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
.footer-flex{
|
||
display: flex;
|
||
margin: 0 -10rpx;
|
||
button{
|
||
width: calc(50% - 20rpx);
|
||
margin: 0 10rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
border-radius: $radius-lg;
|
||
font-size: 32rpx;
|
||
border:solid 1rpx $main-color;
|
||
background-color: white;
|
||
color: $main-color;
|
||
&::after{
|
||
border: none;
|
||
}
|
||
&:last-child{
|
||
background-color: $main-color;
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|