Client-Teapay/src/components/goodsLista.vue

<template>
	<view>
		<view class="feng_flow">
			<view class="flow_block">
				<view class="flow_item" v-for="(i, i1) in lists1" :key="i1">
					<image :src="Url" mode="widthFix" style="width: 100%;"></image>
					<view class="flow_item_con" v-if="false">
						<view class="flow_item_title">￥{{ type == 2 ? a.trade_price : a.cost_price }}</view>
						<view class="flow_item_des">{{ i.trade_give_num }}</view>
					</view>
				</view>
			</view>
			<view class="flow_block">
				<view class="flow_item" v-for="(a, i2) in lists2" :key="i2">
					<image :src="Url" mode="widthFix" style="width: 100%;"></image>
					<view class="flow_item_con" v-if="false">
						<view class="flow_item_title">￥{{ type == 2 ? a.trade_price : a.cost_price }}</view>
						<view class="flow_item_des">{{ a.trade_give_num }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="feng_flow" style="display: none;">
			<view class="flow_block">
				<view class="flow_item" v-for="(data,da_i) in dataLists" :key="da_i">
					<image :src="data.zipurl" @error="imgError" @load="imgLoad" :id="da_i" mode="widthFix" style="width:100%;"></image>
				</view>
			</view>
			<view class="flow_block"></view>
		</view>
	</view>
</template>
<script>
import { get, post } from "@/request/api.js";
export default {
	name: 'fengFlow',
    props: {
        long: {
            type: Number,
            default: 2,
        },
        type: {
            type: String,
            default: "3",
        },
    },
	data() {
		return {
			dataLists: [],
			lists1: [],
			lists2: [],
			list1Height: 0,
			list2Height: 0,
			tmp_data: [],
			loaded: [], //图片加载成功数组
			loadErr: [], //图片加载失败数组
			showLoad: false,

            Url: "https://teaclub.oss-cn-chengdu.aliyuncs.com/ShuZiTea/goods/20221008/bba4ab41-ec1a-462f-8d3c-5b36d81a3a1a.jpg" 
		};
	},
	onLoad() {},
	methods: {
		// 获取作品列表
		loadData(page) {
            post("goods/goodsList",{
                type: this.type,
                page: page ? page : 1
            }).then((res) => {
                if(page == 1) this.dataLists  = []
                if (res.code === 0) {
                    this.dataLists  = [...this.dataLists ,...res.data.data]
                }
            });
		},

		//处理数据
		refresData() {
			this.hideLoadFlag()
			if (this.loaded.length + this.loadErr.length < this.tmp_data.length) return;
			const that = this
			this.tmp_data.map((da, di) => {
				if (that.list1Height > that.list2Height) {
					that.list2Height += da.img_height
					that.lists2.push(da)
				} else {
					that.list1Height += da.img_height
					that.lists1.push(da)
				}

			})
		},
		//图片加载完成补齐数据
		imgLoad(e) {
			this.loaded.push(e.target.id)
			//存储数据
			this.tmp_data[e.target.id]['img_width'] = e.detail.width
			this.tmp_data[e.target.id]['img_height'] = e.detail.height

		},
		//图片未加载成功触发
		imgError(e) {
			this.loadErr.push(e.target.id)
		},
		showLoadFlag() {
			if (!this.showLoad) {
				this.showLoad = true
				uni.showLoading({
					title: 'loading...',
					mask: 'none'
				})
			}
		},
		hideLoadFlag() {
			if (this.showLoad) {
				uni.hideLoading();
				this.showLoad = false;
			}
		},
	},
    created () {
		this.loadData();
    },
	mounted() {
		const that = this
		that.tmp_data = that.dataLists
		that.showLoadFlag()
	},
	watch: {
		dataLists() {
			this.loaded = []
			this.loadErr = []
			this.tmp_data = this.dataLists
			this.showLoadFlag()
		},
		loaded() {
			//最后一个加载完成负责刷新数据
			this.refresData()
		},
		loadErr() {
			//最后一个加载完成负责刷新数据
			this.refresData()
		}
	}
};
</script>
<style>
.feng_flow {
	display: flex;
	padding: 15upx;
}

.flow_block {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.flow_item {
	margin: 15upx;
	border-radius: 20upx;
	background: #f4f4f4;
	overflow: hidden;
}

.flow_item_con {
	padding: 10upx 20upx 20upx;
}

.flow_item_title {
	position: relative;
	font-size: 32upx;
	font-weight: 700;
	margin-bottom: 5upx;
}

.flow_item_des {
	font-size: 24upx;
}
</style>