382 lines
9.9 KiB
Vue
382 lines
9.9 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<view class="header">
|
|
<image class="header-bg"
|
|
src="/static/img/index.png"
|
|
mode="aspectFill"></image>
|
|
</view>
|
|
|
|
<view class="menu-container">
|
|
<view class="menu-item" @click="navigateTo('/pages/activity/list/index')">
|
|
<view class="menu-icon-wrapper red-bg">
|
|
<view class="menu-icon trophy-icon"></view>
|
|
</view>
|
|
<view class="menu-text">赛事报名</view>
|
|
</view>
|
|
<view class="menu-item" @click="navigateTo('/pages/activity/scan-sign/index')">
|
|
<view class="menu-icon-wrapper orange-bg">
|
|
<view class="menu-icon qrcode-icon"></view>
|
|
</view>
|
|
<view class="menu-text">扫码签到</view>
|
|
</view>
|
|
<view class="menu-item" @click="navigateTo('/pages/activity/team/index')">
|
|
<view class="menu-icon-wrapper yellow-bg">
|
|
<view class="menu-icon team-icon"></view>
|
|
<!-- <view class="badge">3</view>-->
|
|
</view>
|
|
<view class="menu-text">我的团队</view>
|
|
</view>
|
|
<view class="menu-item" @click="navigateTo('/pages/activity/team-form/index')">
|
|
<view class="menu-icon-wrapper blue-bg">
|
|
<view class="menu-icon star-icon"></view>
|
|
</view>
|
|
<view class="menu-text">项目报名</view>
|
|
</view>
|
|
<!-- <view class="menu-item" @click="navigateTo('/pages/activity/dynamic/index')">-->
|
|
<!-- <view class="menu-icon-wrapper blue-bg">-->
|
|
<!-- <view class="menu-icon star-icon"></view>-->
|
|
<!-- </view>-->
|
|
<!-- <view class="menu-text">精彩瞬间</view>-->
|
|
<!-- </view>-->
|
|
</view>
|
|
|
|
<!-- 精选内容区 -->
|
|
<view class="content-section">
|
|
<view class="section-header">
|
|
<view class="section-title">近期活动</view>
|
|
<view class="section-more" @click="navigateTo('/pages/activity/list/index')">更多</view>
|
|
</view>
|
|
|
|
<t-swiper
|
|
v-if="actList.length > 0"
|
|
:autoplay="actList.length > 1"
|
|
:navigation="{ type: 'fraction', paginationPosition: 'bottom-right', showControls: true }"
|
|
>
|
|
<t-swiper-item v-for="(item, index) in actList" :key="index" style="height: 192px">
|
|
<view class="activity-list" @click="navigateTo('/pages/activity/detail/index?id=' + item.id)">
|
|
<view class="activity-item">
|
|
<t-image :src=config.fileDomain+item.cover shape="round"
|
|
class="activity-image" fit="fill"/>
|
|
<view class="activity-info">
|
|
<view class="activity-title">{{ item.title }}</view>
|
|
<view class="activity-meta">
|
|
<text class="activity-time">{{ moment(item.startTime).format('M月DD日') + '-' + moment(item.endTime).format('DD日') }}</text>
|
|
<text class="activity-location">{{ item.address }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</t-swiper-item>
|
|
</t-swiper>
|
|
<t-empty
|
|
v-if="actList.length === 0"
|
|
description="暂无近期活动"
|
|
/>
|
|
|
|
</view>
|
|
|
|
<view class="content-section">
|
|
<view class="section-header">
|
|
<view class="section-title">精彩瞬间</view>
|
|
</view>
|
|
|
|
<view class="activity-list" v-if="wonderfulMomentList.length > 0">
|
|
<view class="moment-item" v-for="item in wonderfulMomentList" :key="item.id"
|
|
@click="handleWonderfulMoment(item)">
|
|
<t-image :src=config.fileDomain+item.cover shape="round"
|
|
class="moment-image" fit="fill"/>
|
|
<view class="moment-content">
|
|
<view class="moment-title">{{ item.title }}</view>
|
|
<view class="moment-sub-content">
|
|
<view style="float: right;">{{ item.time }}</view>
|
|
<view>阅读 {{ item.readCount }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<t-empty
|
|
v-if="wonderfulMomentList.length === 0"
|
|
description="暂无精彩瞬间"
|
|
/>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {onMounted, ref} from "vue";
|
|
import {Toast} from "tdesign-mobile-vue";
|
|
import {useRequest} from "@/utils/request";
|
|
import moment from "moment";
|
|
import {config} from "@/utils/config";
|
|
|
|
const request = useRequest()
|
|
|
|
const actList = ref([])
|
|
const wonderfulMomentList = ref([])
|
|
|
|
function navigateTo(url) {
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}
|
|
|
|
function getActivity() {
|
|
request.post('/platform/activity/manage/getActivity').then(res=>{
|
|
if(res.code === 0){
|
|
actList.value = res.data
|
|
}else{
|
|
Toast({message: res.msg, theme: 'error'});
|
|
}
|
|
})
|
|
}
|
|
|
|
function getWonderfulMoment() {
|
|
request.post('/platform/activity/wonderfulMoment/getWonderfulMoment').then(res=>{
|
|
if(res.code === 0){
|
|
wonderfulMomentList.value = res.data
|
|
}else{
|
|
Toast({message: res.msg, theme: 'error'});
|
|
}
|
|
})
|
|
}
|
|
function handleWonderfulMoment(row) {
|
|
request.post('/platform/activity/wonderfulMoment/handleWonderfulMoment/' + row.id).then(res=>{
|
|
if(res.code === 0){
|
|
getWonderfulMoment()
|
|
navigateTo('/pages/activity/wonderfulMoment/index?id=' + row.id)
|
|
}else{
|
|
Toast({message: res.msg, theme: 'error'});
|
|
}
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
getActivity()
|
|
getWonderfulMoment()
|
|
uni.showToast({
|
|
title: '欢迎使用',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
uni-page-body {
|
|
height: auto;
|
|
}
|
|
// 头部区域样式
|
|
.header {
|
|
position: relative;
|
|
height: 245px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
// 菜单区域样式
|
|
.menu-container {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
border-radius: 15px;
|
|
margin: -30px 15px 15px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
z-index: 10;
|
|
}
|
|
|
|
.menu-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 22%;
|
|
}
|
|
|
|
.menu-icon-wrapper {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.red-bg {
|
|
background: linear-gradient(135deg, #ff7676, #f45a5a);
|
|
}
|
|
|
|
.orange-bg {
|
|
background: linear-gradient(135deg, #ffa76a, #f89f58);
|
|
}
|
|
|
|
.yellow-bg {
|
|
background: linear-gradient(135deg, #ffd166, #f8c158);
|
|
}
|
|
|
|
.blue-bg {
|
|
background: linear-gradient(135deg, #72a1ff, #5c7cfa);
|
|
}
|
|
|
|
.menu-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.trophy-icon {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.qrcode-icon {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M3 11h8V3H3v8zm2-6h4v4H5V5zM3 21h8v-8H3v8zm2-6h4v4H5v-4zM13 3v8h8V3h-8zm6 6h-4V5h4v4zM13 13h2v2h-2zM15 15h2v2h-2zM13 17h2v2h-2zM17 17h2v2h-2zM19 19h2v2h-2zM15 19h2v2h-2zM17 13h2v2h-2zM19 15h2v2h-2z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.team-icon {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.star-icon {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.badge {
|
|
position: absolute;
|
|
top: -5px;
|
|
right: -5px;
|
|
background-color: #ff4d4f;
|
|
color: white;
|
|
border-radius: 10px;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
padding: 0 5px;
|
|
font-weight: bold;
|
|
box-shadow: 0 2px 4px rgba(255, 77, 79, 0.3);
|
|
}
|
|
|
|
.menu-text {
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
font-weight: 500;
|
|
}
|
|
|
|
// 内容区域样式
|
|
.content-section {
|
|
margin: 0 0 15px;
|
|
padding: 15px;
|
|
background-color: #fff;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
position: relative;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.section-title::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 3px;
|
|
height: 16px;
|
|
background: linear-gradient(to bottom, #ff6b6b, #e83a3a);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.section-more {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
// 活动列表样式
|
|
.activity-list {
|
|
width: 100%;
|
|
}
|
|
|
|
.activity-item {
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.activity-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.activity-image {
|
|
height: 200px;
|
|
width: 100%;
|
|
}
|
|
|
|
.activity-info {
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.activity-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.activity-meta {
|
|
display: flex;
|
|
font-size: 12px;
|
|
color: #999;
|
|
}
|
|
|
|
.activity-time {
|
|
margin-right: 15px;
|
|
}
|
|
.moment-image {
|
|
width: 180px;
|
|
height: 90px;
|
|
margin-right: 8px;
|
|
}
|
|
.moment-item {
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 16px;
|
|
}
|
|
.moment-title {
|
|
font-weight: bold;
|
|
}
|
|
.moment-content {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
}
|
|
.moment-sub-content {
|
|
font-size: 12px;
|
|
color: grey;
|
|
}
|
|
</style>
|