5 changed files with 406 additions and 0 deletions
@ -0,0 +1,406 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<!-- <view class="navbar" :style="{ position: headerPosition, top: headerTop }"> |
|||
<view class="nav-item" v-for="(item, index) in cateList" :key="index" :class="{ current: filterIndex === item.id }" @click="tabClick(item.id)">{{item.name}}</view> |
|||
|
|||
</view> --> |
|||
<view class="goods-list"> |
|||
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)"> |
|||
<view class="image-wrapper"> |
|||
<image :src="item.pic" mode="aspectFill"></image> |
|||
</view> |
|||
<text class="title clamp">{{ item.title }}</text> |
|||
<view class="price-box"> |
|||
<text>收藏量 {{ item.collectCount }}</text> |
|||
<text>浏览量 {{ item.readCount }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<uni-load-more :status="loadingType"></uni-load-more> |
|||
|
|||
<view class="cate-mask" :class="cateMaskState === 0 ? 'none' : cateMaskState === 1 ? 'show' : ''" |
|||
@click="toggleCateMask"> |
|||
<view class="cate-content" @click.stop.prevent="stopPrevent" @touchmove.stop.prevent="stopPrevent"> |
|||
<scroll-view scroll-y class="cate-list"> |
|||
<view v-for="item in cateList" :key="item.id"> |
|||
<view class="cate-item b-b two">{{ item.name }}</view> |
|||
<view v-for="tItem in item.child" :key="tItem.id" class="cate-item b-b" |
|||
:class="{ active: tItem.id == cateId }" @click="changeCate(tItem)"> |
|||
{{ tItem.name }} |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue'; |
|||
import Api from '@/common/api'; |
|||
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'; |
|||
export default { |
|||
components: { |
|||
mallplusCopyright, |
|||
uniLoadMore |
|||
}, |
|||
data() { |
|||
return { |
|||
cateMaskState: 0, //分类面板展开状态 |
|||
headerPosition: 'fixed', |
|||
headerTop: '0px', |
|||
categoryId: '', |
|||
loadingType: 'more', //加载更多状态 |
|||
filterIndex: 0, |
|||
cateId: 0, //已选三级分类id |
|||
pageNum: 1, |
|||
cid: null, |
|||
priceOrder: 0, //1 价格从低到高 2价格从高到低 |
|||
cateList: [], |
|||
goodsList: [] |
|||
}; |
|||
}, |
|||
|
|||
onLoad(options) { |
|||
// #ifdef H5 |
|||
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px'; |
|||
// #endif |
|||
|
|||
// this.cateId = options.sid; |
|||
// this.loadCateList(options.fid, options.sid); |
|||
this.loadData(); |
|||
}, |
|||
onPageScroll(e) { |
|||
//兼容iOS端下拉时顶部漂移 |
|||
// if (e.scrollTop >= 0) { |
|||
// this.headerPosition = 'fixed'; |
|||
// } else { |
|||
// this.headerPosition = 'absolute'; |
|||
// } |
|||
}, |
|||
//下拉刷新 |
|||
onPullDownRefresh() { |
|||
this.pageNum = this.pageNum + 1; |
|||
this.loadData('refresh'); |
|||
}, |
|||
//加载更多 |
|||
onReachBottom() { |
|||
this.pageNum = this.pageNum + 1; |
|||
this.loadData(); |
|||
}, |
|||
methods: { |
|||
// //加载分类 |
|||
// async loadCateList() { |
|||
// let params = {'showStatus':1}; |
|||
// let list = await Api.apiCall('get', Api.cms.subjectCategoryList, params); |
|||
|
|||
// this.cateList = list.records; |
|||
// }, |
|||
//加载商品 ，带下拉刷新和上滑加载 |
|||
async loadData(type = 'add', loading) { |
|||
//没有更多直接返回 |
|||
if (type === 'add') { |
|||
if (this.loadingType === 'nomore') { |
|||
return; |
|||
} |
|||
this.loadingType = 'loading'; |
|||
} else { |
|||
this.loadingType = 'more'; |
|||
} |
|||
let params = { |
|||
pageNum: this.pageNum, |
|||
categoryId: 38 |
|||
}; |
|||
|
|||
// if (this.categoryId) { |
|||
// params = { |
|||
// pageNum: this.pageNum, |
|||
// categoryId: this.categoryId |
|||
// }; |
|||
// } else { |
|||
// params = { |
|||
// pageNum: this.pageNum |
|||
// }; |
|||
// } |
|||
|
|||
let list = await Api.apiCall('get', Api.cms.subjectList, params); |
|||
let goodsList = list.records; |
|||
// let goodsList = await this.$api.json('goodsList'); |
|||
if (type === 'refresh') { |
|||
this.goodsList = []; |
|||
} |
|||
|
|||
this.goodsList = this.goodsList.concat(goodsList); |
|||
|
|||
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了) |
|||
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more'; |
|||
if (type === 'refresh') { |
|||
if (loading == 1) { |
|||
uni.hideLoading(); |
|||
} else { |
|||
uni.stopPullDownRefresh(); |
|||
} |
|||
} |
|||
}, |
|||
// //筛选点击 |
|||
// tabClick(index) { |
|||
// console.log('tab='+index); |
|||
// this.pageNum = 1; |
|||
|
|||
// this.categoryId = index; |
|||
|
|||
// uni.pageScrollTo({ |
|||
// duration: 300, |
|||
// scrollTop: 0 |
|||
// }); |
|||
// this.loadData('refresh', 1); |
|||
|
|||
// }, |
|||
// //显示分类面板 |
|||
// toggleCateMask(type) { |
|||
// let timer = type === 'show' ? 10 : 300; |
|||
// let state = type === 'show' ? 1 : 0; |
|||
// this.cateMaskState = 2; |
|||
// setTimeout(() => { |
|||
// this.cateMaskState = state; |
|||
// }, timer); |
|||
// }, |
|||
// //分类点击 |
|||
// changeCate(item) { |
|||
// this.pageNum = 1; |
|||
// this.cateId = item.id; |
|||
// this.toggleCateMask(); |
|||
// uni.pageScrollTo({ |
|||
// duration: 300, |
|||
// scrollTop: 0 |
|||
// }); |
|||
// this.loadData('refresh', 1); |
|||
|
|||
// }, |
|||
//详情 |
|||
navToDetailPage(item) { |
|||
//测试数据没有写id，用title代替 |
|||
let id = item.id; |
|||
let groupId = item.groupId; |
|||
uni.navigateTo({ |
|||
url: `../../pagesU/notice/subjectDetail?id=${id}` |
|||
}); |
|||
}, |
|||
stopPrevent() {} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page, |
|||
.content { |
|||
background: $page-color-base; |
|||
} |
|||
|
|||
.content { |
|||
padding-top: 96upx; |
|||
} |
|||
|
|||
.navbar { |
|||
position: fixed; |
|||
left: 0; |
|||
top: var(--window-top); |
|||
display: flex; |
|||
width: 100%; |
|||
height: 80upx; |
|||
background: #fff; |
|||
box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06); |
|||
z-index: 10; |
|||
|
|||
.nav-item { |
|||
flex: 1; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 100%; |
|||
font-size: 30upx; |
|||
color: $font-color-dark; |
|||
position: relative; |
|||
|
|||
&.current { |
|||
color: $base-color; |
|||
|
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 0; |
|||
transform: translateX(-50%); |
|||
width: 120upx; |
|||
height: 0; |
|||
border-bottom: 4upx solid $base-color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.p-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.yticon { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 30upx; |
|||
height: 14upx; |
|||
line-height: 1; |
|||
margin-left: 4upx; |
|||
font-size: 26upx; |
|||
color: #888; |
|||
|
|||
&.active { |
|||
color: $base-color; |
|||
} |
|||
} |
|||
|
|||
.xia { |
|||
transform: scaleY(-1); |
|||
} |
|||
} |
|||
|
|||
.cate-item { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
height: 100%; |
|||
width: 80upx; |
|||
position: relative; |
|||
font-size: 44upx; |
|||
|
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
border-left: 1px solid #ddd; |
|||
width: 0; |
|||
height: 36upx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 分类 */ |
|||
.cate-mask { |
|||
position: fixed; |
|||
left: 0; |
|||
top: var(--window-top); |
|||
bottom: 0; |
|||
width: 100%; |
|||
background: rgba(0, 0, 0, 0); |
|||
z-index: 95; |
|||
transition: 0.3s; |
|||
|
|||
.cate-content { |
|||
width: 630upx; |
|||
height: 100%; |
|||
background: #fff; |
|||
float: right; |
|||
transform: translateX(100%); |
|||
transition: 0.3s; |
|||
} |
|||
|
|||
&.none { |
|||
display: none; |
|||
} |
|||
|
|||
&.show { |
|||
background: rgba(0, 0, 0, 0.4); |
|||
|
|||
.cate-content { |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cate-list { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
|
|||
.cate-item { |
|||
display: flex; |
|||
align-items: center; |
|||
height: 90upx; |
|||
padding-left: 30upx; |
|||
font-size: 28upx; |
|||
color: #555; |
|||
position: relative; |
|||
} |
|||
|
|||
.two { |
|||
height: 64upx; |
|||
color: #303133; |
|||
font-size: 30upx; |
|||
background: #f8f8f8; |
|||
} |
|||
|
|||
.active { |
|||
color: $base-color; |
|||
} |
|||
} |
|||
|
|||
/* 商品列表 */ |
|||
.goods-list { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 0 30upx; |
|||
background: #fff; |
|||
|
|||
.goods-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 48%; |
|||
padding-bottom: 40upx; |
|||
|
|||
&:nth-child(2n + 1) { |
|||
margin-right: 4%; |
|||
} |
|||
} |
|||
|
|||
.image-wrapper { |
|||
width: 100%; |
|||
height: 330upx; |
|||
border-radius: 3px; |
|||
overflow: hidden; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
.title { |
|||
font-size: $font-lg; |
|||
color: $font-color-dark; |
|||
line-height: 80upx; |
|||
} |
|||
|
|||
.price-box { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding-right: 10upx; |
|||
font-size: 24upx; |
|||
color: $font-color-light; |
|||
} |
|||
|
|||
.price { |
|||
font-size: $font-lg; |
|||
color: $uni-color-primary; |
|||
line-height: 1; |
|||
|
|||
&:before { |
|||
content: '￥'; |
|||
font-size: 26upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 73 KiB |
|
After Width: | Height: | Size: 4.9 MiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 562 KiB |
Loading…
Reference in new issue