liveShop/pages/freeShop/apply.vue

<template>
	<view class="content">
		<view class="main">
			<view class="tilte">
				开通免费网店
			</view>
			<view class="details">
				    网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明。
				    网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明。
				    网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明。
				    网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明网店开通的说明开通权益内容说明。网店开通的说明开通权益内容说明。
			</view>
		</view>
		<view class="btn1" v-if="userInfo.store_info">
			已有网店
		</view>
		<view class="btn" v-else @click="comfirm" >
			确认申请
		</view>
		<uni-popup ref="popup" type="center" @click="close">
			<view class="popup_row">
				<view class="title">
					<view class="title-left">
						请输入您的手机号，开通免费网店!
					</view>
					<view class="cancel" @click="cancel">
						<!-- <image src="../../static/img/cancel1.png" mode=""></image> -->
					</view>
				</view>
				<view class="inpBox">
					<input type="text" value="" placeholder="请输入您的手机号" v-model="to_phone"/>
				</view>	
				<view class="inpedit">
					可在方框中修改您的手机号
				</view>
				<view class="inpBox">
					<input type="text" value="" placeholder="请输入您的身份证号" v-model="Idcard"/>
				</view>	
				<view class="inpedit">
					可在方框中修改您的身份证号
				</view>
				<view class="comfirm">
					<view class="comfirm1" @click="comfirm1()">
						确认
					</view>			
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import { apply } from '@/api/apply.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import { xgxx } from '@/api/team.js'
	export default{
		components: {
			uniPopup,
		},
		data(){
			return{
				to_phone:'',
				Idcard:''
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onLoad() {
			if(this.userInfo.phone != ''){
				this.to_phone = this.userInfo.phone
			};
			if(this.userInfo.card_id != ''){
				this.Idcard = this.userInfo.card_id
			};
			const value = uni.getStorageSync('mystore');
			this.mystore = value
			console.log('申请免费网店this.mystore',this.mystore)
		},
		methods:{
			// 提交
			comfirm(){
				this.$refs.popup.open();
				console.log(this.userInfo);
			},
			comfirm1:function () {
			let obj = this
				if ( obj.to_phone.toString().trim() == '' ){
					obj.$api.msg('请填写正确的手机号码');
					// uni.showModal({
					// 	title:'输入框为空',
					// 	// content:JSON.stringify(obj)
					// })
				} else {
						console.log('obj.to_phone1111',obj.to_phone)
						const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
							if (!reg.test(obj.to_phone)) {
							obj.$api.msg('请填写正确的手机号码');
							return;
						}
						let reg1 =
							/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
						if (!reg1.test(obj.Idcard)) {
							obj.$api.msg('请填写正确的身份证信息');
							return;
						}
						xgxx({
							card_id: obj.Idcard,
						}).then(e =>{
							console.log(e)
						}).catch(e => {
							console.log(e)
						})
						apply({
							name: obj.userInfo.nickname + "的网店",
							introduction: obj.userInfo.nickname + "的网店",
							image: obj.userInfo.avatar,
							phone: obj.to_phone || '',
							card: obj.Idcard || '',
							type: 1})
							.then(({ data }) =>{
								console.log(data)
								uni.navigateTo({
									url:'/pages/freeShop/success'
								});
							})
							.catch((err) => {
								console.log(err);
							})
					}
				},
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 100%;
	}
	.tilte{
		font-size: 34rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
		text-align: center;
		padding: 16rpx 0 0;
	}
	.details{
		padding: 12rpx 24rpx 24rpx;
		text-indent: 44rpx;
		font-size: 26rpx;
		line-height: 40rpx;
	}
	.btn{
		width: 674rpx;
		height: 88rpx;
		background: linear-gradient(180deg, #FD4646, #FF3535);
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		margin: 180rpx auto;
		font-size: 36rpx;
	}
	.btn1{
			width: 674rpx;
			height: 88rpx;
			background: #b1b1b1;
			border-radius: 44rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			margin: 180rpx auto;
			font-size: 36rpx;
	}
	.popup_row{
		// margin-top: 108rpx;
		height: 660rpx;
		border-radius: 25rpx;
		width: 100%;
		padding: 24rpx;
		background-color: #f8f8f8;
		z-index: 999;
		.title{
			margin-top: 24rpx;
			border-bottom: 2rpx solid #F2F2F2;
			color: #E63931;
			font-size: 32rpx;
			padding-left: 4rpx;
			padding-bottom: 16rpx;
			display: flex;
			justify-content: space-between;
			// align-items: center;
			.cancel{
				margin-left: 52rpx;
				width: 36rpx;
				height: 36rpx;
				image{
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
		.inpBox{
			margin-top: 52rpx;
			border: 2px solid #f2f2f2;
			padding: 12rpx 24rpx;
			color: #FF9797;
			border-radius: 8rpx;
			.input-placeholder {
				// height: 70rpx;
				font-size: 32rpx;
				color: #FF9797;
			}
		}
		.inpedit{
			margin-top: 24rpx;
			margin-left: 14rpx;
			font-size: 28rpx;
			color: #FF9797;
		}
		.comfirm{
			display: flex;
			justify-content: flex-end;
			margin-top: 54rpx;
			.comfirm1{
				padding: 12rpx 24rpx;
				border-radius: 12rpx;
				color: #FFFFFF;
				background-color: #E63931;
			}
		}
	}
</style>