231 lines
9.2 KiB
Plaintext
231 lines
9.2 KiB
Plaintext
<!-- 休闲文娱页面 -->
|
||
<view class="page-container">
|
||
<!-- 顶部导航栏 -->
|
||
<view class="unified-header">
|
||
<view class="unified-header-left"></view>
|
||
<text class="unified-header-title">休闲文娱</text>
|
||
<view class="unified-header-right"></view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<scroll-view scroll-y class="content-scroll" style="padding-top: 194rpx;" enhanced show-scrollbar="{{false}}">
|
||
<!-- 顶部轮播卡片 -->
|
||
<view class="banner-section">
|
||
<swiper class="banner-swiper"
|
||
style="height: {{swiperHeight || 400}}rpx"
|
||
indicator-dots="{{true}}"
|
||
indicator-color="rgba(255,255,255,0.4)"
|
||
indicator-active-color="#fff"
|
||
circular="{{true}}"
|
||
autoplay="{{true}}"
|
||
interval="{{5000}}"
|
||
duration="{{500}}"
|
||
easing-function="easeInOutCubic">
|
||
<swiper-item wx:for="{{bannerList}}" wx:key="id">
|
||
<view class="banner-card">
|
||
<!-- 如果有图片URL则显示图片，否则显示渐变背景 -->
|
||
<image wx:if="{{item.imageUrl}}"
|
||
class="banner-image"
|
||
src="{{item.imageUrl}}"
|
||
mode="widthFix"
|
||
bindload="onBannerLoad"></image>
|
||
<view wx:else class="banner-bg-gradient" style="background: {{item.bgColor}};"></view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- 功能入口 - 与服务页面统一的圆形图标风格 -->
|
||
<view class="category-section">
|
||
<view class="category-item"
|
||
wx:for="{{categoryList}}"
|
||
wx:key="id"
|
||
data-id="{{item.id}}"
|
||
data-name="{{item.name}}"
|
||
bindtap="onCategoryTap">
|
||
<!-- 图标容器：圆形图片 -->
|
||
<view class="category-icon-container">
|
||
<image src="{{item.icon}}" class="icon-svg" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="category-name">{{item.name}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 滚动公告栏 -->
|
||
<view class="notice-bar" bindtap="onNoticeTap" wx:if="{{noticeList.length > 0}}">
|
||
<view class="notice-icon">
|
||
<image src="/images/icon-heart-filled.png" class="heart-icon" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="notice-content">
|
||
<swiper class="notice-swiper" vertical autoplay circular interval="3000">
|
||
<swiper-item wx:for="{{noticeList}}" wx:key="id">
|
||
<rich-text nodes="{{item.content}}" class="notice-text"></rich-text>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<image src="/images/icon-chevron-right.png" class="notice-arrow" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<!-- 空公告栏占位 -->
|
||
<view class="notice-bar-empty" wx:if="{{noticeList.length === 0}}"></view>
|
||
|
||
<!-- 活动标签切换 - 横向滚动 -->
|
||
<view class="tab-section">
|
||
<scroll-view scroll-x class="tab-scroll" show-scrollbar="{{false}}">
|
||
<view class="tab-list">
|
||
<view class="tab-item {{activeTab === 'featured' ? 'active' : ''}}"
|
||
data-tab="featured"
|
||
bindtap="onTabChange">
|
||
精选活动
|
||
</view>
|
||
<view class="tab-item {{activeTab === 'free' ? 'active' : ''}}"
|
||
data-tab="free"
|
||
bindtap="onTabChange">
|
||
免费活动
|
||
</view>
|
||
<view class="tab-item {{activeTab === 'vip' ? 'active' : ''}}"
|
||
data-tab="vip"
|
||
bindtap="onTabChange">
|
||
VIP活动
|
||
</view>
|
||
<view class="tab-item {{activeTab === 'svip' ? 'active' : ''}}"
|
||
data-tab="svip"
|
||
bindtap="onTabChange">
|
||
SVIP活动
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 活动列表 -->
|
||
<view class="activity-list">
|
||
<view class="activity-card"
|
||
wx:for="{{activityList}}"
|
||
wx:key="id"
|
||
data-id="{{item.id}}"
|
||
bindtap="onActivityTap">
|
||
<!-- 活动图片 -->
|
||
<view class="activity-image-wrap">
|
||
<!-- 如果有图片URL则显示图片，否则显示渐变背景 -->
|
||
<image wx:if="{{item.image}}"
|
||
class="activity-image"
|
||
src="{{item.image}}"
|
||
mode="aspectFill"></image>
|
||
<view wx:else class="activity-image-gradient" style="background: {{item.bgColor}};"></view>
|
||
|
||
<!-- 点赞数 -->
|
||
<view class="like-badge {{item.isLiked ? 'liked' : ''}}"
|
||
catchtap="onLike"
|
||
data-id="{{item.id}}"
|
||
data-index="{{index}}">
|
||
<image src="{{item.isLiked ? '/images/icon-heart-red.png' : '/images/icon-heart.png'}}"
|
||
class="like-icon"
|
||
mode="aspectFit"></image>
|
||
<text class="like-count">{{item.likes}}</text>
|
||
</view>
|
||
<!-- 价格标签 -->
|
||
<view class="price-tag {{item.priceType}}">{{item.price}}</view>
|
||
</view>
|
||
|
||
<!-- 活动信息 -->
|
||
<view class="activity-info">
|
||
<text class="activity-title">{{item.title}}</text>
|
||
<view class="activity-meta">
|
||
<view class="meta-item">
|
||
<image src="/images/icon-clock.png" class="meta-icon" mode="aspectFit"></image>
|
||
<text class="meta-text">{{item.date}}</text>
|
||
</view>
|
||
<view class="meta-row">
|
||
<view class="meta-item">
|
||
<image src="/images/icon-location.png" class="meta-icon" mode="aspectFit"></image>
|
||
<text class="meta-text">{{item.location}}</text>
|
||
</view>
|
||
<!-- 热度显示 -->
|
||
<view class="meta-item heat-item" wx:if="{{item.heat}}">
|
||
<app-icon name="flame-hot" size="40" color="#F97316" />
|
||
<text class="meta-text heat-text">{{item.heat}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 报名信息 -->
|
||
<view class="activity-footer">
|
||
<view class="participants">
|
||
<text class="participant-text">{{item.participants}}人已报名</text>
|
||
</view>
|
||
<view class="signup-btn {{item.isSignedUp ? 'signed' : ''}}"
|
||
catchtap="onSignUp"
|
||
data-id="{{item.id}}"
|
||
data-index="{{index}}">
|
||
{{item.isSignedUp ? '已报名' : '立即报名'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view class="empty-state" wx:if="{{!loading && activityList.length === 0}}">
|
||
<image src="/images/icon-empty.png" class="empty-icon" mode="aspectFit"></image>
|
||
<text class="empty-text">暂无活动</text>
|
||
</view>
|
||
|
||
<!-- 底部提示 -->
|
||
<view class="list-footer" wx:if="{{activityList.length > 0}}">
|
||
<text class="footer-text">没有更多活动了 ~</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部占位 -->
|
||
<view class="bottom-placeholder"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 自定义底部导航栏 -->
|
||
<view class="custom-tabbar">
|
||
<view class="tabbar-item" bindtap="switchTab" data-path="/pages/index/index" wx:if="{{auditStatus === 0}}">
|
||
<image src="/images/tab-listen.png" class="tabbar-icon" mode="aspectFit"></image>
|
||
<text class="tabbar-text">陪伴</text>
|
||
</view>
|
||
<view class="tabbar-item active">
|
||
<image src="/images/tab-companion-active.png" class="tabbar-icon" mode="aspectFit"></image>
|
||
<text class="tabbar-text active">文娱</text>
|
||
</view>
|
||
<view class="tabbar-item" bindtap="switchTab" data-path="/pages/service/service">
|
||
<image src="/images/tab-service.png" class="tabbar-icon" mode="aspectFit"></image>
|
||
<text class="tabbar-text">服务</text>
|
||
</view>
|
||
<view class="tabbar-item" bindtap="switchTab" data-path="/pages/chat/chat">
|
||
<view class="message-icon-wrapper">
|
||
<image src="{{totalUnread > 0 ? '/images/tab-message.png' : '/images/tab-message-nodot.png'}}" class="tabbar-icon" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="tabbar-text">消息</text>
|
||
</view>
|
||
<view class="tabbar-item" bindtap="switchTab" data-path="/pages/profile/profile">
|
||
<image src="/images/tab-profile.png" class="tabbar-icon" mode="aspectFit"></image>
|
||
<text class="tabbar-text">我的</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 二维码引导弹窗 -->
|
||
<view class="qrcode-modal {{showQrcodeModal ? 'show' : ''}}" catchtap="onCloseQrcodeModal">
|
||
<view class="modal-mask"></view>
|
||
<view class="modal-content" catchtap="preventBubble">
|
||
<view class="close-btn" bindtap="onCloseQrcodeModal">
|
||
<image src="/images/icon-close.png" class="close-icon" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<view class="modal-title">请关注二维码</view>
|
||
<view class="modal-subtitle">回复“报名”获取活动详情</view>
|
||
|
||
<view class="qrcode-container" wx:if="{{qrcodeImageUrl}}">
|
||
<image src="{{qrcodeImageUrl}}" class="qrcode-image" mode="aspectFit" show-menu-by-longpress></image>
|
||
</view>
|
||
|
||
<view class="modal-tips" wx:if="{{qrcodeImageUrl}}">长按识别二维码或保存图片</view>
|
||
|
||
<view class="save-btn" bindtap="onSaveQrcode" wx:if="{{qrcodeImageUrl}}">
|
||
保存二维码图片
|
||
</view>
|
||
</view>
|
||
</view>
|