feat: ui update
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar",
|
||||
"empty-state": "/components/empty-state/empty-state"
|
||||
"empty-state": "/components/empty-state/empty-state",
|
||||
"v2-overlay": "/components/v2-overlay/index"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { request, AUTH_EXPIRED_CODES } from '../../utils/request'
|
||||
import { ClosetShareDetail } from '../../types/models'
|
||||
import { ShareStatus } from '../../utils/config'
|
||||
import { formatDateTime } from '../../utils/format'
|
||||
import { navScroll } from '../../utils/nav'
|
||||
import { logger } from '../../utils/logger'
|
||||
|
||||
// 日志模块名
|
||||
@@ -17,8 +18,19 @@ Page({
|
||||
invalidTitle: '该分享已过期或已被取消',
|
||||
invalidDesc: '分享链接已失效',
|
||||
needLogin: false,
|
||||
// 滚动收缩：由 utils/nav.ts 的共享 handler 驱动
|
||||
navScrolled: false,
|
||||
// 取消分享确认：v2 玻璃弹窗
|
||||
cancelVisible: false,
|
||||
cancelButtons: [
|
||||
{ text: '再想想', value: '' },
|
||||
{ text: '取消分享', value: 'ok', type: 'main' },
|
||||
],
|
||||
},
|
||||
|
||||
// scroll-view 滚动 → 导航收缩为玻璃小标题
|
||||
onNavScroll: navScroll,
|
||||
|
||||
onLoad(query: Record<string, string>) {
|
||||
const uuid = query.uuid || ''
|
||||
logger.debug(LOG, 'onLoad, uuid=', uuid)
|
||||
@@ -99,29 +111,29 @@ Page({
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
wx.showModal({
|
||||
title: '取消分享',
|
||||
content: '取消后该分享链接将失效，且不返还衣柜分享额度',
|
||||
confirmText: '取消分享',
|
||||
confirmColor: '#FF3B30',
|
||||
success: (res) => {
|
||||
if (!res.confirm) return
|
||||
request({ url: `/closet-share/${this.data.uuid}/cancel`, method: 'POST' })
|
||||
.then(() => {
|
||||
logger.info(LOG, '取消分享成功')
|
||||
wx.showToast({ title: '已取消', icon: 'success' })
|
||||
;(this as any).backTimer = setTimeout(
|
||||
() =>
|
||||
wx.navigateBack({
|
||||
fail: (e: any) => logger.warn(LOG, 'navigateBack 失败, err=', e && e.errMsg),
|
||||
}),
|
||||
500,
|
||||
)
|
||||
})
|
||||
.catch((e: any) => logger.warn(LOG, '取消分享失败, code=', e && e.code))
|
||||
},
|
||||
fail: (e: any) => logger.warn(LOG, '取消分享弹窗失败, err=', e && e.errMsg),
|
||||
})
|
||||
this.setData({ cancelVisible: true })
|
||||
},
|
||||
|
||||
onCancelCancel() {
|
||||
this.setData({ cancelVisible: false })
|
||||
},
|
||||
|
||||
onCancelConfirm(e: WechatMiniprogram.CustomEvent) {
|
||||
this.setData({ cancelVisible: false })
|
||||
if (e.detail.value !== 'ok') return
|
||||
request({ url: `/closet-share/${this.data.uuid}/cancel`, method: 'POST' })
|
||||
.then(() => {
|
||||
logger.info(LOG, '取消分享成功')
|
||||
wx.showToast({ title: '已取消', icon: 'success' })
|
||||
;(this as any).backTimer = setTimeout(
|
||||
() =>
|
||||
wx.navigateBack({
|
||||
fail: (err: any) => logger.warn(LOG, 'navigateBack 失败, err=', err && err.errMsg),
|
||||
}),
|
||||
500,
|
||||
)
|
||||
})
|
||||
.catch((err: any) => logger.warn(LOG, '取消分享失败, code=', err && err.code))
|
||||
},
|
||||
|
||||
onBackHome() {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<view class="page detail-page">
|
||||
<navigation-bar title="分享详情" />
|
||||
<view class="page page-flex">
|
||||
<navigation-bar title="分享详情" scrolled="{{navScrolled}}" />
|
||||
|
||||
<empty-state
|
||||
wx:if="{{invalid && needLogin}}"
|
||||
@@ -19,36 +19,53 @@
|
||||
bind:action="onBackHome"
|
||||
/>
|
||||
|
||||
<scroll-view wx:else scroll-y class="scroll-body">
|
||||
<!-- 分享者信息 -->
|
||||
<view class="card owner-card">
|
||||
<view class="avatar">
|
||||
<image wx:if="{{detail.owner_avatar}}" class="avatar-img" src="{{detail.owner_avatar}}" mode="aspectFill" />
|
||||
<view wx:else class="icon icon-user avatar-placeholder"></view>
|
||||
<scroll-view wx:else scroll-y class="scroll-body pb-dock" bindscroll="onNavScroll">
|
||||
<!-- 分享者行 -->
|
||||
<view class="head">
|
||||
<view class="eyebrow">Shared Closet</view>
|
||||
<view class="display">{{detail.owner_name}} 的衣橱</view>
|
||||
</view>
|
||||
|
||||
<view class="csd-owner">
|
||||
<view class="csd-av">
|
||||
<image wx:if="{{detail.owner_avatar}}" class="pic" src="{{detail.owner_avatar}}" mode="aspectFill" />
|
||||
<view wx:else class="icon icon-user"></view>
|
||||
</view>
|
||||
<view class="owner-info">
|
||||
<view class="owner-name">{{detail.owner_name}} 分享了 {{detail.clothes.length}} 件衣物</view>
|
||||
<view class="owner-expire">{{expireText}}</view>
|
||||
<view class="csd-owner-body">
|
||||
<view class="csd-owner-n">{{detail.owner_name}} 分享了 {{detail.clothes.length}} 件衣物</view>
|
||||
<view class="csd-owner-e num">{{expireText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 衣物网格 -->
|
||||
<view class="grid">
|
||||
<view class="grid-item" wx:for="{{detail.clothes}}" wx:key="clothes_uuid">
|
||||
<view class="clothes-card">
|
||||
<image wx:if="{{item.processed_image}}" class="clothes-img" src="{{item.processed_image}}" mode="aspectFill" />
|
||||
<view wx:else class="clothes-placeholder"><view class="icon icon-hanger"></view></view>
|
||||
<view class="clothes-name">{{item.name || '未命名'}}</view>
|
||||
<view class="clothes-sub">{{item.category_main}}{{item.category_sub ? ' · ' + item.category_sub : ''}}</view>
|
||||
<!-- 只读网格 -->
|
||||
<view class="csd-grid">
|
||||
<view class="csd-tile" wx:for="{{detail.clothes}}" wx:key="clothes_uuid">
|
||||
<view class="tile-img">
|
||||
<image wx:if="{{item.processed_image}}" class="pic" src="{{item.processed_image}}" mode="aspectFill" lazy-load />
|
||||
<view wx:else class="ph icon icon-hanger"></view>
|
||||
</view>
|
||||
<view class="tile-name">{{item.name || '未命名'}}</view>
|
||||
<view class="tile-sub">{{item.category_main}}{{item.category_sub ? ' · ' + item.category_sub : ''}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 转发出口 -->
|
||||
<button class="share-btn" open-type="share">分享给好友</button>
|
||||
|
||||
<!-- 属主取消 -->
|
||||
<view wx:if="{{detail.is_owner}}" class="cancel-btn btn-danger-text" bindtap="onCancel">取消分享</view>
|
||||
<view class="footer-space"></view>
|
||||
<view class="gap-64"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 悬浮玻璃操作条 -->
|
||||
<view class="dock" wx:if="{{!invalid}}">
|
||||
<view wx:if="{{detail.is_owner}}" class="btn--text csd-cancel" bindtap="onCancel">取消分享</view>
|
||||
<button class="btn btn--ink btn--block" open-type="share">分享给好友</button>
|
||||
</view>
|
||||
|
||||
<!-- 取消分享确认 -->
|
||||
<v2-overlay
|
||||
visible="{{cancelVisible}}"
|
||||
type="modal"
|
||||
title="取消分享"
|
||||
content="取消后该分享链接将失效，且不返还衣柜分享额度"
|
||||
buttons="{{cancelButtons}}"
|
||||
bind:confirm="onCancelConfirm"
|
||||
bind:cancel="onCancelCancel"
|
||||
/>
|
||||
</view>
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
.detail-page {
|
||||
/** 衣柜分享详情：分享者行 + 只读网格 + 悬浮玻璃操作条 **/
|
||||
.page-flex {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroll-body {
|
||||
@@ -9,129 +11,65 @@
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.owner-card {
|
||||
margin: 24rpx;
|
||||
.csd-owner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
padding: 40rpx var(--pad) 0;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
.csd-av {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
background: #F2F2F7;
|
||||
background: var(--paper-3);
|
||||
color: var(--ink-3);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #C7C7CC;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
.csd-av .pic {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
.csd-av .icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.owner-info {
|
||||
margin-left: 24rpx;
|
||||
.csd-owner-body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.owner-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
.csd-owner-n {
|
||||
font-size: 27rpx;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.owner-expire {
|
||||
font-size: 24rpx;
|
||||
color: #8E8E93;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 24rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: calc(50% - 12rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.clothes-card {
|
||||
background: #fff;
|
||||
border-radius: 32rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.clothes-img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 24rpx;
|
||||
background: #F2F2F7;
|
||||
}
|
||||
|
||||
.clothes-placeholder {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 24rpx;
|
||||
background: #F2F2F7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #C7C7CC;
|
||||
}
|
||||
|
||||
.clothes-placeholder .icon {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
|
||||
.clothes-name {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #1C1C1E;
|
||||
margin-top: 12rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.clothes-sub {
|
||||
.csd-owner-e {
|
||||
margin-top: 6rpx;
|
||||
font-size: 22rpx;
|
||||
color: #8E8E93;
|
||||
margin-top: 4rpx;
|
||||
color: var(--ink-3);
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
margin: 32rpx 24rpx 0;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: var(--color-primary, #000);
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
.csd-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 44rpx 26rpx;
|
||||
padding: 56rpx var(--pad) 0;
|
||||
}
|
||||
|
||||
.share-btn::after {
|
||||
border: none;
|
||||
.csd-tile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
.csd-cancel {
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.footer-space {
|
||||
height: 40rpx;
|
||||
padding: 8rpx 0 28rpx;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user