..
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">
|
||||
|
||||
@@ -1,43 +1,50 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<t-dropdown-menu class="top-dropdown">
|
||||
<t-dropdown-item :options="actOptions" :value="selectActId"/>
|
||||
</t-dropdown-menu>
|
||||
<template v-if="actOptions && actOptions.length>0">
|
||||
<t-dropdown-menu class="top-dropdown">
|
||||
<t-dropdown-item :options="actOptions" :value="selectActId"/>
|
||||
</t-dropdown-menu>
|
||||
<view class="content-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">团队报名</text>
|
||||
<text class="page-subtitle">点击项目报名</text>
|
||||
</view>
|
||||
|
||||
<view class="content-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">团队报名</text>
|
||||
<text class="page-subtitle">点击项目报名</text>
|
||||
</view>
|
||||
|
||||
<!-- 项目列表 -->
|
||||
<view class="project-cards">
|
||||
<view
|
||||
v-for="project in itemOptions"
|
||||
:key="project.id"
|
||||
class="project-card"
|
||||
:class="{'project-card--registered': registrationStatus.get(project.id)?.length}"
|
||||
@click="selectProject(project.id)"
|
||||
>
|
||||
<view class="project-card__content">
|
||||
<view class="project-card__title">{{ project.name }}</view>
|
||||
<view class="project-card__desc">{{ project.description }}</view>
|
||||
</view>
|
||||
<view class="project-card__status">
|
||||
<t-tag v-if="registrationStatus.get(project.id)?.length" theme="success" variant="light-outline">
|
||||
已报名 {{ registrationStatus.get(project.id)?.length }}人
|
||||
</t-tag>
|
||||
<view v-else class="project-card__action">
|
||||
<t-icon name="chevron-right" color="#999"/>
|
||||
<!-- 项目列表 -->
|
||||
<view class="project-cards">
|
||||
<view
|
||||
v-for="project in itemOptions"
|
||||
:key="project.id"
|
||||
class="project-card"
|
||||
:class="{'project-card--registered': registrationStatus.get(project.id)?.length}"
|
||||
@click="selectProject(project.id)"
|
||||
>
|
||||
<view class="project-card__content">
|
||||
<view class="project-card__title">{{ project.name }}</view>
|
||||
<view class="project-card__desc">{{ project.description }}</view>
|
||||
</view>
|
||||
<view class="project-card__status">
|
||||
<t-tag v-if="registrationStatus.get(project.id)?.length" theme="success" variant="light-outline">
|
||||
已报名 {{ registrationStatus.get(project.id)?.length }}人
|
||||
</t-tag>
|
||||
<view v-else class="project-card__action">
|
||||
<t-icon name="chevron-right" color="#999"/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view v-if="registrationStatus.get(project.id)?.length" class="project-card__checkmark">
|
||||
<t-icon name="check" color="#52c41a"/>
|
||||
</view>-->
|
||||
</view>
|
||||
<!-- <view v-if="registrationStatus.get(project.id)?.length" class="project-card__checkmark">
|
||||
<t-icon name="check" color="#52c41a"/>
|
||||
</view>-->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view v-else 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">
|
||||
</t-empty>
|
||||
</view>
|
||||
|
||||
<t-popup v-model:visible="showMemberPicker" placement="bottom" destroy-on-close>
|
||||
<view class="member-picker">
|
||||
<view class="picker-header">
|
||||
|
||||
@@ -42,7 +42,8 @@
|
||||
|
||||
<!-- 项目报名按钮 -->
|
||||
<div class="action-section">
|
||||
<t-button block theme="danger" size="large" class="register-btn" @click="goToEventRegistration" :disabled="!team.teamIsLeader">
|
||||
<t-button block theme="danger" size="large" class="register-btn" @click="goToEventRegistration"
|
||||
:disabled="!team.teamIsLeader">
|
||||
<div v-if="team.teamIsLeader"> {{ team.isSelfLeader ? '参与项目报名' : '查看项目报名' }}</div>
|
||||
<div v-else>暂无队长无法报名</div>
|
||||
</t-button>
|
||||
@@ -115,18 +116,12 @@
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
<view v-else style="background-color: #FFFFFF">
|
||||
<view>
|
||||
<t-result>
|
||||
<template #image>
|
||||
<t-image src="https://tdesign.gtimg.com/mobile/demos/result1.png" class="external-class-image"/>
|
||||
</template>
|
||||
<template #title>
|
||||
<div>暂无团队</div>
|
||||
</template>
|
||||
</t-result>
|
||||
</view>
|
||||
|
||||
<view v-else 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">
|
||||
</t-empty>
|
||||
</view>
|
||||
</view>
|
||||
<t-dialog
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Reference in New Issue
Block a user