新增密码输入功能及相关验证

src/services/modules/login/type.d.ts

@@ -3,12 +3,14 @@ export interface LoginEtssmsRequest {
   mobile: string
   code: string
   pushRecordId: string
+  password: string
 }
 
 // src/types/auth.ts
 export interface SendTtsSmsRequest {
   mobile: string
   pushRecordId: string
+  password: string
 }
 
 export interface RegisterUrlRequest {

src/views/login/index.vue

@@ -21,6 +21,24 @@
           />
         </van-cell-group>
 
+        <!-- 密码 -->
+        <van-cell-group inset class="grop">
+          <van-field
+            class="input"
+            v-model="formData.password"
+            placeholder="请输入密码"
+            clearable
+            :type="passwordType"
+            maxlength="30"
+          >
+            <template #right-icon>
+              <span @click="switchPasswordType">
+                <van-icon :name="passwordType === 'password' ? 'eye' : 'closed-eye'" />
+              </span>
+            </template>
+          </van-field>
+        </van-cell-group>
+
         <!-- 验证码输入 + 按钮 -->
         <van-cell-group inset class="grop">
           <van-field
@@ -36,6 +54,7 @@
             {{ isCounting ? countDown + 's后重发' : '获取验证码' }}
           </button>
         </van-cell-group>
+        <div class="tips">如忘记密码，请下载电子税务局APP进行密码找回</div>
 
         <!-- 同意协议 -->
         <div class="agree">
@@ -113,16 +132,23 @@ const userStore = useUserStore()
 const router = useRouter()
 const route = useRoute()
 
+const passwordType = ref<'text' | 'password'>('password')
+const switchPasswordType = () => {
+  passwordType.value = passwordType.value === 'password' ? 'text' : 'password'
+}
+
 /* 表单数据 */
 const formData = reactive<LoginEtssmsRequest>({
   mobile: '',
   code: '',
   pushRecordId: '',
+  password: '',
 })
 
 const sendEtsSms = reactive<SendTtsSmsRequest>({
   mobile: '',
   pushRecordId: '',
+  password: '',
 })
 
 /* 限制手机号只能输入数字，最多 30 位 */
@@ -162,9 +188,14 @@ const sendCode = async () => {
     showToast('请输入正确的手机号')
     return
   }
+  if (!formData.password) {
+    showToast('密码不能为空')
+    return
+  }
   sending.value = true
   const toast = showLoadingToast({ message: '发送中…', forbidClick: true, duration: 3000 })
   sendEtsSms.mobile = formData.mobile
+  sendEtsSms.password = formData.password
   try {
     const res = await sendEtsSmsApi(sendEtsSms)
     if (res.code === 0 && res.data) {
@@ -219,6 +250,10 @@ const loginBtn = useDebounceFn(async () => {
     showFailToast('请输入手机号')
     return
   }
+  if (!formData.password) {
+    showFailToast('密码不能为空')
+    return
+  }
   if (!formData.code) {
     showFailToast('验证码不能为空')
     return
@@ -467,6 +502,12 @@ onBeforeMount(() => {
           cursor: not-allowed;
         }
       }
+      .tips {
+        font-size: 3vw;
+        color: #999;
+        margin-top: 3vw;
+        text-align: center;
+      }
 
       .agree {
         text-align: left;