..
This commit is contained in:
那些花儿
@@ -1,96 +1,108 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<t-dropdown-menu class="top-dropdown">
|
||||
<t-dropdown-item :options="actOptions" :value="selectActId" @change="getSignInfo"/>
|
||||
</t-dropdown-menu>
|
||||
<view class="content-container">
|
||||
<view class="scan-area animate__animated animate__fadeIn" @click="handleScan">
|
||||
<view class="scan-icon-wrapper pulse-animation">
|
||||
<t-icon name="scan" size="80" color="#f45a5a"></t-icon>
|
||||
<view class="scan-circles"></view>
|
||||
<template v-if="actOptions && actOptions.length > 0">
|
||||
<t-dropdown-menu class="top-dropdown">
|
||||
<t-dropdown-item :options="actOptions" :value="selectActId" @change="getSignInfo"/>
|
||||
</t-dropdown-menu>
|
||||
<view class="content-container">
|
||||
<view class="scan-area animate__animated animate__fadeIn" @click="handleScan">
|
||||
<view class="scan-icon-wrapper pulse-animation">
|
||||
<t-icon name="scan" size="80" color="#f45a5a"></t-icon>
|
||||
<view class="scan-circles"></view>
|
||||
</view>
|
||||
<t-button shape="round"
|
||||
theme="primary"
|
||||
size="medium"
|
||||
class="scan-button">扫描二维码签到
|
||||
</t-button>
|
||||
</view>
|
||||
<t-button shape="round"
|
||||
theme="primary"
|
||||
size="medium"
|
||||
class="scan-button">扫描二维码签到
|
||||
</t-button>
|
||||
</view>
|
||||
<view class="guide-area animate__animated animate__fadeInUp">
|
||||
<view class="guide-title">签到说明</view>
|
||||
<view class="guide-list">
|
||||
<view class="guide-item animate__animated animate__fadeInLeft" style="animation-delay: 0.1s">
|
||||
<t-icon name="notification" size="16" color="#ff5f5c" class="guide-icon"></t-icon>
|
||||
<text class="guide-text">请对准活动二维码进行扫描</text>
|
||||
</view>
|
||||
<view class="guide-item animate__animated animate__fadeInLeft" style="animation-delay: 0.2s">
|
||||
<t-icon name="notification" size="16" color="#ff5f5c" class="guide-icon"></t-icon>
|
||||
<text class="guide-text">确保手机相机权限已开启</text>
|
||||
</view>
|
||||
<view class="guide-item animate__animated animate__fadeInLeft" style="animation-delay: 0.3s">
|
||||
<t-icon name="notification" size="16" color="#ff5f5c" class="guide-icon"></t-icon>
|
||||
<text class="guide-text">保持二维码清晰可见</text>
|
||||
<view class="guide-area animate__animated animate__fadeInUp">
|
||||
<view class="guide-title">签到说明</view>
|
||||
<view class="guide-list">
|
||||
<view class="guide-item animate__animated animate__fadeInLeft" style="animation-delay: 0.1s">
|
||||
<t-icon name="notification" size="16" color="#ff5f5c" class="guide-icon"></t-icon>
|
||||
<text class="guide-text">请对准活动二维码进行扫描</text>
|
||||
</view>
|
||||
<view class="guide-item animate__animated animate__fadeInLeft" style="animation-delay: 0.2s">
|
||||
<t-icon name="notification" size="16" color="#ff5f5c" class="guide-icon"></t-icon>
|
||||
<text class="guide-text">确保手机相机权限已开启</text>
|
||||
</view>
|
||||
<view class="guide-item animate__animated animate__fadeInLeft" style="animation-delay: 0.3s">
|
||||
<t-icon name="notification" size="16" color="#ff5f5c" class="guide-icon"></t-icon>
|
||||
<text class="guide-text">保持二维码清晰可见</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="current-status-area animate__animated animate__fadeInUp" style="animation-delay: 0.2s">
|
||||
<view class="status-header">
|
||||
<text class="status-title">当前签到状态</text>
|
||||
</view>
|
||||
<view v-if="signInfo" class="status-content">
|
||||
<template v-if="signInfo.isSignIn">
|
||||
<view class="sign-success">
|
||||
<div class="success-icon-wrapper">
|
||||
<t-icon name="task-checked-1" size="48" color="#07c160"></t-icon>
|
||||
<svg class="checkmark-circle" viewBox="0 0 52 52">
|
||||
<circle class="checkmark-circle__circle" cx="26" cy="26" r="25" fill="none" />
|
||||
</svg>
|
||||
</div>
|
||||
<text class="success-text">已完成签到</text>
|
||||
<view class="sign-detail">
|
||||
<view class="detail-item">
|
||||
<uni-icons type="calendar" size="14" color="#666666"/>
|
||||
<text>签到时间：{{ signInfo.signInTime }}</text>
|
||||
<view class="current-status-area animate__animated animate__fadeInUp" style="animation-delay: 0.2s">
|
||||
<view class="status-header">
|
||||
<text class="status-title">当前签到状态</text>
|
||||
</view>
|
||||
<view v-if="signInfo" class="status-content">
|
||||
<template v-if="signInfo.isSignIn">
|
||||
<view class="sign-success">
|
||||
<div class="success-icon-wrapper">
|
||||
<t-icon name="task-checked-1" size="48" color="#07c160"></t-icon>
|
||||
<svg class="checkmark-circle" viewBox="0 0 52 52">
|
||||
<circle class="checkmark-circle__circle" cx="26" cy="26" r="25" fill="none" />
|
||||
</svg>
|
||||
</div>
|
||||
<text class="success-text">已完成签到</text>
|
||||
<view class="sign-detail">
|
||||
<view class="detail-item">
|
||||
<uni-icons type="calendar" size="14" color="#666666"/>
|
||||
<text>签到时间：{{ signInfo.signInTime }}</text>
|
||||
</view>
|
||||
<!-- <view class="detail-item">-->
|
||||
<!-- <uni-icons type="location" size="14" color="#666666"/>-->
|
||||
<!-- <text>签到地点：{{ signInfo.location }}</text>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
<!-- <view class="detail-item">-->
|
||||
<!-- <uni-icons type="location" size="14" color="#666666"/>-->
|
||||
<!-- <text>签到地点：{{ signInfo.location }}</text>-->
|
||||
<!-- </view>-->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="sign-pending">
|
||||
<t-icon name="info-circle" size="48" color="#f45a5a"></t-icon>
|
||||
<text class="pending-text">待签到</text>
|
||||
<text class="pending-tip">请使用扫码签到完成签到</text>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="sign-pending">
|
||||
<t-icon name="info-circle" size="48" color="#f45a5a"></t-icon>
|
||||
<text class="pending-text">待签到</text>
|
||||
<text class="pending-tip">请使用扫码签到完成签到</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<div class="bg-decoration">
|
||||
<svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||
<path fill="#f45a5a" fill-opacity="0.1" d="M0,160L48,154.7C96,149,192,139,288,144C384,149,480,171,576,176C672,181,768,171,864,154.7C960,139,1056,117,1152,128C1248,139,1344,181,1392,202.7L1440,224L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
|
||||
</svg>
|
||||
<svg class="dots" width="100" height="100" viewBox="0 0 100 100">
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="10" cy="10" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="30" cy="10" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="50" cy="10" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="70" cy="10" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="90" cy="10" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="10" cy="30" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="30" cy="30" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="50" cy="30" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="70" cy="30" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="90" cy="30" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="10" cy="50" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="30" cy="50" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="50" cy="50" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="70" cy="50" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="90" cy="50" r="3" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="bg-decoration">
|
||||
<svg class="wave" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
||||
<path fill="#f45a5a" fill-opacity="0.1" d="M0,160L48,154.7C96,149,192,139,288,144C384,149,480,171,576,176C672,181,768,171,864,154.7C960,139,1056,117,1152,128C1248,139,1344,181,1392,202.7L1440,224L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
|
||||
</svg>
|
||||
<svg class="dots" width="100" height="100" viewBox="0 0 100 100">
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="10" cy="10" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="30" cy="10" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="50" cy="10" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="70" cy="10" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="90" cy="10" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="10" cy="30" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="30" cy="30" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="50" cy="30" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="70" cy="30" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="90" cy="30" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="10" cy="50" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="30" cy="50" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="50" cy="50" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="70" cy="50" r="3" />
|
||||
<circle fill="#f45a5a" fill-opacity="0.2" cx="90" cy="50" r="3" />
|
||||
</svg>
|
||||
</div>
|
||||
<view style="flex: 1;display: flex;justify-content: center;align-items: center">
|
||||
<t-empty v-if="actOptions && actOptions.length === 0"
|
||||
image="/static/img/empty.png"
|
||||
description="报名活动后才能扫码签到"
|
||||
style="flex: 1">
|
||||
<template #action>
|
||||
<t-button theme="primary" shape="round" size="large" @click="navigateToSignUp">去报名列表看看</t-button>
|
||||
</template>
|
||||
</t-empty>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<ScanQRCode
|
||||
@@ -205,6 +217,13 @@ async function signIn() {
|
||||
}
|
||||
}
|
||||
|
||||
// 去报名列表
|
||||
function navigateToSignUp(){
|
||||
uni.redirectTo({
|
||||
url: '/pages/activity/list/index'
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
Reference in New Issue
Block a user