18577375184
/
jimei-hudong-h5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

调整分类页

master
梁欣 1 year ago
parent
53d2c82764
commit
64fed7379f
2 changed files with 605 additions and 561 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      api/category/index.js
  2. 82
      pages/goods/list.vue

4
api/category/index.js
View File

@ -7,8 +7,8 @@ const api = {
}
// 页面数据
export function list() {
return request.get(api.list)
export function list(param) {
return request.get(api.list, param)
}

82
pages/goods/list.vue
View File

@ -16,9 +16,6 @@
<view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')">
<text>综合</text>
</view>
<view class="sort-item" :class="{ active: sortType === 'category' }" @click="changeCategory">
<text>{{ categoryText }}</text>
</view>
<view class="sort-item" :class="{ active: sortType === 'sales' }" @click="handleSortType('sales')">
<text>销量</text>
</view>
@ -35,6 +32,21 @@
</view>
</view>
</view>
<scroll-view scroll-x>
<view class="cate-filter">
<u-tag text="全部分类" shape="circle"
@click="changeCategory('all')"
:bgColor="selectedCategoryList.length === childCategoryList.length ? '#9e1a91' : 'transparent'"
:color="selectedCategoryList.length === childCategoryList.length ? 'white' : '#9e1a91'"
borderColor="#9e1a91"/>
<u-tag :text="item.name" shape="circle" plain v-for="(item, index) in childCategoryList"
:key="index"
@click="changeCategory(item.category_id)"
:bgColor="(selectedCategoryList.length === 1 && selectedCategoryList[0] === item.category_id) ? '#9e1a91' : 'transparent'"
:color="(selectedCategoryList.length === 1 && selectedCategoryList[0] === item.category_id) ? 'white' : '#9e1a91'"
borderColor="#9e1a91"/>
</view>
</scroll-view>
<!-- 商品列表 -->
<view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]">
<view class="goods-item" v-for="(item, index) in list.data" :key="index"
@ -68,7 +80,8 @@
<view class="desc_footer">
<text class="price_x">¥{{ item.goods_price_min }}</text>
<text class="price_y col-9"
v-if="item.line_price_min > 0">¥{{ item.line_price_min }}</text>
v-if="item.line_price_min > 0">¥{{ item.line_price_min }}
</text>
</view>
</view>
</view>
@ -122,7 +135,8 @@
<view class="detail-price oneline-hide">
<text class="goods-price f-30 col-m">￥{{ item.goods_price_min }}</text>
<text v-if="item.line_price_min > 0"
class="line-price col-9 f-24">￥{{ item.line_price_min }}</text>
class="line-price col-9 f-24">￥{{ item.line_price_min }}
</text>
</view>
</view>
</view>
@ -130,9 +144,6 @@
</view>
</mescroll-body>
</view>
@ -146,6 +157,7 @@
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
import * as GoodsApi from '@/api/goods'
import * as CategoryApi from '@/api/category'
import {
getEmptyPaginateObj,
getMoreListData
@ -186,24 +198,39 @@
},
mainCategoryId: 0, // 主分类id
categoryText: '全部分类',
childCategoryList: []
childCategoryList: [],
showPopup: false,
selectedCategoryList: []
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
async onLoad(options) {
// 记录options
this.options = options
await this.getChildCategory(options.categoryId)
// 设置默认列表显示方式
this.setShowView()
this.getNews()
this.getHots()
await this.getGoodsList(1)
},
methods: {
getChildCategory(parent_id) {
return new Promise(resolve => {
CategoryApi.list({
parent_id,
}).then(res => {
this.childCategoryList = res.data.list
this.selectedCategoryList = this.childCategoryList.map(item => parseInt(item.category_id))
resolve()
})
})
},
/**
* 上拉加载的回调 (页面初始化时也会执行一次)
@ -230,8 +257,8 @@
getNews() {
const app = this
const param = {
categoryId: app.options.categoryId || 0,
// categoryId: app.options.categoryId || 0,
categoryIds: this.selectedCategoryList.join(),
}
GoodsApi.newIds(param)
.then(result => {
@ -244,8 +271,8 @@
getHots() {
const app = this
const param = {
categoryId: app.options.categoryId || 0,
// categoryId: app.options.categoryId || 0,
categoryIds: this.selectedCategoryList.join(),
}
GoodsApi.hotIds(param)
.then(result => {
@ -262,10 +289,11 @@
*/
getGoodsList(pageNo = 1) {
const app = this
console.log(this.selectedCategoryList)
const param = {
sortType: app.sortType,
sortPrice: Number(app.sortPrice),
categoryId: app.options.categoryId || 0,
categoryIds: this.selectedCategoryList.join(),
goodsName: app.options.search || '',
page: pageNo
}
@ -281,6 +309,14 @@
})
},
changeCategory(cateId) {
if (cateId === 'all') this.selectedCategoryList = this.childCategoryList.map(item => parseInt(item.category_id))
else this.selectedCategoryList = [parseInt(cateId)]
this.getNews()
this.getHots()
this.getGoodsList()
},
// 切换排序方式
handleSortType(newSortType) {
const app = this
@ -292,10 +328,6 @@
app.mescroll.resetUpScroll()
},
changeCategory(category){
},
// 切换列表显示方式
handleShowView() {
const app = this
@ -566,4 +598,16 @@
}
}
}
.cate-filter {
padding: 20rpx 8rpx;
display: flex;
align-items: center;
justify-content: flex-start;
* {
margin-right: 10rpx;
flex-shrink: 0;
}
}
</style>
Write Preview
Loading…
Cancel
Save