113 lines
3.0 KiB
Vue
113 lines
3.0 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="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.tag" 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}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// import {
|
||
// simpleDateFormat,
|
||
// simpleDateFormatByMoreLine
|
||
// } from '@/utills/util.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
productList: [
|
||
// {
|
||
// src: '/static/products/zhanwei_dg.png',
|
||
// title: '锅巴',
|
||
// tag: '无添加剂',
|
||
// img_tag: '零食铺子',
|
||
// desc: '糯米蟹黄锅巴散装，非油炸绿色健康食品',
|
||
// time: '2022-12-04'
|
||
// },
|
||
// {
|
||
// src: '/static/products/zhanwei_dg.png',
|
||
// title: '干吃汤圆',
|
||
// tag: '天然原料',
|
||
// img_tag: '糕点卷酥',
|
||
// desc: '休闲食品厂家甜品糯米食品零食闽南特产宵夜好吃糍粑',
|
||
// time: '2022-12-04'
|
||
// },
|
||
// {
|
||
// src: '/static/products/zhanwei_dg.png',
|
||
// title: '紫薯魔芋人参魔芋人参魔芋人参…',
|
||
// tag: '天然原料',
|
||
// img_tag: '健康创新',
|
||
// desc: '紫薯魔芋人参代餐粉 冲调饮品贴牌加工 五谷杂粮粉代餐',
|
||
// time: '2022-12-04'
|
||
// },
|
||
// {
|
||
// src: '/static/products/zhanwei_dg.png',
|
||
// title: '焦糖饼干',
|
||
// tag: '无防腐剂',
|
||
// img_tag: '饼干曲奇',
|
||
// desc: '比利时风味焦糖饼干代餐小吃零食品',
|
||
// time: '2022-12-04'
|
||
// }
|
||
],
|
||
query: {
|
||
sortType: 1,
|
||
pageSize: 4,
|
||
pageNum: 1
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.getProducts()
|
||
},
|
||
|
||
methods: {
|
||
//获取产品列表
|
||
getProducts() {
|
||
// console.log("子组件的获取产品列表方法====");
|
||
this.$apiServe.getProducts(this.query).then(res => {
|
||
// console.log(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>
|