12

app/pages/collectCode/login/index.vue

@@ -1,16 +1,17 @@
 <script setup>
-import { useRouter, useRoute } from 'vue-router';
+import {useRouter, useRoute} from 'vue-router';
-import { useI18n } from 'vue-i18n'
+import {useI18n} from 'vue-i18n'
-import { senCode, userLogin } from "@/api/auth/index.js";
+import {senCode, userLogin} from "@/api/auth/index.js";
-import { codeAuthStore } from "@/stores-collect-code/auth/index.js";
+import {codeAuthStore} from "@/stores-collect-code/auth/index.js";
-import { message } from '@/components/x-message/useMessage.js'
+import {message} from '@/components/x-message/useMessage.js'
 // ... 现有导入 ...
 import FingerprintJS from '@fingerprintjs/fingerprintjs'
 import {checkPhone, mobileLogin, userSend} from "@/api-collect-code/auth/index.js";
-const { userInfo, token,fingerprint } = codeAuthStore()
+
+const {userInfo, token, fingerprint} = codeAuthStore()
 const router = useRouter();
 const route = useRoute();
-const { locale } = useI18n()
+const {locale} = useI18n()
 const loadingRef = ref({
   loading1: false,
   loading2: false,
@@ -57,15 +58,15 @@ const getCode = async () => {
     tel: phoneNum.value,
   })
   loadingRef.value.loading1 = false
-  if (res.status === 0){
+  if (res.status === 0) {
-   const res=await userSend({telNum:phoneNum.value,zone:'+86'})
+    const res = await userSend({telNum: phoneNum.value, zone: '+86'})
-    if (res.status === 0){
+    if (res.status === 0) {
       pane.value = 1
       vanSwipeRef.value?.swipeTo(pane.value)
       showKeyboard.value = true
     }
   }
-/*  loadingRef.value.loading1 = false
+  /*  loadingRef.value.loading1 = false
     if (res.status === 0) {
 
 
@@ -92,8 +93,8 @@ const goLogin = async () => {
   loadingRef.value.loading2 = true
   const res = await mobileLogin({
     TelNum: phoneNum.value,
-    Password:loginType.value===1?password.value:'',
+    Password: loginType.value === 1 ? password.value : '',
-    Code: loginType.value===0?code.value:''
+    Code: loginType.value === 0 ? code.value : ''
   })
   if (res.status === 0) {
     userInfo.value = res.data.accountInfo
@@ -105,7 +106,11 @@ const goLogin = async () => {
   }
   loadingRef.value.loading2 = false
 }
+const showPassword = ref(false)
 
+const togglePasswordVisibility = () => {
+  showPassword.value = !showPassword.value
+}
 </script>
 
 <template>
@@ -129,31 +134,47 @@ const goLogin = async () => {
 
             </div>
             <div class="border-b-[1.7px] mt-[8px]" v-show="loginType === 1">
-              <van-field v-model="password" clearable placeholder="请输入密码">
+              <van-field
+                  v-model="password"
+                  :type="showPassword ? 'text' : 'password'"
+                  clearable
+                  placeholder="请输入密码"
+              >
                 <template #label>
                   <div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
                     密码
                   </div>
                 </template>
+                <template #button>
+                  <div class="flex justify-center items-center">
+                    <van-icon
+                        size="20"
+                        :name="showPassword ? 'eye-o' : 'closed-eye'"
+                        @click="togglePasswordVisibility"
+                    />
+                  </div>
+                </template>
               </van-field>
 
             </div>
-            <div class="flex justify-end mt-[10px]" >
+            <div class="flex justify-end mt-[10px]">
               <div class="text-[14px] text-[#2B53AC]" @click="changeToPwd">
                 {{ loginType === 0 ? '密码登录' : '验证码登录' }}
               </div>
             </div>
-            <div />
+            <div/>
           </div>
           <div class="mt-[55px]">
             <div v-if="loginType === 0">
               <van-button :loading="loadingRef.loading1" v-if="phoneNum" loading-text="获取验证码"
-                type="primary" block style="height: 48px" @click="getCode">获取验证码</van-button>
+                          type="primary" block style="height: 48px" @click="getCode">获取验证码
+              </van-button>
               <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">获取验证码</van-button>
             </div>
             <div v-else>
               <van-button type="primary" v-if="password" block :loading="loadingRef.loading2" loading-text="登录"
-                style="height: 48px;margin-top:10px" @click="goLogin">登录</van-button>
+                          style="height: 48px;margin-top:10px" @click="goLogin">登录
+              </van-button>
               <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">登录</van-button>
             </div>
           </div>
@@ -165,10 +186,10 @@ const goLogin = async () => {
             <div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('login.hasSendTo') }}</div>
             <div class="text-[16px] text-[#000]">+86 {{ phoneNum }}</div>
           </div>
-          <van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true" />
+          <van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true"/>
           <div class="flex justify-between">
             <div :class="`${countdown>0?'text-#BDBDBD':'text-#2B53AC'}  text-14px`">
-              {{ $t('login.reSend') }}<span v-if="countdown>0">({{countdown}})</span>
+              {{ $t('login.reSend') }}<span v-if="countdown>0">({{ countdown }})</span>
             </div>
             <div @click="goBack" class="text-#2B53AC text-14px">
               {{ $t('login.back') }}
@@ -178,15 +199,17 @@ const goLogin = async () => {
             <van-button v-if="code.length === 6" type="primary" block :loading="loadingRef.loading2"
                         :loading-text="$t('login.login')" style="height: 48px" @click="goLogin">{{
                 $t('login.login')
-              }}</van-button>
+              }}
+            </van-button>
             <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{
                 $t('login.login')
-            }}</van-button>
+              }}
+            </van-button>
           </div>
         </div>
       </van-swipe-item>
     </van-swipe>
-    <van-number-keyboard v-model="code" :show="showKeyboard" @blur="showKeyboard = false" />
+    <van-number-keyboard v-model="code" :show="showKeyboard" @blur="showKeyboard = false"/>
 
   </div>
 </template>