shop-app/components/BsChoiceGoods.vue

<!--
 * @Author: ch
 * @Date: 2022-03-20 16:45:27
 * @LastEditors: ch
 * @LastEditTime: 2022-05-05 10:45:33
 * @Description: file content
-->
<template>
	<view>
		<UiGoodsGroup :listData="listData"></UiGoodsGroup>
		<u-loadmore :status="loadingStatus" color="#ccc" nomoreText="我也是有底线的啦~" />
	</view>
</template>
<script>
import {ApiGetGoodsList} from '@/common/api/goods';
import BsEmpty from './BsEmpty.vue';
import UiGoodsGroup from './UiGoodsGroup.vue';
export default {
	components: { BsEmpty, UiGoodsGroup },
	data(){
		return {
			loadingStatus : 'loading',
			listData : [],
			params : {
				length : 15,
				pageIndex : 1
			}
		}
	},
	mounted(){
		this.getGoodsList();
	},
	methods : {
		async getGoodsList(){
			this.loadingStatus = 'loading';
			const query = this.$Route.query;
			const {error, result} = await ApiGetGoodsList({
				...this.params
			});
			const res = result.records.map(item => {
				// item.labelList[{text:'x',code : 'recommended'},{text:'x',code : 'second_kill'}]
				// 标签数据重新组装
				item.seckill = false;
				item.tagList = [];
				item.labelList.forEach(i => {
					if(i.code === 'second_kill'){
						item.seckill = true;
					}else{
						i.url = require('@/static/goods/tag2.png');
						item.tagList.push(i);
					}
				})
				return item;
			})
			this.listData = this.listData.concat(res);
			
			// 标记是否为最后一页
			if(!res.length < this.params.length){
				this.loadingStatus = 'nomore';
			}
		},
		next(){
			if(this.loadingStatus === 'nomore'){
				return false
			}
			this.params.pageIndex++;
			this.getGoodsList();
		}
	}
}
</script>
<style lang="scss" scoped>
</style>