dl_uniapp/pages/mine/auth/auth-form.vue

<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) => {
          toast(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>