shop-app/components/BsGoodsGroup.vue

<!--
 * @Author: ch
 * @Date: 2022-03-20 16:45:27
 * @LastEditors: ch
 * @LastEditTime: 2022-04-02 11:15:46
 * @Description: file content
-->
<template>
	<view>
		<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">
						<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">
						<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>
		<u-loadmore :status="loadingStatus" />
	</view>
</template>
<script>
import {ApiGetGoodsList} from '@/common/api/goods';
export default {
	data(){
		return {
			loadingStatus : 'loading',
			goodsLeftData : [],
			goodsRightData : [],
			params : {
				length : 10,
				pageIndex : 1
			}
		}
	},
	mounted(){
		this.getGoodsList();
	},
	methods : {
		async getGoodsList(){
			this.loadingStatus = 'loading';
			const {error, result} = await ApiGetGoodsList({
				...this.params
			});
			const abs = this.goodsLeftData.length - this.goodsRightData.length;
			const newLeftData = [];
			const newRightData = [];
			if(abs < 1){
				result.records.forEach((item, index) => {
					if(index % 2 === 0){
						newLeftData.push(item);
					}else{
						newRightData.push(item);
					}
				})
			}else{
				result.records.forEach((item, index) => {
					if(index % 2 !== 0){
						newLeftData.push(item);
					}else{
						newRightData.push(item);
					}
				})
			}
			this.goodsLeftData = this.goodsLeftData.concat(newLeftData);
			this.goodsRightData = this.goodsRightData.concat(newRightData);
			// 标记是否为最后一页
			if(!result.records.length){
				this.loadingStatus = 'nomore';
			}
		},
		next(){
			if(this.loadingStatus === 'nomore'){
				return false
			}
			this.params.pageIndex++;
			this.getGoodsList();
		}
	}
}
</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: #fff;
		margin-bottom: 30rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
		&--img{
			width: 100%;
		}
		&--title{
			font-size: 28rpx;
			padding: 20rpx 20rpx;
			line-height: 36rpx;
		}
		&--pirce-box{
			padding:0 20rpx;
			display: flex;
			justify-content: space-between;
		}
		&--pirce{
			font-size: 32rpx;
			color: #FF512B;
		}
		&--original-pirce{
			color: #ccc;
			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: #FFEDE9;
			border-radius: 20rpx;
			font-size: 22rpx;
			color: #FF512B;
			display: flex;
			&-title{
				height: 40rpx;
				display: block;
				border-radius: 20rpx;
				padding: 0 14rpx;
				background: #FF512B;
				color: #fff;
			}
			&-desc{
				flex: 1 1 auto;
				text-align: center;
			}
		}
	}
}
</style>