134 lines
5.4 KiB
Plaintext
134 lines
5.4 KiB
Plaintext
<!-- 户外郊游页面 -->
|
|
<view class="page-container">
|
|
<!-- 固定导航栏容器 -->
|
|
<view class="nav-container">
|
|
<view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
|
|
<view class="nav-bar" style="height: {{navBarHeight}}px;">
|
|
<view class="nav-back" bindtap="onBack">
|
|
<image src="/images/icon-back.png" class="back-icon" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="nav-title">户外郊游</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 内容区域 -->
|
|
<scroll-view scroll-y class="content-scroll" style="padding-top: {{totalNavHeight}}px;" enhanced show-scrollbar="{{false}}">
|
|
<!-- 推广卡片 -->
|
|
<view class="city-group-card">
|
|
<view class="group-info">
|
|
<view class="group-title">户外郊游俱乐部</view>
|
|
<view class="group-tags">
|
|
<text class="tag-item">结伴同行</text>
|
|
<text class="tag-item">领略自然</text>
|
|
</view>
|
|
</view>
|
|
<view class="join-btn" bindtap="onJoinGroup">
|
|
点击立即加入
|
|
</view>
|
|
</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">
|
|
<image wx:if="{{item.image}}" class="activity-image" src="{{item.image}}" mode="aspectFill"></image>
|
|
<view wx:else class="activity-image-gradient"></view>
|
|
|
|
<view class="like-badge {{item.isLiked ? 'liked' : ''}}" catchtap="onLike" data-id="{{item.id}}" data-index="{{index}}">
|
|
<app-icon name="{{item.isLiked ? 'heart-filled' : 'heart'}}" size="32" color="{{item.isLiked ? '#FF5252' : '#4A5565'}}" />
|
|
<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="32" 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 style="height: 60rpx;"></view>
|
|
</scroll-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">
|
|
<image src="{{qrcodeImageUrl}}" class="qrcode-image" mode="aspectFit" show-menu-by-longpress></image>
|
|
</view>
|
|
<view class="save-btn" bindtap="onSaveQrcode">保存二维码</view>
|
|
</view>
|
|
</view>
|
|
</view>
|