扫码

app/pages/collectCode/login/index.vue

@@ -0,0 +1,211 @@
+<script setup>
+import { useRouter, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n'
+import { senCode, userLogin } from "@/api/auth/index.js";
+import { authStore } from "~/stores/auth/index.js";
+import { message } from '@/components/x-message/useMessage.js'
+// ... 现有导入 ...
+import FingerprintJS from '@fingerprintjs/fingerprintjs'
+const { userInfo, token,fingerprint } = authStore()
+const router = useRouter();
+const route = useRoute();
+const { locale } = useI18n()
+definePageMeta({
+  title: '登录',
+  i18n: 'login.title',
+})
+const loadingRef = ref({
+  loading1: false,
+  loading2: false,
+})
+const password = ref('')
+const loginType = ref(0)
+const interval = ref(null)
+const startCountdown = () => {
+  if (interval.value) {
+    clearInterval(interval.value);
+  }
+  countdown.value = 60;
+  interval.value = setInterval(() => {
+    if (countdown.value > 0) {
+      countdown.value--;
+    } else {
+      clearInterval(interval.value);
+    }
+  }, 1000);
+}
+const countdown = ref(0);
+const phoneNum = ref('17630920520')
+const code = ref('123789')
+const pane = ref(0)
+const showKeyboard = ref(false);
+const getFingerprint = async () => {
+  const fp = await FingerprintJS.load()
+  const result = await fp.get()
+  return result.visitorId // 稳定的指纹哈希值
+}
+
+// 如果指纹存在，且指纹和指纹库中的指纹一致，则直接登录
+const checkFingerprint = async () => {
+  const tempFingerprint = await getFingerprint()
+  if (fingerprint && fingerprint === tempFingerprint) {
+    await router.push('/collectCode/mine')
+  }
+}
+checkFingerprint()
+const vanSwipeRef = ref(null)
+const getCode = async () => {
+  loadingRef.value.loading1 = true
+  const res = await senCode({
+    telNum: phoneNum.value,
+    zone: '86'
+  })
+  loadingRef.value.loading1 = false
+  if (res.status === 0) {
+
+
+  }
+  pane.value = 1
+  vanSwipeRef.value?.swipeTo(pane.value)
+  showKeyboard.value = true
+  startCountdown();
+  /*  pane.value = 1
+    vanSwipeRef.value?.swipeTo(pane.value)
+    showKeyboard.value=true
+    startCountdown();*/
+
+}
+const changeToPwd = async () => {
+  loginType.value = loginType.value === 0 ? 1 : 0
+}
+const goBack = () => {
+  code.value = ''
+  pane.value = 0
+  vanSwipeRef.value?.swipeTo(pane.value)
+}
+const goLogin = async () => {
+  loadingRef.value.loading2 = true
+  const res = await userLogin({
+    telNum: phoneNum.value,
+    zone: '86',
+    code: code.value
+  })
+  if (res.status === 0) {
+    userInfo.value = res.data.accountInfo
+    token.value = res.data.token
+    fingerprint.value = await getFingerprint()
+
+    await router.push('/collectCode/mine');
+  
+  }
+  loadingRef.value.loading2 = false
+}
+
+</script>
+
+<template>
+  <div class="h-[100vh] w-[100vw] bg-[url('@/static/images/asdfsdd.png')] bg-cover px-[31px] pt-[86px]">
+    <div class="w-full flex justify-center mb-[100px] flex-col items-center">
+      <img class="h-[105px] w-[189px]" src="@/static/images/ghfggff.png" alt="">
+      <img class="h-[29px] w-[108px]" src="@/static/images/qrcodetext.png" alt="">
+    </div>
+    <van-swipe ref="vanSwipeRef" :show-indicators="false" :touchable="false" :lazy-render="true" :loop="false">
+      <van-swipe-item>
+        <div v-show="pane === 0">
+          <div class="">
+            <div class="border-b-[1.7px] mt-[8px]">
+              <van-field v-model="phoneNum" clearable :placeholder="$t('login.phonePlaceholder')">
+                <template #label>
+                  <div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
+                    手机号
+                  </div>
+                </template>
+              </van-field>
+
+            </div>
+            <div class="border-b-[1.7px] mt-[8px]" v-show="loginType === 1">
+              <van-field v-model="password" clearable :placeholder="$t('login.passwordPlaceholder')">
+                <template #label>
+                  <div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
+                    密码
+                  </div>
+                </template>
+              </van-field>
+
+            </div>
+            <div class="flex justify-end mt-[10px]" @click="changeToPwd">
+              <div class="text-[14px] text-[#2B53AC]">
+                {{ loginType === 0 ? '密码登录' : '验证码登录' }}
+              </div>
+
+            </div>
+            <div />
+          </div>
+          <div class="mt-[55px]">
+            <div v-if="loginType === 0">
+              <van-button :loading="loadingRef.loading1" v-if="phoneNum" :loading-text="$t('login.getCode')"
+                type="primary" block style="height: 48px" @click="getCode">{{ $t('login.getCode')
+                }}</van-button>
+              <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{
+                $t('login.getCode')
+              }}</van-button>
+            </div>
+            <div v-else>
+              <van-button type="primary" v-if="password" block :loading="loadingRef.loading2" :loading-text="$t('login.login')"
+                style="height: 48px;margin-top:10px" @click="goLogin">{{
+                  $t('login.login')
+                }}</van-button>
+              <van-button v-else type="primary" color="#D3D3D3" block style="height: 48px">{{
+                $t('login.login')
+              }}</van-button>
+            </div>
+          </div>
+        </div>
+      </van-swipe-item>
+      <van-swipe-item>
+        <div v-show="pane === 1">
+          <div class="flex mb-[16px]">
+            <div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('login.hasSendTo') }}</div>
+            <div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div>
+          </div>
+          <van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true" />
+          <div :class="`${countdown > 0 ? 'text-#BDBDBD' : 'text-#2B53AC'}  text-14px`">
+            {{ $t('login.reSend') }}<span v-if="countdown > 0">({{ countdown }})</span>
+          </div>
+          <div class="mt-[17px]">
+
+            <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 v-else type="primary" color="#D3D3D3" block style="height: 48px">{{
+              $t('login.login')
+            }}</van-button>
+          </div>
+          <div class="mt-[17px]">
+            <van-button type="primary" @click="goBack" block style="height: 48px">{{ $t('login.back')
+              }}</van-button>
+          </div>
+        </div>
+      </van-swipe-item>
+    </van-swipe>
+    <van-number-keyboard v-model="code" :show="showKeyboard" @blur="showKeyboard = false" />
+
+  </div>
+</template>
+
+<style scoped lang="scss">
+:deep(.van-cell.van-field) {
+  padding-left: 0;
+}
+
+:deep(.van-password-input) {
+  margin: 0;
+}
+
+:deep(.van-password-input__item) {
+  border: 1px solid #E5E5E5;
+  width: 41px;
+  height: 41px;
+}
+</style>

app/pages/collectCode/mine/index.vue

@@ -0,0 +1,55 @@
+<script setup>
+import { userArtworks } from "~/api/goods/index.js";
+import { authStore } from "~/stores/auth/index.js";
+
+definePageMeta({
+  layout: 'default',
+  title: '收款二维码',
+  i18n: 'menu.profile',
+})
+const { userInfo } = authStore()
+const initData = async () => {
+  const res = await userArtworks({})
+  if (res.status === 0) {
+
+  }
+}
+initData()
+</script>
+
+<template>
+  <div class="w-[100vw] bg-[url('@/static/images/3532@2x.png')] bg-cover pt-43px flex-grow-1 flex flex-col">
+    <div class="flex items-center px-16px mb-43px">
+      <div class="mr-23px">
+        <img class="w-57px h-57px" src="@/static/images/5514@2x.png" alt="">
+      </div>
+      <div class="flex flex-col">
+        <div class="text-18px text-#181818">{{ userInfo.realName }}</div>
+        <div class="text-#575757 text-14px">{{ userInfo.telNum }}</div>
+      </div>
+      <div class="flex-grow-1 flex justify-end">
+        <img class="w-40px h-40px" src="@/static/images/logout.png" alt="">
+      </div>
+    </div>
+    <div class="flex-grow-1">
+      <div class="border-b-1px border-b-#D3D3D3  px-16px flex">
+        <div class="text-#000 text-16px border-b-3 border-b-#2B53AC h-36px">线下付款二维码 </div>
+      </div>
+      <van-pull-refresh>
+        <van-list finished-text="没有更多了">
+          <van-swipe-cell>
+
+            <van-cell :border="false" title="单元格" value="内容" />
+            <template #right>
+              <van-button square type="danger" text="删除" />
+              <van-button square type="primary" text="收藏" />
+            </template>
+          </van-swipe-cell>
+        </van-list>
+      </van-pull-refresh>
+    </div>
+  </div>
+</template>
+<style scoped>
+
+</style>