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. 144
      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)
}

144
pages/goods/list.vue
View File

@ -4,7 +4,7 @@
@down="downCallback" :up="upOption" @up="upCallback">
<!-- 页面头部 -->
<view class="header">
<search class="search" :tips="options.search ? options.search : '搜索商品'" @event="handleSearch" />
<search class="search" :tips="options.search ? options.search : '搜索商品'" @event="handleSearch"/>
<!-- 切换列表显示方式 -->
<view class="show-view" @click="handleShowView">
<text class="iconfont icon-view-tile" v-if="showView"></text>
@ -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,32 +144,30 @@
</view>
</mescroll-body>
</view>
</template>
<script>
import Shortcut from '@/components/shortcut'
import {
import Shortcut from '@/components/shortcut'
import {
inArray
} from '@/utils/util'
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
import * as GoodsApi from '@/api/goods'
import {
} from '@/utils/util'
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
} from '@/core/app'
import Search from '@/components/search'
} from '@/core/app'
import Search from '@/components/search'
const pageSize = 15
const showViewKey = 'GoodsList-ShowView';
const pageSize = 15
const showViewKey = 'GoodsList-ShowView';
export default {
export default {
components: {
MescrollBody,
Search,
@ -165,7 +177,7 @@
data() {
return {
newIds: [],
hotIds:[],
hotIds: [],
inArray,
showView: false, // 列表显示方式 (true列表、false平铺)
sortType: 'all', // 排序类型
@ -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
@ -353,12 +385,12 @@
}
}
}
}
</script>
<style lang="scss" scoped>
// 页面头部
.header {
// 页面头部
.header {
display: flex;
align-items: center;
background-color: #fff;
@ -377,10 +409,10 @@
display: flex;
align-items: center;
}
}
}
// 排序组件
.store-sort {
// 排序组件
.store-sort {
position: sticky;
top: var(--window-top);
display: flex;
@ -424,16 +456,16 @@
}
}
}
// 商品列表
.goods-list {
// 商品列表
.goods-list {
padding: 4rpx;
box-sizing: border-box;
}
}
// 单列显示
.goods-list.column-1 {
// 单列显示
.goods-list.column-1 {
.goods-item {
width: 100%;
height: 280rpx;
@ -503,16 +535,16 @@
text-decoration: line-through;
}
}
}
}
// 平铺显示
.goods-list.column-2 {
// 平铺显示
.goods-list.column-2 {
.goods-item {
width: 50%;
}
}
}
.goods-item {
.goods-item {
float: left;
box-sizing: border-box;
padding: 6rpx;
@ -565,5 +597,17 @@
}
}
}
}
.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