mobileResource_vue3_vite/src/views/bindMobilePhone/bindMobilePhone.vue

<template>
  <div class="logoStyle">
	  <div class="status_bar"></div>
	  <div class="top-info">
	    <img src="../../assets/images/denglu-fanhui@2x.png" class="fanhui" @click="toBack"/>
	    <!-- <div class="zctit">注册 </div> -->
		<div class="registered" >
			<div style="color: #999999" class="tozhuce">已有账号， </div>
			<div style="color: #188cfb" class="tozhuce" @click="tologin"> 去登录 </div>
		</div>
	  </div>
	  <div class="title">
		绑定手机号
	  </div>
	  <!-- 读者证信息-->
	 <div class="input-form organization-info">
			<div class="pohpas">
				<div class="uni-form-item uni-column"   @click="clickSelectOrganization"  >
				   <div class="uni-input loginInput tushuguan"  v-bind:class="{ 'gray': data.hasSid}"   >
				   {{data.selectName}}
				   </div>
				   <div class="arrow"  v-show="!data.hasSid">
					   <div class="icon iconfont" style="color:#999999;font-weight: 600;">&#xe65a;</div>
				   </div>
				</div>
			</div>
	  </div>	
	   <!-- 手机号信息-->
      <div class="input-form">
			<div class="pohpas">
				  <div class="uni-form-item uni-column">
					<input   v-model="data.certificateNo"   class="loginInput yzm"  placeholder-style="color:#999999;font-size:0.30rem"   placeholder="手机号" 	/>
				  </div>
				  <div class="verificationCode">
						<div  class="loginInput yzm" >
							<input style="font-size: 0.3rem;height: 0.70rem;"   v-model="data.verificationCode"   placeholder-style="color:#999999;font-size:0.30rem"  placeholder="验证码" />					
							<div :class="['verificationBtn',{'color':data.agreeVal}]"  @click="verificationPhone" >
							 {{data.verification}}
							</div>
						</div>
				  </div>
			</div> 
			<div class="protocol uni-column">
				  <div  @click="data.agreeVals=!data.agreeVals" style="display: flex;" >
					<div class="kon" v-if="!data.agreeVals"></div>
					<img src="../../assets/images/denglu-yiyuedu@2x.png" class="dui" v-if="data.agreeVals"/>
					<div>我已阅读并同意《AI阅行用户服务协议》</div>
				  </div>
			</div>
			<div class="RegisteredBtn uni-column">
				<button type="primary"  @click="nextStep"  v-show="data.shoru">注册</button>
				<div  v-show="!data.shoru" class="bu2">注册</div>
			</div>
    </div>
	
	<!-- 图片滑动校验码 -->
	<div class="imgVerificationCode"  v-show="data.showVerificationDialog">
		<slide-verify ref="slideblock" @success="imgVerificationSuccess" @again="onAgain" @fulfilled="onFulfilled"  @fail="imgVerificationfail" @refresh="onRefresh" :slider-text="text" :imgs="data.verificationImgs" :accuracy="data.verificationAccuracy"></slide-verify>
	</div>
	<!-- 遮罩层 -->
	<div class="dialog-mask"  v-show="data.showVerificationDialog" @click="data.showVerificationDialog = false"></div>
	
	<!-- 选择读者证 -->
	<van-popup  v-model:show="data.showSelectOrganization"   position="bottom">
		<van-picker
		   title=""
		   show-toolbar
		   :columns="data.array"
		   @change="bindPickerChange"
		   @confirm="onConfirmPicker"
		   @cancel="onCancelPicker"
		/> 
	</van-popup>		 
  </div>
</template>

<script>
import { Toast } from 'vant';
import { reactive,computed,onMounted,getCurrentInstance,watch,toRefs  } from 'vue';
import slideVerify from "@/components/verify/slide-verify.vue";
import { selectLbrary } from "@/common/selectLbrary.js";
import img0 from '../../assets/images/img0.jpg';
import img1 from '../../assets/images/img1.jpg';
import img2 from '../../assets/images/img2.jpg';
import img3 from '../../assets/images/img3.jpg';
import img4 from '../../assets/images/img4.jpg';
import img5 from '../../assets/images/img5.jpg';

	export default {
	components: {
	    slideVerify
	},
	setup() {
		const { lbraryArrayData } = selectLbrary()
	    const { proxy } = getCurrentInstance() 
		const data = reactive({
			hasSid: false,
			array: [],
			showSelectOrganization: false,
			selectName:'请选择图书馆',
			selectId:0,
			verificationImgs: [
        img0,
        img1,
        img2,
        img3,
        img4,
        img5,
			],
			verificationAccuracy: 1,      // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
			showVerificationDialog: false,
			agreeVals: false,
			certificateNo: "",
			verification: "获取验证码",
			verificationCode: "",
			agreeVal: false,
			num: 60,
			ClntId: "",
			sid: "",
			shoru:false,
			weChatUserInfo: {}
		})
		onMounted(() => {
		   let option = proxy.$route.query;
		   data.ClntId = option.ClntId;
		   data.array = lbraryArrayData.lbraryArray
		   /* 如果携带sid 则显示该机构， 未携带sid 则选择机构  */
		   if (localStorage.getItem('aiyxSid')) {
			   data.sid = localStorage.getItem('aiyxSid')
			   data.hasSid = true;  
			   proxy.getClntBySid();
		   } else {
			   data.hasSid = false; 
		   }
		})
		
		/* 监听获取机构信息 */
		watch(() => lbraryArrayData.lbraryArray, (newValue,oldVlaue) => {
			data.array = newValue
		})
		
		watch(() => data.certificateNo, (newValue,oldVlaue) => {
			data.certificateNo = newValue;
			data.certificateNo && data.verificationCode ? data.shoru=true : data.shoru=false; 
		})
		watch(() => data.verificationCode, (newValue,oldVlaue) => {
			data.verificationCode = newValue;
			data.certificateNo && data.verificationCode ? data.shoru=true : data.shoru=false; 
		})
		
		/* 取消选择机构 */
		let onCancelPicker = () => {
			data.showSelectOrganization = false
		}
		
		/* 确定选择机构  */
		let onConfirmPicker = () => {
			data.showSelectOrganization = false
		}
		
		/*根据sid获得机构信息  */
		let  getClntBySid = () => {
			let param  = {
				tSid: data.sid
			}
			proxy.$http
			  .get(proxy.$API.GETCLNTBYSID,
					{
						params: param
					}
			     )
			    .then(res => {
					if (res.type == 200) {
						if (res.data) {
							let resData = res.data;
							data.ClntId = resData.id;
							data.selectName = resData.name;
						}
					} else {
						data.hasSid = false;
						console.log(res.content)
					}
			  })
			.catch(res => {
				data.hasSid = false;
			    console.log(res)
			}) 
		}
		
		/* 点击弹出机构信息 */
		let clickSelectOrganization = () => {
			if (data.hasSid) {
				return;
			}
			data.showSelectOrganization = true
		}
		
		//图片滑动验证失败
		let imgVerificationfail = () => {
			Toast('验证失败, 请重试！')
		}
		
		//图片滑动验证成功
		let imgVerificationSuccess = () => {
			proxy.toRegistered();
		}
		
		/* 滑动选择机构 */
		let bindPickerChange =  (value, index) => {
			data.ClntId = data.array[index].id;
			data.selectName = data.array[index].text
		}
		
		// 下一步
		let nextStep = () => {
			if (!data.ClntId) {
				Toast('请选择机构')
				return;
			}
			if (!data.agreeVals) {
				Toast('请阅读服务协议')
				return;
			}
		    data.showVerificationDialog = true;	
		}
		//验证手机号
		let verificationPhone = () => {
			const that = data;
			let PhoenTest = /^1[3,4,5,6,7,8,9]\d{9}$/;
			if (PhoenTest.test(that.certificateNo) == false) {
				Toast('手机号为空或手机格式不正确')
			} else {
				proxy.GetAuthCode();
			}
		}
		//获取验证码
		let GetAuthCode = () => {
			if (!data.agreeVal == true) {
				const that = proxy;
				let param = {
					phone: data.certificateNo
				}  
				proxy.$http
					.post(proxy.$API.SENDMSGCODE,
						param
					 )
					.then(res => {
						if (res.type == 200) {
						    data.agreeVal = true;
						    that.Num();
						} else {
							Toast(res.content)
						}
					})
				.catch(res => {
					console.log(res)
				}) 
			}
		}
		let Num = () => {
			const that = data;
			let clock = setInterval(function() {
				// console.log(typeof this.num);
				if (that.num == 0) {
				  that.agreeVal = false;
				  that.verification = "重新获取";
				  that.num = 60;
				  window.clearInterval(clock);
				  // that.GetAuthCode();
				  return;
				} else {
				  that.num--;
				  that.verification = that.num + "重新获取";
				}
			}, 1000);
		}
		let tologin = () => {
			proxy.$router.push("/Login");
		}
		let toBack = () => {
		    proxy.$router.go(-1);
		}
		// 微信注册并登录
		let toRegistered = () => {
			const that = data;
			if (localStorage.getItem('weChatUserInfo')) {
				that.weChatUserInfo = JSON.parse(localStorage.getItem('weChatUserInfo'))
			}
			let param = {
				openid: that.weChatUserInfo.openid || '',
				nickname: that.weChatUserInfo.nickname || '',
				sex: that.weChatUserInfo.sex || '',
				province: that.weChatUserInfo.province || '',
				city: that.weChatUserInfo.city || '',
				country: that.weChatUserInfo.country || '',
				headimgurl: that.weChatUserInfo.headimgurl || '',
				privilege: that.weChatUserInfo.privilege || '',
				unionid: that.weChatUserInfo.unionid || '',
				ClntId: that.ClntId,
				Pwd: '',
				Phone: that.certificateNo,
				MsgCode: that.verificationCode,
				Source: 3
			}	
			proxy.$http
				.post(proxy.$API.WECHATREGISTER,
					param,
					{
						headers: {
						   'Content-Type': 'application/x-www-form-urlencoded'
						}
					}
				 )
				.then(res => {
					if (res.type == 200) {
						Toast('注册成功!')
						if (res.data) {
							localStorage.setItem("userData", JSON.stringify(res.data));
							localStorage.setItem("userphone", res.data.phone);
							localStorage.setItem("aiyxWeChatLoginStatus", "isLogin");
						}
						let url = "/";
						location.href = url;
					} else {
						Toast(res.content)
					    proxy.$refs.slideblock.reset();
						that.showVerificationDialog = false
				    }
		    })
			.catch((res) => {
				console.log(res)
			})
		}
		return {
			data,
			onCancelPicker,
			onConfirmPicker,
			getClntBySid,
			toRegistered,
			clickSelectOrganization,
			bindPickerChange,
			imgVerificationSuccess,
			imgVerificationfail,
			verificationPhone,
		    nextStep,
			GetAuthCode,
			Num,
			tologin,
			toBack
		}
	}
};
</script>
<style lang="scss" scoped>
.title{
	margin-top: 1.5rem;
	font-size: 0.42rem;
	color: #333;
	font-weight: bold;
	margin-left: 0.44rem;
}	
.top-info {
	width: 90%;
	padding: 0 5% 0.20rem 5%;
	height: 0.72rem;
	display: flex;
	align-items: center;
	background-color: #fff;
	/* box-shadow: 0rem 0.15rem 0.20rem rgb(246,246,247); */
}
.status_bar {
	height: 0.30rem;
	width: 100%;
	background: #fff;
}
.fanhui{
	width: 0.34rem;
	height: 0.30rem;
}
.zctit{
	font-weight: 600;
	margin-left: 40%;
	font-size: 0.37rem;
}
.registered{
	font-size: .3rem;
	text-align: center;
	display: flex;
	justify-content: center;
	position: absolute;
	right: 0.4rem;
}
.yzm{
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom:0.01rem solid rgb(241,241,241)
}
.pohpas{
	width: 100%;
	box-shadow:0 0 0.20rem rgb(235,235,237);
}
.tozhuce{font-size: 0.24rem;}
.tushuguan{
	display: flex;
	align-items: center;
	border-bottom:1px solid #f9f9f9 ;
}

.verification {
	font-size: 0.28rem;
	color: #222222;
	align-self: flex-start;
}
.logoStyle {
	width: 100%;
	height: 100%;
	background-size: cover;
	display: flex;
	flex-direction: column;
}
.input-form {
  width: 90%;
  margin: 0 auto;
  margin-top: 0.80rem;
  background-size: cover;
  display: flex;
  flex-direction: column;
}
.uni-form-item {
	width: 100%;
	display: flex;
}
.RegisteredBtn {
	width: 100%;
	margin: 0.35rem 0 0.40rem;
	overflow: hidden;
}
.loginInput {
	width: 86%;
	height: 0.98rem;
	margin: 0 auto;
	line-height: 0.92rem;
	font-size: 0.28rem;
	outline: none;
}
.verificationCode {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.verificationBtn {
	white-space: nowrap;
	width: 1.5rem;
	height: 0.48rem;
	border: 1px solid #188cfb;
	line-height: 0.48rem;
	text-align: center;
	color: #2794fb;
	font-size: 0.24rem;
}
.protocol {
  margin-top: 0.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  color: #999999;
  font-size: 0.22rem;
}
button {
  width: 100%;
  height: 0.88rem;
  line-height: 0.88rem;
  font-size: 0.28rem;
  color: #fff;
  background-color: #5194ff;
}
.color {
  color: #999999;
}
.dui{
	width: 0.26rem;
	height: 0.26rem;
	position: relative;
	top: 0.05rem;
	right: 0.07rem;
}
.kon{
	width: 0.26rem;
	height: 0.26rem;
	position: relative;
	top: 0.05rem;
	right: 0.07rem;
	border-radius: 50%;
	box-sizing: border-box;
	border: 1px solid #dadada;
}
.bu2{
	width: 100%;
	height: 0.90rem;
	line-height: 0.90rem;
	border-radius: 0.1rem;
	text-align: center;
	color: white;
	font-size: 0.30rem;
	background-color: rgb(138,197,253);
}
.input{
	position: relative;
	display: block;
}

/* 遮罩层 */
.dialog-mask{
	background: #000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2000;
	width: 100%;
	height: 100%;
	opacity: 0.4;
}

/* 图片校验码 */
.imgVerificationCode{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%,-50%,0);
	background: #fff;
	border-radius: 0.2rem;
	z-index: 2001;
	text-align: center;
}


.slider-section {
  margin: 20px 0;
  .img-box {
    position: relative;
    .bg-img {
      width: 100%;
    }
    .slider-img {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
 
  .slider-box {
    margin-top: 20px;
    background: #f7f9fa;
    color: #666;
    border: 1px solid #e4e7eb;
    position: relative;
    height: 30px;
    width: 100%;
    &:hover {
      box-shadow: 0 0 3px #ccc;
    }
    .slider-text {
      font-size: 14px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .slider-icon {
      width: 30px;
      height: 30px;
      background: #c8923a;
      text-align: center;
      font-size: 20px;
      color: #fff;
      box-shadow: 0 0 6px #ccc;
    }
  }
}

/* 机构信息 */
.organization-info{
	margin-bottom: -0.2rem;
	.arrow{
		display: flex;
		align-items: center;
		position: relative;
		right: 0.2rem;
		.icon {
			color: #999999;
			font-weight: 600;
			font-size: 0.5rem;
			transform: rotate(90deg);
		}
	}
}
.gray {
	color: #999;
}

</style>