mh/pages/tabbar/shai.vue

<template>
	<view class="box">
		<view v-if="canTi == 1">
			<view class="box_ul">
				<view class="box_ul_li " v-for="(item, index) in boxList" :key="index" @click="item.flag = !item.flag">
					<view class="s-bt flex">
						<view class="s-tx"><image :src="item.box_tx" mode="aspectFill"></image></view>
						<view class="s-mc">{{ item.box_mc }}</view>
						<!-- <view class="s-sj">{{ item.box_sj}}</view> -->
						<view class="s-sj">{{ item.box_sj }}</view>
						<view class="s-qc"></view>
					</view>
					<view class="s-zw">{{ item.box_zw }}</view>
					<view class="s-img-list ">
						<view class="s-img-box" v-for="(item2, index) in item.box_img" :key="index" @click="item.flag = !item.flag">
							<image :src="item2" mode="aspectFill" @click="lookImg(item2)"></image>
						</view>
						<view class="s-qc"></view>
					</view>
				</view>
			</view>
			<div class="shai-btn" @click="shaitu()"><image src="/static/image/new_home/shaitu.png" mode="widthFix"></image></div>
		</view>
		<view class="jjqd" v-else>敬请期待</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			canTi: '',
			i: 0, //
			page: 1,
			isAll: false, //
			pages: null, //
			totalNumber: 0, //总数量
			boxList: [] //盒子列表
		};
	},
	watch: {
		boxList: {
			handler(val) {
				let totalNumber = 0;

				this.isAll = val.every(item => item.flag);
				if (val.length == 0) this.isAll = false;
				val.forEach(item => {
					if (item.flag) {
						totalNumber++;
					}
				});
				this.totalNumber = totalNumber;
			},
			deep: true //true 深度监听
		}
	},
	methods: {
		lookImg(url) {
			uni.previewImage({
				urls: [url],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		//获取晒图集合
		getShaiList() {
			this.$api.sList({ status: this.i + 1, page: this.page, msg: '数据加载中' }).then(res => {
				if (res.code === 1) {
					res.data.data.forEach(item => {
						item.flag = false;
					});
					this.pages = res.data.last_page;
					this.boxList = this.page == 1 ? res.data.data : [...this.boxList, ...res.data.data];
				}
			});
			this.$api.checkSwitch().then(({ data }) => {
				this.canTi = data;
			});
		},
		shaitu() {
			uni.navigateTo({ url: '/pages/me/shaitu' });
		},
		isti() {
			this.$api.checkSwitch().then(({ data }) => {
				this.canTi = data;
				if (data == 0) {
					this.tabs = ['提现', '团队', '推广'];
				}
			});
		}
	},
	onShow() {
		this.isti();
		this.getShaiList();
	},
	onReachBottom() {
		console.log(121);
		if (this.page < this.pages) {
			this.page++;
			this.getShaiList();
		}
	}
};
</script>

<style lang="scss">
.shai-btn {
	position: fixed;
	bottom: 70px;
	right: 10px;
	$size: 70rpx;
	width: $size;
	height: $size;
	border-radius: 50%;
}

.s-bt {
	display: block;
}
.s-tx {
	height: 80rpx;
	width: 80rpx;
	float: left;
	image {
		border-radius: 40rpx;
	}
}

.s-mc {
	float: left;
	line-height: 80rpx;
	padding-left: 30rpx;
	font-size: 26rpx;
}
.s-sj {
	float: right;
	line-height: 80rpx;
	padding-right: 10rpx;
	color: #999;
}
.s-qc {
	clear: both;
}

.s-zw {
	padding: 20rpx 0;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	color: var(--mainColor);
	font-size: 16px;
	text-align: justify;
	line-height: 1.6;
}

.s-img-box {
	float: left;

	image {
		width: 190rpx;
		height: 120rpx;
		margin-bottom: 16rpx;
		margin-left: 16rpx;
	}
	text {
		color: #000000;
		font-size: 26rpx;
	}
}

.box_head {
	position: sticky;
	top: 88rpx;
	left: 0;
	background: #fafafa;
	z-index: 2021;
	width: 100%;
	.box_head_li {
		flex: 1;
		font-size: 30rpx;
		height: 90rpx;
		font-weight: bold;
	}
	.active {
		color: #f6af32;
	}
}
.box_ul {
	padding: 0 30rpx 98rpx 30rpx;
	.box_ul_li {
		padding: 30rpx;
		margin-bottom: 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		.box_ul_li_img {
			image {
				width: 168rpx;
				height: 168rpx;
				border-radius: 10rpx;
			}
			margin-right: 20rpx;
		}
		.box_ul_li_main {
			flex: 1;
		}
		.box_ul_li_name {
			font-size: 28rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.box_ul_li_price {
			text {
				color: #cf271b;
				font-size: 28rpx;
			}
			image {
				width: 44rpx;
				height: 44rpx;
			}
			margin: 15rpx 0;
		}
		.box_ul_li_time {
			color: #999999;
			font-size: 22rpx;
		}
	}
}
.box_footer {
	height: 98rpx;
	z-index: 20;
	position: fixed;
	bottom: 50px;
	width: 100%;
	padding: 0 30rpx;
	background: #ffffff;
	.box_footer_all {
		image {
			width: 44rpx;
			height: 44rpx;
			margin-right: 10rpx;
		}
		text {
			color: #000000;
			font-size: 28rpx;
		}
	}
	.box_footer_li {
		color: #ffffff;
		width: 220rpx;
		height: 78rpx;
		border-radius: 39rpx;
		font-size: 30rpx;
		margin-left: 30rpx;
		&:first-child {
			background: #fa7e48;
		}
		&:last-child {
			background: #f6af32;
		}
	}
}
.jjqd {
	margin-top: 50rpx;
	text-align: center;
	color: #000000;
	font-size: 52rpx;
}
</style>