MinNan/user_fenbao/myLike.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="我的" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<view class="box_tab">
			<u-tabs
				@click="TabBtn"
				:duration="200"
				:list="listTab"
				:lineWidth="25"
				:lineHeight="12"
				:current="id1"
				lineColor="#4E7198"
				:lineColor="`url(${tabImg}) 100% 100%`"
				:activeStyle="{
					color: '#4E7198',
					fontSize: '34rpx'
				}"
			></u-tabs>
		</view>
		<!-- 投稿 -->
		<view class="pubu">
			<!-- 瀑布流 -->
			<u-checkbox-group v-model="deleteList" placement="column" @change="checkboxChange">
				<uv-waterfall ref="waterfall" v-model="list" :add-time="10" left-gap="10" right-gap="10" :column-gap="columnGap" @changeList="changeList">
					<!-- 第一列数据 -->
					<template v-slot:list1>
						<!-- 为了磨平部分平台的BUG，必须套一层view -->
						<view>
							<view @click="ceshi(index)" v-for="(item, index) in list1" :key="item.id" class="waterfall-item">
								<view class="waterfall-item__image" :style="[imageStyle(item)]">
									<image :src="item.image" mode="widthFix" style="border-radius: 25rpx 60rpx 0rpx 30rpx" :style="{ width: item.width + 'px' }"></image>
								</view>
								<view class="waterfall-item__ft">
									<view class="waterfall-item__ft__title">
										<text class="value">{{ item.title }}</text>
										<view v-if="checkboxShow" class="" style="position: relative">
											<view class="box_checkbox">
												<u-checkbox :value="item.id" :name="item.id" :customStyle="{ marginBottom: '8px' }" shape="circle"></u-checkbox>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- </u-checkbox-group> -->
						</view>
					</template>
					<!-- 第二列数据 -->
					<template v-slot:list2>
						<!-- 为了磨平部分平台的BUG，必须套一层view -->
						<view>
							<!-- <u-checkbox-group v-model="deleteList" placement="column" @change="checkboxChange2"> -->
							<view @click="ceshi(index)" v-for="(item, index) in list2" :key="item.id" class="waterfall-item">
								<view class="waterfall-item__image" :style="[imageStyle(item)]">
									<image :src="item.image" mode="widthFix" style="border-radius: 25rpx 60rpx 0rpx 30rpx" :style="{ width: item.width + 'px' }"></image>
								</view>
								<view class="waterfall-item__ft">
									<view class="waterfall-item__ft__title">
										<text class="value">{{ item.title }}</text>
										<view v-if="checkboxShow" class="" style="position: relative">
											<view class="box_checkbox">
												<u-checkbox :value="item.id" :name="item.id" :customStyle="{ marginBottom: '8px' }" shape="circle"></u-checkbox>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</uv-waterfall>
			</u-checkbox-group>
			<!-- 底部删除管理 -->
			<view class="guanLi">
				<view style="display: flex; align-items: center" v-if="checkboxShow">
					<view style="margin-right: 260rpx">
						<u-checkbox-group @change="deleteAll" v-model="checkboxValue2" placement="column">
							<u-checkbox :customStyle="{ marginBottom: '8px' }" shape="circle" label="全部"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="sc" @click="deleteShow = true">
						<uni-icons type="trash" color=" #ffffff" size="20"></uni-icons>
						<view class="">删除</view>
					</view>
				</view>
				<view class="guanLi2" @click="checkboxShow = !checkboxShow">
					<view class="left_jl">
						<uni-icons type="gear" size="20"></uni-icons>
					</view>
					<view class="">
						<view v-if="checkboxShow" class="left_jl">退出管理</view>
						<view v-else class="left_jl">管理</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 删除弹层 -->
		<u-popup :show="deleteShow" @close="close" mode="center" customStyle="width:600rpx;padding: 30rpx;" round="20rpx">
			<view style="text-align: center">确认是否删除所选内容?</view>
			<view class="bt_box">
				<view class="bt1" @click="deleteShow = false">取消</view>
				<view @click="deleteBtn" class="bt2">删除</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
let that;
export default {
	data() {
		return {
			id1: 0,
			main_body_id: '',
			deleteShow: false /* 弹层 */,
			checkboxShow: false /*多选框  */,
			tabImg: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tab.png',
			listTab: [
				{
					name: '我的投稿',
					tabid: 1
				},
				{
					name: '我的收藏',
					tabid: 2
				},
				{
					name: '我的喜欢',
					tabid: 3
				}
			],
			list: [],
			list1: [], // 瀑布流第一列数据
			list2: [], // 瀑布流第二列数据
			columnGap: 10,

			checkboxValue2: [],
			deleteList: [] /*, 要删除的 */,
			n: [],
			ad: []
		};
	},
	onLoad(o) {
		that = this;
		this.id1 = o.id;
		this.main_body_id = this.$db.get('main_body_id');
		this.getUserLike(this.id1);
	},
	computed: {
		imageStyle(item) {
			return (item) => {
				const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
				const w = v / 2;
				const rate = w / item.w;
				const h = rate * item.h;
				return {
					width: w + 'px',
					height: h + 'px'
				};
			};
		}
	},
	methods: {
		deleteAll(a) {
			if (a.length > 0) {
				let aa = [];
				this.list.forEach((item, index) => {
					aa.push(item.id);
				});
				this.deleteList = aa;
			} else {
				this.deleteList = [];
			}
		},
		// 导航
		TabBtn(index) {
			that.list = [];
			that.$refs.waterfall.clear();
			that.list1 = [];
			that.list2 = [];
			this.id1 = index.index;
			this.getUserLike(index.index);
		},
		getUserLike(i) {
			if (i == 2) {
				// 我得喜欢
				this.$api.getUserLike(
					{
						main_body_id: this.main_body_id
					},
					function (res) {
						// // 假设res.data是一个包含对象的数组
						res.data.forEach((item) => {
							item.checked = false;
						});

						that.list = res.data;
						// console.log(that.list, '555555555555');
					}
				);
			}

			if (i == 1) {
				this.$api.getUserCollect(
					{
						main_body_id: this.main_body_id
					},
					function (res) {
						console.log('收藏', res);
						that.list = res.data;
					}
				);
			} else {
				that.list = [];
			}
		},
		changeList(e) {
			// console.log(e, '瀑布流');
			this[e.name].push(e.value);
		},
		ceshi(i) {
			console.log(i, 111111111111);
		},
		// 选框

		checkboxChange(n) {
			console.log('change', n);
			this.deleteList = [...this.deleteList, ...n];
		},
		checkboxChange2(n) {
			console.log('change', n);
			this.deleteList = [...this.deleteList, ...n];
		},
		// 删除
		deleteBtn() {
			//取消点赞
			if (this.id1 == 2) {
				this.$api.unLike(
					{
						main_body_id: this.main_body_id,
						content_ids: this.deleteList
					},
					function (res) {
						if (res.code == 1) {
							that.$common.successToShow('删除成功');
							that.deleteShow = false;
							that.list = [];
							that.$refs.waterfall.clear();
							that.list1 = [];
							that.list2 = [];
							that.getUserLike(2);
						} else {
							that.$common.errorToShow('请选择要删除的内容');
						}
					}
				);
			}
			// 取消收藏
			if (this.id1 == 1) {
				this.$api.uncollect(
					{
						main_body_id: this.main_body_id,
						content_ids: this.deleteList
					},
					function (res) {
						if (res.code == 1) {
							that.$common.successToShow('删除成功');
							that.deleteShow = false;
							that.list = [];
							that.$refs.waterfall.clear();
							that.list1 = [];
							that.list2 = [];
							that.getUserLike(1);
						} else {
							that.$common.errorToShow('删除失败请稍后在试');
						}
					}
				);
			}
		},

		close() {
			this.deleteShow = false;
		}
	}
};
</script>

<style>
/deep/.u-tabs__wrapper__nav__item.data-v-48634e29 {
	padding: 0 40rpx !important;
}
/deep/.u-tabs__wrapper__nav__line.data-v-48634e29 {
	bottom: 16rpx !important;
}
/deep/.u-tabs__wrapper__nav__item.data-v-48634e29 {
	align-items: end !important;
}
.box_checkbox {
	position: absolute;
	top: -50rpx;
	left: 20rpx;
	z-index: 99;
}
.box {
	height: auto;
	width: 100%;
	padding-bottom: 80rpx;
	background-color: #f8f8f8;
}
.box_tab {
	margin: 45rpx 32rpx 0 32rpx;
}
.waterfall-item {
	margin-bottom: 20rpx;
}
.waterfall-item__ft {
	position: relative;
}
.waterfall-item__ft__title {
	width: 100%;
	height: 65rpx;
	position: absolute;
	bottom: 0;
	left: 0;
	line-height: 65rpx;
	background-color: #ca5642;
	font-size: 30rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 0 0 10rpx 10rpx;
}
.pubu {
	margin: 10rpx 32rpx 0 32rpx;
}
.title_pubu {
	width: 100%;
	height: 65rpx;
	line-height: 65rpx;
	background-color: #ca5642;
	font-size: 30rpx;
	text-align: center;
	color: #ffffff;
	position: absolute;
	bottom: 0;
	left: 0;
}
.box_checkbox {
	position: absolute;
	top: -50rpx;
	left: 20rpx;
	z-index: 99;
}
.guanLi {
	display: flex;
	justify-content: flex-end;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 99;
	width: 96%;
	background: #ffffff;
}
.guanLi2 {
	display: flex;
	align-items: center;

	height: 80rpx;
	/* width: 160rpx; */
	background-color: #efefef;
}
.sc {
	display: flex;
	align-items: center;
	height: 80rpx;
	width: 160rpx;
	padding-left: 28rpx;
	color: #ffffff;
	background-color: #ca5642;
}
.bt_box {
	display: flex;
	margin-top: 50rpx;
	justify-content: space-around;
}
.bt1 {
	width: 244rpx;
	height: 78rpx;
	border: 1px solid #312520;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: black;
}
.bt2 {
	width: 244rpx;
	height: 78rpx;
	background: #ca5642;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: #ffffff;
}
</style>