rice-front/pages_order/home/addEnterprise.vue

<template>
	<view class="applyLaundryStore">
		<navbar title="渠道合作" leftClick @leftClick="$utils.navigateBack" />

		<view class="frame">
			<view class="title">
				<span
				style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span>
				<span>申请信息</span>
			</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">
				<view>姓名</view>
				<view>
					<input v-model="form.name"
					:disabled="isUpdate" placeholder="请输入姓名" clearable></input>
				</view>
			</view>
			<view class="shopName">
				<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 = '请输入身份证号'
				}
				
				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
						
						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;
	}

	.applyLaundryStore {
		padding: 0 20rpx 0 20rpx;
		background-color: #f5f5f5;

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

			.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>