yixiang/pageC/collect-list.vue

<template>
	<view class="content">
		<u-navbar title="我的收藏" height="88rpx" :placeholder="true" :autoBack="true">
			<view slot="right" class="u-nav-slot">
				<text @click="show_manager = !show_manager">管理</text>
			</view>
		</u-navbar>
		<view class="tabs">
			<u-tabs :list="tabs" :scrollable="false" lineWidth="0" keyName="name" :current="current" @click="changetabs"
				:inactiveStyle="{color: '#999999',fontSize: '30rpx',}"
				:activeStyle="{color: '#00B0B0',fontSize: '30rpx',}"></u-tabs>
		</view>
		<view class="list">
			<u-swipe-action>
				<u-checkbox-group v-model="select_all" placement="column" @change="selectitem">
					<view class="list-item hflex acenter" v-for="(item,index) in list" :key="index"
						@click="toinfo(item)">
						<u-checkbox v-if="show_manager" activeColor="#57C3C2" shape="circle"
							:customStyle="{marginBottom: '8px'}" :name="item.id"></u-checkbox>
						<u-swipe-action-item :options="options" @click="tocancel(item)">
							<view class="hflex acenter" style="flex:1" v-if="current != 3">
								<image :src="item.image" mode="aspectFill"></image>
								<view class="img-right vflex jbetween">
									<text class="name text_hide2">{{current == 4 ? item.name : item.title}}</text>
									<view class="num hflex acenter" v-if="current != 4">
										<text>{{item.created_at}}</text>
										<text
											style="padding-left: 20rpx;">{{item.like_count || 0}}喜欢·{{item.comment_count || 0}}评论</text>
									</view>
									<text class="price" v-else>{{item.price}}积分</text>
								</view>
							</view>
							<view class="hflex acenter" style="flex:1" v-if="current == 3">
								<image :src="item.images[0]" mode="aspectFill" v-if="item.images.length>0"></image>
								<view class="img-right vflex jbetween">
									<text class="name text_hide2">{{item.content}}</text>

									<view class="num hflex acenter">
										<text>{{item.created_at}}</text>
										<text
											style="padding-left: 20rpx;">{{item.like_count || 0}}喜欢·{{item.comment_count || 0}}评论</text>
									</view>
								</view>
							</view>
						</u-swipe-action-item>
					</view>
				</u-checkbox-group>
			</u-swipe-action>
		</view>
		<view style="height: 186rpx;" v-if="show_manager"></view>
		<view class="bottom hflex acenter jbetween" v-if="show_manager">
			<u-checkbox-group placement="column">
				<u-checkbox :checked="quanxuan" @change="selectall" activeColor="#57C3C2" shape="circle"
					:customStyle="{marginBottom: '8px'}" label="全选"></u-checkbox>
			</u-checkbox-group>
			<view class="btn">取消收藏</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				last_page: 1,
				current: 0,
				tabs: [{
						id: 'info',
						name: '资讯'
					},
					{
						id: 'article',
						name: '文章'
					},
					{
						id: 'video',
						name: '视频'
					},
					{
						id: 'post',
						name: '论坛'
					},
					{
						id: 'integral_goods',
						name: '商品'
					},
				],
				options: [{
					text: '取消收藏',
					style: {
						backgroundColor: '#FF5038'
					}
				}],
				show_manager: false,
				select_all: [],
				quanxuan: false
			}
		},
		onLoad() {
			this.getlist()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.getlist()
			} else {
				uni.$u.toast('已经到底了')
				return
			}
		},
		methods: {
			toinfo(item) {
				if (this.current != 4) {
					uni.navigateTo({
						url: '/pageA/info-detail?id=' + item.id + '&type=' + this.tabs[this.current].id
					})
				} else {
					uni.navigateTo({
						url: '/pageB/good-detail?id=' + item.id
					})
				}

			},
			/* 全选 */
			selectall() {
				this.quanxuan = !this.quanxuan
				console.log(this.quanxuan);
				if (this.quanxuan) {
					this.select_all = []
					for (var i = 0; i < this.list.length; i++) {
						this.select_all.push(this.list[i].id)
					}
				} else {
					this.select_all = []
				}
			},
			/* 选择 */
			selectitem(e) {
				this.select_all = e
				if (this.select_all.length == this.list.length) {
					this.quanxuan = true
				} else {
					this.quanxuan = false
				}
			},
			/* 取消收藏 */
			tocancel(item) {},
			/* 切换tab */
			changetabs(e) {
				this.current = e.index
				this.select_all = []
				this.quanxuan = false
				this.list = []
				this.getlist()
			},
			getlist() {
				var that = this
				$api.req({
					url: 'summary',
					method: 'GET',
					data: {
						is_page: 1,
						page: that.page,
						limit: 10,
						type: 'collect',
						source_type: that.tabs[that.current].id
					}
				}, function(res) {
					if (res.code == 10000) {
						that.list = that.list.concat(res.data.list)
						that.last_page = res.data.last_page
					}

				})
			},
		},
	}
</script>

<style lang="scss">
	.content::v-deep {
		background: #FFFFFF;
		position: relative;

		.bottom {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			padding: 12rpx 28rpx 80rpx;
			box-sizing: border-box;
			z-index: 29;

			.btn {
				width: 184rpx;
				height: 72rpx;
				background: #00B0B0;
				border-radius: 36rpx;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}

		.list {
			width: 100%;
			box-sizing: border-box;
			padding: 28rpx 28rpx;

			.list-item {
				margin: 0 0 32rpx;

				image {
					width: 200rpx;
					height: 128rpx;
					border-radius: 6rpx;
					margin: 0 20rpx 0 0;
				}

				.img-right {
					height: 128rpx;

					.name {
						max-width: 452rpx;
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #333333;
						padding: 0 0 14rpx;
					}

					.num {
						font-size: 20rpx;
						font-family: SFPro, SFPro;
						font-weight: 400;
						color: #666666;
					}

					.price {
						font-size: 28rpx;
						font-family: JDZhengHT, JDZhengHT;
						font-weight: 400;
						color: #FF3333;
					}
				}

				.u-checkbox {
					margin: 0 32rpx 0 0;
				}
			}
		}

		.tabs {
			width: 100%;
			padding: 18rpx 0;
			border-bottom: 2rpx solid #F5F5F5;
		}

		.u-nav-slot {
			text {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>