dl_uniapp/pages/mine/auth/auth-form.vue
2025-04-10 16:22:25 +08:00

684 lines
18 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="container-box">
<navigation-bar-vue title="通告主认证" style="width: 100%;" background-color="#ffffff"
title-color="#000000"></navigation-bar-vue>
<view class="content">
<view class="title-max-box">
<view class="title-box">
<view class="item-title">
<view style="padding-bottom: 20rpx;">我是</view>
<view class="bg-img">{{identityTypeText}}</view>
</view>
<view class="title-right" @click="viewRichText()">认证指南<uni-icons type="right" color="#623109"
size="12"></uni-icons></view>
</view>
<view class="form-warn">
<image src="@/static/detail/warn.png" mode="aspectFit"></image>
<text>平台不会公开用户隐私信息仅用于验证身份</text>
</view>
</view>
<!-- 表单区域 -->
<view class="content-detail-box">
<!-- 资质认证 -->
<view class="form-box">
<view class="left-top">
<image src="@/static/mine/auth/dian.png" mode="aspectFit"></image>
<text>资质认证</text>
</view>
<view class="form-content">
<view class="item-field-row" v-if="'03'!=identityType">
<view class="img-upload" v-if="'01'==identityType">
<uni-file-picker iconPath="/static/mine/auth/shangbiao.png" :value="SBList"
imgTitle="商标注册证" :sizeType="sizeType" @select="afterRead($event,'SBList')"
@delete="deleteFile($event,'SBList')" limit="1"></uni-file-picker>
</view>
<view class="img-upload">
<uni-file-picker iconPath="/static/mine/auth/yingyezhizhao.png"
:value="YYZZList" imgTitle="营业执照" :sizeType="sizeType"
@select="afterRead($event,'YYZZList')" @delete="deleteFile($event,'YYZZList')"
limit="1"></uni-file-picker>
</view>
</view>
<view class="item-field" v-if="'02'==identityType || '03'==identityType">
<view class="item-lable is-required">
与品牌方沟通记录
</view>
<view class="item-value">
<uni-file-picker :value="GTList" :sizeType="sizeType"
@select="afterRead($event,'GTList')" @delete="deleteFile($event,'GTList')"
limit="9"></uni-file-picker>
</view>
</view>
<view class="item-field" v-if="'03'==identityType">
<view class="item-lable is-required">
品牌投放授权/合同
</view>
<view class="warn-little-text">* 需加盖申请主体红色公章不支持PS章、电子章、部门章及专用章</view>
<view class="item-value">
<uni-file-picker :value="SQList" :sizeType="sizeType"
@select="afterRead($event,'SQList')" @delete="deleteFile($event,'SQList')"
limit="9"></uni-file-picker>
</view>
</view>
<view class="item-field-row" v-if="'01'==identityType">
<view class="item-lable is-required">
品牌名
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.brandName" type="number" placeholder="请输入" />
</view>
</view>
<view class="item-field-row" v-if="'01'==identityType || '02'==identityType">
<view class="item-lable is-required">
公司全称
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.corpName" type="number" placeholder="请输入" />
</view>
</view>
<view class="item-field-row" v-if="'03'==identityType">
<view class="item-lable is-required">
授权公司全称
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.authCorpName" type="number" placeholder="请输入" />
</view>
</view>
<view class="item-field" v-if="'04'==identityType">
<view class="item-lable is-required">
店铺后台截图
</view>
<view class="item-value">
<uni-file-picker :value="DPHTList" :sizeType="sizeType"
@select="afterRead($event,'DPHTList')" @delete="deleteFile($event,'DPHTList')"
limit="9"></uni-file-picker>
</view>
</view>
<view class="item-field" v-if="'04'==identityType">
<view class="item-lable is-required">
店铺物流截图
</view>
<view class="item-value">
<uni-file-picker :value="DPWLList" :sizeType="sizeType"
@select="afterRead($event,'DPWLList')" @delete="deleteFile($event,'DPWLList')"
limit="9"></uni-file-picker>
</view>
</view>
<view class="item-field-row" v-if="'04'==identityType">
<view class="item-lable is-required">
店铺名称
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.shopName" type="number" placeholder="请输入" />
</view>
</view>
<view class="item-field-row" v-if="'04'==identityType">
<view class="item-lable is-required">
店铺链接
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.shopLink" type="number" placeholder="请输入" />
</view>
</view>
<view class="item-field-row">
<view class="item-lable is-required">
行业、领域
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.industry" type="number" placeholder="请输入" />
</view>
</view>
<view class="item-field" v-if="'03'!=identityType">
<view class="item-lable is-required">
公司所在城市
</view>
<view class="item-value">
<uni-data-picker placeholder="请选择" popup-title="请选择" :localdata="dataTree"
v-model="dataObj.corpCityCode" @change="onchange" @nodeclick="onnodeclick"
@popupopened="onpopupopened" @popupclosed="onpopupclosed">
</uni-data-picker>
</view>
</view>
<view class="item-field" v-if="'03'==identityType">
<view class="item-lable is-required">
个人所在城市
</view>
<view class="item-value">
<uni-data-picker placeholder="请选择" popup-title="请选择" :localdata="dataTree"
v-model="dataObj.personCityCode" @change="onchange" @nodeclick="onnodeclick"
@popupopened="onpopupopened" @popupclosed="onpopupclosed">
</uni-data-picker>
</view>
</view>
</view>
</view>
<!-- 身份认证 -->
<view class="form-box">
<view class="left-top">
<image src="@/static/mine/auth/dian.png" mode="aspectFit"></image>
<text>身份认证</text>
</view>
<view class="form-content">
<view class="item-field">
<view class="item-lable is-required">
企业微信/钉钉个人资料页/在职证明
</view>
<view class="warn-little-text">* 需要包含姓名、公司名和职位。在职证明需加盖申请主体红色公章不支持PS章、电子章、部门章及专用章</view>
<view class="item-value">
<uni-file-picker :value="SFList" :sizeType="sizeType"
@select="afterRead($event,'SFList')" @delete="deleteFile($event,'SFList')"
limit="9"></uni-file-picker>
</view>
</view>
<view class="item-field-row">
<view class="item-lable is-required">
姓名
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.name" type="number" placeholder="请输入" />
</view>
</view>
<view class="item-field-row">
<view class="item-lable is-required">
身份证号
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.idCard" type="number" placeholder="请输入" />
</view>
</view>
<view class="item-field">
<view class="item-lable is-required">
附言(选填)
</view>
<view class="item-value">
<textarea style="margin-top: 10rpx;" v-model="dataObj.review" placeholder="请输入详细地址" />
</view>
</view>
</view>
</view>
<view class="submit-field" style="align-items: center;">
<view class="submit-box" @click="submitForm()">提交认证</view>
</view>
</view>
</view>
</view>
</template>
<script>
import navigationBarVue from '@/components/navigation/navigationBar.vue';
import {getTextByIdentityType} from '@/utils/common.js'
import {treeCity} from '@/api/business/base.js'
import {toApply} from '@/api/business/member.js'
import upload from '@/utils/upload'
import config from '@/config';
import {toast} from '@/utils/common.js'
export default {
components: {
navigationBarVue
},
data() {
return {
userId:"",
uploadUrl: config.baseUrl,
globalConfig: getApp().globalData.config,
//当前选择的认证身份
identityType: "",
identityTypeText: "",
//城市树结构
dataTree: [],
sizeType: ['compressed'],
//商标
SBList: [],
//营业执照
YYZZList: [],
//身份认证材料
SFList: [],
//沟通记录
GTList: [],
//授权合同
SQList: [],
//店铺后台截图
DPHTList: [],
//店铺物流截图
DPWLList: [],
dataObj: {
tradeImage:"",
busiImage:"",
recordImage:"",
contractImage:"",
shopImage:"",
jobImage:"",
logisticsImage:"",
brandName:"",
corpName:"",
authCorpName:"",
shopName:"",
shopLink:"",
industry:"",
corpCityCode:"",
corpCityName:"",
personCityCode:"",
personCityName:"",
name:"",
idCard:"",
review:""
},
}
},
onLoad(option) {
this.initAddress();
this.identityType = option.key
this.identityTypeText = getTextByIdentityType(option.key)
},
methods: {
viewRichText() {
this.$tab.navigateTo(
`/pages/common/richview/index?title=${this.globalConfig.appInfo.agreements[4].title}&code=${this.globalConfig.appInfo.agreements[4].code}`
)
},
/**初始化树结构*/
initAddress() {
treeCity().then(res => {
this.dataTree = res.data
}).catch((e) => {
uni.showToast({
icon: 'error',
duration: 2000,
title: e
});
})
},
submitForm(){
if (this.SBList.length > 0) {
this.dataObj.tradeImage = this.SBList
.map(item => item.url.replace(this.uploadUrl, ''))
.join(',');
}
if (this.YYZZList.length > 0) {
this.dataObj.busiImage = this.YYZZList
.map(item => item.url.replace(this.uploadUrl, ''))
.join(',');
}
if (this.SFList.length > 0) {
this.dataObj.jobImage = this.SFList
.map(item => item.url.replace(this.uploadUrl, ''))
.join(',');
}
if (this.GTList.length > 0) {
this.dataObj.recordImage = this.GTList
.map(item => item.url.replace(this.uploadUrl, ''))
.join(',');
}
if (this.SQList.length > 0) {
this.dataObj.contractImage = this.SQList
.map(item => item.url.replace(this.uploadUrl, ''))
.join(',');
}
if (this.DPHTList.length > 0) {
this.dataObj.shopImage = this.DPHTList
.map(item => item.url.replace(this.uploadUrl, ''))
.join(',');
}
if (this.DPWLList.length > 0) {
this.dataObj.logisticsImage = this.DPWLList
.map(item => item.url.replace(this.uploadUrl, ''))
.join(',');
}
let data = {
identityType:this.identityType,
applyJson:JSON.stringify(this.dataObj)
}
toApply(data).then(res => {
if (res.code == 200) {
uni.showToast({
icon: 'success',
duration: 2000,
title: '提交成功'
});
uni.navigateBack()
}
}).catch((e) => {
uni.showToast({
icon: 'error',
duration: 2000,
title: e
});
})
},
afterRead(file, key) {
for (let i = 0; i < file.tempFilePaths.length; i++) {
upload({
url: '',
filePath: file.tempFilePaths[i]
}).then((res) => {
console.log(res, '215')
this[key].push({
url: res.url
})
console.log(this[key], "this[key]")
})
}
},
deleteFile(index, key) {
console.log('删除文件', this[key][index]);
this[key].splice(index, 1);
},
onnodeclick(e) {
console.log(e, 135);
},
onpopupopened(e) {
console.log('popupopened');
},
onpopupclosed(e) {
console.log('popupclosed');
},
onchange(e) {
console.log('onchange:', e);
},
submit() {
console.log(this.dataObj)
},
}
}
</script>
<style lang="scss">
.container-box {
padding-top: calc(90rpx + var(--status-bar-height));
border-top: 1rpx solid #F4F4F4;
background-color: white;
width: 100%;
color: #363636;
font-size: 30rpx;
height: 100%;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: center;
position: relative;
.content {
border-top: 1rpx solid #F4F4F4;
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 95rpx);
overflow-y: scroll;
width: 100%;
background-color: white;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: start;
position: relative;
.title-max-box {
width: 100%;
padding: 20rpx 30rpx;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: start;
.title-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
.item-title {
flex: 1;
display: flex;
align-items: center;
justify-content: start;
font-weight: bold;
.bg-img {
padding-bottom: 20rpx;
background-image: url('/static/mine/auth/xiantiao.png');
background-repeat: no-repeat;
background-position: bottom right;
background-size: 100% 50%;
}
}
.title-right {
display: flex;
align-items: center;
justify-content: flex-end;
font-size: 24rpx;
width: 160rpx;
padding-bottom: 20rpx;
}
}
.form-warn {
margin-top: 30rpx;
width: 100%;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: start;
background-color: #FDECD9;
color: #FF6627;
border-radius: 20rpx;
padding: 15rpx;
image {
width: 40rpx;
height: 40rpx;
margin-right: 20rpx;
}
text {
flex: 1;
display: flex;
align-items: center;
justify-content: start;
}
}
}
.content-detail-box {
width: 100%;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: start;
background-color: #F2F2F2;
padding: 20rpx;
.form-box {
margin-bottom: 20rpx;
background-color: white;
border-radius: 20rpx;
padding: 20rpx 20rpx;
width: 100%;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: start;
.left-top {
width: 100%;
display: flex;
align-items: center;
justify-content: start;
margin-bottom: 20rpx;
image {
width: 30rpx;
height: 30rpx;
}
text {
margin-left: 10rpx;
font-weight: bold;
font-size: 32rpx;
}
}
.form-content {
width: 100%;
.item-field-row {
width: 100%;
display: flex;
align-items: self-start;
justify-content: start;
padding-bottom: 15rpx;
.img-upload {
width: 50%;
margin: 10rpx 10rpx;
display: flex;
align-items: center;
justify-content: center;
}
.is-required {
image {
width: 20rpx;
height: 20rpx;
margin-right: 10rpx;
}
}
.item-lable {
width: 210rpx;
padding: 15rpx 0;
display: flex;
align-items: center;
justify-content: start;
}
.item-value {
flex: 1;
padding-left: 20rpx;
display: flex;
align-items: center;
justify-content: flex-end;
input {
width: 100%;
padding-left: 20rpx;
line-height: 1;
height: 70rpx;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
}
.choose-add {
color: #686868;
padding: 10rpx 0 10rpx 20rpx;
display: flex;
align-items: center;
justify-content: flex-start;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
}
textarea {
width: 100%;
height: 150rpx;
color: #686868;
padding: 10rpx 0 10rpx 20rpx;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
}
}
}
.item-field {
width: 100%;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: center;
margin-bottom: 20rpx;
.warn-little-text {
color: #FE9860;
font-size: 18rpx;
margin-bottom: 20rpx;
}
.is-required {
image {
width: 20rpx;
height: 20rpx;
margin-right: 10rpx;
}
}
.item-lable {
padding: 15rpx 0;
display: flex;
align-items: center;
justify-content: center;
}
.item-value {
width: 100%;
input {
width: 100%;
padding-left: 20rpx;
line-height: 1;
height: 70rpx;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
}
.choose-add {
color: #686868;
padding: 10rpx 0 10rpx 20rpx;
display: flex;
align-items: center;
justify-content: flex-start;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
}
textarea {
width: 100%;
height: 150rpx;
color: #686868;
padding: 10rpx 0 10rpx 20rpx;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
}
}
}
}
}
.submit-field {
width: 100%;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: center;
margin-bottom: 20rpx;
.submit-box {
padding: 15rpx 0;
background-color: #FC1F3E;
color: white;
width: 80%;
border-radius: 10rpx;
margin-top: 20rpx;
text-align: center;
}
}
}
}
}
</style>