<template>
<view class="settlement">
	<view class="topContent">
		<view>商家入驻信息采集，请认真填写提交</view>
		<view style="margin-top:22upx">通过审核后会有专人联系</view>
		
	</view>
	<view class="formContent">
		<u-form :model="form" ref="uForm">
			<view class="formSection">
				<u-form-item label="*主体公司名称 ">
					<u-input border placeholder="请输入贵公司名称" v-model="form.name" />
				</u-form-item>
				<u-form-item label="*主营类目"  @click="typeShow = true">
					<u-input v-model="form.type" placeholder="请选择选择主营类目" type="select" @click="typeShow = true"/>
					<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet>
				</u-form-item>
			</view>
			<view class="formSection">
				<u-form-item label="*公司地址" @click="addrshow = true">
					<u-input v-model="form.addr" placeholder="请选择地级" type="select" @click="addrshow = true"/>
					<u-picker mode="region" v-model="addrshow"></u-picker>
				</u-form-item>
				<u-form-item label="*合作品牌 ">
					<u-input border placeholder="请输入" v-model="form.brand" />
				</u-form-item>
				<u-form-item label="*自有品牌/代理入驻"  @click="typeShow = true">
					<u-input v-model="form.agent" placeholder="代理入驻" type="select" @click="typeShow = true"/>
					<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet>
				</u-form-item>
				<u-form-item label="*一级/二级授权"  @click="typeShow = true">
					<u-input v-model="form.childAgent" placeholder="一级授权" type="select" @click="typeShow = true"/>
					<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet>
				</u-form-item>
				<u-form-item label="*可否含税"  @click="typeShow = true">
					<u-input v-model="form.rate" placeholder="请选择" type="select" @click="typeShow = true"/>
					<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet>
				</u-form-item>
			</view>
			<view class="formSection">
				<u-form-item label="*联系人姓名 ">
					<u-input border placeholder="请输入姓名" v-model="form.contactName" />
				</u-form-item>
				<u-form-item label="*联系人职位"  @click="typeShow = true">
					<u-input v-model="form.contactPosition" placeholder="请选择" type="select" @click="typeShow = true"/>
					<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet>
				</u-form-item>
				<u-form-item label="*联系人手机号">
					<u-input border placeholder="请输入手机号" v-model="form.contactPhone" />
				</u-form-item>
				<u-form-item label="*联系人微信号">
					<u-input border placeholder="请输入微信号" v-model="form.contactwx" />
				</u-form-item>
				<u-form-item label="*联系人邮箱">
					<u-input border placeholder="请输入邮箱" v-model="form.contactEmail" />
				</u-form-item>
			
			</view>
			<view class="formSection">
				<u-form-item label="*仓储模式"  @click="typeShow = true">
					<u-input v-model="form.mode" placeholder="请选择" type="select" @click="typeShow = true"/>
					<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet>
				</u-form-item>
				<u-form-item label="*周末是否发货"  @click="typeShow = true">
					<u-input v-model="form.weekend" placeholder="请选择" type="select" @click="typeShow = true"/>
					<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet>
				</u-form-item>
				<u-form-item label="*是否自有工厂"  @click="typeShow = true">
					<u-input v-model="form.company" placeholder="请选择" type="select" @click="typeShow = true"/>
					<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet>
				</u-form-item>
				<u-form-item label="*是否有线下渠道"  @click="typeShow = true">
					<u-input v-model="form.channel" placeholder="请选择" type="select" @click="typeShow = true"/>
					<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet>
				</u-form-item>
				<u-form-item label="*是否有电商店铺"  @click="typeShow = true">
					<u-input v-model="form.shop" placeholder="请选择" type="select" @click="typeShow = true"/>
					<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet>
				</u-form-item>
			
			</view>
			
			
		</u-form>
	</view>
	<view class="shop">
		<view class="shopTitle">电商平台可多选</view>
		<view class="shopItem">
			<view :class="active==index?'active shopText':'shopText'" @click="getShop(index)" v-for="(item,index) in btnList" :key="index">
				<text>{{item}}</text>
				<image v-if="active==index" src="/static/news1/selected.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
	<view class="submitBtn" @click="popShow=true">
		提交
	</view>
	<u-popup v-model="popShow" mode="center" border-radius="12">
		<view>
			<view style="text-align: center;">
				<image src="/static/news1/pop.png" class="popimg" mode="widthFix"></image>
			</view>
			
			<view class="popcontent">
				<view class="poptitle">
					您的入驻申请提交成功
				</view>
				<view class="poptext">
					请您保持电话、微信畅通我们将在2个工作日内与您联系！顺祝商祺！
				</view>
				<view class="knowBtn" @click="popShow=false">
					我知道了
				
				</view>
				
			</view>
			
		</view>
		
	</u-popup>
</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					type: '',
					addr:'',
					brand:'',
					agent:'',
					childAgent:'',
					rate:'',
					contactName:'',
					contactPosition:'',
					contactPhone:'',
					contactwx:'',
					contactEmail:'',
					mode:'',
					weekend:'',
					company:'',
					channel:'',
					shop:'',
				},
				typeShow:false,
				addrshow:false,
				type: [
					{
						text: '一件代发'
					}
				],
				btnList:[
					'京东店铺','拼多多店铺','苏宁店铺','唯品会店铺','淘宝店铺','天猫店铺','其他平台'
				],
				active:0,
				popShow:false,
				
			}
		},
		methods:{
			actionSheetCallback(index) {
				
				this.form.type = this.type[index].text;
			},
			getShop(index){
				this.active = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	min-height:100%;
	padding-bottom:60upx;
}
.settlement{
	height:100%;
	.topContent{
		height: 232upx;
		background: linear-gradient(180deg, #FE7E71 0%, #FF4434 100%);
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	.formContent{
		.formSection{
			padding:0 38upx 0 30upx;
			background: #fff;
			margin-bottom:16upx;
			
		}
	}
	::v-deep .u-form-item--left{
		width:auto !important;
	}
	::v-deep .u-form-item--left__content__label{
		font-size: 26upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF4C3C;
		width:236upx;
	}
	::v-deep .u-border-bottom:after{
		border:none;
	}
	.shop{
		margin-top:12upx;
		background-color: #fff;
		padding:34upx 50upx 70upx 50upx;
		.shopTitle{
			font-size: 26upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #4C4C4C;
			margin-bottom:24upx;
		}
		.shopItem{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			.shopText{
				width: 240upx;
				height: 72upx;
				line-height: 72upx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 3px 3px 3px 3px;
				opacity: 1;
				border: 1px solid #D6D6D6;
				position: relative;
				margin-bottom:24upx;
				text{
					font-size: 26upx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #B6B6B6;
					
				}
				image{
					position: absolute;
					z-index:9;
					right: -8upx ;
					bottom:-8upx;
					height:0;
					width:50upx;
					height:auto;
				}
			}
			.active{
				text{
					
					color: #FF4F40;
					
				}
				
				border: 1px solid #FF4F40;
				
			}
		}
	}
	.submitBtn{
		margin:60upx 24upx 0 24upx;
		height: 100upx;
		background: linear-gradient(180deg, #FE7E71 0%, #FF4434 100%);
		border-radius: 52px 52px 52px 52px;
		opacity: 1;
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 100upx;
		text-align: center;
	}
}
.popcontent{
	width: 520upx;
	height: 460upx;
	background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
	border-radius: 6px 6px 6px 6px;
	opacity: 1;
	
	display: flex;
	flex-direction: column;
	// justify-content: space-around;
	padding:100upx 40upx 0 40upx;
	align-items: center;
	position: relative;
	z-index:1;
	top:-80upx;
	.poptitle{
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #000000;
		
	}
	.poptext{
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #727272;
		margin-top: 36upx;
		line-height: 36upx;
		
	}
	.knowBtn{
		width: 400upx;
		height: 72upx;
		line-height: 72upx;
		text-align: center;
		background: #F55349;
		border-radius: 36px 36px 36px 36px;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin-top:60upx;
	}
	
}
.popimg{
	// position: absolute;
	width:120upx;
	height:auto;
	position: relative;
	z-index:2;
}
::v-deep .u-mode-center-box{
	background: transparent;
}
</style>