154 lines
6.0 KiB
Vue
154 lines
6.0 KiB
Vue
<template>
|
||
<!-- 该页码为填写信息的组件 -->
|
||
<!-- 只读文件 -->
|
||
<readOnlyInfo v-if="isDisable" ref="applyInfoRef" applyName="alipay" />
|
||
|
||
<view v-if="!isDisable">
|
||
<uni-collapse ref="collapse">
|
||
<uni-collapse-item title="经营信息" class="coll-title" :open="true">
|
||
<view class="content">
|
||
|
||
<JeePayForm text="产品类型" >
|
||
<label class="radio"><radio value="1" checked="true" style="transform: scale(0.6,0.6);" />当面付</label>
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="经营类目" >
|
||
<dataPicker :code="mccCode" :localdata="mccAli" @change="publicSelect($event, 'mccCode')" paramType="splicing" />
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="营业执照图片">
|
||
<JeepayUpLoad ocrFlag="license" :imgUrl="applyDetailInfo.licenseImg" @uploadSuccess="uploadSuccess($event, 'licenseImg')" @clear="clear('licenseImg')" />
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="营业执照编号" v-model:value="applyDetailInfo.licenseNo" />
|
||
|
||
<JeePayForm text="营业执照有效期截止">
|
||
<termOfValidity :defaultDate="applyDetailInfo.licenseEffectEnd" @publicSelect="publicSelect($event, 'licenseEffectEnd')" />
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="特殊资质照" >
|
||
<JeepayUpLoad :imgUrl="applyDetailInfo.specialLicenseImg" @uploadSuccess="uploadSuccess($event, 'specialLicenseImg')" @clear="clear('specialLicenseImg')" />
|
||
</JeePayForm>
|
||
|
||
</view>
|
||
</uni-collapse-item>
|
||
<uni-collapse-item title="门店信息" class="coll-title">
|
||
<view class="content">
|
||
|
||
<JeePayForm text="商户名称全称" v-model:value="applyDetailInfo.mchFullName" />
|
||
|
||
<JeePayForm text="商户地理位置" >
|
||
<dataPicker :code="areaCode" :localdata="address" @change="publicSelect($event, 'areaCode')" paramType="arr" />
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="商户详细地址" v-model:value="applyDetailInfo.address" />
|
||
|
||
<JeePayForm text="门头照">
|
||
<JeepayUpLoad :imgUrl="applyDetailInfo.storeOuterImg" @uploadSuccess="uploadSuccess($event, 'storeOuterImg')" @clear="clear('storeOuterImg')" />
|
||
</JeePayForm>
|
||
|
||
<JeePayForm text="店内环境照">
|
||
<JeepayUpLoad :imgUrl="applyDetailInfo.storeInnerImg" @uploadSuccess="uploadSuccess($event, 'storeInnerImg')" @clear="clear('storeInnerImg')" />
|
||
</JeePayForm>
|
||
|
||
</view>
|
||
</uni-collapse-item>
|
||
<uni-collapse-item title="联系人信息" class="coll-title">
|
||
<view class="content">
|
||
|
||
<JeePayForm text="支付宝账号" v-model:value="applyDetailInfo.accountNo" />
|
||
|
||
<JeePayForm text="商户联系人姓名" v-model:value="applyDetailInfo.contactName" />
|
||
|
||
<JeePayForm text="商户联系人电话" v-model:value="applyDetailInfo.contactPhone" />
|
||
|
||
<JeePayForm text="商户联系人邮箱" v-model:value="applyDetailInfo.contactEmail" />
|
||
|
||
</view>
|
||
</uni-collapse-item>
|
||
<!-- 费率组件 -->
|
||
<defaultRate ref="defaultRateRef" isCheck="all" />
|
||
</uni-collapse>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ref , reactive, inject } from 'vue'
|
||
import address from '@/components/applyJson/address.json' // 地址
|
||
import mccAli from '@/components/applyJson/mccAli.json' // 行业
|
||
import JeepayUpLoad from '@/components/JeepayUpLoad/JeepayUpLoad.vue' // 图片上传
|
||
import defaultRate from '../components/defaultRate.vue' // 默认费率
|
||
import readOnlyInfo from '../components/readOnlyInfo.vue' // 只读文件
|
||
import tool from '@/util/tool.js' // 工具类函数
|
||
import JeePayForm from '@/components/applyComponents/JeePayForm.vue' // 通用左右结构布局
|
||
import termOfValidity from '@/components/applyComponents/termOfValidity.vue' // 选择证件有效期
|
||
import dataPicker from '@/components/applyComponents/dataPicker.vue' // 通用级联选择
|
||
|
||
|
||
const channelInfo = inject('channelInfo')
|
||
const emit = defineEmits(['applyHandle'])
|
||
const defaultRateRef = ref(null) // 默认费率组件
|
||
|
||
// 商户进件详细信息（JSON类型字符串）
|
||
const applyDetailInfo = reactive({
|
||
productType: 1,//产品类型
|
||
})
|
||
|
||
// 状态: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
|
||
// 状态为 1,2,4,5 开启disable (也就是状态不为 0 3)
|
||
let isDisable = ref(false)
|
||
if (!['0', '3', '8'].includes(channelInfo.state)) isDisable.value = true
|
||
|
||
// 上传图片成功 以及OCR识别信息回显
|
||
const uploadSuccess = (res, name) => {
|
||
applyDetailInfo[name] = res.data
|
||
Object.assign(applyDetailInfo, res.ocrInfo) // ocr信息回显
|
||
}
|
||
|
||
// 清除图片 仅前端
|
||
const clear = key => applyDetailInfo[key] = ''
|
||
|
||
// 通用选择事件 回调函数
|
||
const publicSelect = (e, key) => applyDetailInfo[key] = e.detail.value
|
||
|
||
// 发起进件
|
||
const launchApply = isTempData => {
|
||
|
||
// 拿费率组件的值
|
||
applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(isTempData)
|
||
|
||
// 判断类型，对象类型是费率正常提交 Sting 是错误信息
|
||
if (typeof applyDetailInfo.paywayFeeList === 'string') return uni.showToast({ title: applyDetailInfo.paywayFeeList, icon: 'none' })
|
||
|
||
emit('applyHandle', {name: 'alipay',isTempData, applyDetailInfo})
|
||
}
|
||
|
||
let mccCode = ref() // 行业mcc回显
|
||
let areaCode = ref('') // 商户省市区回显
|
||
|
||
let applyInfoRef = ref(null) // 只读组件信息
|
||
|
||
// 合并信息方法, 智能读取，和信息回显，通过此方法合并
|
||
const assignObj = (obj) => {
|
||
// 开启只读模式
|
||
if (isDisable.value) {
|
||
obj.mccText = tool.mccBack(obj.mccCode, mccAli, 'splicing') // 行业码转文字
|
||
obj.areaText = tool.addressBack(obj.areaCode, address) // 地理码转文字
|
||
applyInfoRef.value.getApplyInof(obj) // 传给只读组件
|
||
}
|
||
|
||
// 信息回显
|
||
Object.assign(applyDetailInfo, obj)
|
||
// 以下两个码是为了给级联选择器做回显用，需要最后一个码
|
||
obj.mccCode ? mccCode.value = obj.mccCode.split('_')[1] : null // mcc码，拼接类型要截取
|
||
obj.areaCode ? areaCode.value = obj.areaCode[2] : null // 数组类型，直接拿最后一个
|
||
}
|
||
|
||
defineExpose({ launchApply, assignObj })
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '../static/information.scss';
|
||
</style> |