129 lines
4.6 KiB
Plaintext
129 lines
4.6 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">{{selectedCity}}同城群</view>
|
|
<!-- 城市选择器 -->
|
|
<view class="city-selector" bindtap="onCitySelect">
|
|
<text class="city-name">{{selectedCity}}</text>
|
|
<image src="/images/icon-chevron-down.png" class="city-arrow" mode="aspectFit"></image>
|
|
</view>
|
|
</view>
|
|
<view class="join-btn" bindtap="onJoinCityGroup">
|
|
点击立即加入
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 活动列表标题 -->
|
|
<view class="section-header">
|
|
<view class="section-title">热门活动</view>
|
|
<text class="activity-count">共 {{activityList.length}} 个活动</text>
|
|
</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-container">
|
|
<image src="{{item.image}}" class="activity-image" mode="aspectFill"></image>
|
|
<!-- 位置徽章 -->
|
|
<view class="location-badge">
|
|
<image src="/images/icon-location-white.png" class="location-icon" mode="aspectFit"></image>
|
|
<text>{{item.venue}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 活动信息 -->
|
|
<view class="activity-info">
|
|
<view class="activity-title">{{item.title}}</view>
|
|
<view class="activity-meta">
|
|
<view class="meta-item">
|
|
<image src="/images/icon-calendar.png" class="meta-icon" mode="aspectFit"></image>
|
|
<text>{{item.date}}</text>
|
|
</view>
|
|
<view class="meta-item">
|
|
<image src="/images/icon-location.png" class="meta-icon" mode="aspectFit"></image>
|
|
<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="heat-text">{{item.heat}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部操作栏 -->
|
|
<view class="activity-footer">
|
|
<view class="participants">
|
|
<text class="participant-text">{{item.participants}}人已报名</text>
|
|
</view>
|
|
<view class="signup-btn" catchtap="onSignUp" data-id="{{item.id}}" data-index="{{index}}">
|
|
立即报名
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" wx:if="{{activityList.length === 0 && !loading}}">
|
|
<image src="/images/icon-empty.png" class="empty-icon" mode="aspectFit"></image>
|
|
<text class="empty-text">暂无活动</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部占位 -->
|
|
<view style="height: 60rpx;"></view>
|
|
</scroll-view>
|
|
|
|
<!-- 二维码弹窗 -->
|
|
<view class="qrcode-modal" wx:if="{{showQrcodeModal}}" catchtap="onCloseQrcodeModal">
|
|
<!-- 遮罩层 -->
|
|
<view class="modal-mask"></view>
|
|
|
|
<!-- 弹窗内容 -->
|
|
<view class="modal-content" catchtap="preventBubble">
|
|
<!-- 关闭按钮 -->
|
|
<view class="close-btn" catchtap="onCloseQrcodeModal">
|
|
<image src="/images/icon-close.png" class="close-icon" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 标题 -->
|
|
<view class="modal-title">加入{{selectedCity}}活动群</view>
|
|
|
|
<!-- 副标题 -->
|
|
<view class="modal-subtitle">及时获取第一手活动资讯</view>
|
|
|
|
<!-- 二维码容器 -->
|
|
<view class="qrcode-container">
|
|
<image src="{{qrcodeImageUrl}}" class="qrcode-image" mode="aspectFit"></image>
|
|
</view>
|
|
|
|
<!-- 保存按钮 -->
|
|
<view class="save-btn" catchtap="onSaveQrcode">
|
|
保存二维码
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|