feat: 完成【购买结果 & 分享页】

app.json

@@ -1,8 +1,9 @@
 {
   "pages": [
-    "pages/index/index",
-    "pages/explore/index",
-    "pages/my/index"
+    "pages/home/index",
+    "pages/purchase-result/index",
+    "pages/my/index",
+    "pages/city-picker/index"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/purchase-result/components/share-action-sheet/index.js

@@ -0,0 +1,46 @@
+// pages/purchase-result/components/share-action-sheet/index.js
+import { fetchFriends } from '../../../../services/friend'
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    visible: Boolean
+  },
+
+  /** 组件的初始数据 */
+  data: {
+    friends: [],
+    apps: [
+      { icon: '/images/app-icon-wechat.png', name: '微信' },
+      { icon: '/images/app-icon-qq.png', name: 'QQ' },
+      { icon: '/images/app-icon-doc.png', name: '腾讯文档' },
+      { icon: '/images/app-icon-map.png', name: '腾讯地图' },
+      { icon: '/images/app-icon-music.png', name: 'QQ音乐' },
+    ]
+  },
+
+  /** 组件的生命周期函数 */
+  lifetimes: {
+    /** 在组件实例刚刚被创建时执行 */
+    created() {
+      this.getFriends()
+    }
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    getFriends() {
+      fetchFriends().then(({ data }) => {
+        this.setData({ friends: data })
+      })
+    },
+
+    close() {
+      this.triggerEvent('close')
+    },
+  }
+})

pages/purchase-result/components/share-action-sheet/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-popup": "tdesign-miniprogram/popup/popup"
+  }
+}

pages/purchase-result/components/share-action-sheet/index.less

@@ -0,0 +1,54 @@
+/* pages/purchase-result/components/share-action-sheet/index.wxss */
+.action-sheet {
+  border-radius: 24rpx 24rpx 0 0;
+  background-color: #ffffff;
+}
+
+.section-title {
+  padding: 32rpx 32rpx 0;
+  color: #00000066;
+  font-size: 28rpx;
+}
+
+.section-content {
+  display: flex;
+  width: 750rpx;
+  height: 192rpx;
+}
+
+.friend, .app {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16rpx;
+  flex-shrink: 0;
+  width: 160rpx;
+  height: 184rpx;
+  padding-top: 8rpx;
+  font-size: 24rpx;
+}
+
+.friend-avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+}
+
+.app-icon {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 12rpx;
+}
+
+.cancel {
+  font-size: 32rpx;
+  border-top: 1rpx solid #e7e7e7;
+  margin-top: 16rpx;
+  text-align: center;
+  line-height: 96rpx;
+}
+
+.hover {
+  background-color: #eeeeee;
+}

pages/purchase-result/components/share-action-sheet/index.wxml

@@ -0,0 +1,20 @@
+<!--pages/purchase-result/components/share-action-sheet/index.wxml-->
+<t-popup visible="{{ visible }}" placement="bottom" bind:visible-change="close">
+  <view class="action-sheet">
+    <view class="section-title">分享给朋友</view>
+    <scroll-view class="section-content" scroll-x="{{ true }}" enable-flex>
+      <view wx:for="{{ friends }}" wx:key="index" class="friend">
+        <image class="friend-avatar" src="{{ item.avatar }}" mode="aspectFill" />
+        <text>{{ item.name }}</text>
+      </view>
+    </scroll-view>
+    <view class="section-title">分享到社媒</view>
+    <scroll-view class="section-content" scroll-x="{{ true }}" enable-flex>
+      <view wx:for="{{ apps }}" wx:key="index" class="app">
+        <image class="app-icon" src="{{ item.icon }}" mode="aspectFill" />
+        <text>{{ item.name }}</text>
+      </view>
+    </scroll-view>
+    <view class="cancel" hover-class="hover" bind:tap="close">取消</view>
+  </view>
+</t-popup>

pages/purchase-result/index.js

@@ -0,0 +1,59 @@
+// pages/purchase-result/index.js
+import { fetchPurchase } from '../../services/purchase'
+
+Page({
+
+  /** 页面的初始数据 */
+  data: {
+    purchaseId: null,
+    activity: null,
+    attendees: [],
+    shareVisible: false
+  },
+
+  /** 生命周期函数--监听页面加载 */
+  onLoad(options) {
+    const { purchaseId } = options
+    this.setData({ purchaseId })
+    this.getPurchase(purchaseId)
+  },
+
+  /** 生命周期函数--监听页面初次渲染完成 */
+  onReady() {},
+
+  /** 生命周期函数--监听页面显示 */
+  onShow() {},
+
+  /** 生命周期函数--监听页面隐藏 */
+  onHide() {},
+
+  /** 生命周期函数--监听页面卸载 */
+  onUnload() {},
+
+  /** 页面相关事件处理函数--监听用户下拉动作 */
+  onPullDownRefresh() {},
+
+  /** 页面上拉触底事件的处理函数 */
+  onReachBottom() {},
+
+  /** 用户点击右上角分享 */
+  onShareAppMessage() {},
+
+  /** 获取购买结果 */
+  getPurchase(purchaseId) {
+    fetchPurchase(purchaseId).then(({ data }) => {
+      const { activity, attendees } = data
+      this.setData({ activity, attendees })
+    })
+  },
+
+  /** 打开分享面板 */
+  openShare() {
+    this.setData({ shareVisible: true })
+  },
+
+  /** 关闭分享面板 */
+  closeShare() {
+    this.setData({ shareVisible: false })
+  }
+})

pages/purchase-result/index.json

@@ -0,0 +1,11 @@
+{
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar",
+    "t-result": "tdesign-miniprogram/result/result",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-skeleton": "tdesign-miniprogram/skeleton/skeleton",
+    "share-action-sheet": "./components/share-action-sheet/index"
+  },
+  "navigationStyle": "custom"
+}

pages/purchase-result/index.less

@@ -0,0 +1,102 @@
+/* pages/purchase-result/index.wxss */
+@import '/style/global.less';
+
+page {
+  box-sizing: content-box;
+  width: 686rpx;
+  padding: 0 32rpx;
+  background-color: #f5f6f7;
+}
+
+.result {
+  margin: 48rpx 0;
+}
+
+.activity-card {
+  padding: 32rpx;
+  border-radius: 24rpx;
+  margin-bottom: 48rpx;
+  box-shadow: 0 6px 30px 5px #0000000d, 0 16px 24px 2px #0000000a, 0 8px 10px -5px #00000014;;
+  background-color: #ffffff;
+}
+
+.activity-image {
+  width: 100%;
+  height: 350rpx;
+  margin-bottom: 32rpx;
+  border-radius: 18rpx;
+}
+
+.activity-name {
+  margin-bottom: 16rpx;
+  font-size: 36rpx;
+  font-weight: bold;
+}
+
+.activity-info {
+  display: flex;
+  column-gap: 32rpx;
+  flex-wrap: wrap;
+}
+
+.activity-info-item {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  margin-bottom: 8rpx;
+  font-size: 24rpx;
+}
+
+.icon {
+  color: @brand-color;
+}
+
+.section-title {
+  margin-bottom: 24rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.attendee {
+  display: flex;
+  gap: 24rpx;
+  padding: 32rpx;
+  margin-bottom: 12rpx;
+  border-radius: 18rpx;
+  background-color: #ffffff;
+}
+
+.attendee-avatar {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 50%;
+}
+
+.attendee-right {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 96rpx;
+}
+
+.attendee-name {
+  font-size: 32rpx;
+  line-height: 48rpx;
+}
+
+.attendee-info {
+  color: #00000099;
+  font-size: 28rpx;
+  line-height: 44rpx;
+}
+
+.buttons {
+  display: flex;
+  gap: 16rpx;
+  padding: 32rpx 0;
+  margin-top: 32rpx;
+}
+
+.button {
+  width: 100%;
+}

pages/purchase-result/index.wxml

@@ -0,0 +1,55 @@
+<!--pages/purchase-result/index.wxml-->
+<t-navbar title="购买结果" left-arrow />
+
+<t-result class="result" theme="success" title="购买成功" />
+
+<navigator wx:if="{{ activity !== null }}" class="activity-card" hover-class="none" url="/pages/city-picker/index">
+  <image class="activity-image" src="{{ activity.image }}" mode="aspectFill" />
+  <view class="activity-name">{{ activity.name }}</view>
+  <view class="activity-info">
+    <view class="activity-info-item">
+      <t-icon class="icon" name="time" size="32rpx" />
+      <text>{{ utils.formatDate(activity.time) }}</text>
+    </view>
+    <view class="activity-info-item">
+      <t-icon class="icon" name="location" size="32rpx" />
+      <text>{{ activity.location }}</text>
+    </view>
+  </view>
+</navigator>
+
+<view wx:else class="activity-card">
+  <t-skeleton class="activity-image" row-col="{{ [{ width: '100%', height: '350rpx', borderRadius: '18rpx' }] }}" theme="image" animation="gradient" />
+  <t-skeleton row-col="{{ [{ width: '100%' }, { width: '60%' }] }}" theme="text" animation="gradient" />
+</view>
+
+<view class="section-title">报名人员</view>
+<view class="attendees">
+  <view wx:for="{{ attendees }}" wx:key="index" class="attendee">
+    <image class="attendee-avatar" src="{{ item.avatar }}" mode="aspectFill" />
+    <view class="attendee-right">
+      <text class="attendee-name">{{ item.name }}</text>
+      <text class="attendee-info">{{ item.age }}岁 {{ item.job }}</text>
+    </view>
+  </view>
+</view>
+
+<view class="buttons">
+  <t-button class="button" theme="light" icon="share" size="large" variant="outline" bind:tap="openShare">分享给朋友</t-button>
+  <t-button class="button" theme="primary" size="large">去查看</t-button>
+</view>
+
+<share-action-sheet visible="{{ shareVisible }}" bind:close="closeShare" />
+
+<wxs module="utils">
+  /** 格式化日期 */
+  function formatDate(time) {
+    var date = getDate(time)
+    var y = date.getFullYear(), m = date.getMonth() + 1, d = date.getDate()
+    return  y + '年' + m + '月' + d + '日'
+  }
+
+  module.exports = {
+    formatDate: formatDate,
+  }
+</wxs>

services/friend.js

@@ -0,0 +1,13 @@
+import { delay } from './delay'
+
+/** 获取好友列表 */
+export function fetchFriends() {
+  const mockData = [
+    { name: 'Allen', avatar: '/images/mock/friend/friend-avatar-Allen.png' },
+    { name: 'Nick', avatar: '/images/mock/friend/friend-avatar-Nick.png' },
+    { name: 'Jacky', avatar: '/images/mock/friend/friend-avatar-Jacky.png' },
+    { name: 'Eric', avatar: '/images/mock/friend/friend-avatar-Eric.png' },
+    { name: 'Johnson', avatar: '/images/mock/friend/friend-avatar-Johnson.png' },
+  ]
+  return delay(2000).then(() => ({ code: 200, data: mockData }))
+}