89 lines
2.4 KiB
Vue
89 lines
2.4 KiB
Vue
<template>
|
||
<view>
|
||
<view class="products_box">
|
||
<u-grid :border="false" col="2">
|
||
<u-grid-item v-for="(item,index) in productList" :key="index" @click="toDetailPage(item)">
|
||
<u-image src="/static/products/sy_bb.png" width="354rpx" height="539rpx" :lazy-load="true">
|
||
</u-image>
|
||
<view class="bgContent">
|
||
<view>
|
||
<u-image :src="imgUrl+item.cover" width="346rpx" height="320rpx" :lazy-load="true">
|
||
</u-image>
|
||
<view class="img_tag">{{item.cate_name}}</view>
|
||
</view>
|
||
<view style="padding: 14rpx 22rpx;">
|
||
<view class="title_box">
|
||
<text class="title">{{item.name}}</text>
|
||
<u-tag :text="item.tags" type="warning" shape="circle"></u-tag>
|
||
</view>
|
||
<view class="product_desc">
|
||
{{item.title}}
|
||
</view>
|
||
<view class="releaseDate">
|
||
<u-image src="/static/products/xp_icon_sjf.png" width="22rpx" height="22rpx"
|
||
:lazy-load="true">
|
||
</u-image>
|
||
<text class="release">发布日期：</text>
|
||
<text>{{item.pub_time_str}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
imgUrl: null,
|
||
tagsArray: [],
|
||
productList: [],
|
||
pageNum: 1, // 当前页
|
||
pageSize: 4, // 每页条数
|
||
// sortType: ''
|
||
}
|
||
},
|
||
created() {
|
||
this.imgUrl = uni.getStorageSync('img_url')
|
||
this.getProductsByTime()
|
||
},
|
||
methods: {
|
||
//获取按上架时间排列的产品列表
|
||
getProductsByTime() {
|
||
this.$apiServe.getProducts({
|
||
sortType: 1,
|
||
pageSize: this.pageSize,
|
||
pageNum: this.pageNum
|
||
}).then(res => {
|
||
let tags = res.data.data
|
||
for (const item of tags) {
|
||
let tag = item.tags
|
||
this.tagsArray = tag.split(',')
|
||
item.tags = this.tagsArray[0]
|
||
}
|
||
this.$emit("getTimeLength", tags.length);
|
||
// 用于触底刷新 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
|
||
this.productList = [...this.productList, ...res.data.data]
|
||
//这用于上架时间和点赞量的数据切换
|
||
// this.productList = res.data.data
|
||
}).finally(_ => {
|
||
|
||
})
|
||
},
|
||
//点击图片跳转到详情页
|
||
toDetailPage(item) {
|
||
uni.navigateTo({
|
||
url: '/pages/detail/productsDetail/productsDetail?id=' + item.id
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
</style>
|