book-shop/pages-mine/pages/collection.vue

<template>
	<view class="collection">
		<view class="topEditOpar" v-if="list.length>0">
			<view class="check" v-if="isEdit">
				<u-checkbox shape="circle" active-color="#ed3f14" icon-size="16"  v-model="checkAllStauts" @change="checkAllGoods"></u-checkbox>
				<text>全选</text>
			</view>
			<view class="text opartxt" v-if="isEdit" @click="delCollection">
				移出收藏夹
			</view>
			<view class="text" v-else @click="isEdit = true">
				管理
			</view>
		</view>
		<view class="list">
			<view class="list_item" v-for="(item, index) in list" :key="index">
				<view class="selcheck" v-if="isEdit">
					<u-checkbox shape="circle" active-color="#ed3f14" icon-size="16" :disabled="goods.status==2"
						v-model="item.checked"></u-checkbox>
				</view>
				<view class="infobox">
					<collection :data="item"></collection>
				</view>
				
				
			</view>
			
		</view>
		<NoData v-if="finish&&list.length<1"></NoData>
		<LoadMore v-else :loadtype="{page, loading, finish}"></LoadMore>
	</view>
</template>

<script>
	var _self;
	import collection from '@/pages/mall/components/collection.vue';
	export default {
		components: {
			collection
		},
		data() {
			return {
				isEdit:false,
				checkAllStauts: false,
				
				page:1,
				loading:false,
				finish:false,
				list: [],
				pullDown:false,
			};
		},
		computed: {
			checkAll() {
				if (this.list.length < 1) {
					this.checkAllStauts = false;
					return;
				}
				this.list.map(item => (item.checked ? (this.totalPrice += Number(item.amount) * item.nums) : 0));
				if (this.list.filter(item => item.checked).length == this.list.length) {
					this.checkAllStauts = true;
				} else {
					this.checkAllStauts = false;
				}
			},
		},
		onLoad(ops) {
			// if (ops.isSelect) this.isSelect = ops.isSelect;
			_self = this;
			this.getCollectionList();
		},
		onReachBottom(){
			this.getCollectionList();
		},
		onPullDownRefresh(){
			this.pullDown = true;
			this.reData();
		},
		methods: {
			// 刷新数据
			reData(){
				this.page=1;
				this.finish=false;
				this.list=[];
				this.getCollectionList();
			},
			getCollectionList(){
				if(this.finish)return false;
				if(this.loading)return false;
				this.$u.api.collectionListAjax(this.page).then(({code,data})=>{
					console.log(code,data)
					if(this.pullDown){
						uni.stopPullDownRefresh();
						this.pullDown = false;
					}
					this.loading = false;
					let returnData = data.data;
					if(code==1){
						if(data.last_page<=data.current_page){
							this.finish = true;
						}
						returnData.forEach(e => {
							e.checked = false;
						})
						if(data.current_page==1){
							this.list = returnData;
						}else{
							this.list=this.list.concat(returnData);
						}
					}else{
						this.finish = true;
					}
					this.page++;
				}).catch(()=>{
					this.loading = false;
					this.finish = true;
					if(this.pullDown){
						uni.stopPullDownRefresh();
						this.pullDown = false;
					}
				})
			},
			
			checkAllGoods() {
				if (this.checkAllStauts) {
					this.list.forEach(item => (item.checked = false));
				} else {
					this.list.forEach(item => (item.checked = true));
				}
				// this.$forceUpdate();
			},
			
			// 移出收藏夹
			delCollection(){
				let selItems = this.list.filter(item => item.checked);
				if(selItems.length >0){
					uni.showModal({
						title: '提示',
						content: '确认要移出收藏夹？',
						success: function(res) {
							if (res.confirm) {
								_self.comfirmF(selItems)
							}
						}
					});
				}else{
					this.isEdit = false;
				}
			},
			comfirmF(selItems){			
				let ids = selItems.map(e=>e.id);
				console.log(ids);
				this.$u.api.delCollectionAjax(ids.toString()).then(({code,msg})=>{
					this.$u.toast(msg);
					if(code==1){
						this.reData();
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
.collection {
	padding: 20rpx;
	min-height: 100vh;
	box-sizing: border-box;
}
.list {
	background-color: #fff;
	border-radius: 20rpx;
}
.list_item{
	display: flex;
	align-items: center;
	.infobox{
		flex: 1;
	}
}
.selcheck{
	width: 80rpx;
	padding-left: 20rpx;
}
.topEditOpar{
	display: flex;
	padding: 10rpx 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	.text{
		flex: 1;
		text-align: right;
		font-weight: bold;
		font-size: 32rpx;
	}
	.opartxt{
		color: $app-theme-deep-color;
	}
}
</style>