vue-insagent-app/pages/user/infoInput.vue

<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<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: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			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>