shop-app/components/UiGoodsGroup.vue

<!--
 * @Author: ch
 * @Date: 2022-04-07 17:22:44
 * @LastEditors: ch
 * @LastEditTime: 2022-04-30 15:51:52
 * @Description: file content
-->

<template>
		<view class="goods">
			<view class="goods--column">
				<view class="goods-item" v-for="item in goodsLeftData" :key="item.id" 
					@click="$Router.push(`/goodsDetail?id=${item.id}`)">
					<image class="goods-item--img" :src="item.mainPicture" mode="widthFix"></image>
					<view class="goods-item--title" :class="item.tagList && item.tagList.length && 'goods-item--title__indent'">
						<image class="goods-item--tag" v-for="i in item.tagList" :key="i.code" src="@/static/goods/tag2.png"/>
						<text>{{item.name}}</text>
					</view>
					<view class="goods-item--pirce-box">
						<UiMoney :money="item.startingPrice" prefix class="goods-item--pirce"/>
						<image class="goods-item--seckill" v-if="item.seckill" src="@/static/goods/tag4.png"/>
						<!-- <view>
							<text class="goods-item--pirce">￥{{item.startingPrice}}</text>
							<text class="goods-item--original-pirce">￥50</text>
						</view> -->
						<!-- <view>
							<image class="goods-item--icon" src='@/static/index/bz.png'></image>
						</view> -->
					</view>
					<!-- <view class="goods-item--activity">
						<text class="goods-item--activity-title">秒杀</text>
						<text class="goods-item--activity-desc">正在抢购中</text>
					</view> -->
				</view>
			</view>
			<view class="goods--column">
				<view class="goods-item" v-for="item in goodsRightData" :key="item.id" 
					@click="$Router.push(`/goodsDetail?id=${item.id}`)">
					<image class="goods-item--img" :src="item.mainPicture" mode="widthFix"></image>
					<view class="goods-item--title" :class="item.tagList.length && 'goods-item--title__indent'">
						<image class="goods-item--tag" v-for="i in item.tagList" :key="i.code" src="@/static/goods/tag2.png"/>
						<text>{{item.name}}</text>
					</view>
					<view class="goods-item--pirce-box">
						<UiMoney :money="item.startingPrice" prefix class="goods-item--pirce"/>
						<image class="goods-item--seckill" v-if="item.seckill" src="@/static/goods/tag4.png"/>
						<!-- <view>
							<text class="goods-item--pirce">￥{{item.startingPrice}}</text>
							<text class="goods-item--original-pirce">￥50</text>
						</view> -->
						<!-- <view>
							<image class="goods-item--icon" src='@/static/index/bz.png'></image>
						</view> -->
					</view>
					<!-- <view class="goods-item--activity">
						<text class="goods-item--activity-title">秒杀</text>
						<text class="goods-item--activity-desc">正在抢购中</text>
					</view> -->
				</view>
			</view>
		</view>
</template>
<script>
import UiMoney from './UiMoney.vue';
export default {
	components: { UiMoney },
	data(){
		return {
		}
	},
	props: {
		listData : {
			type : Array,
			defalut : []
		}
	},
	computed:{
		goodsLeftData (){
			return this.listData.filter((item, index) => index % 2 === 0);
		},
		goodsRightData(){
			return this.listData.filter((item, index) => index % 2 !== 0);
		}
	},
	mounted(){
	},
	methods : {
		
	}
}
</script>
<style lang="scss" scoped>

.goods{
	padding: 0 30rpx;
	display: flex;
	justify-content: space-between;
	flex-flow:wrap;
	&--column{
		width: 335rpx;
	}
	&-item{

		width: 335rpx;
		border-radius: 8rpx;
		background: $color-grey0;
		margin-bottom: 30rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
		&--img{
			width: 100%;
		}
		&--title{
			font-size: $font-size-base;
			padding: 20rpx 20rpx 24rpx;
			line-height: 36rpx;
			font-weight: bold;
			&__indent{
				text-indent: 76rpx;
				position: relative;

			}
		}
		&--tag{
			width: 60rpx;
			height: 32rpx;
			margin-right: 16rpx;
			position: absolute;
			left: 24rpx;
			
		}
		&--pirce-box{
			padding:0 20rpx;
			display: flex;
		}
		&--seckill{
			width: 60rpx;
			height: 32rpx;
			margin-left: 13rpx;
		}
		&--original-pirce{
			color: $color-grey3;
			font-size: 20rpx;
			text-decoration: line-through;
			margin-left: 15rpx;
		}
		&--icon{
			width: 22rpx;
			height: 24rpx;
		}
		&--activity{
			height: 40rpx;
			line-height: 40rpx;
			margin:20rpx 20rpx 0;
			background: $color-yellow0;
			border-radius: 20rpx;
			font-size: 22rpx;
			color: $color-yellow4;
			display: flex;
			&-title{
				height: 40rpx;
				display: block;
				border-radius: 20rpx;
				padding: 0 14rpx;
				background: $color-yellow4;
				color: $color-grey0;
			}
			&-desc{
				flex: 1 1 auto;
				text-align: center;
			}
		}
	}
}
/deep/ {
	.goods-item--pirce{
		text{
			font-size: $font-size-lg;
			line-height: 32rpx;
			color: $color-yellow4;
			font-weight: bold;
		}
		.ui-money--prefix{
			font-size: $font-size-sm;
		}
	}

}
</style>