123

src/packages/user/pages/reserve/list.vue

@@ -94,13 +94,14 @@
     </scroll-view>
 
     <!-- 入园码弹窗 -->
-    <uni-popup ref="codePopup" type="center" :mask-click="true">
+    <uni-popup ref="codePopup" type="center" :mask-click="true" @close="closeCode">
       <view class="code-modal">
         <text class="code-modal__title">入园码</text>
         <view class="qr-box">
           <image v-if="codeSrc" class="qr-img" :src="codeSrc" mode="aspectFit" />
         </view>
         <text class="code-modal__desc">入园时请出示此二维码+本人身份证</text>
+        <text class="code-modal__countdown">{{ countdown }}秒后自动刷新</text>
       </view>
     </uni-popup>
 
@@ -191,7 +192,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, onUnmounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { post } from '../../../../api/request'
 import { BASE_URL } from '../../../../config'
@@ -235,6 +236,16 @@ const detailPopup = ref<any>(null)
 const codeSrc = ref('')
 const detailRecord = ref<ReserveRecord | null>(null)
 const cancelRecord = ref<ReserveRecord | null>(null)
+const countdown = ref(20)
+let refreshTimer: ReturnType<typeof setInterval> | null = null
+let countdownTimer: ReturnType<typeof setInterval> | null = null
+
+onUnmounted(() => {
+  clearTimer()
+  // #ifdef MP-WEIXIN
+  wx.offUserCaptureScreen()
+  // #endif
+})
 
 const records = ref<ReserveRecord[]>([])
 
@@ -293,6 +304,15 @@ async function fetchRecords(append = false) {
 }
 
 onLoad(() => {
+  // #ifdef MP-WEIXIN
+  wx.setVisualEffectOnCapture({ visualEffect: 'hidden' })
+  wx.onUserCaptureScreen(() => {
+    uni.showToast({ title: '该页面截图无效，请不要截图', icon: 'none' })
+    if (currentRecord.value) {
+      fetchCode(currentRecord.value)
+    }
+  })
+  // #endif
   fetchRecords()
 })
 
@@ -335,14 +355,49 @@ async function confirmCancel() {
 
 async function showCode(r: ReserveRecord) {
   codeSrc.value = ''
+  currentRecord.value = r
+  await fetchCode(r)
+  codePopup.value?.open()
+  startTimer()
+}
+
+function closeCode() {
+  clearTimer()
+}
+
+function clearTimer() {
+  if (refreshTimer) {
+    clearInterval(refreshTimer)
+    refreshTimer = null
+  }
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+}
+
+function startTimer() {
+  clearTimer()
+  countdown.value = 20
+  const id = currentRecord.value?.id
+  if (!id) return
+  refreshTimer = setInterval(() => fetchCode(currentRecord.value!), 20000)
+  countdownTimer = setInterval(() => {
+    countdown.value--
+    if (countdown.value <= 0) countdown.value = 20
+  }, 1000)
+}
+
+const currentRecord = ref<ReserveRecord | null>(null)
+
+async function fetchCode(r: ReserveRecord) {
+  countdown.value = 20
   try {
     const res = await post<any>(`${BASE_URL}/zhy-api/cardBag/getQrByAppointmentId?appointmentId=${r.id}`)
     if (res.qrType == 1) {
       codeSrc.value = 'data:image/png;base64,' + res.qrCode
-      codePopup.value?.open()
     } else if (res.qrType == 2) {
       codeSrc.value = res.qrUrl
-      codePopup.value?.open()
     } else {
       await fetchQrByCard(r)
     }
@@ -363,7 +418,6 @@ async function fetchQrByCard(r: ReserveRecord) {
     })
     if (res.qrCode) {
       codeSrc.value = res.qrCode.startsWith('data:') ? res.qrCode : 'data:image/png;base64,' + res.qrCode
-      codePopup.value?.open()
     } else {
       uni.showToast({ icon: 'none', title: '暂无核销码' })
     }
@@ -628,6 +682,13 @@ function previewPhoto(url: string) {
 
 .code-modal__desc { font-family: $font-family-body; font-size: $font-size-sm; color: $uv-tips-color; }
 
+.code-modal__countdown {
+  font-family: $font-family-body;
+  font-size: 24rpx;
+  color: $uv-placeholder-color;
+  margin-top: 12rpx;
+}
+
 /* ===== Cancel Modal ===== */
 .cancel-modal {
   width: 600rpx; background: $color-card; border-radius: $radius-lg; padding: 40rpx;