<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">
						<image :src="item.store_avatar"></image>
						<view>{{ item.store_name }}</view>
					</view>
					<image :src="item.goods_image" class="item-image"></image>
					<view class="item-info">
						<view class="info-name u-line-1">{{ item.goods_name }}</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="loadStatus" bgColor="#ECECEC" margin-bottom="20" v-if="historyList.length > 9"></u-loadmore>
		</scroll-view>
		<u-empty text="暂无足迹" mode="list" color="#000" margin-top="240" v-if="!historyList.length"></u-empty>
    </view>
</template>

<script>
export default {
    data() {
        return {
			historyList:  [
				{
					"goods_id": 13,
					"goodsbrowse_time": "2020-06-28 15:45:56",
					"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092121142556524.jpg",//商品主图
					"goods_name": "变频风冷无霜 独立双循环 LED显示 对开门冰箱（白色)",//商品名称
					"store_id": 1,//店铺id
					"store_name": "官方自营店铺",//店铺名
					"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"//店铺头像
				},
				{
					"goods_id": 13,
					"goodsbrowse_time": "2020-06-28 15:45:56",
					"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092121142556524.jpg",//商品主图
					"goods_name": "变频风冷无霜 独立双循环 LED显示 对开门冰箱（白色)",//商品名称
					"store_id": 1,//店铺id
					"store_name": "官方自营店铺",//店铺名
					"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"//店铺头像
				},
				{
					"goods_id": 13,
					"goodsbrowse_time": "2020-06-28 15:45:56",
					"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092121142556524.jpg",//商品主图
					"goods_name": "变频风冷无霜 独立双循环 LED显示 对开门冰箱（白色)",//商品名称
					"store_id": 1,//店铺id
					"store_name": "官方自营店铺",//店铺名
					"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"//店铺头像
				},
				{
					"goods_id": 13,
					"goodsbrowse_time": "2020-06-28 15:45:56",
					"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092121142556524.jpg",//商品主图
					"goods_name": "变频风冷无霜 独立双循环 LED显示 对开门冰箱（白色)",//商品名称
					"store_id": 1,//店铺id
					"store_name": "官方自营店铺",//店铺名
					"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"//店铺头像
				},
				{
					"goods_id": 13,
					"goodsbrowse_time": "2020-06-28 15:45:56",
					"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092121142556524.jpg",//商品主图
					"goods_name": "变频风冷无霜 独立双循环 LED显示 对开门冰箱（白色)",//商品名称
					"store_id": 1,//店铺id
					"store_name": "官方自营店铺",//店铺名
					"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"//店铺头像
				},
				{
					"goods_id": 12,
					"goodsbrowse_time": "2020-06-28 15:44:41",
					"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092121050988491.jpg",
					"goods_name": "扬子(YAIR) 小2匹 冷暖 自动清洗 定频空调柜机",
					"store_id": 1,
					"store_name": "官方自营店铺",
					"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"
				},
				{
					"goods_id": 11,
					"goodsbrowse_time": "2020-06-28 15:38:11",
					"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092120564717575.jpg",
					"goods_name": "1.5匹 变频 智能 二级能效极速侠 空调挂机",
					"store_id": 1,
					"store_name": "官方自营店铺",
					"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"
				},
				{
					"goods_id": 9,
					"goodsbrowse_time": "2020-06-28 15:36:27",
					"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092120480147477.jpg",
					"goods_name": "长虹（CHANGHONG）39M1 39英寸 窄边高清液晶电视（黑色）",
					"store_id": 1,
					"store_name": "官方自营店铺",
					"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"
				},
				{
					"goods_id": 8,
					"goodsbrowse_time": "2020-06-28 15:36:06",
					"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092120445748551.jpg",
					"goods_name": "先锋(Pioneer)LED-39B700S 39英寸 高清 网络 智能 液晶电视",
					"store_id": 1,
					"store_name": "官方自营店铺",
					"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"
				},
				{
					"goods_id": 10,
					"goodsbrowse_time": "2020-06-24 16:14:29",
					"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092120493430154.jpg",
					"goods_name": "39英寸64位24核安卓智能平板液晶电视（黑色）",
					"store_id": 1,
					"store_name": "官方自营店铺",
					"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"
				},
				{
					"goods_id": 28,
					"goodsbrowse_time": "2020-06-23 17:07:45",
					"goods_image": "http://deming.test/uploads/home/store/goods/1/1_2017092202022516767.jpg",
					"goods_name": "南极人(NanJiren)纯棉床单四件套全棉床上用品婚庆被套4件套",
					"store_id": 1,
					"store_name": "官方自营店铺",
					"store_avatar": "http://deming.test/uploads/home/store/1/1_2020062410413137159.png"
				}
			],
			page: 1, // 默认1
			loadStatus: 'loadmore',
			timer: true,
		};
    },
    onLoad() {
		this.getBrowseList();
	},
    methods: {
		async getBrowseList () {
			const res = await this.$u.api.getBrowseList({ page: this.page });
			this.timer = false;
			if(res.errCode == 0) {
				this.historyList = res.data.storeInfo;
			}
			return res.data.storeInfo.length;
		},
		reachBottom() {
			if(!this.timer) return false;
			this.loadStatus = "loading";
			this.page++;
			this.getBrowseList({page: this.page}).then(length => {
				if(length == 0) {
					this.page--;
					this.status = 'nomore';
				} else {
					this.status = '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 {
		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 10rpx 20rpx 0;
				.item-title {
					display: flex;
					align-items: center;
					> image {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						margin-right: 19rpx;
					}
					> view {
						font-size: 24rpx;
						color: rgba(51,51,51,1);
					}
				}
				.item-image {
					margin: 20rpx 0 17rpx;
					width: 180rpx;
					height: 140rpx;
					border-radius: 10rpx;
				}
				.item-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.info-name {
						margin-right: 10rpx;
						flex: 1;
						font-size: 22rpx;
						color: rgba(51,51,51,1);
					}
					> image {
						width: 37rpx;
						height: 8rpx;
					}
				}
			}
		}
		
	}
}
</style>
