future
97 lines
1.9 KiB
Vue
97 lines
1.9 KiB
Vue
<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> |