998 lines
34 KiB
Markdown
998 lines
34 KiB
Markdown
# 爱上萍乡小程序改版 Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** Redesign the mini-program from "湖南12301文旅专区" to "爱上萍乡" — a tourism card sales platform with 3-tab navigation, visual-impact homepage, and QR code entry page.
|
||
|
||
**Architecture:** The homepage (`pages/index/index.vue`) is a single-file Vue 3 SFC rebuilt with 4 sections: hero header, announcement swiper, card promotions, and scenic spots list. The QR code page (`pages/qrcode/index.vue`) is a new tab-level page with card swiper, expandable info panel, and feature buttons. Static scenic spot data lives in `src/data/scenic-spots.ts`. All existing API types, request utilities, and store patterns remain unchanged.
|
||
|
||
**Tech Stack:** Vue 3 + TypeScript + uni-app (WeChat mini-program) + Pinia + SCSS
|
||
|
||
## Global Constraints
|
||
|
||
- App name in all navigation bars: "爱上萍乡"
|
||
- TabBar: exactly 3 items (首页, 入园码, 我的)
|
||
- Homepage card prices: 赣湘全域旅游年卡 ¥300, 超级玩家卡 ¥198
|
||
- ~48 scenic spots (merged deduplicated from both cards), hardcoded in Phase 1
|
||
- QR code page: framework/placeholder only, no real QR generation logic
|
||
- All images use gradient/placeholder until real assets are available
|
||
- Announcements use mock data with API interface reserved
|
||
- uni-app `<script setup lang="ts">` + `<style scoped>` pattern throughout
|
||
|
||
---
|
||
|
||
### Task 1: Configuration & Routing
|
||
|
||
**Files:**
|
||
- Modify: `src/pages.json`
|
||
- Create: `src/pages/qrcode/index.vue` (skeleton)
|
||
- Create: `src/static/tabbar/qrcode.png`
|
||
- Create: `src/static/tabbar/qrcode-active.png`
|
||
- Modify: `src/pages/profile/index.vue:9`
|
||
|
||
**Interfaces:**
|
||
- Consumes: nothing
|
||
- Produces: qrcode page route registered at `pages/qrcode/index`, accessible via `uni.switchTab({ url: '/pages/qrcode/index' })`
|
||
|
||
- [ ] **Step 1: Copy tabbar icon placeholders**
|
||
|
||
```bash
|
||
cp src/static/tabbar/home.png src/static/tabbar/qrcode.png
|
||
cp src/static/tabbar/home-active.png src/static/tabbar/qrcode-active.png
|
||
```
|
||
|
||
- [ ] **Step 2: Update pages.json**
|
||
|
||
Replace the entire `src/pages.json` with:
|
||
|
||
```json
|
||
{
|
||
"easycom": {
|
||
"autoscan": true,
|
||
"custom": {
|
||
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
|
||
}
|
||
},
|
||
"pages": [
|
||
{
|
||
"path": "pages/index/index",
|
||
"style": {
|
||
"navigationBarTitleText": "爱上萍乡"
|
||
}
|
||
},
|
||
{
|
||
"path": "pages/qrcode/index",
|
||
"style": {
|
||
"navigationBarTitleText": "入园码"
|
||
}
|
||
},
|
||
{
|
||
"path": "pages/login/login",
|
||
"style": {
|
||
"navigationBarTitleText": "登录"
|
||
}
|
||
},
|
||
{
|
||
"path": "pages/profile/index",
|
||
"style": {
|
||
"navigationBarTitleText": "个人中心"
|
||
}
|
||
}
|
||
],
|
||
"subPackages": [
|
||
{
|
||
"root": "packages/user",
|
||
"pages": [
|
||
{
|
||
"path": "pages/card/list",
|
||
"style": {
|
||
"navigationBarTitleText": "年卡列表"
|
||
}
|
||
},
|
||
{
|
||
"path": "pages/card/detail",
|
||
"style": {
|
||
"navigationBarTitleText": "年卡详情"
|
||
}
|
||
},
|
||
{
|
||
"path": "pages/card/buy",
|
||
"style": {
|
||
"navigationBarTitleText": "确认购买"
|
||
}
|
||
},
|
||
{
|
||
"path": "pages/card/activate",
|
||
"style": {
|
||
"navigationBarTitleText": "激活年卡"
|
||
}
|
||
},
|
||
{
|
||
"path": "pages/card/qrcode",
|
||
"style": {
|
||
"navigationBarTitleText": "入园码"
|
||
}
|
||
},
|
||
{
|
||
"path": "pages/card/bind",
|
||
"style": {
|
||
"navigationBarTitleText": "绑定年卡"
|
||
}
|
||
}
|
||
]
|
||
}
|
||
],
|
||
"globalStyle": {
|
||
"navigationBarTextStyle": "black",
|
||
"navigationBarTitleText": "爱上萍乡",
|
||
"navigationBarBackgroundColor": "#FFFFFF",
|
||
"backgroundColor": "#F5F5F5"
|
||
},
|
||
"tabBar": {
|
||
"color": "#7A7E83",
|
||
"selectedColor": "#4A90D9",
|
||
"borderStyle": "white",
|
||
"backgroundColor": "#ffffff",
|
||
"list": [
|
||
{
|
||
"pagePath": "pages/index/index",
|
||
"text": "首页",
|
||
"iconPath": "static/tabbar/home.png",
|
||
"selectedIconPath": "static/tabbar/home-active.png"
|
||
},
|
||
{
|
||
"pagePath": "pages/qrcode/index",
|
||
"text": "入园码",
|
||
"iconPath": "static/tabbar/qrcode.png",
|
||
"selectedIconPath": "static/tabbar/qrcode-active.png"
|
||
},
|
||
{
|
||
"pagePath": "pages/profile/index",
|
||
"text": "我的",
|
||
"iconPath": "static/tabbar/profile.png",
|
||
"selectedIconPath": "static/tabbar/profile-active.png"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 3: Create qrcode page skeleton**
|
||
|
||
Create `src/pages/qrcode/index.vue`:
|
||
|
||
```vue
|
||
<template>
|
||
<view class="page">
|
||
<text>入园码页面（开发中）</text>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page { min-height: 100vh; background: #f5f5f5; display: flex; align-items: center; justify-content: center; }
|
||
</style>
|
||
```
|
||
|
||
- [ ] **Step 4: Update profile page text**
|
||
|
||
In `src/pages/profile/index.vue`, change line 9 from:
|
||
|
||
```html
|
||
<text class="user-desc" v-if="userStore.isLogin">欢迎使用湖南12301文旅专区</text>
|
||
```
|
||
|
||
to:
|
||
|
||
```html
|
||
<text class="user-desc" v-if="userStore.isLogin">欢迎使用爱上萍乡</text>
|
||
```
|
||
|
||
- [ ] **Step 5: Verify build succeeds**
|
||
|
||
Run: `cd /Users/jacobxu/Documents/Project/12301-dscp/zhy-mp-test && pnpm run build:mp-weixin`
|
||
Expected: BUILD SUCCESS with no errors. Verify `dist/build/mp-weixin/pages/qrcode/index` exists in output.
|
||
|
||
- [ ] **Step 6: Commit**
|
||
|
||
```bash
|
||
git add -A
|
||
git commit -m "feat: update tabBar to 3 items, add qrcode page skeleton, rename app"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: Scenic Spots Data Module
|
||
|
||
**Files:**
|
||
- Create: `src/data/scenic-spots.ts`
|
||
|
||
**Interfaces:**
|
||
- Consumes: nothing
|
||
- Produces: `ScenicSpotItem` interface and `scenicSpots` array (48 items), imported by homepage as `import { scenicSpots } from '../../data/scenic-spots'`
|
||
|
||
- [ ] **Step 1: Create scenic spots data file**
|
||
|
||
Create `src/data/scenic-spots.ts`:
|
||
|
||
```typescript
|
||
/** 景点数据类型 */
|
||
export interface ScenicSpotItem {
|
||
id: number
|
||
name: string
|
||
region: '萍乡' | '长沙' | '株洲' | '湘潭'
|
||
price: number
|
||
image: string
|
||
}
|
||
|
||
/**
|
||
* 合并去重后的景点列表（48个）
|
||
* 来源：赣湘全域旅游年卡(22家) + 超级玩家卡(40家)，去重后
|
||
* TODO: Phase 2 改为后端 API 获取
|
||
*/
|
||
export const scenicSpots: ScenicSpotItem[] = [
|
||
// === 萍乡 (21家) ===
|
||
{ id: 1, name: '武功山金顶景区', region: '萍乡', price: 70, image: '' },
|
||
{ id: 2, name: '杨岐山孽龙洞景区', region: '萍乡', price: 68, image: '' },
|
||
{ id: 3, name: '仙凤三宝景区', region: '萍乡', price: 50, image: '' },
|
||
{ id: 4, name: '武功山君澜温泉', region: '萍乡', price: 228, image: '' },
|
||
{ id: 5, name: '凯光新天地生态旅游区', region: '萍乡', price: 90, image: '' },
|
||
{ id: 6, name: '山猫王国', region: '萍乡', price: 68, image: '' },
|
||
{ id: 7, name: '和平农场·哎马乐园', region: '萍乡', price: 79, image: '' },
|
||
{ id: 8, name: '花涧里景区', region: '萍乡', price: 80, image: '' },
|
||
{ id: 9, name: '玉皇谷景区', region: '萍乡', price: 50, image: '' },
|
||
{ id: 10, name: '龙溪秘境', region: '萍乡', price: 30, image: '' },
|
||
{ id: 11, name: '南正街唐朝诡事录', region: '萍乡', price: 158, image: '' },
|
||
{ id: 12, name: '孽龙洞水上乐园', region: '萍乡', price: 180, image: '' },
|
||
{ id: 13, name: '桐花谷', region: '萍乡', price: 50, image: '' },
|
||
{ id: 14, name: '赣西野生动物王国', region: '萍乡', price: 160, image: '' },
|
||
{ id: 15, name: '武功山外骨骼登山', region: '萍乡', price: 200, image: '' },
|
||
{ id: 16, name: '发光登山杖', region: '萍乡', price: 88, image: '' },
|
||
{ id: 17, name: '三只猫青年旅社', region: '萍乡', price: 60, image: '' },
|
||
{ id: 18, name: '武功山奖牌', region: '萍乡', price: 19.9, image: '' },
|
||
{ id: 19, name: 'AI中医', region: '萍乡', price: 125, image: '' },
|
||
// === 长沙 (16家) ===
|
||
{ id: 20, name: '长沙方特东方神画', region: '长沙', price: 280, image: '' },
|
||
{ id: 21, name: '麦咭乐园红星运动空间站', region: '长沙', price: 278, image: '' },
|
||
{ id: 22, name: '宁乡野趣亲子乐园', region: '长沙', price: 88, image: '' },
|
||
{ id: 23, name: '长沙乐田派绣乡亲子乐园', region: '长沙', price: 68, image: '' },
|
||
{ id: 24, name: '湘东漂流', region: '长沙', price: 168, image: '' },
|
||
{ id: 25, name: '长沙黑麋峰森林公园', region: '长沙', price: 27, image: '' },
|
||
{ id: 26, name: '湘江游轮', region: '长沙', price: 120, image: '' },
|
||
{ id: 27, name: '天心阁', region: '长沙', price: 58, image: '' },
|
||
{ id: 28, name: '皇龙峡生态旅游区', region: '长沙', price: 138, image: '' },
|
||
{ id: 29, name: '靖港古镇', region: '长沙', price: 80, image: '' },
|
||
{ id: 30, name: '西溪磐石大峡谷', region: '长沙', price: 48, image: '' },
|
||
{ id: 31, name: '湖南省木偶皮影剧场', region: '长沙', price: 68, image: '' },
|
||
{ id: 32, name: '金坑溯溪', region: '长沙', price: 99, image: '' },
|
||
{ id: 33, name: '关山古镇', region: '长沙', price: 50, image: '' },
|
||
{ id: 34, name: '浏河第一湾', region: '长沙', price: 88, image: '' },
|
||
// === 株洲 (6家) ===
|
||
{ id: 35, name: '炎帝陵', region: '株洲', price: 62, image: '' },
|
||
{ id: 36, name: '酷洛潮漫（株洲馆）', region: '株洲', price: 118, image: '' },
|
||
{ id: 37, name: '神农谷风景旅游区', region: '株洲', price: 62, image: '' },
|
||
{ id: 38, name: '云上大院', region: '株洲', price: 50, image: '' },
|
||
{ id: 39, name: '云阳山', region: '株洲', price: 45, image: '' },
|
||
{ id: 40, name: '酒仙湖', region: '株洲', price: 65, image: '' },
|
||
// === 湘潭 (7家) ===
|
||
{ id: 41, name: '盘龙大观园', region: '湘潭', price: 128, image: '' },
|
||
{ id: 42, name: '米莱知识宇宙（湘潭万达馆）', region: '湘潭', price: 326, image: '' },
|
||
{ id: 43, name: '滴水洞', region: '湘潭', price: 40, image: '' },
|
||
{ id: 44, name: '毛泽东纪念园', region: '湘潭', price: 60, image: '' },
|
||
{ id: 45, name: '韶峰景区（含缆车）', region: '湘潭', price: 60, image: '' },
|
||
{ id: 46, name: '彭德怀纪念馆', region: '湘潭', price: 98, image: '' },
|
||
{ id: 47, name: '《最忆韶山冲》演出', region: '湘潭', price: 298, image: '' },
|
||
]
|
||
```
|
||
|
||
- [ ] **Step 2: Verify build succeeds**
|
||
|
||
Run: `pnpm run build:mp-weixin`
|
||
Expected: BUILD SUCCESS (data file has no side effects, just confirms it compiles).
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/data/scenic-spots.ts
|
||
git commit -m "feat: add scenic spots data module (48 spots, hardcoded)"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: Homepage Redesign
|
||
|
||
**Files:**
|
||
- Modify: `src/pages/index/index.vue` (complete rewrite)
|
||
|
||
**Interfaces:**
|
||
- Consumes: `ScenicSpotItem` and `scenicSpots` from `../../data/scenic-spots`
|
||
- Produces: nothing (page component, no exports)
|
||
|
||
- [ ] **Step 1: Write the complete homepage**
|
||
|
||
Replace the entire contents of `src/pages/index/index.vue` with:
|
||
|
||
```vue
|
||
<template>
|
||
<view class="page">
|
||
<!-- 头部区域：背景图 + 渐变遮罩 + 标题 + 搜索栏 -->
|
||
<view class="hero">
|
||
<view class="hero-overlay" />
|
||
<view class="hero-content">
|
||
<text class="hero-title">爱上萍乡</text>
|
||
<text class="hero-subtitle">赣湘之间 · 发现旅途美好</text>
|
||
<view class="search-bar" @click="goSearch">
|
||
<text class="search-icon">🔍</text>
|
||
<text class="search-placeholder">搜索景区、活动...</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view scroll-y class="scroll-content">
|
||
<!-- 公告栏 -->
|
||
<view class="notice-bar" v-if="announcements.length">
|
||
<view class="notice-label">
|
||
<text class="notice-icon">📢</text>
|
||
<text class="notice-text">公告</text>
|
||
</view>
|
||
<swiper class="notice-swiper" vertical autoplay circular :interval="3000" :duration="500">
|
||
<swiper-item v-for="item in announcements" :key="item.id">
|
||
<text class="notice-content">{{ item.content }}</text>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- 卡片销售宣传 -->
|
||
<view class="card-section">
|
||
<view class="promo-card promo-card-gx" @click="goCardDetail('gx')">
|
||
<view class="promo-card-badge">工会会员专属</view>
|
||
<text class="promo-card-name">赣湘全域旅游年卡</text>
|
||
<view class="promo-card-price-row">
|
||
<text class="promo-card-currency">¥</text>
|
||
<text class="promo-card-price">300</text>
|
||
<text class="promo-card-unit">/套卡(2张)</text>
|
||
</view>
|
||
<view class="promo-card-features">
|
||
<text class="promo-card-feature">✦ 22家景区免门票</text>
|
||
<text class="promo-card-feature">✦ 武功山·方特·君澜温泉</text>
|
||
<text class="promo-card-feature">✦ 覆盖萍乡/长沙/株洲/湘潭</text>
|
||
</view>
|
||
<view class="promo-card-btn">
|
||
<text class="promo-card-btn-text">立即抢购 →</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="promo-card promo-card-super" @click="goCardDetail('super')">
|
||
<view class="promo-card-badge">大学生·市民专属</view>
|
||
<text class="promo-card-name">超级玩家卡</text>
|
||
<view class="promo-card-price-row">
|
||
<text class="promo-card-currency">¥</text>
|
||
<text class="promo-card-price">198</text>
|
||
</view>
|
||
<view class="promo-card-features">
|
||
<text class="promo-card-feature">✦ 40家景区免门票</text>
|
||
<text class="promo-card-feature">✦ 武功山·方特·韶山·滴水洞</text>
|
||
<text class="promo-card-feature">✦ 含外骨骼登山·青年旅社等</text>
|
||
</view>
|
||
<view class="promo-card-btn">
|
||
<text class="promo-card-btn-text">立即抢购 →</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 热门景点列表 -->
|
||
<view class="spots-section">
|
||
<view class="spots-header">
|
||
<text class="spots-title">热门景点</text>
|
||
<text class="spots-more">查看全部 ></text>
|
||
</view>
|
||
<view class="spot-card" v-for="spot in scenicSpots" :key="spot.id" @click="goSpot(spot)">
|
||
<view class="spot-image" :style="{ background: getGradient(spot.region) }">
|
||
<view class="spot-region-tag">{{ spot.region }}</view>
|
||
</view>
|
||
<view class="spot-info">
|
||
<text class="spot-name">{{ spot.name }}</text>
|
||
<view class="spot-meta">
|
||
<text class="spot-price">¥{{ spot.price }}</text>
|
||
<view class="spot-free-tag">持卡免门票</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
import { scenicSpots } from '../../data/scenic-spots'
|
||
import type { ScenicSpotItem } from '../../data/scenic-spots'
|
||
|
||
/** 公告数据（mock，后续接 API） */
|
||
const announcements = ref([
|
||
{ id: 1, content: '赣湘全域旅游年卡限时优惠，工会会员专享¥300/套卡！' },
|
||
{ id: 2, content: '超级玩家卡全新上线，40家景区免门票，仅¥198！' },
|
||
{ id: 3, content: '武功山金顶景区已开放，持卡可免费入园1次。' },
|
||
])
|
||
|
||
/** 区域对应的渐变色（景点图片占位） */
|
||
const regionGradients: Record<string, string> = {
|
||
'萍乡': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||
'长沙': 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
||
'株洲': 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
||
'湘潭': 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
|
||
}
|
||
|
||
function getGradient(region: string): string {
|
||
return regionGradients[region] || regionGradients['萍乡']
|
||
}
|
||
|
||
/** 跳转搜索（暂不实现） */
|
||
function goSearch() {
|
||
uni.showToast({ title: '搜索功能开发中', icon: 'none' })
|
||
}
|
||
|
||
/** 跳转卡片详情 */
|
||
function goCardDetail(type: 'gx' | 'super') {
|
||
uni.navigateTo({ url: '/packages/user/pages/card/list' })
|
||
}
|
||
|
||
/** 跳转景点详情 */
|
||
function goSpot(spot: ScenicSpotItem) {
|
||
uni.showToast({ title: `${spot.name} 详情开发中`, icon: 'none' })
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page { display: flex; flex-direction: column; min-height: 100vh; background: #f5f5f5; }
|
||
|
||
/* === 头部区域 === */
|
||
.hero { position: relative; height: 360rpx; overflow: hidden; }
|
||
.hero-overlay {
|
||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||
background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
|
||
z-index: 1;
|
||
}
|
||
.hero::before {
|
||
content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||
background: linear-gradient(135deg, #1a237e 0%, #4a148c 50%, #e65100 100%);
|
||
}
|
||
.hero-content {
|
||
position: relative; z-index: 2;
|
||
padding: 80rpx 30rpx 30rpx;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.hero-title { font-size: 42rpx; font-weight: bold; color: #fff; margin-bottom: 8rpx; }
|
||
.hero-subtitle { font-size: 24rpx; color: rgba(255,255,255,0.8); margin-bottom: 24rpx; }
|
||
.search-bar {
|
||
display: flex; align-items: center;
|
||
background: rgba(255,255,255,0.95); border-radius: 40rpx;
|
||
padding: 18rpx 24rpx;
|
||
}
|
||
.search-icon { font-size: 28rpx; margin-right: 12rpx; }
|
||
.search-placeholder { font-size: 26rpx; color: #999; }
|
||
|
||
/* === 公告栏 === */
|
||
.notice-bar {
|
||
display: flex; align-items: center;
|
||
background: #fff; padding: 20rpx 24rpx; margin: 0;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
}
|
||
.notice-label { display: flex; align-items: center; margin-right: 16rpx; flex-shrink: 0; }
|
||
.notice-icon { font-size: 28rpx; margin-right: 6rpx; }
|
||
.notice-text { font-size: 24rpx; color: #E74C3C; font-weight: 500; }
|
||
.notice-swiper { flex: 1; height: 40rpx; }
|
||
.notice-content { font-size: 24rpx; color: #666; line-height: 40rpx; }
|
||
|
||
/* === 卡片销售宣传 === */
|
||
.card-section { padding: 24rpx; display: flex; flex-direction: column; gap: 24rpx; }
|
||
|
||
.promo-card {
|
||
position: relative; border-radius: 24rpx; padding: 40rpx 32rpx;
|
||
overflow: hidden;
|
||
}
|
||
.promo-card-gx {
|
||
background: linear-gradient(135deg, #1a237e 0%, #283593 40%, #ffd54f 100%);
|
||
}
|
||
.promo-card-super {
|
||
background: linear-gradient(135deg, #e65100 0%, #bf360c 40%, #7b1fa2 100%);
|
||
}
|
||
.promo-card-badge {
|
||
display: inline-block;
|
||
background: rgba(255,255,255,0.2); border-radius: 20rpx;
|
||
padding: 6rpx 16rpx; margin-bottom: 16rpx;
|
||
font-size: 22rpx; color: rgba(255,255,255,0.9);
|
||
}
|
||
.promo-card-name { font-size: 34rpx; font-weight: bold; color: #fff; display: block; margin-bottom: 12rpx; }
|
||
.promo-card-price-row { display: flex; align-items: baseline; margin-bottom: 20rpx; }
|
||
.promo-card-currency { font-size: 32rpx; color: #fff; font-weight: bold; }
|
||
.promo-card-price { font-size: 64rpx; color: #fff; font-weight: bold; line-height: 1; }
|
||
.promo-card-unit { font-size: 24rpx; color: rgba(255,255,255,0.8); margin-left: 8rpx; }
|
||
.promo-card-features { display: flex; flex-direction: column; gap: 8rpx; margin-bottom: 24rpx; }
|
||
.promo-card-feature { font-size: 24rpx; color: rgba(255,255,255,0.9); }
|
||
.promo-card-btn {
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: #fff; border-radius: 40rpx;
|
||
padding: 16rpx 0;
|
||
}
|
||
.promo-card-btn-text { font-size: 28rpx; font-weight: bold; color: #333; }
|
||
|
||
/* === 热门景点列表 === */
|
||
.spots-section { padding: 24rpx; }
|
||
.spots-header {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.spots-title { font-size: 34rpx; font-weight: bold; color: #333; }
|
||
.spots-more { font-size: 24rpx; color: #999; }
|
||
|
||
.spot-card {
|
||
background: #fff; border-radius: 20rpx; overflow: hidden;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.spot-image {
|
||
width: 100%; height: 320rpx; position: relative;
|
||
}
|
||
.spot-region-tag {
|
||
position: absolute; top: 16rpx; left: 16rpx;
|
||
background: rgba(0,0,0,0.5); border-radius: 16rpx;
|
||
padding: 4rpx 16rpx;
|
||
font-size: 22rpx; color: #fff;
|
||
}
|
||
.spot-info { padding: 20rpx 24rpx; }
|
||
.spot-name { font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 12rpx; display: block; }
|
||
.spot-meta { display: flex; justify-content: space-between; align-items: center; }
|
||
.spot-price { font-size: 32rpx; color: #E74C3C; font-weight: bold; }
|
||
.spot-free-tag {
|
||
background: #E8F5E9; border-radius: 16rpx;
|
||
padding: 4rpx 16rpx;
|
||
font-size: 22rpx; color: #2E7D32; font-weight: 500;
|
||
}
|
||
|
||
/* === 滚动区域 === */
|
||
.scroll-content { flex: 1; }
|
||
</style>
|
||
```
|
||
|
||
- [ ] **Step 2: Verify build succeeds**
|
||
|
||
Run: `pnpm run build:mp-weixin`
|
||
Expected: BUILD SUCCESS.
|
||
|
||
- [ ] **Step 3: Run type check**
|
||
|
||
Run: `pnpm run type-check`
|
||
Expected: No type errors.
|
||
|
||
- [ ] **Step 4: Visual verification (WeChat devtools)**
|
||
|
||
Run: `pnpm run dev:mp-weixin`
|
||
|
||
Open WeChat developer tools and import `dist/dev/mp-weixin`. Verify:
|
||
1. Hero header shows gradient background, "爱上萍乡" title, subtitle, search bar
|
||
2. Announcement bar scrolls vertically through 3 mock items
|
||
3. Two promo cards display with correct gradients, prices (¥300, ¥198), and feature text
|
||
4. Scenic spots list shows all 48 spots with gradient images, region tags, prices, and "持卡免门票" tags
|
||
5. TabBar shows 3 items: 首页, 入园码, 我的
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
git add src/pages/index/index.vue
|
||
git commit -m "feat: redesign homepage with hero, announcements, card promos, scenic spots"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 4: QR Code Entry Page
|
||
|
||
**Files:**
|
||
- Modify: `src/pages/qrcode/index.vue` (replace skeleton with full implementation)
|
||
|
||
**Interfaces:**
|
||
- Consumes: `useUserStore` from `../../store/user`
|
||
- Produces: nothing (page component, no exports)
|
||
|
||
- [ ] **Step 1: Write the complete QR code page**
|
||
|
||
Replace the entire contents of `src/pages/qrcode/index.vue` with:
|
||
|
||
```vue
|
||
<template>
|
||
<view class="page">
|
||
<!-- 未持卡状态 -->
|
||
<view class="empty-state" v-if="!hasCard">
|
||
<text class="empty-icon">🎫</text>
|
||
<text class="empty-text">您还没有旅游卡</text>
|
||
<text class="empty-desc">购买旅游卡后即可使用入园码</text>
|
||
<view class="empty-btn" @click="goBuyCard">
|
||
<text class="empty-btn-text">去购买</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 持卡状态 -->
|
||
<scroll-view scroll-y class="scroll-content" v-else>
|
||
<!-- 卡面展示区域（左右滑动切换） -->
|
||
<view class="card-swiper-wrap">
|
||
<swiper
|
||
class="card-swiper"
|
||
:current="currentCardIndex"
|
||
@change="onCardChange"
|
||
previous-margin="20rpx"
|
||
next-margin="20rpx"
|
||
>
|
||
<swiper-item v-for="(card, index) in userCards" :key="card.id">
|
||
<view class="card-face" :style="{ background: card.gradient }">
|
||
<view class="card-face-top">
|
||
<text class="card-face-brand">爱上萍乡</text>
|
||
<image class="card-face-logo" src="/static/logo.png" mode="aspectFit" />
|
||
</view>
|
||
<text class="card-face-name">{{ card.cardName }}</text>
|
||
<view class="card-face-user">
|
||
<image
|
||
class="card-face-avatar"
|
||
:src="userStore.userInfo?.avatarUrl || ''"
|
||
mode="aspectFill"
|
||
/>
|
||
<view class="card-face-user-info">
|
||
<text class="card-face-username">{{ card.userName }}</text>
|
||
<text class="card-face-expiry">有效期至 {{ card.expireDate }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<!-- 指示点 -->
|
||
<view class="card-dots" v-if="userCards.length > 1">
|
||
<view
|
||
v-for="(card, index) in userCards"
|
||
:key="index"
|
||
class="card-dot"
|
||
:class="{ active: index === currentCardIndex }"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 持卡信息（可展开/收起） -->
|
||
<view class="info-panel" @click="toggleInfo">
|
||
<view class="info-panel-header">
|
||
<text class="info-panel-icon">📋</text>
|
||
<text class="info-panel-title">持卡信息</text>
|
||
<text class="info-panel-arrow">{{ infoExpanded ? '▲' : '▼' }}</text>
|
||
</view>
|
||
<view class="info-panel-body" v-if="infoExpanded">
|
||
<view class="info-row">
|
||
<text class="info-label">证件类型</text>
|
||
<text class="info-value">{{ currentCard.idType }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">证件号码</text>
|
||
<text class="info-value">{{ currentCard.idNumber }}</text>
|
||
</view>
|
||
<view class="info-row">
|
||
<text class="info-label">手机号码</text>
|
||
<text class="info-value">{{ currentCard.phone }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 二维码区域 -->
|
||
<view class="qrcode-section">
|
||
<view class="qrcode-box">
|
||
<view class="qrcode-placeholder">
|
||
<text class="qrcode-placeholder-text">入园码</text>
|
||
<text class="qrcode-placeholder-sub">（二维码占位）</text>
|
||
</view>
|
||
</view>
|
||
<text class="qrcode-countdown">⏱ {{ countdown }}秒后自动刷新</text>
|
||
</view>
|
||
|
||
<!-- 功能入口 -->
|
||
<view class="feature-grid">
|
||
<view class="feature-item" @click="onFeature('reserve')">
|
||
<view class="feature-icon-wrap feature-icon-reserve">
|
||
<text class="feature-icon">📅</text>
|
||
</view>
|
||
<text class="feature-label">景区预约</text>
|
||
</view>
|
||
<view class="feature-item" @click="onFeature('history')">
|
||
<view class="feature-icon-wrap feature-icon-history">
|
||
<text class="feature-icon">📋</text>
|
||
</view>
|
||
<text class="feature-label">使用记录</text>
|
||
</view>
|
||
<view class="feature-item" @click="onFeature('spots')">
|
||
<view class="feature-icon-wrap feature-icon-spots">
|
||
<text class="feature-icon">🏔️</text>
|
||
</view>
|
||
<text class="feature-label">权益景区</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||
import { useUserStore } from '../../store/user'
|
||
|
||
const userStore = useUserStore()
|
||
|
||
/** 用户卡片 mock 数据（后续接 API） */
|
||
interface UserCardData {
|
||
id: string
|
||
cardName: string
|
||
userName: string
|
||
expireDate: string
|
||
gradient: string
|
||
idType: string
|
||
idNumber: string
|
||
phone: string
|
||
}
|
||
|
||
const userCards = ref<UserCardData[]>([
|
||
{
|
||
id: '1',
|
||
cardName: '赣湘全域旅游年卡',
|
||
userName: '张三',
|
||
expireDate: '2027.06.24',
|
||
gradient: 'linear-gradient(135deg, #1a237e 0%, #283593 40%, #ffd54f 100%)',
|
||
idType: '身份证',
|
||
idNumber: '360***1234',
|
||
phone: '138****5678',
|
||
},
|
||
{
|
||
id: '2',
|
||
cardName: '超级玩家卡',
|
||
userName: '张三',
|
||
expireDate: '2027.06.24',
|
||
gradient: 'linear-gradient(135deg, #e65100 0%, #bf360c 40%, #7b1fa2 100%)',
|
||
idType: '身份证',
|
||
idNumber: '360***1234',
|
||
phone: '138****5678',
|
||
},
|
||
])
|
||
|
||
/** 是否有卡（mock：默认有卡） */
|
||
const hasCard = computed(() => userCards.value.length > 0)
|
||
|
||
/** 当前选中的卡片索引 */
|
||
const currentCardIndex = ref(0)
|
||
|
||
/** 当前卡片数据 */
|
||
const currentCard = computed(() => userCards.value[currentCardIndex.value])
|
||
|
||
/** 持卡信息展开状态 */
|
||
const infoExpanded = ref(false)
|
||
|
||
/** 倒计时（60秒） */
|
||
const countdown = ref(60)
|
||
let timer: ReturnType<typeof setInterval> | null = null
|
||
|
||
function onCardChange(e: any) {
|
||
currentCardIndex.value = e.detail.current
|
||
infoExpanded.value = false
|
||
resetCountdown()
|
||
}
|
||
|
||
function toggleInfo() {
|
||
infoExpanded.value = !infoExpanded.value
|
||
}
|
||
|
||
function resetCountdown() {
|
||
countdown.value = 60
|
||
}
|
||
|
||
function startTimer() {
|
||
timer = setInterval(() => {
|
||
countdown.value--
|
||
if (countdown.value <= 0) {
|
||
resetCountdown()
|
||
// TODO: 刷新二维码（Phase 2 接入 API）
|
||
}
|
||
}, 1000)
|
||
}
|
||
|
||
function goBuyCard() {
|
||
uni.navigateTo({ url: '/packages/user/pages/card/list' })
|
||
}
|
||
|
||
function onFeature(type: 'reserve' | 'history' | 'spots') {
|
||
uni.showToast({ title: '功能开发中', icon: 'none' })
|
||
}
|
||
|
||
onMounted(() => {
|
||
startTimer()
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
if (timer) clearInterval(timer)
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page { min-height: 100vh; background: #f5f5f5; }
|
||
.scroll-content { height: 100vh; }
|
||
|
||
/* === 空状态 === */
|
||
.empty-state {
|
||
display: flex; flex-direction: column; align-items: center;
|
||
justify-content: center; min-height: 100vh; padding: 40rpx;
|
||
}
|
||
.empty-icon { font-size: 120rpx; margin-bottom: 24rpx; }
|
||
.empty-text { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 12rpx; }
|
||
.empty-desc { font-size: 26rpx; color: #999; margin-bottom: 40rpx; }
|
||
.empty-btn {
|
||
background: linear-gradient(135deg, #4A90D9, #357ABD);
|
||
border-radius: 44rpx; padding: 20rpx 80rpx;
|
||
}
|
||
.empty-btn-text { font-size: 30rpx; color: #fff; font-weight: bold; }
|
||
|
||
/* === 卡面展示区域 === */
|
||
.card-swiper-wrap { padding: 30rpx 0 16rpx; }
|
||
.card-swiper { height: 420rpx; }
|
||
|
||
.card-face {
|
||
margin: 0 20rpx; height: 380rpx; border-radius: 24rpx;
|
||
padding: 32rpx; position: relative; overflow: hidden;
|
||
display: flex; flex-direction: column; justify-content: space-between;
|
||
}
|
||
.card-face-top {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
}
|
||
.card-face-brand { font-size: 24rpx; color: rgba(255,255,255,0.8); }
|
||
.card-face-logo { width: 48rpx; height: 48rpx; }
|
||
.card-face-name { font-size: 32rpx; font-weight: bold; color: #fff; }
|
||
.card-face-user { display: flex; align-items: center; }
|
||
.card-face-avatar {
|
||
width: 80rpx; height: 80rpx; border-radius: 50%;
|
||
border: 4rpx solid rgba(255,255,255,0.5);
|
||
background: rgba(255,255,255,0.2); margin-right: 16rpx;
|
||
}
|
||
.card-face-user-info { display: flex; flex-direction: column; }
|
||
.card-face-username { font-size: 28rpx; font-weight: bold; color: #fff; }
|
||
.card-face-expiry { font-size: 22rpx; color: rgba(255,255,255,0.7); margin-top: 4rpx; }
|
||
|
||
/* 指示点 */
|
||
.card-dots { display: flex; justify-content: center; gap: 12rpx; padding: 12rpx 0; }
|
||
.card-dot {
|
||
width: 12rpx; height: 12rpx; border-radius: 50%;
|
||
background: #ddd; transition: all 0.3s;
|
||
}
|
||
.card-dot.active { background: #4A90D9; width: 24rpx; border-radius: 6rpx; }
|
||
|
||
/* === 持卡信息 === */
|
||
.info-panel {
|
||
margin: 0 24rpx 20rpx; background: #fff;
|
||
border-radius: 16rpx; overflow: hidden;
|
||
}
|
||
.info-panel-header {
|
||
display: flex; align-items: center; padding: 24rpx;
|
||
}
|
||
.info-panel-icon { font-size: 28rpx; margin-right: 8rpx; }
|
||
.info-panel-title { flex: 1; font-size: 28rpx; color: #333; font-weight: 500; }
|
||
.info-panel-arrow { font-size: 24rpx; color: #999; }
|
||
.info-panel-body { padding: 0 24rpx 24rpx; }
|
||
.info-row {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 16rpx 0; border-top: 1rpx solid #f5f5f5;
|
||
}
|
||
.info-label { font-size: 26rpx; color: #999; }
|
||
.info-value { font-size: 26rpx; color: #333; }
|
||
|
||
/* === 二维码区域 === */
|
||
.qrcode-section {
|
||
display: flex; flex-direction: column; align-items: center;
|
||
padding: 20rpx 24rpx 40rpx;
|
||
}
|
||
.qrcode-box {
|
||
width: 400rpx; height: 400rpx; background: #fff;
|
||
border-radius: 20rpx; display: flex; align-items: center;
|
||
justify-content: center; margin-bottom: 16rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
|
||
}
|
||
.qrcode-placeholder {
|
||
display: flex; flex-direction: column; align-items: center;
|
||
}
|
||
.qrcode-placeholder-text { font-size: 32rpx; color: #333; font-weight: bold; }
|
||
.qrcode-placeholder-sub { font-size: 24rpx; color: #999; margin-top: 8rpx; }
|
||
.qrcode-countdown { font-size: 24rpx; color: #999; }
|
||
|
||
/* === 功能入口 === */
|
||
.feature-grid {
|
||
display: flex; justify-content: space-around;
|
||
padding: 20rpx 40rpx 40rpx;
|
||
}
|
||
.feature-item {
|
||
display: flex; flex-direction: column; align-items: center;
|
||
}
|
||
.feature-icon-wrap {
|
||
width: 100rpx; height: 100rpx; border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
.feature-icon-reserve { background: #E3F2FD; }
|
||
.feature-icon-history { background: #FFF3E0; }
|
||
.feature-icon-spots { background: #E8F5E9; }
|
||
.feature-icon { font-size: 44rpx; }
|
||
.feature-label { font-size: 24rpx; color: #666; }
|
||
</style>
|
||
```
|
||
|
||
- [ ] **Step 2: Verify build succeeds**
|
||
|
||
Run: `pnpm run build:mp-weixin`
|
||
Expected: BUILD SUCCESS.
|
||
|
||
- [ ] **Step 3: Run type check**
|
||
|
||
Run: `pnpm run type-check`
|
||
Expected: No type errors.
|
||
|
||
- [ ] **Step 4: Visual verification (WeChat devtools)**
|
||
|
||
Open WeChat developer tools, navigate to the "入园码" tab. Verify:
|
||
1. Card swiper shows 2 cards with correct gradients, names, user info
|
||
2. Left/right swipe switches between cards with dot indicator updating
|
||
3. "持卡信息" panel toggles expand/collapse on tap
|
||
4. Expanded panel shows: 身份证, 360\*\*\*1234, 138\*\*\*\*5678
|
||
5. QR code placeholder area is centered with countdown text
|
||
6. Countdown decrements from 60 to 0, then resets
|
||
7. 3 feature buttons show with colored circle icons and labels
|
||
8. Tapping any feature button shows "功能开发中" toast
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
git add src/pages/qrcode/index.vue
|
||
git commit -m "feat: implement QR code entry page with card swiper, info panel, features"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 5: Final Verification & Polish
|
||
|
||
**Files:**
|
||
- No new files. Verify all modified files.
|
||
|
||
- [ ] **Step 1: Full build**
|
||
|
||
Run: `pnpm run build:mp-weixin`
|
||
Expected: BUILD SUCCESS with zero errors.
|
||
|
||
- [ ] **Step 2: Type check**
|
||
|
||
Run: `pnpm run type-check`
|
||
Expected: No type errors.
|
||
|
||
- [ ] **Step 3: End-to-end visual verification**
|
||
|
||
Open WeChat developer tools, import `dist/dev/mp-weixin`. Go through this checklist:
|
||
|
||
1. **TabBar**: 3 tabs visible (首页, 入园码, 我的), all switchable
|
||
2. **首页**:
|
||
- Hero: gradient background, "爱上萍乡" title, "赣湘之间 · 发现旅途美好" subtitle, search bar
|
||
- Announcement: vertical scrolling, 3 items cycling
|
||
- Card 1 (赣湘年卡): blue-gold gradient, ¥300, 3 features, "立即抢购" button
|
||
- Card 2 (超级玩家卡): orange-purple gradient, ¥198, 3 features, "立即抢购" button
|
||
- Scenic spots: 48 spots listed vertically, each with gradient image, region tag, name, price, "持卡免门票" tag
|
||
- Scrolling through all spots is smooth
|
||
3. **入园码**:
|
||
- 2 cards in swiper, switchable
|
||
- Expandable info panel works
|
||
- QR placeholder with countdown timer
|
||
- 3 feature buttons display and show toast on tap
|
||
4. **我的**:
|
||
- "欢迎使用爱上萍乡" text displayed (not "湖南12301")
|
||
- All menu items still functional
|
||
5. **Login**: still accessible and functional
|
||
|
||
- [ ] **Step 4: Final commit**
|
||
|
||
```bash
|
||
git add -A
|
||
git commit -m "chore: final verification pass for homepage redesign"
|
||
```
|