fix：bug
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { request, redirectToLogin } from '../../utils/request'
|
||||
import * as auth from '../../utils/auth'
|
||||
import { PagedResult, ClosetShareItem } from '../../types/models'
|
||||
import { PagedResult, ClosetShareItem, OutfitShareItem } from '../../types/models'
|
||||
import { ShareStatus, ShareType } from '../../utils/config'
|
||||
import { normalizePaged, mergePaged, hasMorePaged } from '../../utils/paged'
|
||||
import { setTabBarSelected } from '../../utils/tabbar'
|
||||
@@ -9,6 +9,21 @@ import { logger } from '../../utils/logger'
|
||||
// 日志模块名
|
||||
const LOG = 'closet-share'
|
||||
|
||||
// 统一的分享列表项：衣柜分享与穿搭分享合并展示
|
||||
interface ShareListItem {
|
||||
kind: 'closet' | 'outfit'
|
||||
share_uuid: string
|
||||
title: string
|
||||
typeText: string
|
||||
expireText: string
|
||||
status: number
|
||||
created_at: number
|
||||
owner_name?: string
|
||||
owner_avatar?: string
|
||||
cover?: string
|
||||
_invalid: boolean
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
tabs: [
|
||||
@@ -16,7 +31,7 @@ Page({
|
||||
{ name: '分享给我的' },
|
||||
],
|
||||
activeTab: 0, // 0 我的分享 1 分享给我的
|
||||
list: [] as ClosetShareItem[],
|
||||
list: [] as ShareListItem[],
|
||||
loading: true,
|
||||
loadingMore: false,
|
||||
page: 1,
|
||||
@@ -63,19 +78,26 @@ Page({
|
||||
},
|
||||
|
||||
fetchList(page: number) {
|
||||
const url = this.data.activeTab === 0 ? '/closet-share' : '/closet-share/received'
|
||||
if (this.data.activeTab === 1) return this.fetchReceived(page)
|
||||
return this.fetchMine(page)
|
||||
},
|
||||
|
||||
// 我的分享：仅衣柜分享
|
||||
fetchMine(page: number) {
|
||||
// 请求序号：切 tab 时旧响应可能后到，序号不匹配直接丢弃
|
||||
const seq = ((this as any).reqSeq || 0) + 1
|
||||
;(this as any).reqSeq = seq
|
||||
if (page > 1) this.setData({ loadingMore: true })
|
||||
|
||||
request<PagedResult<ClosetShareItem>>({ url, data: { page, page_size: this.data.pageSize } })
|
||||
request<PagedResult<ClosetShareItem>>({
|
||||
url: '/closet-share',
|
||||
data: { page, page_size: this.data.pageSize },
|
||||
})
|
||||
.then((res) => {
|
||||
if ((this as any).reqSeq !== seq) return
|
||||
const { list: raw, total } = normalizePaged<ClosetShareItem>(res)
|
||||
logger.debug(LOG, '列表加载成功, tab=', this.data.activeTab, 'page=', page, '条数=', raw && raw.length)
|
||||
const list = raw.map((it) => this.decorate(it))
|
||||
logger.debug(LOG, '我的分享加载成功, page=', page, '条数=', raw && raw.length)
|
||||
const list = raw.map((it) => this.decorateCloset(it))
|
||||
const merged = mergePaged(this.data.list, list, page === 1)
|
||||
this.setData({
|
||||
list: merged,
|
||||
@@ -87,12 +109,50 @@ Page({
|
||||
})
|
||||
.catch((e: any) => {
|
||||
if ((this as any).reqSeq !== seq) return
|
||||
logger.warn(LOG, '列表加载失败, tab=', this.data.activeTab, 'page=', page, 'code=', e && e.code)
|
||||
logger.warn(LOG, '我的分享加载失败, page=', page, 'code=', e && e.code)
|
||||
this.setData({ loading: false, loadingMore: false })
|
||||
})
|
||||
},
|
||||
|
||||
decorate(it: ClosetShareItem) {
|
||||
// 分享给我的：衣柜分享 + 穿搭分享并行拉取后按时间倒序合并
|
||||
fetchReceived(page: number) {
|
||||
const seq = ((this as any).reqSeq || 0) + 1
|
||||
;(this as any).reqSeq = seq
|
||||
if (page > 1) this.setData({ loadingMore: true })
|
||||
|
||||
Promise.all([
|
||||
request<PagedResult<ClosetShareItem>>({
|
||||
url: '/closet-share/received',
|
||||
data: { page, page_size: this.data.pageSize },
|
||||
}),
|
||||
request<PagedResult<OutfitShareItem>>({
|
||||
url: '/outfit-share/received',
|
||||
data: { page, page_size: this.data.pageSize },
|
||||
}),
|
||||
])
|
||||
.then(([closetRes, outfitRes]) => {
|
||||
if ((this as any).reqSeq !== seq) return
|
||||
const closetList = normalizePaged<ClosetShareItem>(closetRes).list.map((it) => this.decorateCloset(it))
|
||||
const outfitList = normalizePaged<OutfitShareItem>(outfitRes).list.map((it) => this.decorateOutfit(it))
|
||||
logger.debug(LOG, '分享给我的加载成功, page=', page, '衣柜=', closetList.length, '穿搭=', outfitList.length)
|
||||
const prev = page === 1 ? [] : this.data.list
|
||||
const merged = prev
|
||||
.concat(closetList, outfitList)
|
||||
.sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
|
||||
// 任一侧仍返回满页则认为还有更多
|
||||
const hasMore =
|
||||
closetList.length >= this.data.pageSize || outfitList.length >= this.data.pageSize
|
||||
this.setData({ list: merged, hasMore, loading: false, loadingMore: false, page })
|
||||
})
|
||||
.catch((e: any) => {
|
||||
if ((this as any).reqSeq !== seq) return
|
||||
logger.warn(LOG, '分享给我的加载失败, page=', page, 'code=', e && e.code)
|
||||
this.setData({ loading: false, loadingMore: false })
|
||||
})
|
||||
},
|
||||
|
||||
// 衣柜分享项：本地惰性过期 + 状态文案
|
||||
decorateCloset(it: ClosetShareItem): ShareListItem {
|
||||
const now = Math.floor(Date.now() / 1000)
|
||||
let status = it.status
|
||||
if (status === ShareStatus.NORMAL && it.expire_time > 0 && it.expire_time < now) {
|
||||
@@ -109,10 +169,15 @@ Page({
|
||||
}
|
||||
|
||||
return {
|
||||
...it,
|
||||
_status: status,
|
||||
_expireText: expireText,
|
||||
_typeText: it.share_type === ShareType.PARTIAL ? '部分衣物' : '全量衣橱',
|
||||
kind: 'closet',
|
||||
share_uuid: it.share_uuid,
|
||||
title: `衣柜分享 · ${it.clothes_count} 件`,
|
||||
typeText: it.share_type === ShareType.PARTIAL ? '部分衣物' : '全量衣橱',
|
||||
expireText,
|
||||
status,
|
||||
created_at: it.created_at || 0,
|
||||
owner_name: it.owner_name,
|
||||
owner_avatar: it.owner_avatar,
|
||||
_invalid:
|
||||
status === ShareStatus.CANCELLED ||
|
||||
status === ShareStatus.EXPIRED ||
|
||||
@@ -120,6 +185,24 @@ Page({
|
||||
}
|
||||
},
|
||||
|
||||
// 穿搭分享项
|
||||
decorateOutfit(it: OutfitShareItem): ShareListItem {
|
||||
const cancelled = it.status === ShareStatus.CANCELLED
|
||||
return {
|
||||
kind: 'outfit',
|
||||
share_uuid: it.share_uuid,
|
||||
title: it.outfit_name || '未命名穿搭',
|
||||
typeText: `穿搭分享 · ${it.items_count} 件`,
|
||||
expireText: cancelled ? '已取消' : '有效',
|
||||
status: it.status,
|
||||
created_at: it.created_at || 0,
|
||||
owner_name: it.owner_name,
|
||||
owner_avatar: it.owner_avatar,
|
||||
cover: it.cover_image,
|
||||
_invalid: cancelled,
|
||||
}
|
||||
},
|
||||
|
||||
onCreate() {
|
||||
wx.navigateTo({
|
||||
url: '/pages/closet-share-create/closet-share-create',
|
||||
@@ -129,9 +212,14 @@ Page({
|
||||
|
||||
onItemTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const uuid = e.currentTarget.dataset.uuid as string
|
||||
logger.debug(LOG, '点击分享项, uuid=', uuid)
|
||||
const kind = e.currentTarget.dataset.kind as string
|
||||
logger.debug(LOG, '点击分享项, kind=', kind, 'uuid=', uuid)
|
||||
const url =
|
||||
kind === 'outfit'
|
||||
? `/pages/outfit-share-detail/outfit-share-detail?uuid=${uuid}`
|
||||
: `/pages/closet-share-detail/closet-share-detail?uuid=${uuid}`
|
||||
wx.navigateTo({
|
||||
url: `/pages/closet-share-detail/closet-share-detail?uuid=${uuid}`,
|
||||
url,
|
||||
fail: (err) => logger.warn(LOG, 'navigateTo 分享详情失败, err=', err && err.errMsg),
|
||||
})
|
||||
},
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
wx:if="{{!loading && !list.length}}"
|
||||
icon="icon-share"
|
||||
title="{{activeTab === 0 ? '还没有分享' : '还没有收到分享'}}"
|
||||
desc="{{activeTab === 0 ? '把衣橱或精选衣物分享给好友' : '好友分享给你的衣橱会出现在这里'}}"
|
||||
desc="{{activeTab === 0 ? '把衣橱或精选衣物分享给好友' : '好友分享给你的衣橱或穿搭会出现在这里'}}"
|
||||
buttonText="{{activeTab === 0 ? '新建分享' : ''}}"
|
||||
bind:action="onCreate"
|
||||
/>
|
||||
@@ -32,14 +32,22 @@
|
||||
wx:for="{{list}}"
|
||||
wx:key="share_uuid"
|
||||
data-uuid="{{item.share_uuid}}"
|
||||
data-kind="{{item.kind}}"
|
||||
bindtap="onItemTap"
|
||||
>
|
||||
<view class="preview-grid">
|
||||
<!-- 衣柜分享：四宫格占位 -->
|
||||
<view class="preview-grid" wx:if="{{item.kind === 'closet'}}">
|
||||
<view class="pg-cell"><view class="icon icon-hanger"></view></view>
|
||||
<view class="pg-cell"><view class="icon icon-hanger"></view></view>
|
||||
<view class="pg-cell"><view class="icon icon-hanger"></view></view>
|
||||
<view class="pg-cell"><view class="icon icon-hanger"></view></view>
|
||||
</view>
|
||||
<!-- 穿搭分享：封面 -->
|
||||
<view class="preview-cover" wx:else>
|
||||
<image wx:if="{{item.cover}}" class="preview-cover-img" src="{{item.cover}}" mode="aspectFill" />
|
||||
<view wx:else class="icon icon-hanger preview-cover-ph"></view>
|
||||
</view>
|
||||
|
||||
<view class="share-info">
|
||||
<view wx:if="{{activeTab === 1}}" class="owner-row">
|
||||
<image wx:if="{{item.owner_avatar}}" class="owner-avatar" src="{{item.owner_avatar}}" mode="aspectFill" />
|
||||
@@ -48,11 +56,11 @@
|
||||
</view>
|
||||
<text class="owner-name">{{item.owner_name || '好友'}}</text>
|
||||
</view>
|
||||
<view class="share-title">衣柜分享 · {{item.clothes_count}} 件</view>
|
||||
<view class="tag tag-gray share-type">{{item._typeText}}</view>
|
||||
<view class="share-expire">{{item._expireText}}</view>
|
||||
<view class="share-title">{{item.title}}</view>
|
||||
<view class="tag tag-gray share-type">{{item.typeText}}</view>
|
||||
<view class="share-expire">{{item.expireText}}</view>
|
||||
</view>
|
||||
<view wx:if="{{item._invalid}}" class="share-badge">{{item._status === 2 ? '已取消' : (item._status === 4 ? '已封禁' : '已过期')}}</view>
|
||||
<view wx:if="{{item._invalid}}" class="share-badge">{{item.status === 2 ? '已取消' : '已失效'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
@@ -85,6 +85,30 @@
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
/* 穿搭分享封面 */
|
||||
.preview-cover {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #F2F2F7;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
color: #C7C7CC;
|
||||
}
|
||||
|
||||
.preview-cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.preview-cover-ph {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.owner-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -101,6 +101,9 @@ function statusToStep(status: number): number {
|
||||
Page({
|
||||
data: {
|
||||
uuid: '',
|
||||
// 来自穿搭分享的只读查看：携带 share_uuid，隐藏编辑/删除
|
||||
shareUUID: '',
|
||||
readonly: false,
|
||||
attrGroups: ATTR_GROUPS,
|
||||
colorPresets: COLOR_PRESETS,
|
||||
detail: {} as ClothesItem,
|
||||
@@ -123,8 +126,10 @@ Page({
|
||||
|
||||
onLoad(query: Record<string, string>) {
|
||||
const uuid = query.uuid || ''
|
||||
logger.debug(LOG, 'onLoad, uuid=', uuid)
|
||||
this.setData({ uuid })
|
||||
const shareUUID = query.share_uuid || ''
|
||||
const readonly = !!shareUUID
|
||||
logger.debug(LOG, 'onLoad, uuid=', uuid, 'readonly=', readonly)
|
||||
this.setData({ uuid, shareUUID, readonly })
|
||||
if (!uuid) {
|
||||
// uuid 缺失时不请求不轮询，否则会停在空白页且无法退出
|
||||
logger.warn(LOG, 'onLoad 缺少 uuid 参数')
|
||||
@@ -132,7 +137,8 @@ Page({
|
||||
return
|
||||
}
|
||||
this.fetchDetail()
|
||||
this.pollStatus()
|
||||
// 只读（来自穿搭分享）场景无需轮询 AI 处理状态
|
||||
if (!readonly) this.pollStatus()
|
||||
},
|
||||
|
||||
onBackWardrobe() {
|
||||
@@ -143,7 +149,11 @@ Page({
|
||||
},
|
||||
|
||||
fetchDetail(): Promise<void> {
|
||||
return request<ClothesItem>({ url: `/clothes/${this.data.uuid}` })
|
||||
// 只读场景携带 share_uuid，后端据此放行非属主读取衣物详情
|
||||
const url = this.data.readonly
|
||||
? `/clothes/${this.data.uuid}?share_uuid=${this.data.shareUUID}`
|
||||
: `/clothes/${this.data.uuid}`
|
||||
return request<ClothesItem>({ url })
|
||||
.then((detail) => {
|
||||
logger.debug(LOG, '详情加载成功, 处理状态=', detail && detail.image_process_status)
|
||||
this.setData({ detail, loading: false })
|
||||
|
||||
@@ -43,7 +43,7 @@ module.exports = { hex: hex, tags: tags }
|
||||
<view class="page detail-page">
|
||||
<navigation-bar title="衣物详情">
|
||||
<view
|
||||
wx:if="{{imageStatus !== 1 && imageStatus !== 2 && imageStatus !== 3}}"
|
||||
wx:if="{{!readonly && imageStatus !== 1 && imageStatus !== 2 && imageStatus !== 3}}"
|
||||
slot="right"
|
||||
class="nav-action"
|
||||
bindtap="onToggleEdit"
|
||||
@@ -198,7 +198,7 @@ module.exports = { hex: hex, tags: tags }
|
||||
|
||||
<!-- 底部操作：处理中隐藏，其他显示 -->
|
||||
<view
|
||||
wx:if="{{!notFound && imageStatus !== 1 && imageStatus !== 2 && imageStatus !== 3}}"
|
||||
wx:if="{{!readonly && !notFound && imageStatus !== 1 && imageStatus !== 2 && imageStatus !== 3}}"
|
||||
class="footer"
|
||||
>
|
||||
<block wx:if="{{editMode}}">
|
||||
|
||||
@@ -33,17 +33,27 @@ Page({
|
||||
logger.debug(LOG, '穿搭详情加载成功, 单品数=', outfit.items && outfit.items.length)
|
||||
this.setData({ outfit })
|
||||
|
||||
const clothes = await Promise.all(
|
||||
outfit.items.map(async (it) => {
|
||||
try {
|
||||
return await request<ClothesItem>({ url: `/clothes/${it.clothes_uuid}`, showError: false })
|
||||
} catch (e: any) {
|
||||
logger.warn(LOG, '单品详情拉取失败, uuid=', it.clothes_uuid, 'code=', e && e.code)
|
||||
return { clothes_uuid: it.clothes_uuid } as ClothesItem
|
||||
}
|
||||
})
|
||||
// 封面与衣物缩略图直接使用穿搭明细里的抠图（processed_image），
|
||||
// 避免非属主逐件请求 /clothes/:uuid 被拒（50005）导致图片与名称全部丢失。
|
||||
const baseClothes = (outfit.items || []).map(
|
||||
(it) => ({ clothes_uuid: it.clothes_uuid, processed_image: it.processed_image }) as ClothesItem,
|
||||
)
|
||||
this.setData({ clothes })
|
||||
this.setData({ clothes: baseClothes })
|
||||
|
||||
// 属主可进一步拉取衣物详情补充名称；非属主无权限，跳过。
|
||||
if (this.data.isOwner) {
|
||||
const clothes = await Promise.all(
|
||||
(outfit.items || []).map(async (it) => {
|
||||
try {
|
||||
return await request<ClothesItem>({ url: `/clothes/${it.clothes_uuid}`, showError: false })
|
||||
} catch (e: any) {
|
||||
logger.warn(LOG, '单品详情拉取失败, uuid=', it.clothes_uuid, 'code=', e && e.code)
|
||||
return { clothes_uuid: it.clothes_uuid, processed_image: it.processed_image } as ClothesItem
|
||||
}
|
||||
})
|
||||
)
|
||||
this.setData({ clothes })
|
||||
}
|
||||
|
||||
const like = await request<{ is_liked: boolean; like_count: number }>({
|
||||
url: `/like/${this.data.uuid}`,
|
||||
@@ -162,16 +172,40 @@ Page({
|
||||
|
||||
onItemTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const uuid = e.currentTarget.dataset.uuid as string
|
||||
// 非属主无权读取衣物详情（50005），点击仅提示；属主正常跳转。
|
||||
if (!this.data.isOwner) {
|
||||
logger.debug(LOG, '非属主点击衣物，仅可查看穿搭, uuid=', uuid)
|
||||
wx.showToast({ title: '仅可查看穿搭', icon: 'none' })
|
||||
return
|
||||
}
|
||||
wx.navigateTo({
|
||||
url: `/pages/clothes-detail/clothes-detail?uuid=${uuid}`,
|
||||
fail: (err) => logger.warn(LOG, 'navigateTo 单品详情失败, err=', err && err.errMsg),
|
||||
})
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.data.outfit.outfit_name || '我的穿搭',
|
||||
path: `/pages/outfit-detail/outfit-detail?uuid=${this.data.uuid}&owner=0`,
|
||||
}
|
||||
// 分享前先创建穿搭分享记录拿到 share_uuid，链接指向分享详情页；
|
||||
// 失败（如穿搭未公开）则回退到普通穿搭详情链接，保证分享动作仍可用。
|
||||
onShareAppMessage(): any {
|
||||
const name = this.data.outfit.outfit_name || '我的穿搭'
|
||||
return request<{ share_uuid: string }>({
|
||||
url: '/outfit-share',
|
||||
method: 'POST',
|
||||
data: { outfit_uuid: this.data.uuid },
|
||||
})
|
||||
.then((res) => {
|
||||
logger.info(LOG, '穿搭分享创建成功, share_uuid=', res.share_uuid)
|
||||
return {
|
||||
title: name,
|
||||
path: `/pages/outfit-share-detail/outfit-share-detail?uuid=${res.share_uuid}`,
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
logger.warn(LOG, '穿搭分享创建失败，回退普通分享链接, code=', e && e.code)
|
||||
return {
|
||||
title: name,
|
||||
path: `/pages/outfit-detail/outfit-detail?uuid=${this.data.uuid}&owner=0`,
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar",
|
||||
"empty-state": "/components/empty-state/empty-state"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
import { request, AUTH_EXPIRED_CODES } from '../../utils/request'
|
||||
import { OutfitShareDetail, OutfitItem } from '../../types/models'
|
||||
import { ShareStatus } from '../../utils/config'
|
||||
import { logger } from '../../utils/logger'
|
||||
|
||||
// 日志模块名
|
||||
const LOG = 'outfit-share-detail'
|
||||
|
||||
Page({
|
||||
data: {
|
||||
uuid: '',
|
||||
detail: null as OutfitShareDetail | null,
|
||||
outfit: { items: [] } as OutfitItem,
|
||||
loading: true,
|
||||
invalid: false,
|
||||
invalidTitle: '该分享已取消',
|
||||
invalidDesc: '分享链接已失效',
|
||||
needLogin: false,
|
||||
},
|
||||
|
||||
onLoad(query: Record<string, string>) {
|
||||
const uuid = query.uuid || ''
|
||||
logger.debug(LOG, 'onLoad, uuid=', uuid)
|
||||
this.setData({ uuid })
|
||||
if (!uuid) {
|
||||
// uuid 缺失时若不兜底，loading 会永久为 true，页面白屏且无法退出
|
||||
logger.warn(LOG, 'onLoad 缺少 uuid 参数')
|
||||
this.setInvalid('链接不完整', '缺少分享标识，无法打开')
|
||||
return
|
||||
}
|
||||
this.fetchDetail()
|
||||
},
|
||||
|
||||
fetchDetail() {
|
||||
request<OutfitShareDetail>({ url: `/outfit-share/${this.data.uuid}`, showError: false })
|
||||
.then((detail) => {
|
||||
logger.debug(LOG, '详情加载成功, status=', detail && detail.status)
|
||||
if (this.checkInvalid(detail)) return
|
||||
this.setData({ detail, outfit: detail.outfit, loading: false })
|
||||
})
|
||||
.catch((e: any) => {
|
||||
const code = e && e.code
|
||||
logger.warn(LOG, '详情加载失败, code=', code)
|
||||
if (AUTH_EXPIRED_CODES.indexOf(code) >= 0) {
|
||||
// 查看分享需登录：给「去登录」出口，登录成功后回到本页
|
||||
this.setData({
|
||||
loading: false,
|
||||
invalid: true,
|
||||
needLogin: true,
|
||||
invalidTitle: '请先登录',
|
||||
invalidDesc: '登录后即可查看好友分享的穿搭',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (code === 90104) {
|
||||
this.setInvalid('分享已取消', '该分享已被创建者取消')
|
||||
} else if (code === 90103) {
|
||||
this.setInvalid('分享已失效', '该分享链接无效或对应穿搭已不可见')
|
||||
} else {
|
||||
// 兜底：任何未知错误都不能停在空白页
|
||||
this.setInvalid('加载失败', '请稍后重试')
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 本地状态校验，返回 true 表示已置为失效态
|
||||
checkInvalid(detail: OutfitShareDetail): boolean {
|
||||
if (detail.status === ShareStatus.CANCELLED) {
|
||||
this.setInvalid('分享已取消', '该分享已被创建者取消')
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
|
||||
setInvalid(title: string, desc: string) {
|
||||
this.setData({
|
||||
loading: false,
|
||||
invalid: true,
|
||||
needLogin: false,
|
||||
invalidTitle: title,
|
||||
invalidDesc: desc,
|
||||
})
|
||||
},
|
||||
|
||||
onItemTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const uuid = e.currentTarget.dataset.uuid as string
|
||||
// 只读查看：携带 share_uuid，后端据此放行非属主读取衣物详情
|
||||
logger.debug(LOG, '点击衣物, uuid=', uuid)
|
||||
wx.navigateTo({
|
||||
url: `/pages/clothes-detail/clothes-detail?uuid=${uuid}&share_uuid=${this.data.uuid}`,
|
||||
fail: (err) => logger.warn(LOG, 'navigateTo 单品详情失败, err=', err && err.errMsg),
|
||||
})
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
wx.showModal({
|
||||
title: '取消分享',
|
||||
content: '取消后该分享链接将失效',
|
||||
confirmText: '取消分享',
|
||||
confirmColor: '#FF3B30',
|
||||
success: (res) => {
|
||||
if (!res.confirm) return
|
||||
request({ url: `/outfit-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),
|
||||
})
|
||||
},
|
||||
|
||||
onBackHome() {
|
||||
wx.switchTab({
|
||||
url: '/pages/wardrobe/wardrobe',
|
||||
fail: (e: any) => logger.warn(LOG, 'switchTab 衣橱失败, err=', e && e.errMsg),
|
||||
})
|
||||
},
|
||||
|
||||
onGoLogin() {
|
||||
const redirect = `/pages/outfit-share-detail/outfit-share-detail?uuid=${this.data.uuid}`
|
||||
const loginUrl = `/pages/login/login?redirect=${encodeURIComponent(redirect)}`
|
||||
wx.navigateTo({
|
||||
url: loginUrl,
|
||||
fail: () => {
|
||||
wx.redirectTo({
|
||||
url: loginUrl,
|
||||
fail: () => wx.switchTab({ url: '/pages/profile/profile' }),
|
||||
})
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
const name = (this.data.outfit && this.data.outfit.outfit_name) || '好友的穿搭'
|
||||
const owner = (this.data.detail && this.data.detail.owner_name) || '好友'
|
||||
logger.debug(LOG, '转发分享, uuid=', this.data.uuid)
|
||||
return {
|
||||
title: `${owner} 向你分享了穿搭「${name}」`,
|
||||
path: `/pages/outfit-share-detail/outfit-share-detail?uuid=${this.data.uuid}`,
|
||||
}
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
const timer = (this as any).backTimer
|
||||
if (timer) {
|
||||
clearTimeout(timer)
|
||||
;(this as any).backTimer = null
|
||||
}
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,87 @@
|
||||
<view class="page detail-page">
|
||||
<navigation-bar title="穿搭分享" />
|
||||
|
||||
<empty-state
|
||||
wx:if="{{invalid && needLogin}}"
|
||||
icon="icon-user"
|
||||
title="{{invalidTitle}}"
|
||||
desc="{{invalidDesc}}"
|
||||
buttonText="去登录"
|
||||
bind:action="onGoLogin"
|
||||
/>
|
||||
|
||||
<empty-state
|
||||
wx:elif="{{invalid}}"
|
||||
icon="icon-shirt"
|
||||
title="{{invalidTitle}}"
|
||||
desc="{{invalidDesc}}"
|
||||
buttonText="返回首页"
|
||||
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>
|
||||
</view>
|
||||
<view class="owner-info">
|
||||
<view class="owner-name">{{detail.owner_name || '好友'}} 分享了穿搭</view>
|
||||
<view class="owner-expire">共 {{outfit.items.length}} 件单品</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 拼图封面 -->
|
||||
<view class="cover">
|
||||
<view
|
||||
class="cover-item cover-{{index}}"
|
||||
wx:for="{{outfit.items}}"
|
||||
wx:key="clothes_uuid"
|
||||
wx:if="{{index < 5}}"
|
||||
>
|
||||
<image wx:if="{{item.processed_image}}" class="cover-img" src="{{item.processed_image}}" mode="aspectFit" />
|
||||
<view wx:else class="icon icon-hanger cover-placeholder"></view>
|
||||
</view>
|
||||
<view wx:if="{{!outfit.items.length}}" class="cover-empty">
|
||||
<view class="icon icon-hanger"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 信息卡片 -->
|
||||
<view class="card info-card">
|
||||
<view class="title-row">
|
||||
<text class="title">{{outfit.outfit_name}}</text>
|
||||
</view>
|
||||
<view class="tag-row">
|
||||
<text wx:if="{{outfit.scene}}" class="tag tag-gray">{{outfit.scene}}</text>
|
||||
<text class="tag {{outfit.source === 2 ? 'tag-indigo' : 'tag-gray'}}">{{outfit.source === 2 ? 'AI 推荐' : '自建'}}</text>
|
||||
</view>
|
||||
<view class="desc" wx:if="{{outfit.outfit_desc}}">{{outfit.outfit_desc}}</view>
|
||||
|
||||
<!-- 包含衣物（点击只读查看） -->
|
||||
<view class="items-title">包含衣物</view>
|
||||
<scroll-view scroll-x class="items-scroll" show-scrollbar="{{false}}">
|
||||
<view class="items-row">
|
||||
<view
|
||||
class="item-chip"
|
||||
wx:for="{{outfit.items}}"
|
||||
wx:key="clothes_uuid"
|
||||
data-uuid="{{item.clothes_uuid}}"
|
||||
bindtap="onItemTap"
|
||||
>
|
||||
<image wx:if="{{item.processed_image}}" class="item-img" src="{{item.processed_image}}" mode="aspectFill" />
|
||||
<view wx:else class="item-img item-img-empty"><view class="icon icon-hanger"></view></view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-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>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@@ -0,0 +1,201 @@
|
||||
.detail-page {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.scroll-body {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* 分享者信息 */
|
||||
.owner-card {
|
||||
margin: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
background: #F2F2F7;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #C7C7CC;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
|
||||
.owner-info {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.owner-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.owner-expire {
|
||||
font-size: 24rpx;
|
||||
color: #8E8E93;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
/* 封面 */
|
||||
.cover {
|
||||
margin: 0 24rpx 24rpx;
|
||||
height: 480rpx;
|
||||
background: #fff;
|
||||
border-radius: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-item {
|
||||
position: absolute;
|
||||
width: 200rpx;
|
||||
height: 260rpx;
|
||||
background: #F8F8FA;
|
||||
border-radius: 20rpx;
|
||||
border: 1rpx solid #E5E5EA;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-0 { left: 30rpx; top: 80rpx; transform: rotate(-6deg); }
|
||||
.cover-1 { left: 120rpx; top: 140rpx; transform: rotate(2deg); }
|
||||
.cover-2 { left: 220rpx; top: 70rpx; transform: rotate(5deg); }
|
||||
.cover-3 { left: 320rpx; top: 150rpx; transform: rotate(-2deg); }
|
||||
.cover-4 { left: 420rpx; top: 90rpx; transform: rotate(7deg); }
|
||||
|
||||
.cover-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
color: #C7C7CC;
|
||||
}
|
||||
|
||||
.cover-empty {
|
||||
color: #C7C7CC;
|
||||
}
|
||||
|
||||
.cover-empty .icon {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
/* 信息卡 */
|
||||
.info-card {
|
||||
margin: 0 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 28rpx;
|
||||
color: #3C3C43;
|
||||
margin-top: 20rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.items-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
|
||||
.items-scroll {
|
||||
margin-top: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.items-row {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.item-chip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 140rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #F2F2F7;
|
||||
}
|
||||
|
||||
.item-img-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #C7C7CC;
|
||||
}
|
||||
|
||||
.item-img-empty .icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
}
|
||||
|
||||
/* 转发出口 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.share-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
text-align: center;
|
||||
padding: 32rpx 0;
|
||||
}
|
||||
|
||||
.footer-space {
|
||||
height: 40rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user