添加扫码签到功能和相关配置

2026-06-03 16:26:44 +08:00
parent 68733acc72
commit 26e185a804
8 changed files with 1482 additions and 6 deletions
@@ -0,0 +1,97 @@
+<template>
+  <view class="qr-status">
+    <!-- 加载中状态 -->
+    <view v-if="status === 'loading'" class="status-loading">
+      <view class="status-icon">
+        <view class="loading-spinner"></view>
+      </view>
+      <text>生成中...</text>
+    </view>
+
+    <!-- 签到成功状态 -->
+    <view v-else-if="status === 'scanned'" class="status-success">
+      <view class="status-icon">
+        <uni-icons type="checkmarkcircle" size="40rpx" color="#2ECC71"></uni-icons>
+      </view>
+      <text>签到成功！</text>
+    </view>
+
+    <!-- 错误状态（支持自定义文案） -->
+    <view v-else-if="status === 'error'" class="status-error">
+      <view class="status-icon">
+        <uni-icons type="closecircle" size="40rpx" color="#E74C3C"></uni-icons>
+      </view>
+      <text>{{ errorText || '签到失败，请重试' }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { defineProps } from 'vue';
+
+// 扩展Props，支持自定义错误文案
+const props = defineProps({
+  status: {
+    type: String,
+    required: true,
+    default: ''
+  },
+  // 自定义错误文本（可选）
+  errorText: {
+    type: String,
+    required: false,
+    default: ''
+  }
+});
+</script>
+
+<style scoped>
+/* 保留原样式，新增加载中样式 */
+.qr-status {
+  margin-bottom: 48rpx;
+}
+
+.status-loading,
+.status-waiting,
+.status-success,
+.status-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16rpx;
+  font-size: 29rpx;
+}
+
+.status-icon {
+  display: flex;
+  align-items: center;
+}
+
+/* 加载中样式 */
+.status-loading {
+  color: #FF6B35;
+}
+.loading-spinner {
+  width: 40rpx;
+  height: 40rpx;
+  border: 4rpx solid #E9EDF2;
+  border-top-color: #FF6B35;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.status-success {
+  color: #2ECC71;
+}
+
+.status-error {
+  color: #E74C3C;
+}
+
+
+/* 旋转动画 */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>