yanzong_qianduan/pages/news1/MerchantSettlement.vue

<template>
	<view class="settlement">
		<view class="topContent">
			<view class="topFont">商家入驻信息采集，请认真填写提交</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.store_name" />
					</u-form-item>
					<u-form-item label="*主营类目" @click="categoryShow = true">
						<u-input border v-model="form.store_cat" placeholder="请选择主营类目" type="select"
							@click="categoryShow = true" />
						<u-picker :range="categoryList" range-key="text" @confirm="actionSheetCallback(1, $event)"
							v-model="categoryShow" mode="selector"></u-picker>
						<!-- <u-action-sheet style="height: 200rpx;" :list="categoryList" :cancel-btn="false"
							v-model="categoryShow" @click="actionSheetCallback(1, $event)"></u-action-sheet> -->
					</u-form-item>
				</view>
				<view class="formSection">
					<u-form-item label="*公司地址" @click="addrshow = true">
						<u-input border v-model="form.store_address" placeholder="请选择地址" type="select"
							@click="addrshow = true" />
						<u-picker mode="region" v-model="addrshow" @confirm="getAddress"></u-picker>
					</u-form-item>
					<u-form-item label="*合作品牌 ">
						<u-input border placeholder="请输入" v-model="form.store_brand" />
					</u-form-item>
					<u-form-item label="*自有品牌/代理入驻" @click="bandShow = true">
						<u-input border v-model="brand_name" placeholder="代理入驻" type="select" @click="bandShow = true" />
						<u-action-sheet :list="bandList" :cancel-btn="false" v-model="bandShow"
							@click="actionSheetCallback(2, $event)"></u-action-sheet>
					</u-form-item>
					<u-form-item label="*一级/二级授权" @click="levelShow = true">
						<u-input border v-model="authorize_name" placeholder="一级授权" type="select"
							@click="levelShow = true" />
						<u-action-sheet :list="leveList" :cancel-btn="false" v-model="levelShow"
							@click="actionSheetCallback(3, $event)"></u-action-sheet>
					</u-form-item>
					<u-form-item label="*可否含税" @click="taxShow = true">
						<u-input border v-model="rate_name" placeholder="请选择" type="select" @click="taxShow = true" />
						<u-action-sheet :list="taxList" :cancel-btn="false" v-model="taxShow"
							@click="actionSheetCallback(4, $event)"></u-action-sheet>
					</u-form-item>
				</view>
				<view class="formSection">
					<u-form-item label="*联系人姓名 ">
						<u-input border placeholder="请输入姓名" v-model="form.user_name" />
					</u-form-item>
					<u-form-item label="*联系人职位" @click="contactShow = true">
						<u-input border v-model="form.user_position" placeholder="请选择" type="select"
							@click="contactShow = true" />
						<u-action-sheet :list="contactsList" :cancel-btn="false" v-model="contactShow"
							@click="actionSheetCallback(5, $event)"></u-action-sheet>
					</u-form-item>
					<u-form-item label="*联系人手机号">
						<u-input border placeholder="请输入手机号" type="numer" v-model="form.user_mobile" />
					</u-form-item>
					<u-form-item label="*联系人微信号">
						<u-input border placeholder="请输入微信号" v-model="form.user_wx" />
					</u-form-item>
					<u-form-item label="*联系人邮箱">
						<u-input border placeholder="请输入邮箱" v-model="form.user_email" />
					</u-form-item>

				</view>
				<view class="formSection">
					<u-form-item label="*仓储模式" @click="modeShow = true">
						<u-input border v-model="form.store_model" placeholder="请选择" type="select"
							@click="modeShow = true" />
						<u-action-sheet :list="modeList" :cancel-btn="false" v-model="modeShow"
							@click="actionSheetCallback(6, $event)"></u-action-sheet>
					</u-form-item>
					<u-form-item label="*周末是否发货" @click="sendShow = true">
						<u-input border v-model="send_name" placeholder="请选择" type="select" @click="sendShow = true" />
						<u-action-sheet :list="sendList" :cancel-btn="false" v-model="sendShow"
							@click="actionSheetCallback(7, $event)"></u-action-sheet>
					</u-form-item>
					<u-form-item label="*是否自有工厂" @click="factoryShow = true">
						<u-input border v-model="factory_name" placeholder="请选择" type="select"
							@click="factoryShow = true" />
						<u-action-sheet :list="yesNotList" :cancel-btn="false" v-model="factoryShow"
							@click="actionSheetCallback(8, $event)"></u-action-sheet>
					</u-form-item>
					<u-form-item label="*是否有线下渠道" @click="yesnoShow = true">
						<u-input border v-model="offline_name" placeholder="请选择" type="select" @click="yesnoShow = true" />
						<u-action-sheet :list="yesNotList" :cancel-btn="false" v-model="yesnoShow"
							@click="actionSheetCallback(9, $event)"></u-action-sheet>
					</u-form-item>
					<u-form-item label="*是否有电商店铺" @click="storeShow = true">
						<u-input border v-model="shop_name" placeholder="请选择" type="select" @click="storeShow = true" />
						<u-action-sheet :list="yesNotList" :cancel-btn="false" v-model="storeShow"
							@click="actionSheetCallback(10, $event)"></u-action-sheet>
					</u-form-item>

				</view>


			</u-form>
		</view>
		<view class="shop">
			<view class="shopTitle">电商平台可多选</view>
			<view class="shopItem">
				<view :class="item.active ? 'active shopText' : 'shopText'" @click="getShop(index)"
					v-for="(item, index) in btnList" :key="index">
					<text>{{ item.name }}</text>
					<image v-if="item.active" :src="$picUrl + '/static/news1/selected.png'" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="subBox">
			<view class="submitBtn" @click="sureSubmit">
				提交
			</view>
		</view>

		<view class="selfMask" v-if="popShow">
			<view class="self_popup">
				<image :src="$picUrl + '/static/news1/pop.png'" class="popimg" mode="widthFix"></image>
				<view class="popcontent">
					<view class="poptitle">
						您的入驻申请提交成功
					</view>
					<view class="poptext">
						请您保持电话、微信畅通我们将在2个工作日内与您联系！顺祝商祺！
					</view>
					<view class="knowBtn" @click="popShow = false">
						我知道了
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as help from '@/api/help'
export default {
	data() {
		return {
			brand_name: '',
			authorize_name: '',
			rate_name: '',
			shop_name: '',
			offline_name: '',
			factory_name: '',
			send_name: '',
			form: {
				store_name: '',
				store_cat: '',
				store_address: '',
				store_brand: '',
				store_settle_type: '',
				authorize: '',
				has_tax: '',
				user_name: '',
				user_position: '',
				user_mobile: '',
				user_wx: '',
				user_email: '',
				store_model: '',
				send_type: '',
				has_factory: '',
				has_offline: '',
				has_online_shop: ''
			},
			categoryShow: false,
			categoryList: [{
				text: '3C数码',
				id: 1
			}, {
				text: '家用电蒸',
				id: 2
			}, {
				text: '家居家装',
				id: 3
			}, {
				text: '家居生活',
				id: 4
			}, {
				text: '美容个护',
				id: 5
			}, {
				text: '服饰箱包',
				id: 6
			}, {
				text: '母婴玩具',
				id: 7
			}, {
				text: '运动广外',
				id: 8
			}, {
				text: '食品饮料',
				id: 9
			}, {
				text: '水果生鲜',
				id: 10
			}, {
				text: '汽车用品',
				id: 11
			}, {
				text: '虚拟商品',
				id: 11
			}],
			bandShow: false,
			bandList: [{
				text: '自有品牌',
				id: 1
			}, {
				text: '代理入驻',
				id: 2
			}],
			levelShow: false,
			leveList: [{
				text: '一级授权',
				id: 1
			}, {
				text: '二级授权',
				id: 2
			}],
			modeShow: false,
			modeList: [{
				text: '自有仓库',
				id: 1
			}, {
				text: '上游代发',
				id: 2
			}, {
				text: '以上皆有',
				id: 3
			}],

			contactShow: false,
			contactsList: [{
				text: '老板',
				id: 1
			}, {
				text: '市场经理',
				id: 2
			}, {
				text: '商务',
				id: 3
			}],
			yesnoShow: false,
			sendShow: false,
			factoryShow: false,
			taxShow: false,
			taxList: [{
				text: '不含',
				id: 0
			}, {
				text: '含',
				id: 1
			}],
			storeShow: false,
			yesNotList: [{
				text: '无',
				id: 0
			}, {
				text: '有',
				id: 1
			}],
			sendList: [{
				text: '不发货',
				id: 0
			}, {
				text: '发货',
				id: 1
			}],
			addrshow: false,
			btnList: [],
			active: 0,
			popShow: false,

		}
	},
	onLoad() {
		this.getStoreList()
	},
	methods: {
		actionSheetCallback(type, index) {
			// console.log(type, index)
			if (type == 1) { //类目  
				this.form.store_cat = this.categoryList[index].text
			}
			if (type == 2) { //自有品牌/代理入驻
				this.brand_name = this.bandList[index].text
				this.form.store_settle_type = this.bandList[index].id
			}
			if (type == 3) { //一级/二级授权
				this.authorize_name = this.leveList[index].text
				this.form.authorize = this.leveList[index].id
			}
			if (type == 4) { //是否含税
				this.rate_name = this.taxList[index].text
				this.form.has_tax = this.taxList[index].id
			}
			if (type == 5) { //职务
				this.form.user_position = this.contactsList[index].text
			}
			if (type == 6) { //模式
				this.form.store_model = this.modeList[index].text
			}
			if (type == 7) { //是否周末发货
				this.send_name = this.sendList[index].text
				this.form.send_type = this.sendList[index].id
			}
			if (type == 8) { //是否有工厂
				this.factory_name = this.yesNotList[index].text
				this.form.has_factory = this.yesNotList[index].id
			}
			if (type == 9) { //是否有线下渠道
				this.offline_name = this.yesNotList[index].text
				this.form.has_offline = this.yesNotList[index].id
			}
			if (type == 10) { //是否有电商店铺
				this.shop_name = this.yesNotList[index].text
				this.form.has_online_shop = this.yesNotList[index].id
			}
		},
		getShop(index) {
			this.btnList[index].active = !this.btnList[index].active
			// this.active = index;
		},
		getAddress(e) {
			this.form.store_address = e.province.name + e.city.name + e.area.name;
		},
		getStoreList() {
			let that = this;
			help.getStoreType()
				.then(res => {
					let arr = []
					res.data.map(item => {
						arr.push({
							name: item,
							active: false
						})
					})
					that.btnList = arr
				})
				.finally()
		},
		onShowToast(t) {
			uni.showToast({
				title: t,
				icon: 'none',
				duration: 2000
			})
		},
		sureSubmit() {
			let tip_title = null
			if (!this.form.store_name) {
				this.onShowToast('请输入主体公司名称！')
				return
			}
			if (!this.form.store_cat) {
				tip_title = '请选择主营类目体类目！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.form.store_address) {
				tip_title = '请选择公司地址！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.form.store_brand) {
				tip_title = '请输入合作品牌！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.brand_name) {
				tip_title = '请选择代理入驻！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.authorize_name) {
				tip_title = '请选择一二级授权！'
			}
			if (!this.rate_name) {
				tip_title = '请选择可否含税！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.form.user_name) {
				tip_title = '请输入联系人姓名！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.form.user_position) {
				tip_title = '请选择联系人职位！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.form.user_mobile) {
				tip_title = '请输入联系人手机号！'
				this.onShowToast(tip_title)
				return
			}
			if (this.form.user_mobile && (!/^\+?\d[\d -]{8,12}\d/.test(this.form.user_mobile))) {
				tip_title = '手机号格式不正确！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.form.user_wx) {
				tip_title = '请输入联系人微信！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.form.user_email) {
				tip_title = '请输入联系人邮箱！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.form.store_model) {
				tip_title = '请选择仓库模式！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.send_name) {
				tip_title = '请选择周末是否发货！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.factory_name) {
				tip_title = '请选择是否自有工厂！'
				this.onShowToast(tip_title)
				return
			}
			if (!this.offline_name) {
				tip_title = '请选择是否有线下渠道'
				this.onShowToast(tip_title)
				return
			}
			if (!this.shop_name) {
				tip_title = '请选择是否有电商店铺！'
				this.onShowToast(tip_title)
				return
			}
			let plat_form = []
			this.btnList.map(item => {
				if (item.active) {
					plat_form.push(item.name)
				}
			})
			this.form.store_type = plat_form
			if (plat_form.length == 0 && this.form.has_online_shop == 1) {
				tip_title = '请选择电商平台！'
				this.onShowToast(tip_title)
				return
			}
			help.joinStore(this.form)
				.then(res => {
					if (res.status) {
						this.popShow = true
						this.form = this.$options.data().form
						this.send_name = ''
						this.factory_name = ''
						this.offline_name = ''
						this.shop_name = ''
						this.btnList.map(item => {
							item.active = false
						})
					} else {
						uni.showToast({
							title: '入驻失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
				.finally(() => {
				})
		},
	}
}
</script>

<style lang="scss" scoped>
page {
	min-height: 100%;
}

.settlement {
	height: 100%;
	padding-bottom: 134upx;

	.topContent {
		height: 232upx;
		background: linear-gradient(180deg, #FE7E71 0%, #FF4434 100%);
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;

		.topFont {
			margin: 50upx 0 22upx;
		}
	}

	.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;
				background: #FFFFFF;
				border-radius: 3px 3px 3px 3px;
				border: 1px solid #D6D6D6;
				position: relative;
				margin-bottom: 24upx;
				display: flex;
				justify-content: center;
				align-items: center;

				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;

			}
		}
	}

	.subBox {
		width: 100%;
		position: fixed;
		z-index: 66;
		padding-bottom: 30upx;
		bottom: 0;
		background: #fff;
	}

	.submitBtn {
		width: 694rpx;
		margin-left: 28rpx;
		height: 104upx;
		background: linear-gradient(180deg, #FE7E71 0%, #FF4434 100%);
		border-radius: 52px;
		opacity: 1;
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.popcontent {
	width: 520upx;
	height: 486upx;
	background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
	border-radius: 6px 6px 6px 6px;
	opacity: 1;

	display: flex;
	flex-direction: column;
	padding: 0 40upx;
	align-items: center;

	.poptitle {
		font-size: 32upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		margin-top: 118upx;
		color: #000000;

	}

	.poptext {
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #727272;
		margin-top: 32upx;
		line-height: 36upx;

	}

	.knowBtn {
		width: 400upx;
		height: 72upx;
		line-height: 72upx;
		text-align: center;
		background: #F55349;
		border-radius: 72upx;
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 58upx;
	}

}

.selfMask {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background: rgba(60, 60, 60, 0.52);
	display: flex;
	justify-content: center;
	align-items: center;
}

.self_popup {
	position: relative;
	padding-top: 56rpx;
}

.popimg {
	position: absolute;
	width: 112upx;
	left: 50%;
	height: 128upx;
	margin-left: -56upx;
	top: 0;
	z-index: 2;
}

::v-deep .u-mode-center-box {
	background: transparent;
}
</style>