|
|
|
@ -67,23 +67,25 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="category-row"> |
|
|
|
<scroll-view class="category-scroll" scroll-x :show-scrollbar="false"> |
|
|
|
<view class="category-inner"> |
|
|
|
<view |
|
|
|
class="category-item" |
|
|
|
:class="{ 'category-item--active': categoryIndex == index }" |
|
|
|
v-for="(item,index) in categories" |
|
|
|
:key="index" |
|
|
|
@tap="changeCategory(index)" |
|
|
|
> |
|
|
|
{{item}} |
|
|
|
<view class="category-section"> |
|
|
|
<view class="category-row"> |
|
|
|
<scroll-view class="category-scroll" scroll-x :show-scrollbar="false"> |
|
|
|
<view class="category-inner"> |
|
|
|
<view |
|
|
|
class="category-item" |
|
|
|
:class="{ 'category-item--active': categoryIndex == index }" |
|
|
|
v-for="(item,index) in categories" |
|
|
|
:key="index" |
|
|
|
@tap="changeCategory(index)" |
|
|
|
> |
|
|
|
{{item}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
<view class="filter-button" :class="{ 'filter-button--open': categoryExpanded }" @tap="toggleCategoryExpand"> |
|
|
|
<text>筛选</text> |
|
|
|
<uni-icons :type="categoryExpanded ? 'top' : 'bottom'" size="14" :color="categoryExpanded ? '#1f9f78' : '#66706d'"></uni-icons> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
<view class="filter-button" @tap="showFilterTip"> |
|
|
|
<uni-icons type="tune" size="18" color="#66706d"></uni-icons> |
|
|
|
<text>筛选</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -138,6 +140,30 @@ |
|
|
|
<view class="bottom-space"></view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
<view class="category-popup-mask" v-if="categoryExpanded" @tap="toggleCategoryExpand"> |
|
|
|
<view class="category-popup" @tap.stop> |
|
|
|
<view class="category-popup-head"> |
|
|
|
<view class="category-popup-title-wrap"> |
|
|
|
<text class="category-popup-title">我的分类</text> |
|
|
|
<text class="category-popup-tip">点击进入分类</text> |
|
|
|
</view> |
|
|
|
<view class="category-popup-close" @tap="toggleCategoryExpand"> |
|
|
|
<uni-icons type="closeempty" size="20" color="#7a8581"></uni-icons> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<scroll-view scroll-y class="category-popup-body"> |
|
|
|
<view class="category-popup-grid"> |
|
|
|
<view |
|
|
|
class="category-popup-item" |
|
|
|
:class="{ 'category-popup-item--active': categoryIndex == index }" |
|
|
|
v-for="(item,index) in categories" |
|
|
|
:key="index" |
|
|
|
@tap="selectExpandedCategory(index)" |
|
|
|
>{{item}}</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="page-like-effect" v-if="pageLikeEffects.length"> |
|
|
|
<view |
|
|
|
class="page-like-heart" |
|
|
|
@ -214,14 +240,15 @@ |
|
|
|
imageKey: 'graduation', |
|
|
|
action: 'mine' |
|
|
|
}], |
|
|
|
baseCategories: ['推荐', '最新', '热门'], |
|
|
|
baseCategories: ['推荐', '热门'], |
|
|
|
categoryList: [], |
|
|
|
categoryExpanded: false, |
|
|
|
goodsList: [], |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
totalPages: 1, |
|
|
|
loading: false, |
|
|
|
sortType: 'hot', |
|
|
|
sortType: 'latest', |
|
|
|
likeEffectSeq: 0, |
|
|
|
likeEffectTimers: {}, |
|
|
|
pageLikeEffects: [], |
|
|
|
@ -442,6 +469,15 @@ |
|
|
|
}, |
|
|
|
changeCategory(index) { |
|
|
|
this.categoryIndex = index |
|
|
|
this.categoryExpanded = false |
|
|
|
this.reloadGoods() |
|
|
|
}, |
|
|
|
toggleCategoryExpand() { |
|
|
|
this.categoryExpanded = !this.categoryExpanded |
|
|
|
}, |
|
|
|
selectExpandedCategory(index) { |
|
|
|
this.categoryIndex = index |
|
|
|
this.categoryExpanded = false |
|
|
|
this.reloadGoods() |
|
|
|
}, |
|
|
|
selectShortcut(item) { |
|
|
|
@ -488,17 +524,6 @@ |
|
|
|
this.reloadGoods() |
|
|
|
} |
|
|
|
}, |
|
|
|
showFilterTip() { |
|
|
|
const sorts = ['推荐优先', '最新发布', '价格从低到高', '价格从高到低'] |
|
|
|
uni.showActionSheet({ |
|
|
|
itemList: sorts, |
|
|
|
success: (res) => { |
|
|
|
const map = ['hot', 'latest', 'priceAsc', 'priceDesc'] |
|
|
|
this.sortType = map[res.tapIndex] || 'hot' |
|
|
|
this.reloadGoods() |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
openBlindBox() { |
|
|
|
uni.showToast({ |
|
|
|
title: '幸运盲盒即将开放', |
|
|
|
@ -528,7 +553,7 @@ |
|
|
|
const category = this.categories[this.categoryIndex] |
|
|
|
const categoryItem = this.categoryList.find(item => item.name == category) |
|
|
|
const area = this.getArea() |
|
|
|
const sortType = category == '热门' ? 'favorite' : (category == '最新' ? 'latest' : (this.sortType || (category == '附近' ? 'school' : 'hot'))) |
|
|
|
const sortType = category == '热门' ? 'favorite' : (category == '推荐' ? 'latest' : (this.sortType || (category == '附近' ? 'school' : 'hot'))) |
|
|
|
const query = { |
|
|
|
pageNum: this.pageNum, |
|
|
|
pageSize: this.pageSize, |
|
|
|
@ -1014,8 +1039,13 @@ |
|
|
|
font-weight: 800; |
|
|
|
} |
|
|
|
|
|
|
|
.category-row { |
|
|
|
.category-section { |
|
|
|
position: relative; |
|
|
|
margin-top: -15rpx; |
|
|
|
background: rgba(247, 249, 247, 0.96); |
|
|
|
} |
|
|
|
|
|
|
|
.category-row { |
|
|
|
height: 80rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
@ -1064,17 +1094,115 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.filter-button { |
|
|
|
width: 94rpx; |
|
|
|
min-width: 94rpx; |
|
|
|
height: 80rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-end; |
|
|
|
gap: 5rpx; |
|
|
|
gap: 4rpx; |
|
|
|
padding-left: 10rpx; |
|
|
|
background: linear-gradient(90deg, rgba(247, 249, 247, 0.7), #f7f9f7 20%); |
|
|
|
color: #747d79; |
|
|
|
font-size: 22rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.filter-button--open { |
|
|
|
color: #1f9f78; |
|
|
|
} |
|
|
|
|
|
|
|
.category-popup-mask { |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
top: 0; |
|
|
|
bottom: 0; |
|
|
|
z-index: 10000; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding: 0 48rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background: rgba(12, 22, 19, 0.48); |
|
|
|
} |
|
|
|
|
|
|
|
.category-popup { |
|
|
|
width: 100%; |
|
|
|
max-height: 68vh; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
border-radius: 28rpx; |
|
|
|
background: #fff; |
|
|
|
box-shadow: 0 24rpx 60rpx rgba(16, 40, 32, 0.22); |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
.category-popup-head { |
|
|
|
flex-shrink: 0; |
|
|
|
height: 92rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 0 28rpx; |
|
|
|
border-bottom: 1rpx solid #eef2f0; |
|
|
|
} |
|
|
|
|
|
|
|
.category-popup-title-wrap { |
|
|
|
display: flex; |
|
|
|
align-items: baseline; |
|
|
|
gap: 14rpx; |
|
|
|
min-width: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.category-popup-title { |
|
|
|
color: #17241f; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
|
|
|
|
.category-popup-tip { |
|
|
|
color: #97a19d; |
|
|
|
font-size: 22rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.category-popup-close { |
|
|
|
width: 56rpx; |
|
|
|
height: 56rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
border-radius: 50%; |
|
|
|
background: #f3f6f4; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.category-popup-body { |
|
|
|
max-height: calc(68vh - 92rpx); |
|
|
|
padding: 24rpx 24rpx 32rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.category-popup-grid { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
gap: 16rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.category-popup-item { |
|
|
|
padding: 18rpx 28rpx; |
|
|
|
border-radius: 16rpx; |
|
|
|
background: #f4f7f5; |
|
|
|
color: #2a3531; |
|
|
|
font-size: 24rpx; |
|
|
|
font-weight: 700; |
|
|
|
line-height: 1.2; |
|
|
|
} |
|
|
|
|
|
|
|
.category-popup-item--active { |
|
|
|
background: #1f9f78; |
|
|
|
color: #fff; |
|
|
|
box-shadow: 0 8rpx 18rpx rgba(31, 159, 120, 0.22); |
|
|
|
} |
|
|
|
|
|
|
|
.goods-grid { |
|
|
|
display: flex; |
|
|
|
align-items: flex-start; |
|
|
|
|