caimei-applets-caimei/pages/seller/login/register-general.vue

<template>
	<view class="register">
		<view class="register-main" v-if="isRegisterStep">
			<view class="main-form-item">
				<view class="form-label">联系人</view>
				<input class="form-input" type="text" name="input" v-model="params.linkMan" placeholder="请输入联系姓名" maxlength="6"/>
			</view>
			<view class="main-form-item">
				<view class="form-label">手机号</view>
				<input class="form-input phone" type="text" v-model="params.bindMobile" placeholder="请输入联系人手机号" maxlength="11"/>
				<view class="form-btn" @click.stop="CheckMobile()">检测</view>
			</view>
			<view class="register-fiexd clearfix" :style="{paddingBottom:isIphoneX ? '68rpx':''}">
				<view class="register-agree">
					<view class="agree-text"  @tap.stop="agreeCheck()">
						<button class="checkbox iconfont" :class="[isCheck ?'icon-gouxuan':'icon-weigouxuan']"></button> 
						我已阅读并同意
						<text @click.stop="this.$api.navigateTo('/pages/service/service?id=1036&title=机构协议')">《机构协议》</text>
						<text @click.stop="this.$api.navigateTo('/pages/service/service?id=1023&title=用户协议')">《用户协议》</text>及
						<text @click.stop="this.$api.navigateTo('/pages/service/service?id=1013&title=隐私权政策')">《隐私权政策》</text>
					</view>
				</view>
				<view class="register-row">
					<view class="register-btn sub" :class="isSubLoading ? 'disabled' : ''" @click.stop="SubmitRegister">确定</view>
				</view>
			</view>
		</view>
		<view class="register-main" v-else>
			<view class="main-form-item">
				<view class="form-label">联系人</view>
				<view class="form-text"> {{ clubInfo.linkMan }} </view>
			</view>
			<view class="main-form-item">
				<view class="form-label">手机号</view>
				<view class="form-text">{{ clubInfo.bindMobile }}</view>
			</view>
			<view class="register-fiexd clearfix" :style="{paddingBottom:isIphoneX ? '68rpx':''}">
				<view class="register-row">
					<button class="register-btn sub" @tap="ShareRegister">分享</button>
				</view>
			</view>
		</view>
		<!-- 分享弹窗 -->
		<shareModel  v-if="isShareModal" :bindId="bindId" @shareConfirm ='onShareAppMessage'></shareModel>
	</view>
</template>

<script>
	import shareModel from '@/components/cm-module/modelAlert/shareModel.vue'			 //分享弹窗
	
	export default{
		components:{
			shareModel
		},
		data() {
			return{
				isRegisterStep:true,
				isIphoneX:this.$store.state.isIphone,
				isCheck:false,
				clubUserId:0,
				isShareModal:false,
				bindId:0,
				isSubLoading:false,
				params:{
					linkMan:'',
					bindMobile:'',
					isAgreed:0,
					userId:0
				},
				clubInfo:{
					linkMan:'',
					bindMobile:'',
					userId:0
				}
			}
		},
		onLoad(option) {
			this.$api.getStorage().then((resolve) =>{
				this.params.userId = resolve.userId ? resolve.userId : 0
			})
		},
		computed: {
			
		},
		methods:{
			CheckMobile(){//检测手机是否能注册
				if( this.params.bindMobile == ''){
					this.$util.msg('请输入手机号',2000);
					return
				}
				if(!this.$reg.isMobile(this.params.bindMobile)){
					this.$util.msg('请输入正确的手机号',2000);
					return
				}
				this.SellerService.SellerClubCheck({bindMobile:this.params.bindMobile})
				.then(response =>{
					this.$util.msg(response.data,2000);
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			SubmitRegister(){//提交注册
				if(this.isSubLoading){ return; }
				if( this.params.linkMan == ''){
					this.$util.msg('请输入联系人姓名',2000);
					return
				}
				if( this.params.bindMobile == ''){
					this.$util.msg('请输入联系人手机号',2000);
					return
				}
				if(!this.$reg.isMobile(this.params.bindMobile)){
					this.$util.msg('手机格式不正确',2000);
					return
				}	
				if(this.params.isAgreed == 0){
					this.$util.msg('请勾选同意协议',2000);
					return
				}
				this.isSubLoading = true;	
				this.SellerService.SellerClubTemporary(this.params).then(response =>{
					this.bindId = response.data
					setTimeout(()=>{
						this.isRegisterStep = false
						this.isSubLoading = false;
						this.GetClubUserInfo(this.bindId)
					},1500)
				}).catch(error =>{
					this.isSubLoading = false;
					this.$util.msg(error.msg,2000);
				})
			},
			GetClubUserInfo(id){//回显数据
				this.UserService.UseRregisterTemporaryInfo({id:id})
				.then(response =>{
					this.clubInfo = response.data
				})
				.catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			ShareRegister(){//点击分享
				this.isShareModal = true
			},
			agreeCheck() {//勾选协议
				this.isCheck = !this.isCheck
				if(this.isCheck){
					this.params.isAgreed = 1
				}else{
					this.params.isAgreed = 0
				}
			},
		},
		onShareAppMessage(res){//分享转发
			this.isShareModal = false
			if (res.from === 'button') {
		      // 来自页面内转发按钮
		    }
			return {
			  title: '请确认资料完成注册~ ',
			  path: `/pages/login/binding?bindId=${this.bindId}&Identity=4`,
			  imageUrl:'https://static.caimei365.com/app/img/icon/icon-addShare@3x.png'
			}
		},
	}
</script>

<style lang="scss">
	page{
		height: auto;
	}
	.register{
		width: 100%;
		position: relative;
		box-sizing: border-box;
		.register-main{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 0 24rpx;
			margin-top: 24rpx;
			.main-form-item{
				width: 100%;
				height: 82rpx;
				box-sizing: border-box;
				padding: 13rpx 0;
				border-bottom: 1px solid #e1e1e1;
				margin-top: 10rpx;
				position: relative;
				.form-label{
					width: 148rpx;
					float: left;
					height: 100%;
					line-height: 56rpx;
					font-size: $font-size-28;
					text-align: left;
					color: #999999;
				}
				.form-input{
					width: 554rpx;
					height: 56rpx;
					line-height: 56rpx;
					font-size: $font-size-28;
					text-align: left;
					color: #333333;
					float: left;
					&.phone{
						width: 418rpx;
					}
				}
				.form-text{
					width: 554rpx;
					height: 56rpx;
					line-height: 56rpx;
					font-size: $font-size-28;
					text-align: left;
					color: #333333;
					float: left;
				}
				.form-btn{
					width: 136rpx;
					height: 56rpx;
					background: $btn-confirm;
					color: #FFFFFF;
					font-size: $font-size-28;
					text-align: center;
					border-radius: 28rpx;
					line-height: 56rpx;
					float: left;
				}
			}
			.register-fiexd{
				width: 100%;
				height: auto;
				padding: 20rpx 0;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 9999;
				background: #FFFFFF;
				.register-agree{
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 32rpx 0;
					.agree-text{
						.checkbox{
							float: left;
							margin: 4rpx 6rpx 0 0;
							color: #999999;
							font-size: $font-size-32;
							&.icon-gouxuan{
								color: $color-system;
							}
						}
						font-size: 20rpx;
						line-height: 44rpx;
						color: #999999;
						text{
							color:#0091FF;
						}
					}
				}
			}
			.register-btn{
				width: 702rpx;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: $font-size-28;
				line-height: 88rpx;
				color: #FFFFFF;
				margin: 0 auto;
				text-align: center;
				background: $btn-confirm;
				margin-top: 96rpx;
				&.disabled{
					background: #e4e8eb;
					color: #999999;
				}
				&.none{
					background: #FFFFFF;
					color: $text-color;
					margin-top: 0;
				}
				&.sub{
					margin-top: 0;
				}
			}
		}
	}
</style>