From e1b028d486713eaf55aaf35fbf334aa568059c0d Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期二, 14 四月 2026 15:46:54 +0800
Subject: [PATCH] 项目复制
---
src/views/h5/faceAuth/index.vue | 197 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 197 insertions(+), 0 deletions(-)
diff --git a/src/views/h5/faceAuth/index.vue b/src/views/h5/faceAuth/index.vue
new file mode 100644
index 0000000..32f2e91
--- /dev/null
+++ b/src/views/h5/faceAuth/index.vue
@@ -0,0 +1,197 @@
+<template>
+ <div class="p-7 py-4 face">
+ <div>
+ <el-row class="px-7" justify="space-between">
+ <el-text class="text-lg">濮撳悕锛�<span class="font-bold">{{ userInfo.name }}</span></el-text>
+ <el-text class="text-lg">韬唤璇佸熬鍙凤細<span class="font-bold">{{ userInfo.idCard?.slice(-4) }}</span></el-text>
+ </el-row>
+ <el-row justify="center">
+ <el-image :src="$getImageUrl(`/h5/face_default.png`)" style="width: 300px;"></el-image>
+ </el-row>
+ <!-- <video id="video" width="400" height="300" autoplay></video> -->
+ <el-row justify="center">
+ <el-text class="text-xl">璇锋媿鎽勭収鐗囧畬鎴愪汉鑴歌璇�</el-text>
+ </el-row>
+ <el-row class="my-7">
+ <el-text class="text-info text-center">
+ 鎻愮ず锛氫汉鑴搁獙璇佸皢浼氳繘琛岀郴缁熷鏍革紝涓虹‘淇濇偍鑳藉揩閫熼�氳繃楠岃瘉锛岃鍕胯。鐫�鏆撮湶锛岄厤鍚堢郴缁熸寚绀哄畬鎴愰獙璇併��
+ </el-text>
+ </el-row>
+ <el-row class="pt-7">
+ <el-text class="text-xl">鎷嶆憚椤荤煡</el-text>
+ </el-row>
+ <el-row justify="space-between" class="mt-3">
+ <div v-for="(tip,index) in tipItems" :key="`tip${index}`">
+ <el-image :src="$getImageUrl(`/h5/face_tip_${index+1}.png`)" style="width: 70px;"></el-image>
+ </div>
+ </el-row>
+ </div>
+ <el-row justify="center" class="mb-7">
+ <el-button @click="startCapture" type="primary" style="width: 100%;" size="large">寮�濮嬫媿鎽�</el-button>
+ </el-row>
+
+ <camera
+ v-if="openCameraFlag"
+ @close="openCameraFlag=false"
+ @handlerSuccess="shootSuccess"
+ ></camera>
+
+ <auditDialog
+ v-model="auditDialogFlag"
+ :base64="base64"
+ @handlerSuccess="auditSuccess"
+ >
+ </auditDialog>
+ </div>
+</template>
+
+<script>
+import camera from '@/views/h5/faceAuth/components/camera.vue';
+import {isWeixin} from '@/utils/UA.js'
+import auditDialog from '@/views/h5/faceAuth/components/auditDialog.vue';
+import { useSessionStore } from '@/stores/session.js'
+import { storeToRefs } from 'pinia';
+import { chooseImage } from '@/utils/wxjssdk.js'
+export default {
+ components: {
+ camera,
+ auditDialog
+ },
+ setup() {
+ const { userInfo } = storeToRefs(useSessionStore())
+ return { userInfo }
+ },
+ data() {
+ return {
+ tipItems: [
+ { label: '鏍囧噯鎷嶆憚' },
+ { label: '閬尅鑴搁儴' },
+ { label: '鎷嶆憚涓嶅叏' },
+ { label: '鍏夌嚎涓嶈冻' },
+ ],
+ openCameraFlag: false,
+ base64: '',
+ auditDialogFlag: false
+ }
+ },
+ computed: {
+ getSigninButtonStyle() {
+ if (this.positionStatus == 'success') {
+ return {
+ 'background': '#66d06c',
+ 'border-color': '#e7f7eb'
+ }
+ } else {
+ return {
+ 'background': '#e1e1e1',
+ 'border-color': '#f8f8f8'
+ }
+ }
+ },
+ appId() {
+ return this.$route.query.appId
+ }
+ },
+ async mounted() {
+ this.currentTimeText = this.$dayjs().format('HH:mm')
+ },
+ methods: {
+ getUserPositionStatus(evt) {
+ this.userPositionStatus = evt
+ },
+ async startCapture() {
+ if (isWeixin) {
+ let photo = await chooseImage()
+ photo = photo.startsWith('data:image') ? photo : ('data:image/jpg;base64,' + photo)
+ this.shootSuccess(photo)
+ } else {
+ this.openCameraFlag = true
+ }
+ },
+ shootSuccess(evt) {
+ this.base64 = evt
+ if (this.base64) {
+ this.auditDialogFlag = true
+ }
+ },
+ auditSuccess(evt) {
+ this.$router.replace({ path: '/h5/signup', query: { appId: this.appId, url: evt } })
+ },
+ }
+}
+</script>
+<style lang="scss" scoped>
+.face {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ max-width: 700px;
+ margin: 0 auto;
+ overflow: auto;
+}
+.mapBox {
+ width: 300px;
+ height: 300px;
+ border-radius: 150px;
+}
+.mask {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ width: 300px;
+ height: 340px;
+ background: radial-gradient(circle at center, transparent 0px, white 160px);
+ z-index: 12; /* 浣嶄簬绾㈣壊鐩掑瓙涓婃柟 */
+}
+.center-sign {
+ z-index: 13;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+.text-sign {
+ z-index: 13;
+ position: absolute;
+ left: 50%;
+ top: 66%;
+ white-space: nowrap;
+ transform: translate(-50%, -50%);
+}
+.signin-button {
+ width: 140px;
+ height: 140px;
+ border-radius: 70px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border: 16px solid
+}
+.ripple {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background-color: rgba(255, 255, 255, 0.5);
+ transform: scale(0);
+ animation: ripple 2s ease-out infinite;
+ pointer-events: none; /* 闃叉娉㈢汗閬尅鎸夐挳鐐瑰嚮 */
+ z-index: 14;
+}
+/* 纭繚鎸夐挳鏂囧瓧鏄剧ず鍦ㄦ尝绾逛笂鏂� */
+.signin-button .el-row {
+ position: relative;
+ z-index: 2;
+}
+@keyframes ripple {
+ to {
+ transform: scale(2);
+ opacity: 0;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0