deming/pageE/tool/MineHistory.vue

<template>
    <view class="mine-history">
		<scroll-view scroll-y class="history-box" @scrolltolower="reachBottom">
			<view class="item-box">
				<!-- 需求：只显示最近五十条数据　后台未作限制 -->
				<view v-for="(item, index) in historyList.slice(0, 50)" :key="index" class="history-item">
					<view class="item-title" @click="viewStoreDetails(item.store_id)">
						<image :src="item.store_avatar"></image>
						<view class="u-line-1">{{ item.store_name }}</view>
					</view>
					<image :src="item.goods_image" class="item-image" mode="aspectFit" @click="viewGoodsDetails(item.goods_id)"></image>
					<view class="item-info" @click="viewGoodsDetails(item.goods_id)">
						<view class="info-name u-line-1">{{ item.goods_name }}</view>
						<view @click.stop="viewAction(item.goods_id)">
							<u-icon name="more-dot-fill" color="#333" size="32"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<u-action-sheet :list="actionList" v-model="showAction" :cancel-btn="true" @click="delHistory" border-radius="20"></u-action-sheet>
			<u-empty text="暂无足迹" mode="list" color="#000" v-if="!historyList.length"></u-empty>
			<u-loadmore class="load-size" :status="loadStatus" bgColor="#ECECEC" margin-top="20" margin-bottom="20" v-if="historyList.length > pageSize" @loadmore="reachBottom"></u-loadmore>
		</scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
			pageSize: 12,
			hid: '', // 选中的商品 id
			historyList:  [],
			page: 1, // 默认1
			loadStatus: 'loadmore',
			timer: true,
			showAction: false,
			actionList: [
				{
					text: '删除',
					color: '#000000',
					fontSize: 36
				}
			]
		};
    },
    onLoad() {
		this.getBrowseList();
	},
    methods: {
		viewAction(id) {
			this.showAction = true;
			this.hid = id;
		},
		delHistory() {
			let glist = [];
			glist.push(this.hid);
			this.$u.api.delMemberBrowse({ goods_id: glist }).then(res => {
				if(res.errCode == 0) {
					this.getBrowseList();
				} else {
					this.$u.toast(res.message);
				}
			})
		},
		viewStoreDetails(sid) {
			this.$u.route({
				url: 'pageC/merchant/index',
				params: {
					id: sid,
				}
			})
		},
		viewGoodsDetails(id) {
			this.$u.route({
				url: 'pageB/sdetails/index',
				params: {
					id: id,
				}
			})
		},
		async getBrowseList ({ load = 'reload' } = {}) {
			if(load == 'reload') this.page = 1;
			const res = await this.$u.api.getBrowseList({ page: this.page });
			this.timer = true;
			if(res.errCode == 0) {
				if(load == 'reload') this.historyList = res.data.storeInfo;
				else if(load == 'loadmore') this.historyList.push(...res.data.storeInfo);
			}
			return res.data.storeInfo.length;
		},
		reachBottom() {
			if(!this.timer) return false;
			this.timer = false;
			this.loadStatus = "loading";
			this.page++;
			this.getBrowseList({ load: 'loadmore' }).then(length => {
				if(length == 0) {
					this.page--;
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loading';
				}
			}).catch(() => {
				this.loadStatus = "nomore";
				this.page--;
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.mine-history {
	min-height: calc(100vh - var(--window-top));
	background: #ECECEC;
	.history-box {
		box-sizing: border-box;
		height: calc(100vh - var(--window-top));
		padding: 20rpx 30rpx 0;
		.item-box {
			display: flex;
			flex-wrap: wrap;
			.history-item {
				width: 220rpx;
				height: 290rpx;
				background: rgba(255,255,255,1);
				border-radius: 10rpx;
				padding: 20rpx 20rpx 22rpx;
				margin: 0 11rpx 20rpx 0;
				.item-title {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					> image {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						margin-right: 19rpx;
					}
					> view {
						font-size: 24rpx;
						color: rgba(51,51,51,1);
					}
				}
				.item-image {
					width: 180rpx;
					height: 140rpx;
					border-radius: 10rpx;
				}
				.item-info {
					height: 60rpx;
					font-size: 22rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.info-name {
						height: 60rpx;
						line-height: 60rpx;
						margin-right: 14rpx;
						flex: 1;
						font-size: 22rpx;
						color: rgba(51,51,51,1);
					}
				}
			}
		}
		
	}
}
</style>