签到、课程搜索页面调整为测试模式
This commit is contained in:
@@ -81,19 +81,12 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮(z-index永久置顶) -->
|
||||
<!-- 底部按钮(仅保留刷新二维码,隐藏签到和清除缓存按钮) -->
|
||||
<view class="bottom-actions">
|
||||
<button @tap="handleLongPress">签到</button>
|
||||
<button class="btn-refresh" @tap="refreshQR">
|
||||
<uni-icons type="refresh" size="36rpx" color="#5E6F8D"></uni-icons>
|
||||
<text>刷新二维码</text>
|
||||
</button>
|
||||
|
||||
<!-- 测试用:手动清除缓存按钮 -->
|
||||
<button class="btn-clear-cache" @tap="handleClearCache">
|
||||
<uni-icons type="trash" size="36rpx" color="#ef4444"></uni-icons>
|
||||
<text>清除缓存</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -103,9 +96,10 @@ import { ref } from 'vue';
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
// 引入状态组件(路径与你保持一致)
|
||||
import QrStatus from '@/components/QRCode/StatusCard.vue'
|
||||
// 引入API封装
|
||||
import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
|
||||
|
||||
// 测试模式配置
|
||||
const TEST_MODE = true // 开启测试模式
|
||||
|
||||
let image = ref("")
|
||||
let width = ref(0)
|
||||
let height = ref(0)
|
||||
@@ -279,6 +273,13 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
|
||||
mask: true
|
||||
})
|
||||
|
||||
// 测试模式:直接生成假二维码,内容为"欢迎来到活氧舱"
|
||||
if (TEST_MODE) {
|
||||
console.log("测试模式:生成假二维码")
|
||||
generateTestQRCode()
|
||||
return
|
||||
}
|
||||
|
||||
// 读取签到状态缓存(自动检查过期)
|
||||
// isCheckIn 代表签到状态,从缓存读取
|
||||
const cachedIsCheckIn = getCacheData("isCheckIn")
|
||||
@@ -313,6 +314,49 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
|
||||
getStorage(null)
|
||||
})
|
||||
|
||||
// 测试模式:生成假二维码(内容为"欢迎来到活氧舱")
|
||||
const generateTestQRCode = () => {
|
||||
// 使用 canvas 生成简单的二维码图案(模拟)
|
||||
// 由于无法直接生成真正的二维码图片,使用一个静态图片或占位图
|
||||
// 在实际测试环境中,可以使用第三方库生成二维码
|
||||
|
||||
// 模拟网络延迟
|
||||
setTimeout(() => {
|
||||
// 使用一个在线二维码生成服务生成内容为"欢迎来到活氧舱"的二维码
|
||||
const qrContent = "欢迎来到活氧舱"
|
||||
qrcode.value = qrContent
|
||||
|
||||
// 使用在线API生成二维码图片
|
||||
// 注意:实际使用时应该考虑离线方案
|
||||
const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(qrContent)}`
|
||||
|
||||
// 将在线图片下载为base64(在uniapp中)
|
||||
uni.request({
|
||||
url: qrUrl,
|
||||
method: 'GET',
|
||||
responseType: 'arraybuffer',
|
||||
success: (res) => {
|
||||
const base64 = uni.arrayBufferToBase64(res.data)
|
||||
image.value = `data:image/png;base64,${base64}`
|
||||
width.value = 500
|
||||
height.value = 500
|
||||
status.value = 'waiting'
|
||||
QRStatus.value = '请出示二维码签到'
|
||||
uni.hideLoading()
|
||||
},
|
||||
fail: () => {
|
||||
// 如果无法获取在线二维码,使用默认占位图
|
||||
image.value = ''
|
||||
width.value = 500
|
||||
height.value = 500
|
||||
status.value = 'waiting'
|
||||
QRStatus.value = '测试模式 - 欢迎来到活氧舱'
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 页面卸载时关闭WebSocket连接(不清除缓存,让缓存自然过期)
|
||||
onUnload(() => {
|
||||
closeWebSocket()
|
||||
@@ -590,13 +634,13 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99998; /* 低于底部按钮,确保底部按钮永远最上层 */
|
||||
background: linear-gradient(135deg, #0B2B4B 0%, #1A4A6F 100%);
|
||||
background: linear-gradient(135deg, #7AB5CC 0%, #9CCFDF 100%);
|
||||
padding: 64rpx 48rpx 48rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
border-bottom-left-radius: 56rpx;
|
||||
border-bottom-right-radius: 56rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 4rpx 20rpx rgba(120, 185, 215, 0.3);
|
||||
|
||||
.header-title {
|
||||
font-size: 45rpx;
|
||||
@@ -632,7 +676,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
|
||||
height: 120rpx;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
border: 4rpx solid #FF6B35;
|
||||
border: 4rpx solid #7AB5CC;
|
||||
flex-shrink: 0;
|
||||
|
||||
image {
|
||||
@@ -664,7 +708,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
|
||||
flex-wrap: wrap;
|
||||
|
||||
.level-badge {
|
||||
background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
|
||||
background: linear-gradient(135deg, #7AB5CC 0%, #9CCFDF 100%);
|
||||
color: white;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 24rpx;
|
||||
@@ -691,7 +735,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
|
||||
.points-value {
|
||||
font-size: 38rpx;
|
||||
font-weight: 700;
|
||||
color: #FF6B35;
|
||||
color: #7AB5CC;
|
||||
}
|
||||
|
||||
.points-label {
|
||||
@@ -763,7 +807,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border: 6rpx solid #E9EDF2;
|
||||
border-top-color: #FF6B35;
|
||||
border-top-color: #7AB5CC;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@@ -788,7 +832,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
|
||||
position: absolute;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border: 6rpx solid #FF6B35;
|
||||
border: 6rpx solid #7AB5CC;
|
||||
|
||||
&.top-left {
|
||||
top: 0;
|
||||
@@ -855,7 +899,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
|
||||
.tip-dot {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: #FF6B35;
|
||||
background: #7AB5CC;
|
||||
border-radius: 50%;
|
||||
margin-top: 12rpx;
|
||||
flex-shrink: 0;
|
||||
@@ -934,7 +978,7 @@ import { getQRCode, checkIn as apiCheckIn } from '@/api/main.js'
|
||||
}
|
||||
|
||||
.header {
|
||||
background: linear-gradient(135deg, #123A5E 0%, #1A4A6F 100%);
|
||||
background: linear-gradient(135deg, #5A98B0 0%, #7AB5CC 100%);
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user