|
|
|
@ -1,31 +1,25 @@ |
|
|
|
<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 class="listcard"> |
|
|
|
<view class="listcard-image"> |
|
|
|
<image :src="item.pic" mode="aspectFill"></image> |
|
|
|
</view> |
|
|
|
<view class="listcard-content"> |
|
|
|
<view class="listcard-content_title"> |
|
|
|
<text>{{item.title}}</text> |
|
|
|
<text class="listcard-content_title_text">发布时间：{{item.createTime | formatCreateTime}}</text> |
|
|
|
</view> |
|
|
|
<view class="listcard-content_des"> |
|
|
|
|
|
|
|
<view class="listcard-content_des-label"> |
|
|
|
<view class="listcard-content_des-label-item">收藏{{item.collectCount}}</view> |
|
|
|
</view> |
|
|
|
<view class="listcard-content_des-browe">浏览{{item.readCount}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -33,339 +27,239 @@ |
|
|
|
</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; |
|
|
|
import Api from '@/common/api'; |
|
|
|
import { |
|
|
|
formatDate |
|
|
|
} from '@/common/date'; |
|
|
|
|
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
pageNum: 1, |
|
|
|
goodsList: [] |
|
|
|
}; |
|
|
|
}, |
|
|
|
//加载商品 ，带下拉刷新和上滑加载 |
|
|
|
async loadData(type = 'add', loading) { |
|
|
|
//没有更多直接返回 |
|
|
|
if (type === 'add') { |
|
|
|
if (this.loadingType === 'nomore') { |
|
|
|
return; |
|
|
|
} |
|
|
|
this.loadingType = 'loading'; |
|
|
|
} else { |
|
|
|
this.loadingType = 'more'; |
|
|
|
} |
|
|
|
let params; |
|
|
|
|
|
|
|
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 = []; |
|
|
|
} |
|
|
|
onLoad(options) { |
|
|
|
// #ifdef H5 |
|
|
|
this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight + 'px'; |
|
|
|
// #endif |
|
|
|
|
|
|
|
|
|
|
|
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(); |
|
|
|
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(); |
|
|
|
}, |
|
|
|
filters: { |
|
|
|
formatCreateTime(time) { |
|
|
|
let date = new Date(time); |
|
|
|
return formatDate(date, 'yyyy-MM-dd hh:mm:ss') |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//加载商品 ，带下拉刷新和上滑加载 |
|
|
|
async loadData(type = 'add', loading) { |
|
|
|
//没有更多直接返回 |
|
|
|
if (type === 'add') { |
|
|
|
if (this.loadingType === 'nomore') { |
|
|
|
return; |
|
|
|
} |
|
|
|
this.loadingType = 'loading'; |
|
|
|
} else { |
|
|
|
uni.stopPullDownRefresh(); |
|
|
|
this.loadingType = 'more'; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
//筛选点击 |
|
|
|
tabClick(index) { |
|
|
|
console.log('tab='+index); |
|
|
|
this.pageNum = 1; |
|
|
|
let params = { |
|
|
|
pageNum: this.pageNum, |
|
|
|
categoryId: 38 |
|
|
|
}; |
|
|
|
|
|
|
|
this.categoryId = index; |
|
|
|
|
|
|
|
uni.pageScrollTo({ |
|
|
|
duration: 300, |
|
|
|
scrollTop: 0 |
|
|
|
}); |
|
|
|
this.loadData('refresh', 1); |
|
|
|
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 = []; |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
//显示分类面板 |
|
|
|
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); |
|
|
|
this.goodsList = this.goodsList.concat(goodsList); |
|
|
|
|
|
|
|
}, |
|
|
|
//详情 |
|
|
|
navToDetailPage(item) { |
|
|
|
//测试数据没有写id，用title代替 |
|
|
|
let id = item.id; |
|
|
|
let groupId = item.groupId; |
|
|
|
uni.navigateTo({ |
|
|
|
url: `../../pagesU/notice/subjectDetail?id=${id}` |
|
|
|
}); |
|
|
|
}, |
|
|
|
stopPrevent() {} |
|
|
|
} |
|
|
|
}; |
|
|
|
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了) |
|
|
|
this.loadingType = this.goodsList.length > list.total ? 'nomore' : 'more'; |
|
|
|
if (type === 'refresh') { |
|
|
|
if (loading == 1) { |
|
|
|
uni.hideLoading(); |
|
|
|
} else { |
|
|
|
uni.stopPullDownRefresh(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
//详情 |
|
|
|
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; |
|
|
|
page, |
|
|
|
.content { |
|
|
|
background: $page-color-base; |
|
|
|
} |
|
|
|
|
|
|
|
.listcard { |
|
|
|
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; |
|
|
|
padding: 15px; |
|
|
|
margin: 20px; |
|
|
|
border-radius: 5px; |
|
|
|
box-shadow: 0 0 5px 1px rgba($color:#000000, $alpha:0.1); |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
.listcard-image { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 80px; |
|
|
|
height: 80px; |
|
|
|
border-radius: 8px; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.p-box { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
.yticon { |
|
|
|
|
|
|
|
.listcard-content { |
|
|
|
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; |
|
|
|
flex-direction: column; |
|
|
|
padding-left: 10px; |
|
|
|
width: 100%; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.listcard-content_title { |
|
|
|
padding-right: 30px; |
|
|
|
font-size: 14px; |
|
|
|
color: #333; |
|
|
|
font-weight: 400; |
|
|
|
line-height: 1.2; |
|
|
|
position: relative; |
|
|
|
|
|
|
|
text { |
|
|
|
font-size: 22px; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
} |
|
|
|
|
|
|
|
.listcard-content_title_text { |
|
|
|
margin-top: 5px; |
|
|
|
font-size: 15px; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.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%; |
|
|
|
.listcard-content_des { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
font-size: 12px; |
|
|
|
|
|
|
|
.listcard-content_des-label { |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.listcard-content_des-label-item { |
|
|
|
padding: 0 5px; |
|
|
|
margin-right: 5px; |
|
|
|
border-radius: 15px; |
|
|
|
color: #f00; |
|
|
|
border: 1px #f00 solid; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.listcard-content_des-browe { |
|
|
|
color: #999; |
|
|
|
font-size: 15px; |
|
|
|
line-height: 1.5; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.image-wrapper { |
|
|
|
width: 100%; |
|
|
|
height: 330upx; |
|
|
|
border-radius: 3px; |
|
|
|
overflow: hidden; |
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
opacity: 1; |
|
|
|
|
|
|
|
&.mode-column { |
|
|
|
.list-content { |
|
|
|
width: 100%; |
|
|
|
padding-left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
.listcard-image { |
|
|
|
display: flex; |
|
|
|
margin-top: 10px; |
|
|
|
width: 100%; |
|
|
|
height: 80px; |
|
|
|
|
|
|
|
.listcard-image_item { |
|
|
|
margin-left: 10px; |
|
|
|
width: 100%; |
|
|
|
border-radius: 5px; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
&:first-child { |
|
|
|
margin-left: 0; |
|
|
|
} |
|
|
|
|
|
|
|
image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.listcard-content_des { |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.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; |
|
|
|
|
|
|
|
&.mode-image { |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.listcard-image { |
|
|
|
width: 100%; |
|
|
|
height: 100px; |
|
|
|
} |
|
|
|
|
|
|
|
.listcard-content { |
|
|
|
padding-left: 0; |
|
|
|
margin-top: 10px; |
|
|
|
|
|
|
|
.listcard-content_des { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
