c-chengc1/hmc_gbhd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

commit

Browse Source
This commit is contained in:
c-zhouhf1
2025-04-28 18:08:54 +08:00
parent 12c3afb4a6
commit abcf3549df
14 changed files with 702 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/activity/detail/index.vue
+115 -59
View File
@@ -17,25 +17,30 @@
<view class="event-info-section">
<!-- 报名时间 -->
<view class="info-item">
<t-icon name="calendar" size="20px" />
<t-icon name="calendar" size="20px"/>
<view class="info-text-container">
<text class="info-text-title">报名时间</text>
<text class="info-text">{{ formatDate(detailData.signStartTime) }} 至 {{ formatDate(detailData.signEndTime) }}</text>
<text class="info-text">{{ formatDate(detailData.signStartTime) }} 至
{{ formatDate(detailData.signEndTime) }}
</text>
</view>
</view>
<!-- 活动时间 -->
<view class="info-item">
<t-icon name="alarm" size="20px" />
<t-icon name="alarm" size="20px"/>
<view class="info-text-container">
<text class="info-text-title">活动时间</text>
<text class="info-text">{{ formatDate(detailData.startTime) }} 至 {{ formatDate(detailData.endTime) }}</text>
<text class="info-text">{{ formatDate(detailData.startTime) }} 至 {{
formatDate(detailData.endTime)
}}
</text>
</view>
</view>
<!-- 活动地点 -->
<view class="info-item">
<t-icon name="location" size="20px" />
<t-icon name="location" size="20px"/>
<view class="info-text-container">
<text class="info-text-title">活动地点</text>
<text class="info-text">{{ detailData.address }}</text>
@@ -59,7 +64,8 @@
:navigation="{ type: 'fraction', paginationPosition: 'bottom-right' }"
height="500px"
>
<t-swiper-item v-for="(item, index) in detailData.items" :key="index" style="height: 192px" class="event-item">
<t-swiper-item v-for="(item, index) in detailData.items" :key="index" style="height: 192px"
class="event-item">
<view>
<view class="event-item-header">
<view class="event-item-index">{{ index + 1 }}</view>
@@ -80,7 +86,7 @@
<view class="event-item-info">
<view class="event-item-section">
<view class="event-item-section-title">
<t-icon name="flag" size="16px" color="var(--td-brand-color-5)" />
<t-icon name="flag" size="16px" color="var(--td-brand-color-5)"/>
<text>活动形式</text>
</view>
<view class="event-item-section-content">{{ item.form }}</view>
@@ -88,7 +94,7 @@
<view class="event-item-section">
<view class="event-item-section-title">
<t-icon name="chart-bar" size="16px" color="var(--td-brand-color-5)" />
<t-icon name="chart-bar" size="16px" color="var(--td-brand-color-5)"/>
<text>评分规则</text>
</view>
<view class="event-item-section-content">{{ item.rule }}</view>
@@ -99,57 +105,60 @@
</t-swiper-item>
</t-swiper>
<!-- <view class="event-items">-->
<!-- <view v-for="(item, index) in detailData.items" :key="item.id" class="event-item">-->
<!-- <view class="event-item-header">-->
<!-- <view class="event-item-index">{{ index + 1 }}</view>-->
<!-- <text class="event-item-name">{{ item.name }}</text>-->
<!-- </view>-->
<!-- -->
<!-- <view class="event-item-content">-->
<!-- &lt;!&ndash; 项目图片区域 &ndash;&gt;-->
<!-- &lt;!&ndash; v-if="item.img"&ndash;&gt;-->
<!-- &lt;!&ndash; :src="item.img"&ndash;&gt;-->
<!-- <image-->
<!-- src="https://api.zzzmh.cn/v2/bz/v3/getUrl/c9d3deb2880411ebb6edd017c2d2eca220"-->
<!-- mode="aspectFill" -->
<!-- class="event-item-image"-->
<!-- />-->
<!-- -->
<!-- &lt;!&ndash; 项目信息区域 &ndash;&gt;-->
<!-- <view class="event-item-info">-->
<!-- <view class="event-item-section">-->
<!-- <view class="event-item-section-title">-->
<!-- <t-icon name="flag" size="16px" color="var(&#45;&#45;td-brand-color-5)" />-->
<!-- <text>活动形式</text>-->
<!-- </view>-->
<!-- <view class="event-item-section-content">{{ item.form }}</view>-->
<!-- </view>-->
<!-- -->
<!-- <view class="event-item-section">-->
<!-- <view class="event-item-section-title">-->
<!-- <t-icon name="chart-bar" size="16px" color="var(&#45;&#45;td-brand-color-5)" />-->
<!-- <text>评分规则</text>-->
<!-- </view>-->
<!-- <view class="event-item-section-content">{{ item.rule }}</view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- <view class="event-items">-->
<!-- <view v-for="(item, index) in detailData.items" :key="item.id" class="event-item">-->
<!-- <view class="event-item-header">-->
<!-- <view class="event-item-index">{{ index + 1 }}</view>-->
<!-- <text class="event-item-name">{{ item.name }}</text>-->
<!-- </view>-->
<!-- -->
<!-- <view class="event-item-content">-->
<!-- &lt;!&ndash; 项目图片区域 &ndash;&gt;-->
<!-- &lt;!&ndash; v-if="item.img"&ndash;&gt;-->
<!-- &lt;!&ndash; :src="item.img"&ndash;&gt;-->
<!-- <image-->
<!-- src="https://api.zzzmh.cn/v2/bz/v3/getUrl/c9d3deb2880411ebb6edd017c2d2eca220"-->
<!-- mode="aspectFill" -->
<!-- class="event-item-image"-->
<!-- />-->
<!-- -->
<!-- &lt;!&ndash; 项目信息区域 &ndash;&gt;-->
<!-- <view class="event-item-info">-->
<!-- <view class="event-item-section">-->
<!-- <view class="event-item-section-title">-->
<!-- <t-icon name="flag" size="16px" color="var(&#45;&#45;td-brand-color-5)" />-->
<!-- <text>活动形式</text>-->
<!-- </view>-->
<!-- <view class="event-item-section-content">{{ item.form }}</view>-->
<!-- </view>-->
<!-- -->
<!-- <view class="event-item-section">-->
<!-- <view class="event-item-section-title">-->
<!-- <t-icon name="chart-bar" size="16px" color="var(&#45;&#45;td-brand-color-5)" />-->
<!-- <text>评分规则</text>-->
<!-- </view>-->
<!-- <view class="event-item-section-content">{{ item.rule }}</view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
<!-- </view>-->
</view>
</view>
<!-- 底部操作栏 -->
<view class="footer-bar">
<t-button theme="primary" block @click="navigateToSignUp">立即报名</t-button>
<!-- <t-button theme="primary" block @click="navigateToSignUp">立即报名</t-button>-->
<t-button theme="primary" block :disabled="bottomButton.disabled" @click="bottomButton.onClick">
{{ bottomButton.text }}
</t-button>
</view>
</template>
<!-- 加载中状态 -->
<template v-else>
<view class="loading-container">
<t-loading theme="dots" size="40rpx" />
<t-loading theme="dots" size="40rpx"/>
<text>加载中...</text>
</view>
</template>
@@ -157,13 +166,14 @@
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { Toast } from 'tdesign-mobile-vue';
import { useRequest } from "@/utils/request";
import {ref, onMounted, computed} from 'vue';
import {onLoad} from '@dcloudio/uni-app';
import {Toast} from 'tdesign-mobile-vue';
import {useRequest} from "@/utils/request";
const request = useRequest();
const actId = ref(null);
const isSignUp = ref(null);
const detailData = ref(null);
// 格式化日期
@@ -177,6 +187,37 @@ const formatDate = (dateStr) => {
}
};
// 底部按钮文字
const bottomButton = computed(() => {
const {signStartTime, signEndTime} = detailData.value
if (signStartTime && signEndTime) {
const now = new Date();
const startTime = new Date(signStartTime);
const endTime = new Date(signEndTime);
if (now >= startTime && now <= endTime) {
return {
text: isSignUp.value ? '修改报名信息' : '立即报名',
disabled: false,
onClick: navigateToSignUp
}
} else if (now < startTime) {
return {
text: `报名开始时间：${formatDate(signStartTime)}`,
disabled: true,
onClick: () => {
}
}
} else {
return {
text: `报名结束时间：${formatDate(signEndTime)}`,
disabled: true,
onClick: () => {
}
}
}
}
})
// 跳转到报名页面
const navigateToSignUp = () => {
if (!actId.value) return;
@@ -194,27 +235,42 @@ const getActivityDetail = async (id) => {
duration: 0
});
const { code, data } = await request.get(`/client/activity/get/${id}`);
const {code, data} = await request.get(`/client/activity/get/${id}`);
if (code === 0 && data) {
detailData.value = data;
} else {
Toast({ message: '获取活动详情失败', theme: 'error' });
Toast({message: '获取活动详情失败', theme: 'error'});
}
loading.clear();
} catch (error) {
console.error('获取活动详情错误', error);
Toast({ message: '获取活动详情失败', theme: 'error' });
Toast({message: '获取活动详情失败', theme: 'error'});
}
};
// 判断是否报名
async function getIsSignUp() {
try {
const {code, data} = await request.get('/client/activity/is-sign-up/' + actId.value)
if (code === 0) {
isSignUp.value = data
} else {
Toast({message: '判断是否报名失败', theme: 'error'});
}
} catch (e) {
console.error(e)
}
}
// 页面加载
onLoad((option) => {
if (option.id) {
actId.value = option.id;
getActivityDetail(option.id);
getIsSignUp();
} else {
Toast({ message: '未找到活动ID', theme: 'error' });
Toast({message: '未找到活动ID', theme: 'error'});
}
});
</script>
@@ -461,14 +517,14 @@ onLoad((option) => {
}
}
::v-deep .t-swiper__container{
::v-deep .t-swiper__container {
//min-height: 300rpx!important;
height: unset;
}
::v-deep .t-swiper-item{
::v-deep .t-swiper-item {
//height: 100%!important;
height: unset!important;
height: unset !important;
}
</style>