<template>
	<view>
		<view class="products_box">
			<u-grid :border="false" col="2">
				<u-grid-item v-for="(item,index) in productList" :key="index">
					<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.src" width="346rpx" height="320rpx" :lazy-load="true"
								@click="toDetailPage()">
							</u-image>
							<view class="img_tag">{{item.img_tag}}</view>
						</view>
						<view style="padding: 16rpx;">
							<view class="title_box">
								<text class="title">{{item.title}}</text>
								<u-tag :text="item.tag" type="warning" shape="circle"></u-tag>
							</view>

							<view class="product_desc">
								{{item.desc}}
							</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.time}}</text>
							</view>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	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'
					}
				]
			}
		},
		methods: {
			//点击图片跳转到详情页
			toDetailPage() {
				uni.navigateTo({
					url: '/pages/detail/productsDetail/productsDetail'
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
