partnerApp/pages/user/infoInput.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="posi p-3 mb-3 d-flex j-center">
			<view class="posi2 on">推荐关系</view>
			<view class="posi2">实名认证</view>
		</view>
		<view class="inputView px-3 mb-2" v-if="recommenderId">
			<view class="d-flex">
				<view class="d-flex a-center">推荐人会员号</view>
				<view class="d-flex a-center">{{recommenderId}}</view>
			</view>
			<view class="d-flex">
				<view class="d-flex a-center">所属机构</view>
				<view class="d-flex a-center">{{recommendDept}}</view>
			</view>
		</view>
		<view class="notice px-3 font-weight">
			<view class="title">从业告知</view>
			<view>
				<view class="btns d-flex j-sb">
					<view :class="(noticeBtn1 == '1')?'active':''" @tap="adjustNoticeBtn('noticeBtn1',1)" >有相关经验</view>
					<view :class="(noticeBtn2 == '1')?'active':''" @tap="adjustNoticeBtn('noticeBtn2',1)">有犯罪记录</view>
					<view :class="(noticeBtn3 == '1')?'active':''" @tap="adjustNoticeBtn('noticeBtn3',1)">有接受过保监会处罚</view>
				</view>
				<view class="btns  d-flex j-sb">
					<view :class="(noticeBtn1 == '2')?'active':''" @tap="adjustNoticeBtn('noticeBtn1',2)">无相关经验</view>
					<view :class="(noticeBtn2 == '2')?'active':''" @tap="adjustNoticeBtn('noticeBtn2',2)">无犯罪记录</view>
					<view :class="(noticeBtn3 == '2')?'active':''" @tap="adjustNoticeBtn('noticeBtn3',2)">无接受过保监会处罚</view>
				</view>
				
			</view>
		</view>
		<view class="p-3">
			<checkbox-group @change="changeAgree" >
				<label>
					<checkbox  value="true" :checked="agree" style="transform:scale(0.6)" ></checkbox >本人已如实告知相关信息，如因不实信息产生的一切后果，本人愿承担一切法律责任。
				</label>	
			</checkbox-group>
				 
		</view>
		<button class="mx-3 mt-4 d-flex a-center j-center  main-bg-color" :class="{'main-bf-hover-color':disabled}" type="primary" @tap="toNext" :disabled="disabled">下一步</button>
		
		
		
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				noticeBtn1:"",	//按钮1
				noticeBtn2:"",	//按钮2
				noticeBtn3:"", //按钮3
				
				agree:false,	//是否同意协议
				disabled:true, //按钮是否可用
				
				recommenderId:"",//推荐人会员号
				recommendDept:"",//推荐机构
				
			}
		},
		async onLoad() {
			this.recommenderId = this.userCheckInfo.esmUserAgent.recommenderid;
			// 查询推荐人信息
			let res = await this.$http.get('/user/findById?id='+this.recommenderId);
			if((res.code == '200') && (res.data!= null)){
				this.recommendDept = res.data.comname;
			}
		},
		computed:{
			...mapState(['userCheckInfo'])
		},
		watch:{
			noticeBtn1(val){
				this.OnBtnChange();
			},
			noticeBtn2(val){
				this.OnBtnChange();
			},
			noticeBtn3(val){
				this.OnBtnChange();
			},
			agree(val){
				this.OnBtnChange();
			}
		},
		methods: {
			changeAgree(e){
				this.agree = e.detail.value[0];
			},
			
			// 改变按钮状态value
			OnBtnChange(){
				if( (!!this.noticeBtn1) && (!!this.noticeBtn2) && (!!this.noticeBtn3) && (!!this.agree) ){
					this.disabled=false; return;
				}
				this.disabled=true;
			},
			
			toNext(){
				if((this.noticeBtn2 == '1') || (this.noticeBtn3 == '1')){
					return uni.showToast({ title: '您不符合我司的入司要求，感谢关注', icon:"none" });
				}
				uni.showModal({
				    title: '重要提示',
				    content: '您即将成为掌柜车险代理人，请问您是否已充分了解监管部门对展业地区的限制和要求，并承诺在监管部门指定的合规的地区开展业务？',
					cancelText:'不了解',
					confirmText:'我已了解',
				    success: (res)=> {
				        if (res.confirm) {
							this.navigate({
								url:"/pages/user/certification"
							},'navigateTo')
				        }
				    }
				});
			},
			adjustNoticeBtn(btnLabel,status){
				this[btnLabel] = status;
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/style/mixin.scss';
.posi{ counter-reset: num; }
.posi2{
	position: relative;
	display: inline-block;
	height: 40rpx;
	line-height: 40rpx;
	text-align: right;
	padding-right: 15rpx;
	width: 140rpx;
	border-radius: 30rpx;
	border: 1px solid #F0F0F0;
	background: #F0F0F0;
	margin-left: 30rpx;
	color: #999;
	font-size: 24rpx;
}
.posi2.on{
	border: 1px solid $themeColor;
	background: #FFFFFF;
	color: $themeColor;
}
.posi2:before{
	position: absolute;
	display: block;
	left: 2rpx;
	top: 6rpx;
	width: 28rpx;
	height: 28rpx;
	border-radius: 100%;
	background: #fff;
	color: #999;
	counter-increment: num;
	content: counter(num);
	text-align: center;
	line-height: 28rpx;
}
.posi2.on:before{
	background: $themeColor;
	color: #FFF;
}
.posi>view:nth-of-type(1):after{
	position: absolute;
	display: block;
	content: "";
	right: -20rpx;
	top: 12rpx;
	width: 16rpx;
	height: 16rpx;
	border-top: 1px solid $themeColor;
	border-right: 1px solid $themeColor;
	transform: rotate(45deg);
}
.posi>.posi2:nth-of-type(1){
	margin-left: 0;
}

.inputView{
	background:#FFFFFF;
}
.inputView>view{
	height: 90rpx;
	border-bottom: 1px solid #ddd;
}
.inputView>view>view:nth-of-type(1){
	flex-shrink: 0;
	width: 190upx;
	padding-left: 15upx;
	color: #999;
}

.notice{
	background-color: #FFFFFF;
}
.notice .title{
	height: 80upx;
	line-height: 80upx;
	font-size: 32upx;
	border-bottom: 1px solid #ddd;
}
.notice .btns{
	padding-top:20upx;
	padding-bottom:20upx;
}
.notice .btns>view{
	display: block;
	padding: 0 16rpx;
	color: #999;
	line-height: 52rpx;
	font-size: 24rpx;
	border-radius: 30rpx;
	border: 1px solid #f0f0f0;
	background-color: #f0f0f0;
	height: 56rpx;
}

.notice .btns>view.active{
	color: #fff;
	border: 1px solid $themeColor;
	background-color: $themeColor;
}
</style>