com.kasite.client.uniapp.patient/pagesPersonal/st1/business/patientAuth/authSms/authSms.vue

<template>
	<view class="container">
	  <UserInfo :userInfo="currentUser" :showBtn="false" :type="pageType" bgClass="bgLinGra"></UserInfo>
	  <view class="tipsMsg">请输入手机验证码</view>
	  <view class="mainBox">
	    <view class="termBox border-bottom">
	      <text>手机号码</text>
	      <text>{{currentUser.mobile}}</text>
	    </view>
	    <view class="termBox">
	      <text>验证码</text>
	      <view class="displayFlexRow">
	        <input class="code" type='number' placeholder="请输入验证码" v-model="provingCode"></input>
	        <view class="codeText border-left colorCustom" @click="getCode" v-if="seconds<=0">获取验证码</view>
	        <view class="codeText colorCustom" v-else>{{seconds}}秒后重新获取</view>
	      </view>
	      
	    </view>
	  </view>
	  <view class="nextBtnBox">
	    <text class="backgroundCustom" @click="nextBtna">确定</text>
	  </view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
import { useOnLoad } from '@/hook';
import { sendVerificationCode_V3, addUserLevelL1_V3, checkVerificationCode_V3 } from '@/pagesPersonal/service/patientManagement';
import { common } from '@/utils';
import UserInfo from '@/pagesPersonal/st1/components/userInfo/userInfo.vue';

const app = getApp();

const currentUser = ref<any>({});
const provingCode = ref("");
const pcId = ref("");
const seconds = ref(0);
const pageType = ref('member');
const timer = ref<any>(null);

useOnLoad((options) => {
    let cUser = app.globalData.currentUser;
    let pType = 'member';
    if (common.isNotEmpty(cUser.cardNo)) {
        pType = cUser.cardType == 1 ? 'card' : 'hospital';
    }
    currentUser.value = cUser;
    pageType.value = pType;
});

// 点击获取验证码
const getCode = async () => {
    let queryData = {
        openid: store.state.openId,
        memberId: currentUser.value.memberId
    };
    let resp = await sendVerificationCode_V3(queryData);

    if (!common.isEmpty(resp)) {
        pcId.value = resp[0].pcId;
        common.showModal('发送成功！');
        
        // Custom countdown logic
        seconds.value = 60;
        if(timer.value) clearInterval(timer.value);
        timer.value = setInterval(() => {
            seconds.value--;
            if (seconds.value <= 0) {
                clearInterval(timer.value);
            }
        }, 1000);
    }
};

// 点击下一步
const nextBtna = async () => {
    if (common.isEmpty(provingCode.value)) {
        common.showToast('请输入验证码');
        return;
    }
    let queryData = {
        openId: store.state.openid,
        mobile: currentUser.value.mobile,
        memberId: currentUser.value.memberId,
        store: {
            cardEncryptionStore: currentUser.value.encryptionStore || '',
            baseMemberEncryptionStore: currentUser.value.baseMemberEncryptionStore
        },
        pcId: pcId.value,
        verificationCode: provingCode.value
    };
    // 校验验证码是否正确
    if (await checkVerificationCode(queryData)) return;
    // 校验成功 添加等级
    let resLevel = await addUserLevelL1_V3(queryData);
    if (resLevel) {
        common.navigateBack(1);
    } else {
        common.showModal("系统异常，请联系管理员。", () => {
            common.navigateBack(2);
        });
    }
};

// 检验验证码
const checkVerificationCode = async (queryData: any) => {
    return new Promise(async (resolve, reject) => {
        if (common.isEmpty(queryData.pcId)) {
            common.showModal('请先获取验证码');
            resolve(true); // Should return true to stop execution in nextBtna
        } else {
            let reqData = {
                pcId: queryData.pcId || '',
                verificationCode: queryData.verificationCode,
            };
            let { resData } = await checkVerificationCode_V3(reqData);
            if (resData && resData.RespCode == 10000) {
                resolve(false);
            } else {
                 resolve(true);
            }
        }
    });
};
</script>

<style lang="scss" scoped>
	
	.tipsMsg {
	  line-height: 80upx;
	  padding-left: 30upx;
	  font-size: 28upx;
	  color: #999
	}
	
	.mainBox {
	  padding-left: 30upx;
	  box-sizing: border-box;
	  background: white;
	  margin: 0 30upx;
	  border-radius: 24upx;
	}
	.termBox {
	  height: 120upx;
	  padding-right: 30upx;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	}
	.termBox:last-child {
	  border-bottom: none;
	}
	.termBox text:nth-child(1){
	  width: 23%;
	  font-size: 30upx;
	  color: #333;
	}
	.termBox text:nth-child(2){
	  font-size: 30upx;
	  color: #333;
	}
	.termBox .displayFlexRow{
	  justify-content: flex-end;
	}
	.termBox input{
	  width: 75%;
	  font-size: 30upx;
	  text-align: right;
	}
	.termBox picker{
	  width: 75%;
	  text-align: right;
	  position: relative;
	}
	.code {
	  width: 40% !important;
	  padding-right: 30upx;
	}
	.codeText {
	  /* width: 30% !important; */
	  font-size: 30upx;
	  color: #999;
	  text-align: right;
	  padding-left: 30upx;
	}
	.codeStype {
	  white-space:nowrap;
	  color:  var(--dominantColor) !important;
	}
	
	.nextBtnBox {
	  width: 100%;
	  padding: 0 30upx;
	  box-sizing: border-box;
	}
	.nextBtnBox text {
	  display: inline-block;
	  width: 100%;
	  line-height: 98upx;
	  font-size: 30upx;
	  color: white;
	  font-weight: bold;
	  text-align: center;
	  margin-top: 80upx;
	  border-radius: 45upx;
	}
</style>