473 lines
11 KiB
Vue
473 lines
11 KiB
Vue
|
<!-- 小区活动详情页 -->
|
|||
|
|
<template>
|
|||
|
|
<s-layout title="小区活动">
|
|||
|
|
<view class="activity-detail-page">
|
|||
|
|
<!-- 顶部Banner轮播 -->
|
|||
|
|
<swiper class="banner-swiper" :autoplay="true" :interval="3000" :circular="true" indicator-dots indicator-color="rgba(255,255,255,0.4)" active-color="#FFFFFF">
|
|||
|
|
<swiper-item v-for="(img, index) in activityInfo.banners" :key="index">
|
|||
|
|
<image class="banner-img" :src="img" mode="aspectFill" />
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
|
|||
|
|
<!-- Tab 切换栏 -->
|
|||
|
|
<view class="tab-bar">
|
|||
|
|
<view
|
|||
|
|
class="tab-item"
|
|||
|
|
:class="{ active: currentTab === 'basic' }"
|
|||
|
|
@tap="currentTab = 'basic'"
|
|||
|
|
>
|
|||
|
|
<text class="tab-text">基本信息</text>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="tab-item"
|
|||
|
|
:class="{ active: currentTab === 'intro' }"
|
|||
|
|
@tap="currentTab = 'intro'"
|
|||
|
|
>
|
|||
|
|
<text class="tab-text">活动简介</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 内容区域 - 独立滚动 -->
|
|||
|
|
<scroll-view class="detail-scroll" scroll-y :style="{ height: scrollViewHeight + 'px' }">
|
|||
|
|
<view class="detail-content">
|
|||
|
|
<!-- 基本信息 -->
|
|||
|
|
<template v-if="currentTab === 'basic'">
|
|||
|
|
<!-- 活动标题 -->
|
|||
|
|
<view class="activity-title">{{ activityInfo.title }}</view>
|
|||
|
|
|
|||
|
|
<!-- 地址 -->
|
|||
|
|
<view class="info-row location-row">
|
|||
|
|
<text class="sicon-location"></text>
|
|||
|
|
<text class="location-text">{{ activityInfo.location }}</text>
|
|||
|
|
<text class="sicon-right navigation-icon" @tap="openNavigation"></text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 服务类别 -->
|
|||
|
|
<view class="info-row tag-row">
|
|||
|
|
<text class="label-text">服务类别：</text>
|
|||
|
|
<view class="tag-list">
|
|||
|
|
<text
|
|||
|
|
class="tag-item"
|
|||
|
|
v-for="(tag, index) in activityInfo.serviceTypes"
|
|||
|
|
:key="index"
|
|||
|
|
>{{ tag }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 服务对象 -->
|
|||
|
|
<view class="info-row tag-row">
|
|||
|
|
<text class="label-text">服务对象：</text>
|
|||
|
|
<view class="tag-list">
|
|||
|
|
<text
|
|||
|
|
class="tag-item target-tag"
|
|||
|
|
v-for="(tag, index) in activityInfo.targetAudience"
|
|||
|
|
:key="index"
|
|||
|
|
>{{ tag }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 报名日期 -->
|
|||
|
|
<view class="info-row text-row">
|
|||
|
|
<text class="label-text">报名日期：</text>
|
|||
|
|
<text class="value-text">{{ activityInfo.registerDate }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 活动日期 -->
|
|||
|
|
<view class="info-row text-row">
|
|||
|
|
<text class="label-text">活动日期：</text>
|
|||
|
|
<text class="value-text">{{ activityInfo.activityDate }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 人数上限 -->
|
|||
|
|
<view class="info-row text-row">
|
|||
|
|
<text class="sicon-person"></text>
|
|||
|
|
<text class="label-text">人数上限：</text>
|
|||
|
|
<text class="value-text">{{ activityInfo.maxPeople }}人</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 联系人 -->
|
|||
|
|
<view class="info-row contact-row" @tap="callPhone">
|
|||
|
|
<text class="sicon-phone"></text>
|
|||
|
|
<text class="contact-name">{{ activityInfo.contactName }}</text>
|
|||
|
|
<text class="contact-phone">{{ activityInfo.contactPhone }}</text>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 活动简介 -->
|
|||
|
|
<template v-if="currentTab === 'intro'">
|
|||
|
|
<view class="intro-content">
|
|||
|
|
<mp-html :content="activityInfo.introduction"></mp-html>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- 底部占位，防止内容被底部按钮遮挡 -->
|
|||
|
|
<view class="bottom-placeholder"></view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<!-- 底部固定按钮栏 -->
|
|||
|
|
<view class="bottom-bar">
|
|||
|
|
<view class="registered-btn" @tap="showRegisteredList">
|
|||
|
|
<text class="registered-text">已有{{ activityInfo.registeredCount }}人报名</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="back-btn" @tap="goBack">
|
|||
|
|
<text class="back-text">返回</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</s-layout>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, onMounted, nextTick, getCurrentInstance } from 'vue';
|
|||
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|||
|
|
|
|||
|
|
// 当前Tab
|
|||
|
|
const currentTab = ref('basic');
|
|||
|
|
|
|||
|
|
// 列表滚动区域高度（单位：px）
|
|||
|
|
const scrollViewHeight = ref(0);
|
|||
|
|
|
|||
|
|
// 活动详情数据
|
|||
|
|
const activityInfo = ref({
|
|||
|
|
id: null,
|
|||
|
|
title: '',
|
|||
|
|
banners: [],
|
|||
|
|
location: '',
|
|||
|
|
serviceTypes: [],
|
|||
|
|
targetAudience: [],
|
|||
|
|
registerDate: '',
|
|||
|
|
activityDate: '',
|
|||
|
|
maxPeople: 0,
|
|||
|
|
contactName: '',
|
|||
|
|
contactPhone: '',
|
|||
|
|
registeredCount: 0,
|
|||
|
|
introduction: ''
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 页面加载
|
|||
|
|
onLoad((options) => {
|
|||
|
|
if (options.id) {
|
|||
|
|
loadActivityDetail(options.id);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 渲染完成后计算scroll-view高度
|
|||
|
|
onMounted(() => {
|
|||
|
|
const instance = getCurrentInstance();
|
|||
|
|
nextTick(() => {
|
|||
|
|
const sysInfo = uni.getSystemInfoSync();
|
|||
|
|
uni.createSelectorQuery()
|
|||
|
|
.in(instance)
|
|||
|
|
.select('.tab-bar')
|
|||
|
|
.boundingClientRect((rect) => {
|
|||
|
|
if (rect) {
|
|||
|
|
// scroll-view高度 = 屏幕可用高度 - tab栏高度 - tab栏距顶部距离 - 底部按钮高度(120rpx)
|
|||
|
|
scrollViewHeight.value = sysInfo.windowHeight - rect.height - rect.top - 60;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.exec();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 加载活动详情
|
|||
|
|
async function loadActivityDetail(id) {
|
|||
|
|
// TODO: 调用API获取活动详情
|
|||
|
|
// 模拟数据
|
|||
|
|
activityInfo.value = {
|
|||
|
|
id: id,
|
|||
|
|
title: 'xxxxxxxxxxxxxxxxx活动',
|
|||
|
|
banners: [
|
|||
|
|
'/static/img/guest.png',
|
|||
|
|
'/static/img/login_img.png'
|
|||
|
|
],
|
|||
|
|
location: '福清市音西街道',
|
|||
|
|
serviceTypes: ['社区服务', '敬老服务', '助残服务', '关爱儿童'],
|
|||
|
|
targetAudience: ['儿童', '孤寡老人', '残障人士', '优抚对象'],
|
|||
|
|
registerDate: '2025/06/30-2025/07/01',
|
|||
|
|
activityDate: '2025/07/05 12:00-2025/07/05 18:00',
|
|||
|
|
maxPeople: 100,
|
|||
|
|
contactName: '王德福',
|
|||
|
|
contactPhone: '13322471131',
|
|||
|
|
registeredCount: 37,
|
|||
|
|
introduction: `<p>本次活动旨在丰富社区居民文化生活，增进邻里关系，共建和谐社区。</p><p>欢迎各位居民踊跃参与！</p>`
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 打开导航
|
|||
|
|
function openNavigation() {
|
|||
|
|
// TODO: 调用地图导航
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 拨打电话
|
|||
|
|
function callPhone() {
|
|||
|
|
if (activityInfo.value.contactPhone) {
|
|||
|
|
uni.makePhoneCall({
|
|||
|
|
phoneNumber: activityInfo.value.contactPhone
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示已报名列表
|
|||
|
|
function showRegisteredList() {
|
|||
|
|
// TODO: 弹出已报名人员列表或跳转页面
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '查看报名名单',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 返回上一页
|
|||
|
|
function goBack() {
|
|||
|
|
uni.navigateBack();
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
/* 页面容器 */
|
|||
|
|
.activity-detail-page {
|
|||
|
|
position: relative;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 顶部Banner轮播 */
|
|||
|
|
.banner-swiper {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 400rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.banner-img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 400rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Tab 切换栏 */
|
|||
|
|
.tab-bar {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|||
|
|
|
|||
|
|
.tab-item {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 28rpx 0;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.tab-text {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
transition: all 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
&::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 120rpx;
|
|||
|
|
height: 4rpx;
|
|||
|
|
background: #FA7E49;
|
|||
|
|
border-radius: 2rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.active .tab-text {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 内容滚动区域 */
|
|||
|
|
.detail-scroll {
|
|||
|
|
/* 高度由JS动态绑定 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 详情内容 */
|
|||
|
|
.detail-content {
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 活动标题 */
|
|||
|
|
.activity-title {
|
|||
|
|
padding: 32rpx 32rpx 16rpx;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #FA7E49;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 信息行 */
|
|||
|
|
.info-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding: 20rpx 32rpx;
|
|||
|
|
|
|||
|
|
.sicon-location,
|
|||
|
|
.sicon-phone,
|
|||
|
|
.sicon-person {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
margin-top: 2rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 地址行 */
|
|||
|
|
.location-row {
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.location-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.navigation-icon {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #FA7E49;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 标签行 */
|
|||
|
|
.tag-row {
|
|||
|
|
align-items: flex-start;
|
|||
|
|
|
|||
|
|
.label-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tag-item {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #FA7E49;
|
|||
|
|
border: 1rpx solid #FA7E49;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
padding: 6rpx 16rpx;
|
|||
|
|
background-color: rgba(250, 126, 73, 0.04);
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.target-tag {
|
|||
|
|
color: #FA7E49;
|
|||
|
|
border: 1rpx solid #FA7E49;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 文本行 */
|
|||
|
|
.text-row {
|
|||
|
|
.label-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 联系人行 */
|
|||
|
|
.contact-row {
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
opacity: 0.7;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-name {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
margin-right: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-phone {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 活动简介内容 */
|
|||
|
|
.intro-content {
|
|||
|
|
padding: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部占位 */
|
|||
|
|
.bottom-placeholder {
|
|||
|
|
height: 140rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 底部固定按钮栏 */
|
|||
|
|
.bottom-bar {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 24rpx;
|
|||
|
|
padding: 20rpx 32rpx;
|
|||
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|||
|
|
|
|||
|
|
.registered-btn {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 88rpx;
|
|||
|
|
border: 2rpx solid #FA7E49;
|
|||
|
|
border-radius: 44rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
opacity: 0.85;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.registered-text {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #FA7E49;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-btn {
|
|||
|
|
width: 240rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
background-color: #FA7E49;
|
|||
|
|
border-radius: 44rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
opacity: 0.85;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-text {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|