jewelry-front/pages_order/home/addEnterprise.vue

<template>
	<view class="applyLaundryStore">
		<navbar title="成为渠道商" leftClick @leftClick="$utils.navigateBack" />

		<view class="frame">
			<view class="title">
			<!-- <view class="title-nav"> -->
				<view class="heeng"></view>
				成为渠道商
			</view>
			<view class="desc">
				<!-- configList.qu_price -->
				<!-- <uv-parse :content="configList.qu_price"></uv-parse> -->
				
				①{{ configList.qu_price_keyValue }}
				<br />
				②{{ configList.qu_price_money_keyValue }}
			</view>
		</view>

		<view class="frame">
			<view class="title">
				<view class="heeng"></view>
				<view>申请信息</view>
			</view>
			<view class="shopName">
				<view>类型</view>
				<view>
					<uv-radio-group v-model="form.type">
						<uv-radio 
							v-for="(item, index) in typeList" 
							:key="index" 
							:customStyle="{margin: '16rpx'}" 
							size="40rpx"
							iconSize="30rpx"
							labelSize="30rpx"
							:disabled="isUpdate"
							:label="item.name" 
							:name="item.type">
						</uv-radio>
					</uv-radio-group>
				</view>
			</view>
			<view class="shopName">
				
				<view style="width: 300rpx;"
				v-if="form.type">身份证正反面</view>
				
				<view style="width: 300rpx;"
				v-else>营业执照</view>
				
				<view>
					<uv-upload 
					:fileList="fileList" 
					name="fileList"
					:maxCount="2" 
					width="180rpx"
					height="180rpx" 
					:disabled="isUpdate"
					multiple 
					@afterRead="afterRead" 
					@delete="deleteImage">
					</uv-upload>
				</view>
			</view>
			<view class="shopName"
			v-if="form.type">
				<view>姓名</view>
				<view>
					<input v-model="form.name"
					:disabled="isUpdate" placeholder="请输入姓名" clearable></input>
				</view>
			</view>
			
			
			<view class="shopName"
			v-else>
				<view>企业名称</view>
				<view>
					<input v-model="form.name"
					:disabled="isUpdate" placeholder="请输入企业名称" clearable></input>
				</view>
			</view>
			
			<view class="shopName"
			v-if="form.type">
				<view>性别</view>
				<view>
					<uv-radio-group v-model="form.sex">
						<uv-radio 
							v-for="(item, index) in sexList" 
							:key="index" 
							:customStyle="{margin: '16rpx'}" 
							size="40rpx"
							iconSize="30rpx"
							:disabled="isUpdate"
							labelSize="30rpx"
							:label="item.name" 
							:name="item.name">
						</uv-radio>
					</uv-radio-group>
				</view>
			</view>
			<view class="shopName">
				<view>手机号</view>
				<view>
					<input v-model="form.phone"
					:disabled="isUpdate" type="number" placeholder="请输入手机号" clearable></input>
				</view>
			</view>
			
			<view class="shopName" v-if="form.type">
				<view>身份证号码</view>
				<view>
					<input v-model="form.no"
					:disabled="isUpdate" placeholder="请输入身份证号码" clearable></input>
				</view>
			</view>
			<view class="shopName" v-else>
				<view>社会信用代码</view>
				<view>
					<input v-model="form.no"
					:disabled="isUpdate" placeholder="请输入社会信用统一代码" clearable></input>
				</view>
			</view>
			
			<view class="shopName">
				<view>邮寄地址</view>
				<view>
					<input v-model="form.address"
					:disabled="isUpdate" placeholder="请输入邮寄地址" clearable></input>
				</view>
			</view>

		</view>
		
		<view class="config">
			<uv-checkbox-group
				v-model="checkboxValue"
				shape="circle">
				<view class="content">
					<view
					style="display: flex;">
						
						<uv-checkbox
							size="40rpx"
							icon-size="30rpx"
							activeColor="#A3D250"
							:name="1"
						></uv-checkbox>
						阅读并同意我们的<text @click="$refs.popup.open('shop_user_xy')">“合作协议”</text>
					</view>
				</view>
			</uv-checkbox-group>
		</view>


		<!-- 底部按钮 -->
		<view class="uni-color-btn"
		@click="submitApplication"
		v-if="!isUpdate">
			提交
		</view>

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

	</view>
</template>

<script>
	import Position from '@/utils/position.js'
	export default {
		components: {
		},
		data() {
			return {
				checkboxValue : [],
				form: {
					userName: '',
					name: '',
					phone: '',
					sex : '男',
					type : 0,
					state : 0,
				},
				fileList: [],
				sexList : [
					{
						name: '男',
					},
					{
						name: '女',
					},
				],
				typeList : [
					{
						name: '企业',
						type : 0,
					},
					{
						name: '个人',
						type : 1,
					},
				],
			}
		},
		computed: {
			isUpdate(){
				return this.form.state == 1
			},
		},
		onShow() {

		},
		onLoad() {
			this.getData()
		},
		methods: {
			deleteImage(e){
				this[e.name].splice(e.index, 1)
			},
			afterRead(e){
				let self = this
				e.file.forEach(file => {
					self.$Oss.ossUpload(file.url).then(url => {
						self[e.name].push({
							url
						})
					})
				})
			},
			// 提交按钮
			submitApplication() {
				if(!this.checkboxValue.length){
					return uni.showToast({
						title: '请先同意合作协议',
						icon:'none'
					})
				}
				
				this.form.image = this.fileList.map((item) => item.url).join(",")
				
				let p = {
					image: '请上传营业执照',
					name: '请输入您的企业名称',
					phone: '请输入联系电话',
					no: '请输入社会信用代码',
					address: '请输入邮寄地址',
				}
				
				if(this.form.type){
					p.no = '请输入身份证号码'
					p.name = '请输您的入姓名'
					p.image = '请上传身份证正反面'
				}
				
				if (this.$utils.verificationAll(this.form, p)) {
					return
				}
				
				if(!this.$utils.verificationPhone(this.form.phone)){
					return uni.showToast({
						title: '手机号格式不正确',
						icon:'none'
					})
				}
				
				
				this.$api('addOrUpdateCommonUser', this.form, res => {
					if (res.code == 200) {
						uni.showToast({
							title: '申请成功待审核', // 提示的内容
							icon: 'success', // 图标，可选值有 'success', 'loading', 'none'
							duration: 1500 // 提示的持续时间，默认是1500毫秒
						});
						setTimeout(uni.navigateBack, 1000, -1)
					}
				})
			},
			getData(){
				this.$api('getCommonUser', res => {
					if(res.code == 200){
						
						this.form = res.result || this.form
						
						if(!this.form.id){
							return
						}
						
						delete this.form.userId
						delete this.form.createTime
						delete this.form.createBy
						delete this.form.state
						delete this.form.updateBy
						delete this.form.updateTime
						
						res.result.image && res.result.image.split(',')
						.forEach(url => {
							this.fileList.push({
								url
							})
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}
			
	.heeng{
		width: 10rpx;
		height: 40rpx;
		background-color: #f78142;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 10rpx;
	}

	.applyLaundryStore {
		background-color: #f5f5f5;

		.frame {
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			background-color: #FFF;
			margin-top: 20rpx;
			padding: 20rpx;
			
			.title-nav{
				text-align: center;
				font-size: 40rpx;
				font-weight: 900;
			}
			
			.desc{
				padding: 0 20rpx;
				font-size: 28rpx;
				line-height: 46rpx;
			}

			.title {
				display: flex;
				// padding-top: 40rpx;
				font-size: 34rpx;
				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;
				}
			}

			.shopName {
				display: flex;
				align-items: center;
				background-color: #FFF;
				// 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%;
					// padding: 0 20rpx 0 0;
					border-radius: 10rpx;
					overflow: hidden;

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

		}
		.config{
			font-size: 26rpx;
			padding: 20rpx;
			/deep/ .uv-checkbox-group{
				display: flex;
				justify-content: center;
			}
			text{
				color: $uni-color;
			}
		}
	}
</style>