aluminium-trading-uniapp-240925/pages_order/auth/customsClearApply.vue

<template>
	<view class="registerShop">

		<navbar :title="$t('other.domesticCustomsClearanceApplication')" leftClick @leftClick="$utils.navigateBack" />

		<view class="frame">
			<!--基本信息-->
			<view class="basicInfo">
				<!--用户名-->
				<view class="item">
					<view>{{ $t('components.username') }}</view>
					<view>
						<input v-model="form.userName" :placeholder="$t('components.enterUserName')" clearable></input>
					</view>
				</view>
				<!--密码-->
				<view class="item">
					<view>{{ $t('components.password') }}</view>
					<view>
						<input v-model="form.password" password clearable
							:placeholder="$t('components.enterYourPassword')" clearable></input>
					</view>
				</view>
				<!--公司名称-->
				<view class="item">
					<view>{{ $t('other.companyName') }}</view>
					<view>
					<input v-model="form.companyName" :placeholder="$t('other.enterCompanyName')"
							clearable></input>
					</view>
				</view>
				<!--税收编码-->
				<view class="item">
					<view>{{ $t('other.taxCode') }}</view>
					<view>
						<input v-model="form.taxCode" :placeholder="$t('other.enterTaxCode')" clearable></input>
					</view>
				</view>
				<!--公司地址-->
				<view class="item">
					<view>{{ $t('other.companyAddress') }}</view>
					<view>
						<input v-model="form.address" :placeholder="$t('other.enterCompanyAddress')" clearable></input>
					</view>
				</view>
				<!--dian-->
				<view class="item">
					<view>{{ $t('components.lxPhone') }}</view>
					<view>
						<input v-model="form.phone" :placeholder="$t('components.plePhoneNumber')" clearable></input>
					</view>
				</view>
				<view class="item">
					<view>{{ $t('other.companyAccount') }}</view>
					<view>
						<input v-model="form.bankAccount" :placeholder="$t('other.enterCompanyAccount')"
							clearable></input>
					</view>
				</view>
				<view class="item">
					<view>{{ $t('components.bankName') }}</view>
					<view>
						<input v-model="form.bankNama" :placeholder="$t('components.enterBankName')" clearable></input>
					</view>
				</view>
			</view>

			<!--证件信息-->
			<view class="certificateInfo">

				<!--营业执照-->
				<view class="certificateInfoItem">
					<view class="title">
						<span
							style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span>
						<span>{{ $t('components.businessLicense') }}</span>
					</view>
					<view class="upload">
						<uv-upload :fileList="yyzzfileList" :maxCount="4" multiple width="150rpx" height="150rpx"
							@delete="(file) => deleteImage(0, file)" @afterRead="(file) => afterRead(0, file)"
							:previewFullImage="true"></uv-upload>
					</view>

				</view>
				<!--基本户信息-->
				<view class="certificateInfoItem">
					<view class="title">
						<span
							style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span>
						<span>{{ $t('components.basicAccountInfo') }}</span>
					</view>
					<view class="upload">
						<uv-upload :fileList="jbhxxfileList" :maxCount="4" multiple width="150rpx" height="150rpx"
							@delete="(file) => deleteImage(1, file)" @afterRead="(file) => afterRead(1, file)"
							:previewFullImage="true"></uv-upload>
					</view>
				</view>
				<!--收款银行-->
				<view class="certificateInfoItem">
					<view class="title">
						<span
							style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span>
						<span>{{ $t('components.receivingBank') }}</span>
					</view>
					<view class="upload">
						<uv-upload :fileList="skyhfileList" :maxCount="4" multiple width="150rpx" height="150rpx"
							@delete="(file) => deleteImage(2, file)" @afterRead="(file) => afterRead(2, file)"
							:previewFullImage="true"></uv-upload>
					</view>
				</view>

			</view>
		</view>

		<view class="bottom">
			<view class="btns">
				<span @click="applyReview" class="sqsh">
					{{ $t('components.submitReview') }}
				</span>
				<span @click="$refs.customerServicePopup.open()" class="lxwm">
					{{ $t('components.contactUs') }}
				</span>
			</view>
			<view class="others">
				<span @click="$refs.popup.open('zcxz')" class="zcxz">
					{{ $t('components.registrationNotice') }}
				</span>
				<span @click="$refs.popup.open('kjht')" class="kjhtyl">
					{{ $t('other.frameworkContractPreview') }}
				</span>
			</view>
		</view>

		<!-- 联系客服弹框 -->
		<customerServicePopup ref="customerServicePopup" />

		<configPopup ref="popup"></configPopup>
	</view>
</template>


<script>
	export default {
		// onLoad(option) {
		//   this.titleIndex = option.identity
		// },
		data() {
			return {
				// titleIndex: 0,
				// titleList: [
				//   //   采购商注册 供应商注册  国内清关申请
				//   this.$t('other.buyerRegistration'),
				//   this.$t('other.supplierRegistration'),
				//   this.$t('other.domesticCustomsClearanceApplication')
				// ],
				form: {
					"address": "",
					"bankAccount": "",
					"bankInfo": "",
					"bankNama": "",
					"basicAccount": "",
					"businessLicense": "",
					"companyName": "",
					"id": "",
					"password": "",
					"phone": "",
					"role": 0,
					"taxCode": "",
					"userName": ""
				},
				yyzzfileList: [],
				jbhxxfileList: [],
				skyhfileList: [],
			}
		},
		methods: {
			// 申请审核
			applyReview() {

				this.form.basicAccount = this.jbhxxfileList.map((item) => item.url).join(",") //基本户信息照片上传
				this.form.bankInfo = this.skyhfileList.map((item) => item.url).join(",") //收款银行照片上传
				this.form.businessLicense = this.yyzzfileList.map((item) => item.url).join(",") //营业执照上传
				
				if(this.$utils.verificationAll(this.form, {
					"userName": this.$t('components.enterUserName'),
					"password": this.$t('components.enterYourPassword'),
					"companyName": this.$t('other.enterCompanyName'),
					"taxCode": this.$t('other.enterTaxCode'),
					"address": this.$t('other.enterCompanyAddress'),
					"phone": this.$t('components.plePhoneNumber'),
					"bankAccount": this.$t('other.enterCompanyAccount'),
					"bankNama": this.$t('components.enterBankName'),
					"businessLicense": '请上传营业执照',
					"basicAccount": '请上传基本户信息照片',
					"bankInfo": '请上传收款银行照片',
				})){
					return
				}
				
				this.$api('addCustoms', this.form, res => {
					if (res.code == 200) {
						uni.redirectTo({
							url: '/pages/index/clearanceService'
						})
					}
				})
			},

			// 上传图片
			afterRead(type, e) {
				let self = this

				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						if (type == 0) {
							self.yyzzfileList.push({
								url
							})
						} else if (type == 1) {
							self.jbhxxfileList.push({
								url
							})
						} else if (type == 2) {
							self.skyhfileList.push({
								url
							})
						}
					})
				})
			},
			// 删除图片
			deleteImage(type, e) {
				console.log(e, type, "===========")
				if (type == 0) {
					this.yyzzfileList.splice(e.index, 1)
				} else if (type == 1) {
					this.jbhxxfileList.splice(e.index, 1)
				} else if (type == 2) {
					this.skyhfileList.splice(e.index, 1)
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.registerShop {
		.frame {
			height: 79vh;
			overflow: auto;

			.basicInfo {
				display: flex;
				flex-direction: column;
				gap: 5rpx;
				background-color: #FFF;
				margin-top: 20rpx;
				padding: 20rpx;


				.item {
					display: flex;
					align-items: center;
					background-color: #FFF;
					height: 80rpx;
					// margin: 10rpx 0 0 0;
					padding: 10rpx 0 0 20rpx;

					>view:nth-of-type(1) {
						width: 30%;
						// font-weight: 700;
					}

					>view:nth-of-type(2) {
						width: 70%;
						border-radius: 10rpx;
						overflow: hidden;

						input {
							background-color: #f5f5f5;
							font-size: 28rpx;
							padding: 16rpx 8rpx 16rpx 15rpx;
						}
					}
				}


			}

			.certificateInfo {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
				background-color: #FFF;
				margin-top: 20rpx;
				padding: 20rpx;


				.certificateInfoItem {
					.title {
						display: flex;
						// padding-top: 40rpx;
						font-size: 30rpx;
						font-weight: 700;
						padding: 0 0 0 20rpx;

						>span:nth-of-type(1) {
							margin: 4rpx 0 0 8rpx;
							background-color: #FFF;
						}

						>span:nth-of-type(2) {
							margin: 0 0 0 8rpx;
							background-color: #FFF;
						}
					}

					.upload {
						margin: 5rpx 0 0 40rpx;
					}
				}


			}
		}

		.bottom {
			position: fixed;
			bottom: 10rpx;
			left: 0;
			right: 0;

			background-color: #FFF;

			.btns {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 40rpx;

				.sqsh {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40%;
					height: 70rpx;
					border-radius: 40rpx;
					color: white;
					font-size: 28rpx;
					margin: 20rpx 10rpx 0 0;
					background: #293143;
					//margin-top: 20rpx;
					border-radius: 40rpx;
				}

				.lxwm {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40%;
					height: 70rpx;
					border-radius: 40rpx;
					color: #000000;
					font-size: 28rpx;
					margin: 20rpx 10rpx 0 0;
					background: #f2f2f2;
					//margin-top: 20rpx;
					border-radius: 40rpx;
				}

			}

			.others {
				margin: 20rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 200rpx;
				color: #707070;
				font-size: 24rpx;

				.zcxz {
					text-decoration: underline;
				}

				.kjhtyl {
					text-decoration: underline;
				}

			}
		}
	}
</style>