update

src/components/base/click-verify/index.less

@@ -3,6 +3,8 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
+        align-items: center;
+        line-height: 1;
         margin-bottom: 10px;
 
         b {
@@ -10,6 +12,10 @@
         }
     }
 
+    &__close {
+        cursor: pointer;
+    }
+
     &__image {
         position: relative;
         width: 100%;

src/components/base/click-verify/index.vue

@@ -7,7 +7,7 @@
                     <span>请点击 <b>{{ state.compareMode ? '最大' : '最小' }}</b> 的数字</span>
                 </slot>
             </div>
-            <div @click="onRefresh">
+            <div class="click-verify__close" @click="onRefresh">
                 <slot name="refresh">
                     <span>刷新</span>
                 </slot>
@@ -22,7 +22,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, reactive, CSSProperties } from 'vue'
+import { onMounted, ref, reactive, CSSProperties, nextTick } from 'vue'
 
 const props = defineProps({
     count: {
@@ -179,7 +179,13 @@ const getItemRandomTopLeft = (width: number, height: number) => {
     }
 }
 
-onMounted(() => onRefresh())
+onMounted(() => {
+    nextTick(() => onRefresh())
+})
+
+defineExpose({
+    onRefresh
+})
 </script>
 
 <style lang="less">

src/packages/digital/router/index.ts

@@ -208,17 +208,6 @@ const routes: Array<RouteRecordRaw> = [
     ],
   },
   {
-    path: '/report',
-    component: Page,
-    children: [
-      {
-        path: '',
-        name: 'report',
-        component: () => import('@mobile/views/report/index.vue'),
-      }
-    ]
-  },
-  {
     path: '/account',
     component: Page,
     children: [
@@ -227,7 +216,8 @@ const routes: Array<RouteRecordRaw> = [
         name: 'account-certification',
         component: () => import('@mobile/views/account/certification/Index.vue'),
         props: {
-          showExample: false
+          showExample: false,
+          ageCheck: false
         }
       },
       {

src/packages/pc/components/base/click-verify/index.less

@@ -0,0 +1,3 @@
+.app-click-verify{
+    width: 100%;
+}

src/packages/pc/components/base/click-verify/index.vue

@@ -0,0 +1,57 @@
+<!-- 文本点击验证组件 -->
+<template>
+    <div class="app-click-verify">
+        <slot>
+            <el-button @click="showDialog = true">验证</el-button>
+        </slot>
+        <el-dialog class="app-click-verify__dialog" v-model="showDialog" :width="400" :show-close="false"
+            :close-on-click-modal="false" align-center destroy-on-close>
+            <ClickVerify @success="onSuccess" @error="onError">
+                <template #refresh>
+                    <el-icon :size="20">
+                        <Refresh />
+                    </el-icon>
+                </template>
+            </ClickVerify>
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="showDialog = false">关闭</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { ElMessage } from 'element-plus'
+import ClickVerify from '@/components/base/click-verify/index.vue'
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+        required: true
+    }
+})
+
+const emit = defineEmits(['update:show', 'success'])
+
+const showDialog = computed({
+    get: () => props.show,
+    set: (val) => emit('update:show', val)
+})
+
+const onSuccess = () => {
+    showDialog.value = false
+    emit('success')
+}
+
+const onError = () => {
+    ElMessage.error('验证失败')
+}
+</script>
+
+<style lang="less" scoped>
+@import './index.less';
+</style>

src/packages/pc/views/auth/login/index.vue

@@ -13,7 +13,12 @@
         </el-input>
       </el-form-item>
       <el-form-item>
-        <SliderVerify @statu="slide" v-if="showSliderVerify" />
+        <ClickVerify class="button-submit" v-model:show="showClickVerify" @success="formSubmit">
+          <el-button class="submit" type="primary" :loading="loading" @click="formValidate">
+            <span v-if="loading">{{ t('user.login.logining1') }}</span>
+            <span v-else>{{ t('user.login.login') }}</span>
+          </el-button>
+        </ClickVerify>
       </el-form-item>
       <el-form-item>
         <div class="text-link">
@@ -21,15 +26,10 @@
           <span @click="islogin = false">{{ t('user.login.forgetpassword') }}</span>
         </div>
       </el-form-item>
-      <el-form-item>
-        <el-button class="submit" type="primary" :loading="loading" @click="formSubmit">
-          <span v-if="loading">{{ t('user.login.logining1') }}</span>
-          <span v-else>{{ t('user.login.login') }}</span>
-        </el-button>
-      </el-form-item>
     </el-form>
     <Forget @close="islogin = true" v-else></Forget>
-    <el-dialog class="register" v-model="isRegister" :title="t('user.register.title1')" :width="360" center align-center>
+    <el-dialog class="register" v-model="isRegister" :title="t('user.register.title1')" :width="360" center
+      align-center>
       <div v-loading="rloading" v-if="rloading"></div>
       <div style="text-align: center;" v-else>
         <app-qrcode class="app-register-code__qrcode" :width="240" :text="qrContent" />
@@ -56,7 +56,7 @@ import SignLayout from '../components/layout/index.vue'
 import Forget from "../forget/index.vue"
 import AppQrcode from '@/components/base/qrcode/index.vue'
 import PasswordMidify from '@pc/components/layouts/header/components/modify/index.vue' // 待优化
-import SliderVerify from '@/components/base/slider-verify/index.vue' // 临时调用，待优化
+import ClickVerify from '@pc/components/base/click-verify/index.vue'
 
 const { formData, userLogin, userLogout } = useLogin()
 const route = useRoute()
@@ -71,8 +71,7 @@ const isRegister = shallowRef(false)
 const qrContent = shallowRef('')
 const rloading = shallowRef(false)
 const showPasswordMidify = shallowRef(false) // 显示修改密码
-const showSliderVerify = shallowRef(true) // 验证滑块组件重载
-const sliderVerifyStatus = shallowRef(false) // 滑块验证状态
+const showClickVerify = shallowRef(false) // 显示验证窗口
 const { t } = i18n.global
 
 const formRules: FormRules = {
@@ -94,53 +93,45 @@ const click = () => {
   })
 }
 
-// 滑块验证 
-const slide = (vfcStatu: { statu: string }) => {
-  if (vfcStatu.statu === 'success') {
-    sliderVerifyStatus.value = true
-  } else {
-    sliderVerifyStatus.value = false
-  }
-}
-
-const onClosed = () => {
-  userLogout()
-  showPasswordMidify.value = false
+// 表单验证
+const formValidate = () => {
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      showClickVerify.value = true
+    }
+  })
 }
 
-const formSubmit = () => {
+const formSubmit = async () => {
   const reset = () => {
     loading.value = false
-    showSliderVerify.value = false
-    sliderVerifyStatus.value = false
     formData.password = ''
-    setTimeout(() => {
-      showSliderVerify.value = true
-    }, 0)
   }
-  formRef.value?.validate(async (valid) => {
-    if (valid && sliderVerifyStatus.value) {
-      try {
-        loading.value = true
-        const forcedPasswordChange = await userLogin()
-        if (forcedPasswordChange) {
-          reset()
-          showPasswordMidify.value = true
-        } else {
-          await menuStore.getUserRoutes()
-          const redirect = route.query.redirect
-          if (redirect) {
-            router.replace(redirect.toString())
-          } else {
-            router.replace('/')
-          }
-        }
-      } catch (err) {
-        reset()
-        ElMessage.error(t('user.login.tips3') + err as string)
+
+  try {
+    loading.value = true
+    const forcedPasswordChange = await userLogin()
+    if (forcedPasswordChange) {
+      reset()
+      showPasswordMidify.value = true
+    } else {
+      await menuStore.getUserRoutes()
+      const redirect = route.query.redirect
+      if (redirect) {
+        router.replace(redirect.toString())
+      } else {
+        router.replace('/')
       }
     }
-  })
+  } catch (err) {
+    reset()
+    ElMessage.error(t('user.login.tips3') + err as string)
+  }
+}
+
+const onClosed = () => {
+  userLogout()
+  showPasswordMidify.value = false
 }
 
 service.systemInfoAsync.then(() => {