xiongmao/pages/my/my-collection/my-collection.vue

<!-- 我的收藏 -->
<template>
	<view class="wrap">

		<view class="header">
			<view class="header-top">
				<image src="../../../static/return.png" class="return" @tap="back" mode="widthFix"></image>
				<view class="header-title">
					我的收藏(314)
				</view>
				<view class="header-msg">
					管理 完成
				</view>
			</view>
			<view class="header-center">
				<view class="tab-list">
					<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList"
						:key="index" @click="checked(index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="header-bottom">
				<view class="header-item" @tap="collectionTime">
					收藏时间
					<image src="../../../static/sanjiao-bottom.png"
						:class="[isShowCollectionTime == false ? 'sanjiao' : 'sanjiaoSelect']" mode="widthFix"></image>
				</view>
				<view class="header-item" @tap="allCategories">
					全部分类
					<image src="../../../static/sanjiao-bottom.png"
						:class="[isShowAllCategories == false ? 'sanjiao' : 'sanjiaoSelect']" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="listCount">
			<label class="listItem listItemInformation listItemVideo" v-for="(item, index) in list" :key="index" :data-index="index"
				@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+item.right+'rpx'">
				<view class="content">
					<view class="checkBox" @click="cutTabClick(item)">
						<image
							:src="item.select ? '../../../static/circle-active.png' : '../../../static/circle.png'" />
					</view>
					<!-- 宝贝 -->
					<view class="product-item" v-if="isActive === 0">
						<image src="../../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
						<view class="product-sidebar">
							<view class="product-name">
								bodachel运动冲锋衣男女三合一外套秋冬加绒西藏可拆卸防风滑
							</view>
							<view class="product-bottom">
								<view class="product-price">
									￥<text>394.00</text>
								</view>
								<view class="product-bottom-row">
									<text>￥34.00</text>
									<button type="default">
										<image src="../../../static/add-icon.png" mode=""></image>
									</button>
								</view>
							</view>
						</view>
					</view>
					<!-- 咨询 -->
					<view class="information-item" v-if="isActive === 1">
						<view class="information-sidebar">
							<view class="information-name">
								互联网工作者加班突然猝死是否能理赔呢？
							</view>
							<view class="information-msg">
								3.2万人浏览
							</view>
						</view>
						<image src="../../../static/img-4.png" class="information-img" mode="aspectFill"></image>
					</view>
					<!-- 视频 -->
					<view class="video-item" v-if="isActive === 2">
						<video id="myVideo"
							src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
							enable-danmu controls style="width: 100%;height: 262rpx;border-radius: 10rpx;"></video>
						<view class="video-item-row">
							<view class="video-item-name">
								医生开讲:亚健康到底是什么？
							</view>
							<text class="video-item-time">10:10</text>
						</view>
					</view>
				</view>
			</label>
		</view>

		<view class="footer">
			<!-- 全选按钮 -->
			<label class="check-row" @tap="allSelectFn">
				<image :src="allSelect ? '../../../static/circle-active.png' : '../../../static/circle.png'" />
				<text>
					全选
				</text>
			</label>
			<view class="footer-sidebar">
				<button type="default" class="submit-btn" @tap="del">删除</button>
			</view>
		</view>

		<!-- 收藏时间-弹窗 -->
		<view v-show="isShowCollectionTime">
			<view class="mask" @tap="closeCollectionTime"></view>
			<view class="collectionTime-window">
				<view class="collectionTime-item">
					7天内
				</view>
				<view class="collectionTime-item">
					30天内
				</view>
				<view class="collectionTime-item">
					90天内
				</view>
				<view class="collectionTime-item">
					半年前
				</view>
				<view class="collectionTime-item">
					一年前
				</view>
			</view>
		</view>
		<!-- 收藏时间-弹窗  -->


		<!-- 全部分类-弹窗 -->
		<view v-show="isShowAllCategories">
			<view class="mask" @tap="closeAllCategories"></view>
			<view class="allCategories-window">
				<view class="allCategories-item">
					<image src="../../../static/categories-1.png" mode="heightFix"></image>
					地产本草
				</view>
				<view class="allCategories-item">
					<image src="../../../static/categories-2.png" mode="heightFix"></image>
					草本茗茶
				</view>
				<view class="allCategories-item">
					<image src="../../../static/categories-3.png" mode="heightFix"></image>
					干菌蔬果
				</view>
				<view class="allCategories-item">
					<image src="../../../static/categories-4.png" mode="heightFix"></image>
					五谷杂粮
				</view>
				<view class="allCategories-item">
					<image src="../../../static/categories-5.png" mode="heightFix"></image>
					水产干货
				</view>
				<view class="allCategories-item">
					<image src="../../../static/categories-6.png" mode="heightFix"></image>
					调味佳料
				</view>
				<view class="allCategories-item">
					<image src="../../../static/categories-7.png" mode="heightFix"></image>
					地产畜禽
				</view>
				<view class="allCategories-item">
					<image src="../../../static/categories-8.png" mode="heightFix"></image>
					生态饮品
				</view>
				<view class="allCategories-item">
					<image src="../../../static/categories-9.png" mode="heightFix"></image>
					养生器皿
				</view>
				<view class="allCategories-item">
					<image src="../../../static/categories-10.png" mode="heightFix"></image>
					地产良酿
				</view>
			</view>
		</view>
		<!-- 全部分类-弹窗  -->

		<!-- 确认删除-弹窗 -->
		<view v-show="isShowDel">
			<view class="mask-other" @tap="closeDel"></view>
			<view class="window">
				<view class="window-top">
					确定要删除所选商品吗？
				</view>
				<view class="window-bottom">
					<button type="default" @tap="closeDel">取消</button>
					<button type="default">确定</button>
				</view>
			</view>
		</view>
		<!-- 确认删除-弹窗  -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//选项卡
				isActive: 0,
				navList: [{
					index: 0,
					title: '宝贝',
				}, {
					index: 1,
					title: "资讯",
				}, {
					index: 2,
					title: "视频",
				}],

				//全部分类-弹窗
				isShowAllCategories: false,

				//收藏时间-弹窗
				isShowCollectionTime: false,

				//商品列表
				list: [{
					index: 0,
					title: '',
					select: true
				}, {
					index: 0,
					title: '',
					select: false
				}],

				allSelect: false,

				//确认删除-弹窗
				isShowDel: false
			}
		},
		methods: {
			//选项卡
			checked(index) {
				this.isActive = index
			},

			/**
			 * 收藏时间-弹窗
			 */
			collectionTime() {
				this.isShowCollectionTime = true;
			},
			closeCollectionTime() {
				this.isShowCollectionTime = false;
			},

			/**
			 * 全部分类-弹窗
			 */
			allCategories() {
				this.isShowAllCategories = true;
			},
			closeAllCategories() {
				this.isShowAllCategories = false;
			},


			//多选
			cutTabClick(item) {
				this.active = item;
				//然后通过这个属性判断是否选中点亮和取消
				item.select = !item.select;

				let allSelect = true;
				for (let i = 0; i < this.list.length; i++) {
					if (!this.list[i].select) {
						allSelect = false;
						break;
					}
				}
				this.allSelect = allSelect;
			},


			// 全选或者反选 
			allSelectFn(e) {
				const newAllSelect = !this.allSelect;
				this.allSelect = newAllSelect;
				this.list = this.list.map(car => ({
					...car,
					select: newAllSelect
				}));
			},


			/**
			 * 删除-弹窗
			 */
			del() {
				this.isShowDel = true;
			},
			closeDel() {
				this.isShowDel = false;
			},
			
			
			/**
			 * 返回上一页
			 */
			back() {
				uni.navigateBack({
					delta: 1,
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	@import "./my-collection.css";
</style>