diff --git a/app.json b/app.json index 0f8e064..b6ca006 100644 --- a/app.json +++ b/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", diff --git a/images/app-icon-doc.png b/images/app-icon-doc.png new file mode 100644 index 0000000..911aa51 Binary files /dev/null and b/images/app-icon-doc.png differ diff --git a/images/app-icon-map.png b/images/app-icon-map.png new file mode 100644 index 0000000..2f9d537 Binary files /dev/null and b/images/app-icon-map.png differ diff --git a/images/app-icon-music.png b/images/app-icon-music.png new file mode 100644 index 0000000..5e68bda Binary files /dev/null and b/images/app-icon-music.png differ diff --git a/images/app-icon-qq.png b/images/app-icon-qq.png new file mode 100644 index 0000000..f859dac Binary files /dev/null and b/images/app-icon-qq.png differ diff --git a/images/app-icon-wechat.png b/images/app-icon-wechat.png new file mode 100644 index 0000000..838ff22 Binary files /dev/null and b/images/app-icon-wechat.png differ diff --git a/images/mock/friend/friend-avatar-Allen.png b/images/mock/friend/friend-avatar-Allen.png new file mode 100644 index 0000000..a24e95c Binary files /dev/null and b/images/mock/friend/friend-avatar-Allen.png differ diff --git a/images/mock/friend/friend-avatar-Eric.png b/images/mock/friend/friend-avatar-Eric.png new file mode 100644 index 0000000..fd16289 Binary files /dev/null and b/images/mock/friend/friend-avatar-Eric.png differ diff --git a/images/mock/friend/friend-avatar-Jacky.png b/images/mock/friend/friend-avatar-Jacky.png new file mode 100644 index 0000000..3328c5f Binary files /dev/null and b/images/mock/friend/friend-avatar-Jacky.png differ diff --git a/images/mock/friend/friend-avatar-Johnson.png b/images/mock/friend/friend-avatar-Johnson.png new file mode 100644 index 0000000..82b8091 Binary files /dev/null and b/images/mock/friend/friend-avatar-Johnson.png differ diff --git a/images/mock/friend/friend-avatar-Nick.png b/images/mock/friend/friend-avatar-Nick.png new file mode 100644 index 0000000..9c9c289 Binary files /dev/null and b/images/mock/friend/friend-avatar-Nick.png differ diff --git a/images/mock/purchase/activity.png b/images/mock/purchase/activity.png new file mode 100644 index 0000000..f29fc14 Binary files /dev/null and b/images/mock/purchase/activity.png differ diff --git a/images/mock/purchase/avatar.png b/images/mock/purchase/avatar.png new file mode 100644 index 0000000..432c330 Binary files /dev/null and b/images/mock/purchase/avatar.png differ diff --git a/pages/purchase-result/components/share-action-sheet/index.js b/pages/purchase-result/components/share-action-sheet/index.js new file mode 100644 index 0000000..28fcb89 --- /dev/null +++ b/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') + }, + } +}) diff --git a/pages/purchase-result/components/share-action-sheet/index.json b/pages/purchase-result/components/share-action-sheet/index.json new file mode 100644 index 0000000..4d06ee0 --- /dev/null +++ b/pages/purchase-result/components/share-action-sheet/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-popup": "tdesign-miniprogram/popup/popup" + } +} \ No newline at end of file diff --git a/pages/purchase-result/components/share-action-sheet/index.less b/pages/purchase-result/components/share-action-sheet/index.less new file mode 100644 index 0000000..25597be --- /dev/null +++ b/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; +} diff --git a/pages/purchase-result/components/share-action-sheet/index.wxml b/pages/purchase-result/components/share-action-sheet/index.wxml new file mode 100644 index 0000000..b8258b2 --- /dev/null +++ b/pages/purchase-result/components/share-action-sheet/index.wxml @@ -0,0 +1,20 @@ + + + + 分享给朋友 + + + + {{ item.name }} + + + 分享到社媒 + + + + {{ item.name }} + + + 取消 + + diff --git a/pages/purchase-result/index.js b/pages/purchase-result/index.js new file mode 100644 index 0000000..1cd9d4f --- /dev/null +++ b/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 }) + } +}) \ No newline at end of file diff --git a/pages/purchase-result/index.json b/pages/purchase-result/index.json new file mode 100644 index 0000000..998a4ef --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/pages/purchase-result/index.less b/pages/purchase-result/index.less new file mode 100644 index 0000000..680886a --- /dev/null +++ b/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%; +} diff --git a/pages/purchase-result/index.wxml b/pages/purchase-result/index.wxml new file mode 100644 index 0000000..6acbfb3 --- /dev/null +++ b/pages/purchase-result/index.wxml @@ -0,0 +1,55 @@ + + + + + + + + {{ activity.name }} + + + + {{ utils.formatDate(activity.time) }} + + + + {{ activity.location }} + + + + + + + + + +报名人员 + + + + + {{ item.name }} + {{ item.age }}岁 {{ item.job }} + + + + + + 分享给朋友 + 去查看 + + + + + + /** 格式化日期 */ + 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, + } + \ No newline at end of file diff --git a/services/friend.js b/services/friend.js new file mode 100644 index 0000000..13fa538 --- /dev/null +++ b/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 })) +} \ No newline at end of file diff --git a/services/purchase.js b/services/purchase.js new file mode 100644 index 0000000..085f3a5 --- /dev/null +++ b/services/purchase.js @@ -0,0 +1,24 @@ +import { delay } from './delay' + +/** 获取购买结果 */ +export function fetchPurchase(purchaseId) { + const mockData = { + purchaseId, + activity: { + activityId: 1, + image: '/images/mock/purchase/activity.png', + name: '2021 SICC服务设计创新大会', + time: 1615867200000, + location: '深圳市腾讯滨海大厦' + }, + attendees: [ + { + name: '蔡宣轩', + avatar: '/images/mock/purchase/avatar.png', + age: 29, + job: '设计师/艺术从业者' + } + ] + } + return delay().then(() => ({ code: 200, data: mockData })) +} \ No newline at end of file