H5_QiCaiYao/page_goods/groupGoods/groupGoods.vue

<template>
	<view class="seckillGoods">
		<div class="seckillGoods-list">
			<div
				class="seckillGoods-item"
				v-for="(item, index) in list"
				:key="index"
				@click="goodsClick(item, index)"
			>
				<div class="cover">
					<image
						:src="$util.img(item.goods_image)"
						class="cover"
						mode="aspectFill"
					></image>
				</div>
				<div class="right">
					<div class="title">{{ item.goods_name }}</div>
					<div class="labels-1">
						<div class="label-item">产地：{{ item.address }}</div>
						<div class="label-item">规格：{{ item.spec_name||'-' }}</div>
						<div class="label-item">执行标准：{{ item.execu_content.title }}</div>
						<div class="label-item">生产企业：{{ item.business }}</div>
					</div>
					<div class="bottom" v-if="userInfo.show_price && token">
						<div class="price">
							拼团价 ¥
							<span>{{ item.pintuan_price }}</span>
							<div class="y-price">¥{{ item.price }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<view v-if="list.length == 0 ">
			<ns-empty text="暂无商品"></ns-empty>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			list: [],
			token: uni.getStorageSync('token')
		};
	},
	onShow() {
		this.$api.sendRequest({
			url: '/api/goodssku/pintuangoodsList',
			data: {},
			success: res => {
				this.list = res.data.list;
				console.log(res.data.list, '拼团商品');
			}
		});
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	methods: {
		goodsClick(item, index) {
			uni.navigateTo({
				url: `/page_goods/detail/detail?goods_id=${item.goods_id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.seckillGoods {
	padding: 32rpx;
	line-height: 1;

	.seckillGoods-list {
		.seckillGoods-item {
			background-color: #fff;
			margin-bottom: 30rpx;
			padding: 24rpx;
			display: flex;
			line-height: 40rpx;

			border-radius: 16rpx;

			.labels-1 {
				margin-top: 10rpx !important;

				.label-item {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					font-size: 24rpx !important;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999 !important;
					line-height: 40rpx !important;
				}
			}

			.right {
				flex: 1;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 16rpx;

					.price {
						display: flex;
						align-items: center;

						color: #ef6154;

						span {
							font-size: 36rpx;
							font-weight: bold;
							margin: 0 16rpx 0 6rpx;
						}

						.y-price {
							font-weight: bold;
							font-size: 28rpx;
							color: #999;
							text-decoration: line-through;
						}
					}
				}

				.title {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-bottom: 16rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}

			.cover {
				width: 160rpx;
				height: 160rpx;
				border-radius: 8rpx;
				margin-right: 24rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.time {
					width: 100%;
					position: absolute;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #ffffff;
					line-height: 44rpx;
					background-color: rgba(0, 0, 0, 0.4);
					bottom: 0;
					border-radius: 0 0 8rpx 8rpx;
				}
			}
		}
	}

	.times {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 32rpx;
		.time-item {
			text-align: center;
			flex: 1;
			padding: 16rpx 0;
			border-radius: 16rpx;

			.time {
				font-size: 36rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #222222;
				margin-bottom: 12rpx;
			}

			.text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;

				color: #222222;
			}
		}
	}
}
</style>