xuchao/pingxiangcard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

绑卡

Browse Source
This commit is contained in:
lcj
2026-09-04 16:20:56 +08:00
parent 08e2f6888b
commit 4ed72056a9
6 changed files with 304 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/qrcode/index.vue
+161 -32
View File
@@ -106,13 +106,13 @@
<view class="detail-row">
<text class="detail-label">卡号：</text>
<view class="detail-value-wrap">
<text class="detail-value">{{ currentCard.cardNo }}</text>
<text class="detail-value">{{ currentCard?.cardNo }}</text>
<text class="copy-btn" @click="copyCardNo">复制</text>
</view>
</view>
<view class="detail-row">
<text class="detail-label">有效期至：</text>
<text class="detail-value">{{ formatDateOnly(currentCard.validityTime) }}</text>
<text class="detail-value">{{ formatDateOnly(currentCard?.validityTime) }}</text>
</view>
<view class="detail-row">
<text class="detail-label">{{ userInfoData?.idType || '证件' }}：</text>
@@ -124,30 +124,59 @@
<!-- 入园提示（持卡人信息下方） -->
<view class="qrcode-section" v-if="!showFaceModal && !isLeaving">
<text class="qrcode-title">入园提示</text>
<view>为确保信息安全，现入园核销只能使用人脸核销。</view>
<view v-if="!entryNotice" class="qrcode-fallback">为确保信息安全，现入园核销只能使用人脸核销。</view>
<view v-else class="qrcode-content">
<rich-text :nodes="entryNotice" />
</view>
</view>
<!-- 底部占位（滑到底时与tabBar的间隔） -->
<view style="height: 48rpx;"/>
</scroll-view>
<!-- 人脸绑定提醒弹窗 -->
<ConfirmModal
v-model="showFaceModal"
:title="faceModalTitle"
:content="faceModalContent"
confirmText="前往人脸绑定"
@confirm="onFaceModalConfirm"
/>
<uni-popup
ref="faceModalPopup"
type="center"
:mask-click="false"
@change="(e: any) => showFaceModal = e.show"
>
<view class="face-modal">
<view class="face-modal__title">人脸核销升级通知</view>
<view class="face-modal__row face-modal__row--spec">
<image class="face-modal__icon" src="https://aliyunoss.hn12301.net/sd/ticket_icon1.png" mode="aspectFit" />
<view class="face-modal__col">
<text class="face-modal__sub-title">拍照规范</text>
<view class="face-modal__desc">仅可现场真人实拍正面头像，禁止艺术写真、美颜修图、远景全身、特写大头照;人脸要求完整。</view>
</view>
</view>
<view class="face-modal__row">
<image class="face-modal__icon" src="https://aliyunoss.hn12301.net/sd/ticket_icon3.png" mode="aspectFit" />
<view class="face-modal__col">
<text class="face-modal__sub-title">隐私说明</text>
<view class="face-modal__desc">采集人脸仅用于本人入园身份核验，信息加密严格保密，不会挪作其他用途。</view>
</view>
</view>
<view class="face-modal__tip">
<image class="face-modal__tip-icon" src="https://aliyunoss.hn12301.net/sd/ticket_icon2.png" mode="aspectFit" />
<view class="face-modal__tip-text">完成人脸重新绑定后，才可正常使用旅游卡</br>全部入园权益功能</view>
</view>
<view class="face-modal__btn" @click="onFaceModalConfirm">立即重新绑定</view>
<view class="face-modal__hint">请使用本人实拍照片</view>
</view>
</uni-popup>
</view>
</template>
<script setup lang="ts">
import { ref, computed, onUnmounted } from 'vue'
import { ref, computed, watch, onUnmounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'
import { useUserStore } from '../../store/user'
import { getUserCardList, getQrAndUserInfo } from '../../api/card'
import type { UserCardListItem, QrAndUserInfoResult } from '../../api/types'
import ConfirmModal from '../../components/confirm-modal.vue'
import type { UserCardListItem, QrAndUserInfoResult, BannerItem } from '../../api/types'
import { post } from '../../api/request'
const userStore = useUserStore()
@@ -158,9 +187,14 @@ const loaded = ref(false)
const userCards = ref<UserCardListItem[]>([])
const userInfoData = ref<QrAndUserInfoResult | null>(null)
const showFaceModal = ref(false)
const faceModalTitle = ref('系统安全升级提醒')
const faceModalContent = ref('为保障您的旅游卡信息安全、规范入园使用，平台已启动人脸核验升级。\n根据规则要求，使用旅游卡前需完成人脸绑定，核验仅用于身份核实，人脸信息严格保密，不会挪作他用。\n请立即完成人脸绑定，方可继续使用全部功能。')
const faceModalPopup = ref<any>(null)
watch(showFaceModal, (v) => {
if (v) faceModalPopup.value?.open()
else faceModalPopup.value?.close()
})
const isLeaving = ref(false)
const entryNotice = ref('')
const entryNoticeLoaded = ref(false)
const hasCard = computed(() => userCards.value.length > 0)
const currentCardIndex = ref(0)
@@ -170,22 +204,17 @@ let timer: ReturnType<typeof setInterval> | null = null
/** 获取用户年卡列表 */
async function fetchCards() {
const mobile = uni.getStorageSync('phone') as string
if (!mobile) {
loaded.value = true
loading.value = false
return
}
const mobile = (uni.getStorageSync('phone') as string) || userStore.userInfo?.phone || ''
loading.value = true
fetchEntryNotice()
try {
const list = (await getUserCardList({ mobile, saleChannel: 'xgh' })) || []
const allowedIds = ['820093340659013', '820093438328133']
userCards.value = list.filter((c: any) => allowedIds.includes(String(c.cardModelId)))
currentCardIndex.value = 0
const firstCard = userCards.value[0]
if (firstCard?.needFaceImgFlag) {
faceModalTitle.value = '系统安全升级提醒'
faceModalContent.value = '为保障您的旅游卡信息安全、规范入园使用，平台已启动人脸核验升级。\n根据规则要求，使用旅游卡前需完成人脸绑定，核验仅用于身份核实，人脸信息严格保密，不会挪作他用。\n请立即完成人脸绑定，方可继续使用全部功能。'
showFaceModal.value = true
}
@@ -200,21 +229,32 @@ async function fetchCards() {
}
}
/** 获取入园提示内容（ENTRY_NOTICE 公告） */
async function fetchEntryNotice() {
if (entryNoticeLoaded.value) return
try {
const list = await post<BannerItem[]>('/mp-api/mpContent/queryList', { channel: 'pingxiang', type: 'ENTRY_NOTICE' })
entryNotice.value = list?.[0]?.content || ''
} catch {
entryNotice.value = ''
} finally {
entryNoticeLoaded.value = true
}
}
/** 刷新当前卡的人脸绑定状态（从接口获取最新数据） */
async function refreshNeedFace() {
const mobile = uni.getStorageSync('phone') as string
if (!mobile) return
const mobile = (uni.getStorageSync('phone') as string) || userStore.userInfo?.phone || ''
try {
const list = (await getUserCardList({ mobile, saleChannel: 'xgh' })) || []
const allowedIds = ['820093340659013', '820093438328133']
userCards.value = list.filter((c: any) => allowedIds.includes(String(c.cardModelId)))
currentCardIndex.value = 0
const current = userCards.value[currentCardIndex.value]
if (current) {
fetchUserInfo(current)
if (current.needFaceImgFlag) {
faceModalTitle.value = '系统安全升级提醒'
faceModalContent.value = '为保障您的旅游卡信息安全、规范入园使用，平台已启动人脸核验升级。\n根据规则要求，使用旅游卡前需完成人脸绑定，核验仅用于身份核实，人脸信息严格保密，不会挪作他用。\n请立即完成人脸绑定，方可继续使用全部功能。'
showFaceModal.value = true
}
}
@@ -248,8 +288,6 @@ function onCardChange(e: any) {
if (card) {
fetchUserInfo(card)
if (card.needFaceImgFlag) {
faceModalTitle.value = '系统安全升级提醒'
faceModalContent.value = '为保障您的旅游卡信息安全、规范入园使用，平台已启动人脸核验升级。\n根据规则要求，使用旅游卡前需完成人脸绑定，核验仅用于身份核实，人脸信息严格保密，不会挪作他用。\n请立即完成人脸绑定，方可继续使用全部功能。'
showFaceModal.value = true
}
}
@@ -293,8 +331,10 @@ function goBuyCard() {
}
function copyCardNo() {
const card = currentCard.value
if (!card) return
uni.setClipboardData({
data: currentCard.value.cardNo,
data: card.cardNo,
success: () => { uni.showToast({ title: '已复制', icon: 'success' }) },
})
}
@@ -349,8 +389,6 @@ function onFeatureClick(item: { label: string }) {
post<any>('/mp-api/mpCard/checkFaceBind', { cardModelId: card.cardModelId, cardNumber: card.cardNo })
.then((res) => {
if (res?.needBindFace) {
faceModalTitle.value = '系统安全升级提醒'
faceModalContent.value = '为保障您的旅游卡信息安全、规范入园使用，平台已启动人脸核验升级。\n根据规则要求，使用旅游卡前需完成人脸绑定，核验仅用于身份核实，人脸信息严格保密，不会挪作他用。\n请立即完成人脸绑定，方可继续使用全部功能。'
showFaceModal.value = true
} else {
const url = card.thirdId
@@ -400,6 +438,89 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
.page { min-height: 100vh; background: $color-background; font-family: $font-family-body; }
.scroll-content { }
/* === 人脸绑定提醒弹窗 === */
.face-modal {
width: 600rpx;
padding: 24rpx;
position: relative;
box-sizing: border-box;
background: #ffffff;
border-radius: 24rpx;
}
.face-modal__title {
color: #000;
font-size: 36rpx;
font-weight: bold;
text-align: center;
}
.face-modal__row {
width: 552rpx;
display: flex;
padding-bottom: 24rpx;
margin-top: 24rpx;
}
.face-modal__row--spec {
border-bottom: 2rpx solid #f2f2f7;
margin-top: 36rpx;
}
.face-modal__icon {
width: 50rpx;
height: 50rpx;
}
.face-modal__col {
display: flex;
flex-direction: column;
margin-left: 12rpx;
}
.face-modal__sub-title {
font-size: 32rpx;
font-weight: bold;
}
.face-modal__desc {
width: 490rpx;
line-height: 44rpx;
margin-top: 24rpx;
}
.face-modal__tip {
width: 552rpx;
display: flex;
margin-top: 24rpx;
padding: 7rpx;
background: #f6f9fe;
box-sizing: border-box;
}
.face-modal__tip-icon {
width: 36rpx;
height: 36rpx;
}
.face-modal__tip-text {
display: flex;
flex-direction: column;
margin-left: 16rpx;
font-size: 24rpx;
line-height: 36rpx;
}
.face-modal__btn {
width: 552rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
border-radius: 40rpx;
color: #fff;
margin-top: 32rpx;
background: #0088ff;
}
.face-modal__hint {
width: 552rpx;
display: flex;
align-items: center;
justify-content: center;
margin-top: 24rpx;
color: #404040;
}
/* === 加载中 === */
.loading-state {
display: flex; flex-direction: column; align-items: center;
@@ -540,6 +661,14 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
font-size: $font-size-lg; font-weight: $font-weight-medium; color: $uv-main-color;
display: block; margin-bottom: 20rpx; align-self: flex-start;
}
.qrcode-content {
font-size: $font-size-base; color: $uv-content-color;
line-height: 1.7; word-break: break-all; align-self: flex-start;
}
.qrcode-fallback {
font-size: $font-size-base; color: $uv-content-color;
line-height: 1.7; word-break: break-all; align-self: flex-start;
}
.qrcode-box {
width: 360rpx; height: 360rpx; background: #f8fafc;
border-radius: 16rpx; display: flex; align-items: center;