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" v-if="id1 == 0">
			<custom-waterfalls-flow :value="list" style="width: 90%; margin: auto">
				<view class="item" @click="itemBtn(index)" style="position: relative" v-for="(item, index) in list" :key="index" slot="slot{{index}}">
					<view class="title_pubu">
						{{ item.title }}
						<view class="" style="position: relative">
							<view class="box_checkbox">
								<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange(index)">
									<u-checkbox :customStyle="{ marginBottom: '8px' }" shape="circle"></u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
					</view>
				</view>
			</custom-waterfalls-flow>
			<view class="guanLi">
				<view style="display: flex; align-items: center" v-if="guanLiShow">
					<view style="margin-right: 260rpx">
						<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange(index)">
							<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="guanLiShow = !guanLiShow">
					<view class="left_jl">
						<uni-icons type="gear" size="20"></uni-icons>
					</view>
					<view class="left_jl">{{ guanLiShow ? '退出管理' : '管理' }}</view>
				</view>
			</view>
		</view>
		<!-- 收藏 -->
		<view class="pubu" v-if="id1 == 1">
			2
			<!-- <custom-waterfalls-flow :value="list" style="width: 90%; margin: auto">
				<view class="item" style="position: relative" v-for="(item, index) in list" :key="index" slot="slot{{index}}">
					<view class="title_pubu">
						{{ item.title }}
					</view>
				</view>
			</custom-waterfalls-flow> -->
			<view class="guanLi">
				<view style="display: flex; align-items: center" v-if="guanLiShow">
					<view style="margin-right: 260rpx">
						<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange(index)">
							<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="guanLiShow = !guanLiShow">
					<view class="left_jl">
						<uni-icons type="gear" size="20"></uni-icons>
					</view>
					<view class="left_jl">{{ guanLiShow ? '退出管理' : '管理' }}</view>
				</view>
			</view>
		</view>
		<!-- 喜欢 -->
		<view class="pubu" v-if="id1 == 2">
			3
			<!-- <custom-waterfalls-flow :value="list" style="width: 90%; margin: auto">
				<view class="item" style="position: relative" v-for="(item, index) in list" :key="index" slot="slot{{index}}">
					<view class="title_pubu">
						{{ item.title }}
					</view>
				</view>
			</custom-waterfalls-flow> -->
			<view class="guanLi">
				<view style="display: flex; align-items: center" v-if="guanLiShow">
					<view style="margin-right: 260rpx">
						<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange(index)">
							<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="guanLiShow = !guanLiShow">
					<view class="left_jl">
						<uni-icons type="gear" size="20"></uni-icons>
					</view>
					<view class="left_jl">{{ guanLiShow ? '退出管理' : '管理' }}</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 class="bt2">删除</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id1: 0,
			deleteShow: false,
			guanLiShow: false,
			tabImg: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/tab.png',
			listTab: [
				{
					name: '我的投稿',
					tabid: 1
				},
				{
					name: '我的收藏',
					tabid: 2
				},
				{
					name: '我的喜欢',
					tabid: 3
				}
			],
			list: [
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy1.png',
					title: '传统捏泥人',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy2.png',
					title: '青龙宫',
					desc: '描述描述描述描述描述描述描述描述1'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy3.png',
					title: '火把节',
					desc: '11'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy9.png',
					title: '老物件',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy4.png',
					title: '林后青龙宫',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy10.png',
					title: '书籍',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy9.png',
					title: '老物件',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy4.png',
					title: '林后青龙宫',
					desc: '描述描述描述描述描述描述描述描述2'
				},
				{
					image: 'https://huli-app.wenlvti.net/app_static/minnanhun/image/mn_jy10.png',
					title: '书籍',
					desc: '描述描述描述描述描述描述描述描述2'
				}
			],
			checkboxValue1: [],
			// 基本案列数据
			checkboxList1: [
				{
					disabled: false
				}
			]
		};
	},
	onLoad(o) {
		this.id1 = o.id;
	},
	methods: {
		TabBtn(index) {
			// console.log(index);
			this.id1 = index.index;
		},
		checkboxChange(n, index) {
			// console.log(index, 'index');
			console.log('change', n);
		},
		itemBtn(i) {
			// console.log(i, 'i');
		},
		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 {
	height: auto;
	width: 100%;
	background-color: #f8f8f8;
}
.box_tab {
	margin: 45rpx 32rpx 0 32rpx;
}
.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: sticky;
	bottom: 0;
	left: 0;
	z-index: 99;
	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>