|
|
|
@ -29,9 +29,10 @@ |
|
|
|
scroll-y |
|
|
|
:style="{ paddingTop: headerHeight + 'px' }" |
|
|
|
:show-scrollbar="false" |
|
|
|
@scrolltolower="loadMore" |
|
|
|
> |
|
|
|
<view class="scroll-content"> |
|
|
|
<view class="hero-card"> |
|
|
|
<!-- <view class="hero-card"> |
|
|
|
<image class="hero-image" :src="getPostListImage('hero')" mode="aspectFill"></image> |
|
|
|
<view class="hero-copy"> |
|
|
|
<view class="hero-title">幸运盲盒</view> |
|
|
|
@ -48,14 +49,20 @@ |
|
|
|
<view class="hero-dot"></view> |
|
|
|
<view class="hero-dot"></view> |
|
|
|
</view> |
|
|
|
|
|
|
|
--> |
|
|
|
<view class="shortcut-list"> |
|
|
|
<view class="shortcut-item" v-for="(item,index) in shortcutList" :key="index" @tap="selectShortcut(item)"> |
|
|
|
<view |
|
|
|
class="shortcut-item" |
|
|
|
:class="{ 'shortcut-item--publish': item.action == 'publishSell' }" |
|
|
|
v-for="(item,index) in shortcutList" |
|
|
|
:key="index" |
|
|
|
@tap="selectShortcut(item)" |
|
|
|
> |
|
|
|
<view class="shortcut-icon"> |
|
|
|
<image class="shortcut-icon-image" :src="getPostListImage(item.imageKey)" mode="aspectFit"></image> |
|
|
|
</view> |
|
|
|
<view class="shortcut-name">{{item.name}}</view> |
|
|
|
<view class="shortcut-desc">{{item.desc}}</view> |
|
|
|
<view class="shortcut-desc">{{item.action == 'publishSell' ? '点我发布' : item.desc}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -90,7 +97,7 @@ |
|
|
|
:data-goods-id="item.id" |
|
|
|
@load="onImageLoad" |
|
|
|
></image> |
|
|
|
<view class="distance-tag">距离{{item.distance}}</view> |
|
|
|
<view class="distance-tag">{{item.regionName}}</view> |
|
|
|
</view> |
|
|
|
<view class="goods-info"> |
|
|
|
<view class="goods-title">{{item.text}}</view> |
|
|
|
@ -103,7 +110,7 @@ |
|
|
|
</view> |
|
|
|
<view class="seller-row"> |
|
|
|
<image class="seller-avatar" :src="item.icon" mode="aspectFill"></image> |
|
|
|
<text class="seller-name">{{item.shopName}}</text> |
|
|
|
<text class="seller-name">半径卖家</text> |
|
|
|
<view class="want-count" @tap.stop="toggleLike(item)"> |
|
|
|
<uni-icons |
|
|
|
:type="item.liked ? 'heart-filled' : 'heart'" |
|
|
|
@ -130,6 +137,13 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { |
|
|
|
listFishCategories, |
|
|
|
pageFishGoods, |
|
|
|
pageFishWants, |
|
|
|
toggleFishLike |
|
|
|
} from '@/common/fishMarketApi.js' |
|
|
|
|
|
|
|
const POST_LIST_IMAGE_CACHE_KEY = 'post_list_image_cache_v1' |
|
|
|
const POST_LIST_IMAGE_CACHE_TTL = 30 * 24 * 60 * 60 * 1000 |
|
|
|
const POST_LIST_IMAGE_CACHE_LIMIT = 12 |
|
|
|
@ -151,88 +165,50 @@ |
|
|
|
keyword: '', |
|
|
|
categoryIndex: 0, |
|
|
|
shortcutList: [{ |
|
|
|
name: '0元专区', |
|
|
|
desc: '免费送好物', |
|
|
|
category: '推荐', |
|
|
|
imageKey: 'free' |
|
|
|
}, { |
|
|
|
name: '求购广场', |
|
|
|
desc: '找你想要的', |
|
|
|
desc: '大家想要的', |
|
|
|
category: '求购', |
|
|
|
imageKey: 'wanted' |
|
|
|
}, { |
|
|
|
name: '极速卖', |
|
|
|
desc: '快速出手', |
|
|
|
category: '推荐', |
|
|
|
imageKey: 'quickSell' |
|
|
|
imageKey: 'wanted', |
|
|
|
action: 'category' |
|
|
|
}, { |
|
|
|
name: '拼团购', |
|
|
|
desc: '拼着更便宜', |
|
|
|
desc: '暂未开放', |
|
|
|
category: '拼团购', |
|
|
|
imageKey: 'groupBuy' |
|
|
|
imageKey: 'groupBuy', |
|
|
|
action: 'disabled' |
|
|
|
}, { |
|
|
|
name: '毕业清仓', |
|
|
|
desc: '好物低价', |
|
|
|
category: '生活', |
|
|
|
imageKey: 'graduation' |
|
|
|
}], |
|
|
|
categories: ['推荐', '附近', '数码', '书籍', '生活', '美妆', '服饰'], |
|
|
|
goodsList: [{ |
|
|
|
id: 1, |
|
|
|
pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png', |
|
|
|
text: 'LG 27寸显示屏 带底座', |
|
|
|
price: 100, |
|
|
|
originalPrice: 699, |
|
|
|
xiangyao: 32, |
|
|
|
distance: '200m', |
|
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png', |
|
|
|
shopName: '小熊数码', |
|
|
|
tags: ['轻微使用', '可小刀'], |
|
|
|
category: '数码', |
|
|
|
liked: false |
|
|
|
}, { |
|
|
|
id: 2, |
|
|
|
pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/bc6b887514a5469a938cdd0001e841c2.png', |
|
|
|
text: '宿舍护眼台灯 学习专用', |
|
|
|
price: 38, |
|
|
|
originalPrice: 89, |
|
|
|
xiangyao: 21, |
|
|
|
distance: '300m', |
|
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png', |
|
|
|
shopName: '桃桃乌龙', |
|
|
|
tags: ['轻微使用', '可小刀'], |
|
|
|
category: '生活', |
|
|
|
liked: false |
|
|
|
name: '发布', |
|
|
|
desc: '极速买卖', |
|
|
|
category: '推荐', |
|
|
|
imageKey: 'quickSell', |
|
|
|
action: 'publishSell' |
|
|
|
},{ |
|
|
|
id: 3, |
|
|
|
pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/90a37f3f8a204d7eaa8ea2d3293e1086.png', |
|
|
|
text: '考研资料打包出 笔记齐全', |
|
|
|
price: 15, |
|
|
|
originalPrice: 39, |
|
|
|
xiangyao: 18, |
|
|
|
distance: '400m', |
|
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png', |
|
|
|
shopName: '晴天小卖部', |
|
|
|
tags: ['九成新', '可小刀'], |
|
|
|
category: '书籍', |
|
|
|
liked: false |
|
|
|
name: '我的消息', |
|
|
|
desc: '买卖沟通', |
|
|
|
category: '推荐', |
|
|
|
imageKey: 'free', |
|
|
|
action: 'sessions' |
|
|
|
}, { |
|
|
|
id: 4, |
|
|
|
pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png', |
|
|
|
text: '便携蓝牙音箱 音质清晰', |
|
|
|
price: 45, |
|
|
|
originalPrice: 129, |
|
|
|
xiangyao: 12, |
|
|
|
distance: '150m', |
|
|
|
icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png', |
|
|
|
shopName: '可乐不加冰', |
|
|
|
tags: ['全新', '可小刀'], |
|
|
|
category: '数码', |
|
|
|
liked: false |
|
|
|
}] |
|
|
|
name: '我的', |
|
|
|
desc: '个人中心', |
|
|
|
category: '我的', |
|
|
|
imageKey: 'graduation', |
|
|
|
action: 'mine' |
|
|
|
}], |
|
|
|
baseCategories: ['推荐', '附近', '最新', '求购'], |
|
|
|
categoryList: [], |
|
|
|
goodsList: [], |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
totalPages: 1, |
|
|
|
loading: false, |
|
|
|
sortType: 'hot' |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
categories() { |
|
|
|
return this.baseCategories.concat(this.categoryList.map(item => item.name)) |
|
|
|
}, |
|
|
|
statusBarTop() { |
|
|
|
return Number(this.menuButtonInfo.top) || 24 |
|
|
|
}, |
|
|
|
@ -241,13 +217,7 @@ |
|
|
|
return this.statusBarTop + uni.upx2px(158) |
|
|
|
}, |
|
|
|
filteredGoods() { |
|
|
|
const keyword = this.keyword.toLowerCase() |
|
|
|
const category = this.categories[this.categoryIndex] |
|
|
|
return this.goodsList.filter(item => { |
|
|
|
const matchesCategory = category == '推荐' || category == '附近' || item.category == category |
|
|
|
const text = [item.text, item.shopName, item.category].concat(item.tags || []).join(' ').toLowerCase() |
|
|
|
return matchesCategory && (!keyword || text.indexOf(keyword) > -1) |
|
|
|
}) |
|
|
|
return this.goodsList |
|
|
|
}, |
|
|
|
waterfallColumns() { |
|
|
|
const columns = [[], []] |
|
|
|
@ -404,28 +374,66 @@ |
|
|
|
bottom: (systemInfo.statusBarHeight || 24) + 32 |
|
|
|
} |
|
|
|
} |
|
|
|
this.loadCategories() |
|
|
|
this.reloadGoods() |
|
|
|
}, |
|
|
|
handleSearch() { |
|
|
|
uni.hideKeyboard() |
|
|
|
this.reloadGoods() |
|
|
|
}, |
|
|
|
changeCategory(index) { |
|
|
|
this.categoryIndex = index |
|
|
|
this.reloadGoods() |
|
|
|
}, |
|
|
|
selectShortcut(item) { |
|
|
|
if (!item) return |
|
|
|
if (item.action == 'disabled') { |
|
|
|
uni.showToast({ |
|
|
|
title: item.name + '暂未开放', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
return |
|
|
|
} |
|
|
|
if (item.action == 'publishSell') { |
|
|
|
this.goPublish('sell') |
|
|
|
return |
|
|
|
} |
|
|
|
if (item.action == 'publishWant') { |
|
|
|
this.goPublish('want') |
|
|
|
return |
|
|
|
} |
|
|
|
if (item.action == 'mine') { |
|
|
|
this.goMyFish() |
|
|
|
return |
|
|
|
} |
|
|
|
if (item.action == 'sessions') { |
|
|
|
this.goFishSessions() |
|
|
|
return |
|
|
|
} |
|
|
|
const index = this.categories.indexOf(item.category) |
|
|
|
if (index > -1) { |
|
|
|
this.categoryIndex = index |
|
|
|
if (item.keyword) { |
|
|
|
this.keyword = item.keyword |
|
|
|
} else if (item.action != 'filter') { |
|
|
|
this.keyword = '' |
|
|
|
} |
|
|
|
this.reloadGoods() |
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
title: item.name + '即将开放', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
this.keyword = item.keyword || item.name |
|
|
|
this.categoryIndex = 0 |
|
|
|
this.reloadGoods() |
|
|
|
} |
|
|
|
}, |
|
|
|
showFilterTip() { |
|
|
|
uni.showToast({ |
|
|
|
title: '筛选功能即将开放', |
|
|
|
icon: 'none' |
|
|
|
const sorts = ['推荐优先', '最新发布', '价格从低到高', '价格从高到低'] |
|
|
|
uni.showActionSheet({ |
|
|
|
itemList: sorts, |
|
|
|
success: (res) => { |
|
|
|
const map = ['hot', 'latest', 'priceAsc', 'priceDesc'] |
|
|
|
this.sortType = map[res.tapIndex] || 'hot' |
|
|
|
this.reloadGoods() |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
openBlindBox() { |
|
|
|
@ -434,6 +442,97 @@ |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
}, |
|
|
|
loadCategories() { |
|
|
|
const area = this.getArea() |
|
|
|
listFishCategories(area.id || '').then(list => { |
|
|
|
this.categoryList = Array.isArray(list) ? list : [] |
|
|
|
}).catch(() => {}) |
|
|
|
}, |
|
|
|
reloadGoods() { |
|
|
|
this.pageNum = 1 |
|
|
|
this.totalPages = 1 |
|
|
|
this.goodsList = [] |
|
|
|
this.loadGoods() |
|
|
|
}, |
|
|
|
loadMore() { |
|
|
|
if (this.loading || this.pageNum >= this.totalPages) return |
|
|
|
this.pageNum += 1 |
|
|
|
this.loadGoods() |
|
|
|
}, |
|
|
|
loadGoods() { |
|
|
|
if (this.loading) return |
|
|
|
this.loading = true |
|
|
|
const category = this.categories[this.categoryIndex] |
|
|
|
const categoryItem = this.categoryList.find(item => item.name == category) |
|
|
|
const area = this.getArea() |
|
|
|
const sortType = this.sortType || (category == '附近' ? 'school' : (category == '最新' ? 'latest' : 'hot')) |
|
|
|
const query = { |
|
|
|
pageNum: this.pageNum, |
|
|
|
pageSize: this.pageSize, |
|
|
|
keyword: this.keyword, |
|
|
|
regionId: area.id || '', |
|
|
|
sortType, |
|
|
|
categoryId: categoryItem ? categoryItem.id : '', |
|
|
|
status: 1, |
|
|
|
auditStatus: 1, |
|
|
|
offShelf: 0 |
|
|
|
} |
|
|
|
const request = category == '求购' ? pageFishWants(query) : pageFishGoods(query) |
|
|
|
request.then(page => { |
|
|
|
const records = this.normalizeRecords(page && (page.records || page.content), category == '求购') |
|
|
|
this.totalPages = Number(page && (page.pages || page.totalPages)) || 1 |
|
|
|
this.goodsList = this.pageNum == 1 ? records : this.goodsList.concat(records) |
|
|
|
}).finally(() => { |
|
|
|
this.loading = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
normalizeRecords(records, isWant) { |
|
|
|
const area = this.getArea() |
|
|
|
const fallbackRegionName = area.title || area.name || uni.getStorageSync('schoolName') || '本校' |
|
|
|
return (Array.isArray(records) ? records : []).map(item => { |
|
|
|
const images = this.parseJsonList(item.images) |
|
|
|
const tags = this.parseJsonList(item.tags) |
|
|
|
return { |
|
|
|
raw: item, |
|
|
|
id: item.id, |
|
|
|
pic: item.coverImage || images[0] || '', |
|
|
|
text: item.title || '', |
|
|
|
price: isWant ? (item.expectedPrice || 0) : (item.price || 0), |
|
|
|
originalPrice: item.originPrice, |
|
|
|
xiangyao: item.likeCount || 0, |
|
|
|
distance: item.distance || '本校', |
|
|
|
icon: item.userAvatar || '/static/images/img/songshu.png', |
|
|
|
shopName: item.userName || '校园同学', |
|
|
|
regionName: item.regionName || item.schoolName || item.areaName || fallbackRegionName, |
|
|
|
tags: tags.length ? tags : (item.negotiable == 1 ? ['可小刀'] : []), |
|
|
|
category: item.categoryName || '', |
|
|
|
liked: !!item.liked, |
|
|
|
type: isWant ? 'want' : 'goods' |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
parseJsonList(value) { |
|
|
|
if (!value) return [] |
|
|
|
if (Array.isArray(value)) return value |
|
|
|
try { |
|
|
|
const parsed = JSON.parse(value) |
|
|
|
return Array.isArray(parsed) ? parsed : [] |
|
|
|
} catch (e) { |
|
|
|
return [] |
|
|
|
} |
|
|
|
}, |
|
|
|
getArea() { |
|
|
|
const area = uni.getStorageSync('area') |
|
|
|
if (!area) return {} |
|
|
|
if (typeof area === 'string') { |
|
|
|
try { |
|
|
|
return JSON.parse(area) |
|
|
|
} catch (e) { |
|
|
|
return {} |
|
|
|
} |
|
|
|
} |
|
|
|
return area |
|
|
|
}, |
|
|
|
getImageHeight(item) { |
|
|
|
return Number(item.imageHeight) || 280 |
|
|
|
}, |
|
|
|
@ -451,12 +550,40 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
toggleLike(item) { |
|
|
|
item.liked = !item.liked |
|
|
|
item.xiangyao += item.liked ? 1 : -1 |
|
|
|
if (!item || item.type == 'want') return |
|
|
|
if (!item.id) { |
|
|
|
uni.showToast({ title: '商品ID不能为空', icon: 'none' }) |
|
|
|
return |
|
|
|
} |
|
|
|
toggleFishLike({ goodsId: item.id, likeType: 'goods' }).then(res => { |
|
|
|
if (!res) return |
|
|
|
item.liked = !!res.liked |
|
|
|
item.xiangyao = Number(res.count) || 0 |
|
|
|
}) |
|
|
|
}, |
|
|
|
goDetail() { |
|
|
|
goDetail(item) { |
|
|
|
if (!item) return |
|
|
|
if (item.type == 'want') { |
|
|
|
this.goPublish('sell') |
|
|
|
return |
|
|
|
} |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/package2/IdleTrad/detail?id=' + item.id |
|
|
|
}) |
|
|
|
}, |
|
|
|
goPublish(type) { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/package1/tabbar/fishRelease?type=' + (type || 'sell') |
|
|
|
}) |
|
|
|
}, |
|
|
|
goMyFish() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/package2/myCenter/myPost' |
|
|
|
}) |
|
|
|
}, |
|
|
|
goFishSessions() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/package2/IdleTrad/detail' |
|
|
|
url: '/package2/IdleTrad/sessionList' |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
@ -684,15 +811,41 @@ |
|
|
|
|
|
|
|
.shortcut-item { |
|
|
|
width: 19%; |
|
|
|
position: relative; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.shortcut-item--publish { |
|
|
|
margin-top: -8rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.shortcut-item--publish::before { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
left: 50%; |
|
|
|
top: -6rpx; |
|
|
|
width: 104rpx; |
|
|
|
height: 104rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
background: linear-gradient(180deg, #fff7df 0%, #fff 100%); |
|
|
|
box-shadow: 0 10rpx 24rpx rgba(255, 156, 24, 0.24); |
|
|
|
transform: translateX(-50%); |
|
|
|
} |
|
|
|
|
|
|
|
.shortcut-icon { |
|
|
|
width: 84rpx; |
|
|
|
height: 84rpx; |
|
|
|
margin: 0 auto 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.shortcut-item--publish .shortcut-icon { |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
width: 98rpx; |
|
|
|
height: 98rpx; |
|
|
|
margin-bottom: 2rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.shortcut-icon-image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@ -706,6 +859,14 @@ |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.shortcut-item--publish .shortcut-name { |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
color: #ff8a00; |
|
|
|
font-size: 25rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.shortcut-desc { |
|
|
|
margin-top: 5rpx; |
|
|
|
color: #939c98; |
|
|
|
@ -713,6 +874,15 @@ |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
|
|
|
|
.shortcut-item--publish .shortcut-desc { |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
margin-top: 1rpx; |
|
|
|
color: #ff9b1a; |
|
|
|
font-size: 18rpx; |
|
|
|
font-weight: 800; |
|
|
|
} |
|
|
|
|
|
|
|
.category-row { |
|
|
|
height: 80rpx; |
|
|
|
display: flex; |
|
|
|
@ -810,8 +980,8 @@ |
|
|
|
|
|
|
|
.distance-tag { |
|
|
|
position: absolute; |
|
|
|
top: 14rpx; |
|
|
|
left: 14rpx; |
|
|
|
top: 1rpx; |
|
|
|
left: 1rpx; |
|
|
|
height: 36rpx; |
|
|
|
padding: 0 12rpx; |
|
|
|
border-radius: 18rpx; |
|
|
|
@ -944,4 +1114,5 @@ |
|
|
|
height: calc(190rpx + constant(safe-area-inset-bottom)); |
|
|
|
height: calc(190rpx + env(safe-area-inset-bottom)); |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
wangfukang
1 week ago