|
|
@@ -0,0 +1,536 @@
|
|
|
+<template>
|
|
|
+ <view class="yezhu_body">
|
|
|
+ <view class="user_info">
|
|
|
+ <view class="user_line">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="user_item">
|
|
|
+ <text class="item_name">姓名</text>
|
|
|
+ <view class="item_right">
|
|
|
+ <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="name" placeholder="请输入姓名" @blur='inputName' @confirm='inputName'/>
|
|
|
+ <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="user_line">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="user_item">
|
|
|
+ <text class="item_name">性别</text>
|
|
|
+ <view class="item_right" @click="showGender">
|
|
|
+ <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="genderStr" placeholder="请选择" disabled/>
|
|
|
+ <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="user_line">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="user_item">
|
|
|
+ <text class="item_name">手机号</text>
|
|
|
+ <view class="item_right">
|
|
|
+ <input v-if="mobileOld" placeholder-class="item_right_name_placeholder" type='number' maxlength="11" class="item_right_name" :value="mobileOld" disabled/>
|
|
|
+ <input v-else placeholder-class="item_right_name_placeholder" type='number' maxlength="11" style="width: calc(100% - 150rpx);" class="item_right_name" :value="mobile" placeholder="请输入" @blur='inputMobile' @confirm='inputMobile'/>
|
|
|
+ <view class="veritify" @click="getVeritify" v-if="!mobileOld">
|
|
|
+ {{veritifyTxt}}
|
|
|
+ </view>
|
|
|
+ <image v-if="mobileOld" class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="user_item" v-if="!mobileOld&&showInputVerifity">
|
|
|
+ <text class="item_name">验证码</text>
|
|
|
+ <view class="item_right">
|
|
|
+ <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="verifity" placeholder="请输入" @blur='inputVerifity' @confirm='inputVerifity'/>
|
|
|
+ <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="project_ino">
|
|
|
+ <view class="user_line">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="user_item">
|
|
|
+ <text class="item_name">认证项目</text>
|
|
|
+ <view class="item_right" @click="chooseHouse">
|
|
|
+ <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="houseName" placeholder="请选择" disabled/>
|
|
|
+ <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="user_line">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="user_item">
|
|
|
+ <text class="item_name">证件类型</text>
|
|
|
+ <view class="item_right" @click="chooseCertificateType">
|
|
|
+ <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="certificateTypeStr" placeholder="请选择" disabled/>
|
|
|
+ <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="user_line">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="user_item">
|
|
|
+ <text class="item_name">证件号</text>
|
|
|
+ <view class="item_right">
|
|
|
+ <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="idcard" :value="certificateNo" placeholder="请输入" @blur='inputId' @confirm='inputId'/>
|
|
|
+ <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="user_line">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="user_item">
|
|
|
+ <text class="item_name">填写房号</text>
|
|
|
+ <view class="item_right">
|
|
|
+ <input placeholder-class="item_right_name_placeholder" class="item_right_name" type="text" :value="roomNo" placeholder="请输入" @blur='inputRoomNo' @confirm='inputRoomNo'/>
|
|
|
+ <image class="icon_right" src="../../static/icons/icon_right_yezhu.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="xieyi" @click="showXieyi">
|
|
|
+ <image class="icon_selected" v-if="agree" src="../../static/icons/icon_yezhu_selected.png" mode=""></image>
|
|
|
+ <image class="icon_selected" v-else src="../../static/icons/icon_yezhu_unselected.png" mode=""></image>
|
|
|
+ <text class="tongyi">我已阅读并同意</text>
|
|
|
+ <text class="xieyi_text">《入驻协议》</text>
|
|
|
+ </view>
|
|
|
+ <view class="btn_next" @click="addOrUpdate">
|
|
|
+ 下一步
|
|
|
+ </view>
|
|
|
+ <dmAgreeement ref='agreement' @agree='agreeXieyi'></dmAgreeement>
|
|
|
+ <dmPickerView ref="genderPicker" :options="genderList" :value="gender" @confirm="confirm" title="筛选时间维度"></dmPickerView>
|
|
|
+ <dmPickerView ref="housePicker" :options="houseList" :value="houseId" @confirm="houseConfirm" title="筛选时间维度"></dmPickerView>
|
|
|
+ <dmPickerView ref="certificateTypePicker" :options="certificateTypeList" :value="certificateType" @confirm="certificateTypeConfirm" title="筛选时间维度"></dmPickerView>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import dmAgreeement from "../../components/subComponents/dmAgreement.vue";
|
|
|
+ import dmPickerView from "../../components/subComponents/dmPickerView.vue";
|
|
|
+ let app = getApp();
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ agree:false,
|
|
|
+ veritifyTxt:"获取验证码",
|
|
|
+ genderList:[
|
|
|
+ {
|
|
|
+ title:"男",
|
|
|
+ value:"1"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title:"女",
|
|
|
+ value:"0"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ gender:"",
|
|
|
+ genderStr:"",
|
|
|
+ houseId:"",
|
|
|
+ houseName:"",
|
|
|
+ houseList:[],
|
|
|
+ certificateType:"1",
|
|
|
+ certificateTypeStr:"",
|
|
|
+ certificateTypeList:[{
|
|
|
+ title:"中国居民大陆身份证",
|
|
|
+ value:"1"
|
|
|
+ },{
|
|
|
+ title:"香港居民身份证",
|
|
|
+ value:"2"
|
|
|
+ },{
|
|
|
+ title:"护照",
|
|
|
+ value:"3"
|
|
|
+ }],
|
|
|
+ mobileOld:"",
|
|
|
+ mobile:"",
|
|
|
+ verifity:"",
|
|
|
+ name:"",
|
|
|
+ certificateNo:"",
|
|
|
+ roomNo:"",
|
|
|
+ timer:null,
|
|
|
+ countdownTimes:120,
|
|
|
+ showInputVerifity:true
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.queryProjectBox();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ agreeXieyi(){
|
|
|
+ this.agree = true
|
|
|
+ },
|
|
|
+ showXieyi(){
|
|
|
+ this.$refs.agreement.show()
|
|
|
+ },
|
|
|
+ showGender(){
|
|
|
+ this.$refs.genderPicker.show();
|
|
|
+ },
|
|
|
+ confirm(e){
|
|
|
+ this.genderStr = e.selItem.title;
|
|
|
+ this.gender = e.selItem.value;
|
|
|
+ },
|
|
|
+ chooseCertificateType(){
|
|
|
+ this.$refs.certificateTypePicker.show();
|
|
|
+ },
|
|
|
+ certificateTypeConfirm(e){
|
|
|
+ this.certificateTypeStr = e.selItem.title;
|
|
|
+ this.certificateType = e.selItem.value;
|
|
|
+ },
|
|
|
+ async queryProjectBox() {
|
|
|
+ let ret = await this.$myRequest({
|
|
|
+ url: "/project/queryProjectBox",
|
|
|
+ data: {
|
|
|
+ "onlineStatus": "1",
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.houseList = [];
|
|
|
+ if (ret.data.success) {
|
|
|
+ let houseList = ret.data.list || [];
|
|
|
+ let count = 0;
|
|
|
+ while (count<houseList.length){
|
|
|
+ this.houseList.push({
|
|
|
+ title:houseList[count].name,
|
|
|
+ value:houseList[count].id,
|
|
|
+ })
|
|
|
+ count++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getVeritify(){
|
|
|
+ if(!this.mobile){
|
|
|
+ uni.showToast({
|
|
|
+ icon:"none",
|
|
|
+ title:"请输入手机号"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var phone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
|
|
|
+ if (!phone.test(this.mobile)) {
|
|
|
+ uni.showToast({
|
|
|
+ icon:"none",
|
|
|
+ title:"请输入正确的手机号"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.showInputVerifity = true;
|
|
|
+ if(this.timer&&this.countdownTimes>=0){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let ret = await this.$myRequest({
|
|
|
+ url: "/sms/sendSmsVerifyCode",
|
|
|
+ data: {
|
|
|
+ "phone": this.mobile,
|
|
|
+ },
|
|
|
+ method:"GET"
|
|
|
+ })
|
|
|
+ this.houseList = [];
|
|
|
+ if (ret.data.success) {
|
|
|
+ this.countdown();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ chooseHouse(){
|
|
|
+ this.$refs.housePicker.show();
|
|
|
+ },
|
|
|
+ houseConfirm(e){
|
|
|
+ this.houseId = e.selItem.value;
|
|
|
+ this.houseName = e.selItem.title
|
|
|
+ },
|
|
|
+ countdown(){
|
|
|
+ this.timer = setInterval(()=>{
|
|
|
+ this.countdownTimes--;
|
|
|
+ this.veritifyTxt = this.countdownTimes+"s"
|
|
|
+ if(this.countdownTimes<=0){
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ this.veritifyTxt = '获取验证码';
|
|
|
+ this.countdownTimes = 120;
|
|
|
+ }
|
|
|
+ },1000)
|
|
|
+ },
|
|
|
+ inputName(e){
|
|
|
+ this.name = e.detail.value
|
|
|
+ },
|
|
|
+ inputMobile(e){
|
|
|
+ this.mobile = e.detail.value
|
|
|
+ },
|
|
|
+ inputVerifity(e){
|
|
|
+ this.verifity = e.detail.value
|
|
|
+ },
|
|
|
+ inputId(e){
|
|
|
+ this.certificateNo = e.detail.value
|
|
|
+ },
|
|
|
+ inputRoomNo(e){
|
|
|
+ this.roomNo = e.detail.value
|
|
|
+ },
|
|
|
+ async addOrUpdate() {
|
|
|
+ if(!this.name){
|
|
|
+ uni.showToast({
|
|
|
+ icon:"none",
|
|
|
+ title:"请输入姓名"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.gender){
|
|
|
+ uni.showToast({
|
|
|
+ icon:"none",
|
|
|
+ title:"请选择性别"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.mobile){
|
|
|
+ uni.showToast({
|
|
|
+ icon:"none",
|
|
|
+ title:"请输入手机号"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ if(!this.houseId){
|
|
|
+ uni.showToast({
|
|
|
+ icon:"none",
|
|
|
+ title:"请选择认证项目"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.certificateType){
|
|
|
+ uni.showToast({
|
|
|
+ icon:"none",
|
|
|
+ title:"请选择证件类型"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.certificateNo){
|
|
|
+ uni.showToast({
|
|
|
+ icon:"none",
|
|
|
+ title:"请输入证件号"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.roomNo){
|
|
|
+ uni.showToast({
|
|
|
+ icon:"none",
|
|
|
+ title:"请输入房号"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!this.agree){
|
|
|
+ uni.showToast({
|
|
|
+ icon:"none",
|
|
|
+ title:"请阅读并同意《入住协议》"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let ret = await this.$myRequest({
|
|
|
+ url: "/user/regist/addOrUpdate",
|
|
|
+ data: {
|
|
|
+ "agreeState": this.agree?1:0,
|
|
|
+ "captcha":this.verifity,
|
|
|
+ "certificateNo": this.certificateNo,
|
|
|
+ "certificateType": this.certificateType,
|
|
|
+ "phone": this.mobile,
|
|
|
+ "projectId": this.houseId,
|
|
|
+ "roomNo": this.roomNo,
|
|
|
+ "sex": this.gender,
|
|
|
+ "sign": this.sign,
|
|
|
+ "userId": app.globalData.userId,
|
|
|
+ "username": this.name,
|
|
|
+ "phoneFrom":this.mobileOld?1:2
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (ret.data.success) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'../certificationResultPage/certificationResultPage'
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ icon:"none",
|
|
|
+ title:ret.data.message
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ if(null!=this.timer){
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ dmAgreeement,
|
|
|
+ dmPickerView
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.yezhu_body{
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ position: relative;
|
|
|
+ .user_info{
|
|
|
+ background: #ffffff;
|
|
|
+ .user_item{
|
|
|
+ margin-left: 40rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ height: 98rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .item_name{
|
|
|
+ width: 20%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #262626;
|
|
|
+ }
|
|
|
+ .item_right{
|
|
|
+ width: 80%;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: right;
|
|
|
+ color: #262626;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item_right_name{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .item_right_name_placeholder{
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #b1b1b1;
|
|
|
+ }
|
|
|
+ .icon_right{
|
|
|
+ width: 10rpx;
|
|
|
+ height: 22rpx;
|
|
|
+ margin-left: 19rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .veritify{
|
|
|
+ width: 140rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 2rpx solid #f07423;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #f07423;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user_line{
|
|
|
+ margin-left: 40rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ height: 2px;
|
|
|
+ background: #f8f8f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .project_ino{
|
|
|
+ background: #ffffff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .user_item{
|
|
|
+ margin-left: 40rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ height: 98rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .item_name{
|
|
|
+ width: 20%;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #262626;
|
|
|
+ }
|
|
|
+ .item_right{
|
|
|
+ width: 80%;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: right;
|
|
|
+ color: #262626;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item_right_name{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .item_right_name_placeholder{
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #b1b1b1;
|
|
|
+ }
|
|
|
+ .icon_right{
|
|
|
+ width: 10rpx;
|
|
|
+ height: 22rpx;
|
|
|
+ margin-left: 19rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user_line{
|
|
|
+ margin-left: 40rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ height: 2px;
|
|
|
+ background: #f8f8f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .xieyi{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 162rpx;
|
|
|
+ left: 0;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .icon_selected{
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ .tongyi{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .xieyi_text{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #f07423;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn_next{
|
|
|
+ width: calc(100% - 80rpx);
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-left: 40rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ background: #f07423;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: Verdana, Verdana-Regular;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 60rpx;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
