groupon-wx/pages/user/view-log.vue

<!-- 浏览记录 -->
<template>
	<view class="page_box">
		<view class="head_box u-flex u-row-right" v-show="!isEmpty">
			<button class="edit-btn u-reset-button" @tap="onSet">{{ isEdit ? '完成' : '编辑' }}</button>
		</view>
		<view class="content_box">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
				<u-checkbox-group @change="checkboxGroupChange" activeColor="#e9b461">
					<view class="collect-list u-flex u-flex-1" v-for="f in browseList" :key="f.id">
						<u-checkbox v-if="isEdit" :name="f.goods_id" shape="circle" v-model="f.checked"></u-checkbox>
						<shopro-mini-card
							:image="f.goods.image"
							:title="f.goods.title"
							:price="f.goods.price"
							:originPrice="f.goods.original_price"
							:subtitle="f.goods.subtitle"
							@click="$Router.push({ path: '/pages/goods/detail', query: { id: f.goods_id } })"
						></shopro-mini-card>
					</view>
				</u-checkbox-group>
				<!-- 缺省页 -->
				<shopro-empty
					v-if="isEmpty"
					:image="$IMG_URL + '/imgs/empty/empty_goods.png'"
					tipText="暂无浏览记录"
					btnText="去首页逛逛"
					@click="$Router.pushTab('/pages/index/index')"
				></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</scroll-view>
		</view>
		<view class="foot_box ">
			<view class="tools-box u-flex u-row-between u-flex-1" v-show="isEdit && !isEmpty">
				<u-checkbox shape="circle" activeColor="#e9b461" @change="onAllSel" v-model="isAllSel"><text>全选</text></u-checkbox>
				<button class="u-reset-button close-btn" @tap="deleteLog">删除</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			isEmpty: false, //无数据
			isEdit: false, //是否编辑
			isAllSel: false, //是否全选
			selList: [], //选中列表
			browseList: [],
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1
		};
	},
	computed: {},
	onLoad() {
		this.getbrowseList();
	},
	methods: {
		// 单选
		checkboxGroupChange(e) {
			this.selList = e;
			this.isAllSel = this.browseList.every(item => item.checked);
		},
		// 编辑
		onSet() {
			this.isEdit = !this.isEdit;
		},
		// 全选
		onAllSel(e) {
			this.isAllSel = e.value;
			this.selList = [];
			this.browseList.forEach(item => {
				e.value && this.selList.push(item.goods_id);
				this.$set(item, 'checked', e.value);
			});
		},
		// 历史记录
		getbrowseList() {
			let that = this;
			let list = [];
			that.loadStatus = 'loading';
			that.$http('user.viewList', {
				page: that.currentPage
			}).then(res => {
				if (res.code === 1) {
					list = res.data.data;
					list.map(item => {
						that.$set(item, 'checked', false);
					});
					that.browseList = [...that.browseList, ...list];
					that.isEmpty = !that.browseList.length;
					that.lastPage = res.data.last_page;
					that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
				}
			});
		},
		// 删除足迹
		deleteLog() {
			let that = this;
			const { browseList, selList } = this;
			that.$http(
				'user.viewDelete',
				{
					goods_ids: selList
				},
				'删除中...'
			).then(res => {
				if (res.code === 1) {
					if (that.isAllSel) {
						that.browseList = [];
						that.isEmpty = true;
					} else {
						that.browseList = browseList.filter(f => !selList.includes(f.goods_id));
					}
				}
			});
		},
		// 加载更多
		loadMore() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getbrowseList();
			}
		}
	}
};
</script>

<style lang="scss">
.head_box {
	height: 70rpx;
	padding: 0 30rpx;
	.count-box {
		font-size: 26rpx;
		color: #999;

		.all-num {
			color: #a8700d;
		}
	}

	.edit-btn {
		background: none;
		font-size: 26rpx;
		color: #a8700d;
		margin: 0;
		padding: 20rpx;
	}
}

.collect-list {
	padding: 30rpx 20rpx;
	background: #fff;
	width: 750rpx;
	margin-bottom: 20rpx;

	.goods-radio {
		transform: scale(0.7);
		margin-right: 20rpx;
	}
}

.tools-box {
	height: 100rpx;
	width: 750rpx;
	padding: 0 20rpx;
	background: #fff;

	.check-all {
		font-size: 26rpx;

		.check-all-radio {
			transform: scale(0.7);
		}
	}

	.close-btn {
		width: 200rpx;
		line-height: 70rpx;
		background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
		box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
		border-radius: 35rpx;
		padding: 0;
		margin: 0;
		color: rgba(#fff, 0.9);
	}
}
</style>