fourPayProject/51pay-uni/homePages/merchantsMerchant/merchantsMerchant.vue
2025-03-31 10:14:11 +08:00

887 lines
24 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<u-overlay :show="overlayShow"></u-overlay>
<view class="container">
<headers :titles="titles"><uni-icons type="arrow-left" color="#fff" size="22px"></uni-icons></headers>
<view class="box_">
<!-- -->
<view class="box_bs">
<view class="">证件类型</view>
<view class="dis_" @click="selectPick('certSelect')">
<view class="size_">{{this.formData.legalPerson.certTypeName}}</view>
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
</view>
</view>
<!-- -->
<view class="title_">
上传证件照片
</view>
<view class="upload-box">
<view class="upload-title">
<view class="hei-size">头像面:</view>
<view class="hui-size">上传您的证件头像面</view>
</view>
<view class="right-upload">
<u-upload :fileList="fileList1" @afterRead="addFigure" imageMode="scaleToFill"
@delete="deletePic" name="1" :maxCount="1" width="140" height="70">
<image src="/static/imgs/rx.png" mode="widthFix" style="width: 140px;height: 70px;">
</image>
</u-upload>
</view>
</view>
<view class="upload-box">
<view class="upload-title">
<view class="hei-size">国徽面:</view>
<view class="hui-size">上传您的证件国徽面</view>
</view>
<view class="right-upload">
<u-upload :fileList="fileList2" imageMode="scaleToFill" @afterRead="addFigureBack"
@delete="deletePic" name="2" :maxCount="1" width="140" height="70">
<image src="/static/imgs/gh.png" mode="widthFix" style="width: 140px;height: 70px;">
</image>
</u-upload>
</view>
</view>
<view class="title_">
法人或负责人信息
</view>
<view class="box_bs">
<view class="">法人姓名</view>
<view class="right_size">
<input type="text" placeholder="请输入" v-model="formData.legalPerson.participantName" />
</view>
</view>
<view class="box_bs">
<view class="">法人手机号</view>
<view class="right_size">
<input type="number" maxlength="11" placeholder="请输入" v-model="formData.legalPerson.mobileNo" />
</view>
</view>
<view class="box_bs">
<view class="">法人性别</view>
<view class="dis_" @click="selectPick('genderSelect')">
<view class="size_">{{genderName}}</view>
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
</view>
</view>
<view class="box_bs">
<view class="">法人国籍</view>
<view class="dis_" @click="goSelect()">
<view class="size_">{{formData.legalPerson.nationLabel}}</view>
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
</view>
</view>
<view class="box_bs">
<view class="">身份证号</view>
<view class="right_size">
<input type="text" placeholder="请输入" v-model="formData.legalPerson.certNo" />
</view>
</view>
<view class="box_bs">
<view class="">有效期</view>
<view class="dis_">
<view class="dis_" @click="pickTime(1)">
<view v-if="!formData.legalPerson.certEffectDate" style="margin: 0px 5px;">开始日期</view>
<view v-else style="color:#000;margin: 0px 5px;">{{formData.legalPerson.certEffectDate}}
</view>
<u-icon name="arrow-down-fill" color="#2e2e2e" size="18"></u-icon>
</view>
<view class="size_" style="margin: 0px 5px;">至</view>
<view class="dis_" @click="timePopup()">
<view v-if="!formData.legalPerson.certExaDate" style="margin: 0px 5px;">
截至日期</view>
<view v-else style="color:#000;margin: 0px 5px;">{{formData.legalPerson.certExaDate}}</view>
<u-icon name="arrow-down-fill" color="#2e2e2e" size="18"></u-icon>
</view>
</view>
</view>
<view class="box_bs">
<view class="" style="width: 20%;">职业</view>
<view class="dis_" style="width: 80%; justify-content: flex-end; " @click="selectCareerInfPick(1)">
<view v-if="!formData.legalPerson.firstCareerNo" style="color: #7c7c7c;" class="size_">请选择
</view>
<view v-else style="color: #000;text-align: right;" class="size_">
{{this.formData.legalPerson.firstCareerName}}
</view>
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
</view>
</view>
<view class="box_bs" v-if="this.formData.legalPerson.secondCareerNo">
<view class=""></view>
<view class="dis_" style="width: 80%; justify-content: flex-end; " @click="selectCareerInfPick(2)">
<view class="size_">{{this.formData.legalPerson.secondCareerName}}
</view>
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
</view>
</view>
<view class="box_bs" v-if="this.formData.legalPerson.thirdCareerNo">
<view class=""></view>
<view class="dis_" @click="selectCareerInfPick(3)">
<view style="color: #000;" class="size_">{{this.formData.legalPerson.thirdCareerName}}
</view>
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
</view>
</view>
<view class="box_bs">
<view class="">归属地</view>
<view class="dis_" @tap="openLevel">
<view v-if="!this.formData.legalPerson.countyName" class="size_" style="color: #7c7c7c;">
{{"请选择"}}
</view>
<view v-else class="size_">
{{this.formData.legalPerson.provinceName+this.formData.legalPerson.cityName+this.formData.legalPerson.countyName}}
</view>
<u-icon name="arrow-right" color="#ececec" size="18"></u-icon>
</view>
</view>
<view class="box_bs">
<view class="">地址</view>
<view class="right_size" style="color: #000;">
<textarea type="textarea" auto-height maxlength="200" placeholder="请输入"
v-model="formData.legalPerson.address"></textarea>
</view>
</view>
<view class="box_bs">
<view class="">邮箱</view>
<view class="right_size">
<input type="text" placeholder="请输入" v-model="formData.legalPerson.email" />
</view>
</view>
</view>
<view class="box_">
<view class="title_">
法人手持身份证
</view>
<view class="upload-box" style="justify-content: center; padding-top: 30px; ">
<view class="y-img">
<u-upload :fileList="fileList3" imageMode="scaleToFill" @afterRead="addInfoImg"
@delete="deletePic" name="3" :maxCount="1" width="350" height="135">
<image src="/static/imgs/sctp.png" mode="widthFix"
style="width: 190px;height: 120px;margin: 0 auto;">
</image>
</u-upload>
</view>
</view>
</view>
<view class="button_p" @click="nextStep()">
<view class="">下一步</view>
</view>
<u-picker :show="pickData.show" :columns="pickData.columns" :title="pickData.title" keyName="label"
@confirm="confirm" @cancel="cancel" @close="cancel"></u-picker>
<level-linkage ref="levelLinkage" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"
themeColor='#007AFF'></level-linkage>
<u-popup :show="pickData.timePopup" mode="center">
<view class="box-popup">
<view class="x-size" @click="selectExaDate(1)">长期</view>
<view class="x-size" @click="selectExaDate(2)">日期</view>
<view class="x-size" @click="selectExaDate(3)">取消</view>
</view>
</u-popup>
<u-datetime-picker :closeOnClickOverlay="true" :show="pickData.timeShow" v-model="pickData.certEffectDate"
:formatter="formatter" @confirm="timeConfirm" @cancel="timeCancel" @close="timeCancel"
mode="date"></u-datetime-picker>
<u-picker :show="careerInfPick.show" :columns="careerInfPick.columns" :title="careerInfPick.title"
keyName="careerName" @confirm="careerInfConfirm" @cancel="careerInfCancel"
@close="careerInfCancel"></u-picker>
</view>
</view>
</template>
<script>
import headers from '../../components/header/headers.vue'
import request from '../../utils/request.js'
import upload from '@/utils/upload.js'
import levelLinkage from "@/components/three-level-linkage/linkage.nvue"
export default {
data() {
return {
titles: "法人或负责人信息录入",
msg: "1",
dataList: [],
fileList1: [],
fileList2: [],
fileList3: [],
overlayShow: false,
pickData: {
columns: [],
show: false,
pickType: null, //下部选择器类型certSelect 证件选择
title: "",
timeShow: false,
timePopup: false,
certEffectDate: Number(new Date()),
certExaDate: Number(new Date()),
timeType: 1
},
careerInfPick: {
columns: [],
columns2: [],
columns3: [],
show: false,
pickType: null, //下部选择器类型certSelect 证件选择
title: "",
level: 1
},
timeShow: false,
status: 'loading',
certTypes: [], //证件类型 数据字典获取
sexList: [], //性别 数据字典获取
careerInfData: [], //职业信息数据
chinaArea: [],
formData: {
areaType: "7", //商户类型 7 小微 写死
legalPerson: {
address: "",
backPic: "",
backPicUrl: "",
certEffectDate: "",
certExaDate: "",
certNo: "",
certType: "11",
certTypeName: "身份证",
city: "",
cityName: "",
county: "",
countyName: "",
email: "",
facePic: "",
facePicUrl: "",
firstCareerName: "",
firstCareerNo: "",
gender: "1",
mobileNo: "",
nation: "CHN",
nationLabel: "中国",
participantName: "",
province: "",
provinceName: "",
secondCareerName: "",
secondCareerNo: "",
sort: 0,
thirdCareerName: "",
thirdCareerNo: ""
},
openAccount: "",
openAccountUrl: "",
rate: "0.25",
steps: "1" //步骤当前页面写死第一页
},
pickerValueDefault: [14, 0, 0],
merchantId: null
}
},
onLoad(options) {
if (options && options.merchantId) {
this.merchantId = options.merchantId
this.getMerchantInfo()
}
let data = uni.getStorageSync("userAddress")
this.dealPosition(data)
this.getCertTypes()
this.getSexList()
this.getCareerInf()
this.getChinaArea()
let that = this
uni.$on('selectNation', function(data) {
that.formData.legalPerson.nation = data.value
that.formData.legalPerson.nationLabel = data.label
})
},
components: {
headers,
levelLinkage
},
computed: {
genderName() {
if (this.sexList && this.sexList.length > 0) {
let tempData = this.sexList.find(item => item.value == this.formData.legalPerson.gender)
return tempData.label
} else {
return '男'
}
}
},
methods: {
dealPosition(data) {
if (data) {
//处理省市区
this.formData.legalPerson.provinceName = data.merProvinceName
this.formData.legalPerson.province = data.merProvinceCode
this.formData.legalPerson.cityName = data.merCityName
this.formData.legalPerson.city = data.merCityCode
this.formData.legalPerson.countyName = data.merRegionName
this.formData.legalPerson.county = data.merRegionCode
this.pickerValueDefault = [data.merProvinceIdx, data.merCityIdx, data.merRegionIdx]
}
},
async getMerchantInfo() {
uni.showLoading({
title: '加载中'
});
this.overlayShow = true
let ress = await request({
url: 'app/report/newBaseInfo',
method: 'post',
data: {
objectId: this.merchantId
}
})
this.formData = ress.data
this.formData.steps = '1'
//处理图片问题
if (this.formData.legalPerson.facePicUrl) {
this.fileList1 = []
let tempImg1 = {
url: this.formData.legalPerson.facePicUrl,
}
this.fileList1.push(tempImg1)
}
if (this.formData.legalPerson.backPicUrl) {
this.fileList2 = []
let tempImg2 = {
url: this.formData.legalPerson.backPicUrl
}
this.fileList2.push(tempImg2)
}
if (this.formData.openAccountUrl) {
this.fileList3 = []
let tempImg3 = {
url: this.formData.openAccountUrl
}
this.fileList3.push(tempImg3)
}
uni.hideLoading()
this.overlayShow = false
},
selectExaDate(type) {
if (type == 3) {
//取消
this.pickData.timePopup = false
} else if (type == 1) {
//长期
this.formData.legalPerson.certExaDate = '99991231'
this.pickData.timePopup = false
} else {
//日期
this.pickData.timePopup = false
this.pickData.timeShow = true
this.pickData.timeType = 2
}
},
timePopup() {
this.pickData.timePopup = true
},
formatter(type, value) {
if (type === 'year') {
return `${value}年`
}
if (type === 'month') {
return `${value}月`
}
if (type === 'day') {
return `${value}日`
}
return value
},
timeConfirm(e) {
const date = new Date(e.value);
const year = date.getFullYear();
const month = ("0" + (date.getMonth() + 1)).slice(-2);
const day = ("0" + date.getDate()).slice(-2);
if (this.pickData.timeType == 1) {
//证件有效期
this.formData.legalPerson.certEffectDate = year + month + day
} else {
//证件有效期
this.formData.legalPerson.certExaDate = year + month + day
}
this.pickData.timeShow = false
},
pickTime(type) {
//选择时间
this.pickData.timeShow = true
this.pickData.timeType = type
},
openLevel() {
this.$refs.levelLinkage.open();
},
onConfirm(data) {
// 地区选择确认后选中的数据
this.formData.legalPerson.provinceName = data.firstPick.name
this.formData.legalPerson.province = data.firstPick.code
this.formData.legalPerson.cityName = data.secondPick.name
this.formData.legalPerson.city = data.secondPick.code
this.formData.legalPerson.countyName = data.thirdPick.name
this.formData.legalPerson.county = data.thirdPick.code
},
selectPick(pickType) {
//选择证件类型
this.pickData.columns = []
this.pickData.pickType = pickType
this.pickData.show = true
if (pickType == 'certSelect') {
this.pickData.columns.push(this.certTypes)
this.pickData.title = '选择证件类型'
}
if (pickType == 'genderSelect') {
this.pickData.columns.push(this.sexList)
this.pickData.title = '选择法人性别'
}
},
selectCareerInfPick(type) {
this.careerInfPick.columns = []
if (type == 1) {
this.careerInfPick.columns.push(this.careerInfData)
} else if (type == 2) {
this.careerInfPick.columns.push(this.careerInfPick.columns2)
} else if (type == 3) {
this.careerInfPick.columns.push(this.careerInfPick.columns3)
}
this.careerInfPick.level = type
this.careerInfPick.show = true
this.careerInfPick.title = '选择职业'
},
open() {
// console.log('open');
},
timeCancel() {
this.pickData.timeShow = false
},
// 性别点击取消
careerInfCancel() {
this.careerInfPick.columns = []
this.careerInfPick.show = false
},
// 弹窗确认
careerInfConfirm(data) {
this.careerInfPick.show = false
this.careerInfPick.columns = []
if (this.careerInfPick.level == 1) {
this.formData.legalPerson.firstCareerNo = data.value[0].careerNo
this.formData.legalPerson.firstCareerName = data.value[0].careerName
this.careerInfPick.level = 2
this.careerInfPick.show = false
this.formData.legalPerson.secondCareerNo = ""
this.formData.legalPerson.secondCareerName = ""
setTimeout(() => {
if (data.value[0].inferior && data.value[0].inferior.length > 0) {
this.careerInfPick.show = true
this.careerInfPick.columns = []
this.careerInfPick.columns.push(data.value[0].inferior)
this.careerInfPick.columns2 = data.value[0].inferior
this.careerInfPick.title = '选择职业'
}
}, 300);
} else if (this.careerInfPick.level == 2) {
this.formData.legalPerson.secondCareerNo = data.value[0].careerNo
this.formData.legalPerson.secondCareerName = data.value[0].careerName
this.careerInfPick.level = 3
this.careerInfPick.show = false
this.formData.legalPerson.thirdCareerNo = ""
this.formData.legalPerson.thirdCareerName = ""
setTimeout(() => {
if (data.value[0].inferior && data.value[0].inferior.length > 0) {
this.careerInfPick.show = true
this.careerInfPick.columns = []
this.careerInfPick.columns.push(data.value[0].inferior)
this.careerInfPick.columns3 = data.value[0].inferior
this.careerInfPick.title = '选择职业'
}
}, 300);
} else if (this.careerInfPick.level == 3) {
this.formData.legalPerson.thirdCareerNo = data.value[0].careerNo
this.formData.legalPerson.thirdCareerName = data.value[0].careerName
this.careerInfPick.level = 1
this.careerInfPick.show = false
}
console.log(data, '选择职业');
},
// 性别点击取消
cancel() {
this.pickData.columns = []
this.pickData.show = false
},
// 弹窗确认
confirm(e) {
this.pickData.show = false
this.pickData.columns = []
if (this.pickData.pickType == 'certSelect') {
//证件选择
this.formData.legalPerson.certType = e.value[0].value
this.formData.legalPerson.certTypeName = e.value[0].label
}
if (this.pickData.pickType == 'genderSelect') {
//性别选择
this.formData.legalPerson.gender = e.value[0].value
}
},
deletePic(event) {
this[`fileList${event.name}`].splice(event.index, 1)
},
async uploadFile(url, fileName, type) {
uni.showLoading({
title: '上传中'
});
this.overlayShow = true
upload({
url: 'app/report/fileUplod',
filePath: url,
formData: {
type: type,
fileName: fileName
}
}).then((res) => {
if (res.code == 0) {
if (type == 1) {
this.formData.legalPerson.facePic = res.data.externalKey
this.formData.legalPerson.facePicUrl = res.data.imgUrl
//身份证正面
let idCardData = JSON.parse(res.data.idCardData)
if (idCardData && idCardData.code == '0' && idCardData.data) {
//地址
this.formData.legalPerson.address = idCardData.data.address
//证件号
this.formData.legalPerson.certNo = idCardData.data.number
//姓名
this.formData.legalPerson.participantName = idCardData.data.name
let tempData = this.sexList.find(item => item.label == idCardData.data.sex)
this.formData.legalPerson.gender = tempData.value
}
} else if (type == 2) {
this.formData.legalPerson.backPic = res.data.externalKey
this.formData.legalPerson.backPicUrl = res.data.imgUrl
let idCardData = JSON.parse(res.data.idCardData)
//身份证正面反面
if (idCardData && idCardData.code == '0' && idCardData.data) {
//证件有效期
this.formData.legalPerson.certEffectDate = idCardData.data.expireDate.split(
"-")[0]
this.formData.legalPerson.certExaDate = idCardData.data.expireDate.split("-")[
1]
if (this.formData.legalPerson.certExaDate == '长期') {
this.formData.legalPerson.certExaDate = '99991231'
}
}
} else {
console.log("法人");
//法人手持身份证
this.formData.openAccount = res.data.externalKey
this.formData.openAccountUrl = res.data.imgUrl
}
}
}).finally((res) => {
this.overlayShow = false
uni.hideLoading();
})
},
//法人手持身份证
async addInfoImg(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFile(lists[i].url, lists[i].url.split('/').pop(), null)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
// 新增国徽面
async addFigureBack(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFile(lists[i].url, lists[i].url.split('/').pop(), 2)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
// 新增人像面
async addFigure(event) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this[`fileList${event.name}`].length
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
})
})
for (let i = 0; i < lists.length; i++) {
const result = await this.uploadFile(lists[i].url, lists[i].url.split('/').pop(), 1)
let item = this[`fileList${event.name}`][fileListLen]
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
status: 'success',
message: '',
url: result
}))
fileListLen++
}
},
async getCertTypes() {
this.certTypes = await this.$getDictList('pos_report_certType')
},
async getSexList() {
this.sexList = await this.$getDictList('gender')
},
async getCareerInf() {
let res = await request({
url: 'app/drop/getCareerInf',
method: 'get'
})
if (res.code == 0) {
this.careerInfData = res.data
}
},
async getChinaArea() {
let res = await request({
url: 'app/drop/getChinaArea',
method: 'get'
})
if (res.code == 0) {
this.chinaArea = res.data
this.$refs.levelLinkage.init(res.data);
}
},
async nextStep() {
uni.showLoading({
title: '提交中'
});
this.overlayShow = true
let that = this
let res = await request({
url: 'app/report/newBaseInfoSaveOrUpdate',
method: 'post',
data: this.formData
})
uni.hideLoading()
that.overlayShow = false
if (res.code == 0) {
that.formData.merchantId = res.merchantId
uni.navigateTo({
url: '/homePages/merchantsMerchant/InformationEntry?merchantId=' + res.merchantId
})
}
},
goSelect() {
uni.navigateTo({
url: '/components/select/nationality'
})
},
goback() {
uni.navigateBack()
}
}
}
</script>
<style scoped lang="scss">
.content {
background: #f4f5f6;
height: 100vh;
}
.container {
width: 100%;
background: #f4f5f6;
box-sizing: border-box;
padding-top: 88px;
padding-bottom: 88px;
}
.box_ {
width: 95%;
border-radius: 8px;
box-sizing: border-box;
padding: 10px;
background: #fff;
margin: 15px auto;
}
.box_bs {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 10px 0px;
color: #aeaeae;
border-bottom: 1px solid #eeeeee;
}
.dis_ {
display: flex;
}
.size_ {
margin-right: 5px;
color: #000;
}
.title_ {
font-size: 18px;
font-weight: bold;
margin: 10px 0px;
margin-bottom: 20px;
}
.upload-box {
width: 100%;
margin: 5px 0px;
background: #f7f9f8;
display: flex;
text-align: center;
justify-content: space-between;
margin-bottom: 20px;
box-sizing: border-box;
padding: 15px;
}
.upload-title {
font-size: 16px;
font-weight: bold;
}
.right_size {
text-align: right;
input {
color: #000;
}
}
.button_p {
width: 100%;
background: #E4612E;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 4px;
position: fixed;
bottom: 0px;
}
.right-upload {
width: 140px;
height: 100px;
}
.hei-size {
text-align: left;
}
.hui-size {
font-size: 14px;
font-weight: 400;
color: #a4a6a5;
}
.y-img {
width: 180;
height: 90px;
}
.box-popup {
width: 300px;
// height: 150px;
background: #eeeeee;
box-sizing: border-box;
padding: 0px 20px;
border-radius: 4px;
}
.x-size {
margin: 15px 0px;
color: #8e8e8f;
}
</style>