shop-app/components/UiGoodsGroup.vue

<!--
 * @Author: ch
 * @Date: 2022-04-07 17:22:44
 * @LastEditors: ch
 * @LastEditTime: 2022-04-21 16:38:03
 * @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"><text>{{item.name}}</text></view>
					<view class="goods-item--pirce-box">
						<UiMoney :money="item.startingPrice" prefix class="goods-item--pirce"/>
						<!-- <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"><text>{{item.name}}</text></view>
					<view class="goods-item--pirce-box">
						<UiMoney :money="item.startingPrice" prefix class="goods-item--pirce"/>
						<!-- <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 {
			// goodsLeftData : [],
			// goodsRightData : [],
		}
	},
	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);
		}
	},
	watch : {
		lisatData (data){
			console.log(data);
			// const abs = this.goodsLeftData.length - this.goodsRightData.length;
			const newLeftData = [];
			const newRightData = [];
			// if(abs < 1){
				data.forEach((item, index) => {
					if(index % 2 === 0){
						newLeftData.push(item);
					}else{
						newRightData.push(item);
					}
				})
			// }else{
			// 	data.forEach((item, index) => {
			// 		if(index % 2 !== 0){
			// 			newLeftData.push(item);
			// 		}else{
			// 			newRightData.push(item);
			// 		}
			// 	})
			// }
			this.goodsLeftData = newLeftData; // this.goodsLeftData.concat(newLeftData);
			this.goodsRightData = newRightData; //this.goodsRightData.concat(newRightData);

		}
	},
	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;
		}
		&--pirce-box{
			padding:0 20rpx;
			display: flex;
			justify-content: space-between;
		}
		&--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>