first commit
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar",
|
||||
"clothes-card": "/components/clothes-card/clothes-card",
|
||||
"empty-state": "/components/empty-state/empty-state"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { request } from '../../utils/request'
|
||||
import { PagedResult, ClothesItem, QuotaItem } from '../../types/models'
|
||||
import { QuotaType } from '../../utils/config'
|
||||
|
||||
const CATEGORIES = [
|
||||
{ name: '全部', value: '' },
|
||||
{ name: '上装', value: '上装' },
|
||||
{ name: '下装', value: '下装' },
|
||||
{ name: '连衣裙', value: '连衣裙' },
|
||||
{ name: '外套', value: '外套' },
|
||||
{ name: '鞋', value: '鞋' },
|
||||
{ name: '配饰', value: '配饰' },
|
||||
]
|
||||
|
||||
Page({
|
||||
data: {
|
||||
categories: CATEGORIES,
|
||||
activeCategory: 0,
|
||||
list: [] as ClothesItem[],
|
||||
total: 0,
|
||||
uploadRemain: 0,
|
||||
loading: true,
|
||||
refreshing: false,
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
hasMore: true,
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.syncTabBar()
|
||||
this.refresh()
|
||||
},
|
||||
|
||||
syncTabBar() {
|
||||
const tabBar = (this as any).getTabBar && (this as any).getTabBar()
|
||||
if (tabBar) tabBar.setData({ selected: 0 })
|
||||
},
|
||||
|
||||
refresh() {
|
||||
this.setData({ page: 1, hasMore: true, loading: this.data.list.length === 0 })
|
||||
this.fetchList(1)
|
||||
this.fetchQuota()
|
||||
},
|
||||
|
||||
onRefresh() {
|
||||
this.setData({ refreshing: true })
|
||||
Promise.all([this.fetchList(1), this.fetchQuota()]).finally(() => {
|
||||
this.setData({ refreshing: false })
|
||||
})
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (!this.data.hasMore || this.data.loading) return
|
||||
this.fetchList(this.data.page + 1)
|
||||
},
|
||||
|
||||
fetchList(page: number): Promise<void> {
|
||||
const cat = CATEGORIES[this.data.activeCategory].value
|
||||
const params: Record<string, any> = { page, page_size: this.data.pageSize }
|
||||
if (cat) params.category_main = cat
|
||||
|
||||
return request<PagedResult<ClothesItem>>({ url: '/clothes', data: params })
|
||||
.then((res) => {
|
||||
const list = res.list.map((it) => ({
|
||||
...it,
|
||||
_statusText: !it.category_main && !it.processed_image ? 'AI 处理中' : '',
|
||||
_statusType: 'blue',
|
||||
}))
|
||||
const merged = page === 1 ? list : this.data.list.concat(list)
|
||||
this.setData({
|
||||
list: merged,
|
||||
total: res.total,
|
||||
hasMore: merged.length < res.total,
|
||||
loading: false,
|
||||
page,
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.setData({ loading: false })
|
||||
})
|
||||
},
|
||||
|
||||
fetchQuota(): Promise<void> {
|
||||
return request<{ quotas: QuotaItem[] }>({ url: '/quota/info', showError: false })
|
||||
.then((res) => {
|
||||
const upload = res.quotas.find((q) => q.quota_type === QuotaType.UPLOAD)
|
||||
if (upload) this.setData({ uploadRemain: upload.remain })
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
|
||||
onCategoryTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const index = Number(e.currentTarget.dataset.index)
|
||||
if (index === this.data.activeCategory) return
|
||||
this.setData({ activeCategory: index, list: [], loading: true })
|
||||
this.refresh()
|
||||
},
|
||||
|
||||
onClothesTap(e: WechatMiniprogram.CustomEvent) {
|
||||
const item = e.detail.item as ClothesItem
|
||||
wx.navigateTo({ url: `/pages/clothes-detail/clothes-detail?uuid=${item.clothes_uuid}` })
|
||||
},
|
||||
|
||||
onUpload() {
|
||||
wx.navigateTo({ url: '/pages/upload/upload' })
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,64 @@
|
||||
<view class="page page-flex">
|
||||
<navigation-bar title="我的衣橱" back="{{false}}" />
|
||||
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="scroll-body"
|
||||
refresher-enabled
|
||||
refresher-triggered="{{refreshing}}"
|
||||
bindrefresherrefresh="onRefresh"
|
||||
bindscrolltolower="onReachBottom"
|
||||
>
|
||||
<!-- 分类筛选 -->
|
||||
<scroll-view scroll-x class="cat-scroll" show-scrollbar="{{false}}">
|
||||
<view class="cat-row">
|
||||
<view
|
||||
wx:for="{{categories}}"
|
||||
wx:key="name"
|
||||
class="cat-item {{activeCategory === index ? 'active' : ''}}"
|
||||
data-index="{{index}}"
|
||||
bindtap="onCategoryTap"
|
||||
>{{item.name}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 统计 -->
|
||||
<view class="stat">共 {{total}} 件 · 上传额度剩余 {{uploadRemain}} 次</view>
|
||||
|
||||
<!-- 骨架屏 -->
|
||||
<view wx:if="{{loading}}" class="grid">
|
||||
<view class="grid-item" wx:for="{{[1, 2, 3, 4, 5, 6]}}" wx:key="*this">
|
||||
<view class="skeleton sk-card"></view>
|
||||
<view class="skeleton sk-line"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空态 -->
|
||||
<empty-state
|
||||
wx:elif="{{!list.length}}"
|
||||
icon="icon-hanger"
|
||||
title="衣橱还空着"
|
||||
desc="拍照上传第一件衣物，AI 自动抠图并识别属性"
|
||||
buttonText="上传衣物"
|
||||
bind:action="onUpload"
|
||||
/>
|
||||
|
||||
<!-- 衣物网格 -->
|
||||
<view wx:else class="grid">
|
||||
<view class="grid-item" wx:for="{{list}}" wx:key="clothes_uuid">
|
||||
<clothes-card
|
||||
item="{{item}}"
|
||||
statusText="{{item._statusText}}"
|
||||
statusType="{{item._statusType}}"
|
||||
bind:select="onClothesTap"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{list.length && !hasMore}}" class="no-more">没有更多了</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="fab" bindtap="onUpload">
|
||||
<view class="icon icon-plus"></view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,74 @@
|
||||
.page-flex {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroll-body {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.cat-scroll {
|
||||
background: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cat-row {
|
||||
display: inline-flex;
|
||||
padding: 20rpx 24rpx;
|
||||
}
|
||||
|
||||
.cat-item {
|
||||
flex-shrink: 0;
|
||||
padding: 0 32rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: #3C3C43;
|
||||
background: #F2F2F7;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.cat-item.active {
|
||||
background: #007AFF;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stat {
|
||||
padding: 8rpx 32rpx 0;
|
||||
font-size: 22rpx;
|
||||
color: #8E8E93;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 24rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: calc(50% - 12rpx);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sk-card {
|
||||
height: 320rpx;
|
||||
border-radius: 32rpx;
|
||||
}
|
||||
|
||||
.sk-line {
|
||||
height: 40rpx;
|
||||
margin-top: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.no-more {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color: #C7C7CC;
|
||||
padding: 24rpx 0 40rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user