1/pages/cloudStore/apply.vue

<template>
	<view class="apply">
		<u-navbar title="云拣仓代理申请" height="108rpx" :bgColor="background" placeholder="true" :titleStyle="{color: '#FFF', fontSize: '32rpx'}" leftIconColor="#FFF"></u-navbar>
		<view class="shop-detail">
			<shop-card-deatil></shop-card-deatil>
		</view>
		<view class="main-body">
			<u-form :model='model' :rules="rules" ref="uForm" :label-style="{'color':'#000000',fontWeight:600,lineHeight:1.2,fontSize:'32rpx'}" label-position="top" >
				<view class="item-con">
					<u-form-item
						label="姓名"
						labelWidth="280rpx"
						prop="name"
						label-position="top"
						required
						:border-bottom="false"
					>
						<u-input placeholder="请输入您的姓名" maxlength="40" v-model="model.name" placeholderStyle="color:#999" border="none"></u-input>
					</u-form-item>
				</view>
				<view class="item-con">
					<u-form-item
						label="手机号"
						labelWidth="280rpx"
						prop="phone"
						label-position="top"
						required
						:border-bottom="false"					
					>
						<u-input placeholder="请输入您的手机号" maxlength="40" v-model="model.phone" placeholderStyle="color:#999" border="none"></u-input>
					</u-form-item>
				</view>
				<view class="item-con">
					<u-form-item
						label="身份证号"
						labelWidth="280rpx"
						prop="idCard"
						label-position="top"
						required
						:border-bottom="false"					
					>
						<u-input placeholder="请输入您的身份证号" maxlength="40" v-model="model.idCard" placeholderStyle="color:#999" border="none"></u-input>
					</u-form-item>
					<u-form-item
						label="补充身份证照片"
						labelWidth="280rpx"
						prop="idCardImage"
						label-position="top"
						required
						:border-bottom="false"	
					>
						<view class="idCardCon">
							<view class="idCardItem">
								<u-upload
									:fileList="idCardList"
									@afterRead="afterRead"
									@delete="deletePic"
									name="idCardList"
									:maxCount="1"
								>
									<image class="idCardImg" src="http://file.hecrab.com/crab-net/yxs-yxsSfzQ.png"></image>
								</u-upload>
								<text class="idCardText">点击上传头像面</text>
							</view>
							
							<view class="idCardItem">
								<u-upload
									:fileList="idCardUpList"
									@afterRead="afterRead"
									@delete="deletePic"
									name="idCardUpList"
									:maxCount="1"
								>
									<image class="idCardImg" src="http://file.hecrab.com/crab-net/yxs-yxsSfzH.png"></image>
								</u-upload>
								<text class="idCardText">点击上传国徽面</text>
							</view>
						</view>
					</u-form-item>
					
					<!-- <u-form-item 
						label="补充身份证照片"
						labelWidth="280rpx"
						prop="idCardImage"
						label-position="top"
						required
						:border-bottom="false">
						<view class="idCardCon">
							<image class="idCardImg" src="http://file.hecrab.com/crab-net/yxs-yxsSfzQ.png"
								mode="aspectFit"></image>
							<file-upload :maxNum="1" uploadText="身份证人像面" v-model="idCardList"
								:showTipsNumber="false" @okCallBack="uploadSuccess(1)"></file-upload>
						</view>
						<view class="idCardCon">
							<image class="idCardImg" src="http://file.hecrab.com/crab-net/yxs-yxsSfzH.png"
								mode="aspectFit"></image>
							<file-upload :maxNum="1" uploadText="身份证国徽面" v-model="idCardUpList" :showTipsNumber="false"
								@okCallBack="uploadSuccess(2)"></file-upload>
						</view>
					</u-form-item> -->
				</view>
				
				<view class="item-con">
					<u-form-item
						label="预计销量(万年/年)"
						labelWidth="280rpx"
						prop="sales"
						label-position="top"
						required
						:border-bottom="false"					
					>
						<u-input placeholder="请输入你的每年预计销量" maxlength="40" v-model="model.sales" placeholderStyle="color:#999" border="none"></u-input>
					</u-form-item>
				</view>
				
				<view class="item-con">
					<u-form-item
						label="选择你的销售渠道(多选)"
						labelWidth="630rpx"
						prop=""
						label-position="top"
						required
						:border-bottom="false"					
					>
						<view class="Item" >
							<view class="Con" v-for="(item,index) in channelList" :key="index" :class="item.checked?'checked':''" :data-id="item.num" @tap="selectChannel">{{item.name}}</view>
						</view>
					</u-form-item>
				</view>
				
				<view class="item-con">
					<u-form-item
						label="选择你的分销模式(多选)"
						labelWidth="630rpx"
						prop=""
						label-position="top"
						required
						:border-bottom="false"					
					>
						<view class="Item" >
							<view class="Con" v-for="(item,index) in modelList" :key="index" :class="item.checked?'checked':''" :data-id="item.num" @tap="selectModel">{{item.name}}</view>
						</view>
					</u-form-item>
				</view>
			</u-form>
		</view>
		<view class="bottom">
			<button class="saveBtn" @click="saveClick">提交申请</button>
		</view>
	</view>
</template>

<script>
	import list from "../../uni_modules/uview-ui/libs/config/props/list";
	import shopCardDeatil from "./components/shopDetailCard.vue"
	export default{
		components:{shopCardDeatil},
		data() {
			return{
				background:'transparent',
				model:{
					name:'',
					phone:'',
					idCard:'',
					sales:'',
					salesChannels:'',
					salesModel:''
				},
				rules:{
					name:[{
						required:true,
						message:'请输入代理商姓名',
						trigger:['change','blur']
					}],
					phone:[{
						required:true,
						message:'请输入代理商手机号',
						trigger:['change','blur']
					},
					{
						validator:(rule,value,callback)=>{
							//true表示通过验证,false表示不通过验证
							return uni.$u.test.mobile(value);
						},
						message:'手机号码不正确',
						trigger:['change'],
					}],
					idCard:[{
						required:true,
						message:"请输入代理商身份证号",
						trigger:['change','blur']
					},
					{
						validator:(rule,value,callback)=>{
							return uni.$u.test.idCard(value);
						},
						message:'身份证号不正确',
						trigger:['change']
					}],
					sales:[{
						required:true,
						message:"请输入预计年销量",
						trigger:['change','blur']
					}],
					
				},
				idCardList:[],
				idCardUpList:[],
				channelList:[{
					name:"微信",
					num:'1',
					checked:false
				},
				{
					name:"淘宝",
					num:'2',
					checked:false
				},
				{
					name:"抖音",
					num:'3',
					checked:false
				},
				{
					name:"京东",
					num:'4',
					checked:false
				},
				{
					name:"实体店",
					num:'5',
					checked:false
				}],
				modelList:[{
					name:"卡券代理",
					num:'1',
					checked:false
				},
				{
					name:"批发",
					num:'2',
					checked:false
				},
				{
					name:"一键代发（通用包装）",
					num:'3',
					checked:false
				},
				{
					name:"一键代发（自有包装）",
					num:'4',
					checked:false
				}]
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods:{
			//删除图片
			deletePic(event){
				this['${event.name}'].splice(event.index,1)
			},
			//新增图片
			async afterRead(event){
				//当设置multiple为true时，file为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this['${event.name}'].length
				lists.map((item)=>{
					this['${event.name}'].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result, '上传图像result');
					let item = this[`${event.name}`][fileListLen]
					this[`${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: result.status,
						message: result.status == 'failed' ? '上传失败' : '',
						url: result.url
					}))
						fileListLen++
				}
			},
			//提交按钮
			saveClick() {
				this.$refs.uForm.validate(isOk => {
					if (isOk) {
						if (!this.idCardList.length) return this.$u.toast("请上传身份证人像面！")
						if (!this.idCardUpList.length) return this.$u.toast("请上传身份证国徽面！")
						// if (!this.channelChecked.length) return this.$u.toast("请至少选择一个销售渠道！")
						// if (!this.distributionChecked.length) return this.$u.toast("请至少选择一个分销模式！")
						this.request()
					}
				})
			},
			//事件点击
			selectChannel:function(e){
				var this_checked = e.currentTarget.dataset.id //获取对应的条目id
				var parameterList = this.channelList //获取Json数组
				console.log(this_checked)
				if(parameterList[this_checked-1].checked){
					parameterList[this_checked-1].checked = false
				}else{
					parameterList[this_checked-1].checked=true;
				}
				this.channelList=parameterList;
			},
			selectModel:function(e){
				var this_checked = e.currentTarget.dataset.id //获取对应的条目id
				var parameterList = this.modelList //获取Json数组
				console.log(this_checked)
				if(parameterList[this_checked-1].checked){
					parameterList[this_checked-1].checked = false
				}else{
					parameterList[this_checked-1].checked=true;
				}
				this.modelList=parameterList;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.apply{
		height: 100vh;
		background: linear-gradient( 270deg, #3975F1 0%, #4AA4F5 100%);
		display: flex;
		flex-direction: column;
		.shop-detail{
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			margin-bottom: 24rpx;
		}
		.main-body{
			box-sizing: border-box;
			background: #F5F6FA;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 36rpx;
			flex: 1;
			overflow: auto;
			.item-con{
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 4rpx 24rpx 14rpx 24rpx;
				margin-bottom: 16rpx;
			}
			.idCardCon{
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				margin-top: 12rpx;
				.idCardImg{
					width: 300rpx;
					height: 200rpx;
					border-radius: 8rpx;
					object-fit: cover;
				}
				.idCardText{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-left: 58rpx;
				}
			}
		}
		.bottom{
			height: 180rpx;
			background: #FFFFFF;
			.saveBtn{
				width: 678rpx;
				height: 92rpx;
				background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%);
				border-radius: 24rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				padding-top: 12rpx;
			}
		}
		.Item{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.Con{
				width: 284rpx;
				height: 84rpx;
				background: #F7F7F7;
				border-radius: 8rpx;
				margin-top: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				padding-left: 24rpx;
				
			}
			.checked{
				background: #E9F0FE;
				color: #2E6BF6;
			}
		}	
	}
</style>