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

<template>
	<view class="registerShop">

		<navbar 
		v-if="key"
		:title="titleUpdateList[titleIndex]" 
		leftClick 
		@leftClick="$utils.navigateBack" />
		
		<navbar 
		v-else
		:title="titleList[titleIndex]" 
		leftClick 
		@leftClick="$utils.navigateBack" />

		<view class="frame">
			<!--基本信息-->
			<view class="basicInfo">
				<!--用户名-->
				<view class="item">
					<view>账号/手机号</view>
					<!-- <view>{{ $t('components.username')}}</view> -->
					<view>
						<!-- <input v-model="form.userName" :placeholder="$t('components.enterUserName')" clearable></input> -->
						<input v-model="form.userName" placeholder="请输入账号/手机号" 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>
				<!--联系电话-->
				<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="uni-color-btn"
		@click="showModel"
		v-if="key">
			确认修改
		</view>

		<view class="bottom"
		v-else>
			<view class="btns">
				<!--申请审核-->
				<span @click="applyReview" class="sqsh">
					{{ $t('components.submitReview') }}
				</span>
				<!--联系我们-->
				<span @click="contactUs" 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>
	import customerServicePopup from "@/components/config/customerServicePopup.vue";
	import { mapState } from 'vuex'
	export default {
		components: {
			customerServicePopup
		},
		onLoad(option) {
			if(option.key){
				this.key = option.key
				this.form = this[option.key]
				
				this.titleIndex = ['buy', 'shopData'].indexOf(option.key)
				
				this.yyzzfileList = this.form.businessLicense.split(',').map(url => {
					return {
						url
					}
				})
				this.jbhxxfileList = this.form.basicAccount.split(',').map(url => {
					return {
						url
					}
				})
				this.skyhfileList = this.form.bankInfo.split(',').map(url => {
					return {
						url
					}
				})
			}else{
				this.titleIndex = option.identity
				this.form.role = option.identity
			}
		},
		computed : {
			...mapState(['buy', 'shopData']),
		},
		data() {
			return {
				titleIndex: 0,
				titleList: [
					//   采购商注册 供应商注册  国内清关申请
					this.$t('other.buyerRegistration'),
					this.$t('other.supplierRegistration'),
					this.$t('other.domesticCustomsClearanceApplication')
				],
				titleUpdateList: [
					//   采购商注册 供应商注册  国内清关申请
					'修改采购商信息',
					'修改供应商信息',
				],
				form: {
					"address": "",
					"auditStatus": 0,
					"bankAccount": "",
					"bankInfo": "",
					"bankNama": "",
					"basicAccount": "",
					"businessLicense": "",
					"companyName": "",
					"password": "",
					"phone": "",
					"role": 0,
					"taxCode": "",
					"userName": ""
				},
				yyzzfileList: [],//营业执照
				jbhxxfileList: [],//基本户信息
				skyhfileList: [],//收款银行
				key : '',
			}
		},
		methods: {
			showModel(){
				uni.showModal({
					title: '确认修改吗？',
					content: '修改后该身份将需要重新审核！',
					success: (res) => {
						this.applyReview()
					}
				})
			},
			// 申请审核
			applyReview() {
				
				let data = JSON.parse(JSON.stringify(this.form))
				
				data.businessLicense = this.yyzzfileList.map((item) => item.url).join(",")
				data.basicAccount = this.jbhxxfileList.map((item) => item.url).join(",")
				data.bankInfo = this.skyhfileList.map((item) => item.url).join(",")
				
				if(this.$utils.verificationAll(data, {
					"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
				}
				
				
				if (!this.$utils.verificationPhone(data.userName)) {
					return uni.showToast({
						title: '请输入合法的手机号',
						icon: 'none'
					})
				}
				
				let api = this.titleIndex == 2 ? 'addCustoms' : 'roleOption'
				
				if(this.key){
					api = 'updateRoleInfo'
				}
				
				
				this.$api(api, data, res => {
					if (res.code == 200) {
						// uni.removeStorageSync('token')
						// this.$store.state.userInfo = {}
						this.form = {}
						// uni.redirectTo({
						// 	url: '/pages/index/index'
						// })
						uni.showToast({
							title: '提交成功！耐心等待审核',
							icon: 'none'
						})
						
						if(this.key){
							setTimeout(uni.reLaunch, 1000, {
								url: '/pages_order/auth/selectionIdentity'
							})
						}else{
							setTimeout(uni.navigateBack, 1000, -1)
						}
						
					}
				})
			},
			// 联系我们
			contactUs() {
				console.log("打开客服弹框")
				this.$refs.customerServicePopup.open();
			},


			// 上传图片
			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 {
		padding-bottom: 300rpx;
		.frame {
			min-height: 100vh;
			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>