fangliaoxiaochengxv/subPages/collectList/collectList.vue

<template>
	<view class="app-page">
		<view class="activity-box">
			<view class="activity-list" v-for="(item, index) in mList" :key="index" @click="toDetails(item)">
				<image style="width: 100%; height: 344rpx; border-radius: 20rpx 20rpx 0 0" :src="item.cover"
					mode="aspectFill">
				</image>
				<view class="list-content text-overflow2">
					<view class="text-overflow-single mb10">{{item.goods_name}}</view>
					<view class="display-flex-between">
						<text class="fs13 fw600 color-red">￥{{item.price_selling}}</text>
						<text class="text-through fs12 color-ca">￥{{item.price_market}}</text>
					</view>
				</view>
			</view>
			<view style="width: 100%">
				<!-- <u-loadmore :status="status" @loadmore="loadmoreClick" :load-text="loadText" /> -->
			</view>
		</view>
		<!-- <CommercePart :data="mList"></CommercePart> -->
	</view>
</template>

<script>
	import Empty from "@/components/Empty/index.vue"
	import CommercePart from '@/components/CommercePart'
	import { getcollectList } from "@/common/api/good.js";
	export default {
		components: {
			Empty,
			CommercePart
		},
		data() {
			return {
				topData: {
					top: 0,
					height: 0
				},
				pageParams: {
					page: 1,
					pageSize: 8
				},
				total: 0,
				mList: []
			}
		},
		computed: {},
		onLoad(options) {
			this.getList(true)
		},
		onReachBottom() {
			this.getList()
		},
		methods: {
			toBack() {
				uni.navigateBack()
			},
			toDetails(item) {
				uni.navigateTo({
					url: `/subPages/goodsDetail/goodsDetail?code=${item.code}&type=common`
				})
			},
			getList(initFlag) {
				if (!initFlag) {
					if (this.pageParams.page * this.pageParams.pageSize < this.total) {
						this.pageParams.page++
					} else {
						return
					}
				} else {
					this.pageParams.page = 1
					this.total = 0
					this.mList = []
				}
				let sendData = {
					...this.pageParams
				}
				getcollectList()
					.then((res) => {
						let list = res.data.list.map(item => {
							return item.goods
						})
						this.mList = this.mList.concat(list)
						this.total = res.data.page.total
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app-page {
		width: 100%;
		height: 100vh;
		// background-color: #fff;
		// align-items: center;
		// flex-direction: column;
		box-sizing: border-box;
		padding: 40rpx;

		// box-sizing: border-box;
		.activity-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.activity-list {
				width: calc(50% - 11rpx);
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 22rpx;
				padding-bottom: 30rpx;
				font-size: 24rpx;

				.list-title {
					font-size: 30rpx;
					padding: 0 16rpx 8rpx;
				}

				.list-content {
					color: #2c2c2c;
					padding: 10rpx 16rpx 0;
					// display: flex;

				}
			}
		}
	}
</style>