myc/pages/merchant/compileCommodity.vue

<template>
	<view class="content">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="content-money">
			<view class="money-box">
				<view class="goback-box" @click="toBack"><image class="goback" src="../../static/img/back.png" mode=""></image></view>
				<view class="header">商品管理</view>
				<view class="bianj" @click="nav('/pages/merchant/commodity')">完成</view>
			</view>
		</view>
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
					<!-- 已上架 -->
					<view class="commodity-box">
						<view class="goodsList-item flex" v-for="(lss, ind) in tabItem.orderList" @click="check('item', ind, tabIndex)">
							<view class="iconfont iconroundcheckfill checkbox" :class="{ checked: lss.checked }"></view>
							<view class="img"><image :src="lss.image" mode="scaleToFill"></image></view>
							<view class="text">
								<view class="spname">{{ lss.store_name }}</view>
								<view class="price">
									<text>￥</text>
									{{ lss.price }}
								</view>
							</view>
							<view class="yishou">已售{{ lss.sales }}</view>
						</view>
						<uni-load-more :status="tabItem.loadingType"></uni-load-more>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="btn flex">
			<view class="checkAllbox" @click="check('all')">
				<view class="iconfont iconroundcheckfill checkalls" :class="{ checked: allChecked }"></view>
				<view class="quanxuan">全选</view>
			</view>
			<view class="btn-box flex"><view class="button" style="margin-left: 20rpx;" @click="submit()">下架</view></view>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

export default {
	data() {
		return {
			tabCurrentIndex: 0,
			allChecked: false,
			navList: [
				{
					state: 0,
					text: '全部',
					orderList: [],
					loadingType: 'more',
					page: 1, //当前页面
					limit: 10 //每次信息条数
				},
				{
					state: 0,
					text: '已上架',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页面
					limit: 10 //每次信息条数
				},
				{
					state: 0,
					text: '已下架',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页面
					limit: 10 //每次信息条数
				}
			]
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		changeTab(index) {
			this.tabCurrentIndex = index.detail.current;
			const obj = this;
			// obj.getDataList(obj.indexList[obj.classIndex], 'tabChange');
			obj.allChecked = true;

			if (obj.indexList[obj.classIndex].dataList.length > 0) {
				let list = obj.indexList[obj.classIndex].dataList;

				for (let i = 0; i < list.length; i++) {
					if (!list[i].checked) {
						obj.allChecked = false;
						break;
					}
				}
			} else {
				obj.allChecked = false;
			}
		},
		loadData() {
			
		},
		// 点击返回 我的页面
		toBack() {
			uni.navigateBack({});
		},
		choose() {
			this.isBian = !this.isBian;
		},
		nav(url) {
			uni.navigateTo({
				url
			});
		},
		check(type, index, erindex) {
			const obj = this;
			if (type === 'item') {
				const list = obj.indexList[erindex].dataList;
				list[index].checked = !list[index].checked;
				if (list[index].checked) {
					if (!obj.chose.includes(list[index].id)) {
						obj.chose.push(list[index].id);
					}
				} else {
					if (obj.chose.includes(list[index].id)) {
						// console.log(list[index].id);
						let aid = list[index];
						console.log(aid);
						let index = obj.chose.indexOf(aid);
						obj.chose.splice(index, 1);
					}
				}
				this.allChecked = true;
				for (let i = 0; i < list.length; i++) {
					if (!list[i].checked) {
						this.allChecked = false;
					}
				}
			} else {
				const checked = !obj.allChecked;
				const list = obj.indexList[obj.classIndex].dataList;
				list.forEach(item => {
					item.checked = checked;
				});
				obj.allChecked = checked;
				if (obj.allChecked) {
					list.forEach(item => {
						if (!obj.chose.includes(item.id)) {
							obj.chose.push(item.id);
						}
					});
				} else {
					list.forEach(item => {
						if (obj.chose.includes(item.id)) {
							let index = obj.chose.indexOf(item.id);
							obj.chose.splice(index, 1);
						}
					});
				}
			}
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	background: $page-color-base;
	height: 100%;
}

.swiper-box {
	height: calc(100% - 40px);
}

.list-scroll-content {
	height: 100%;
}
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background: #ffffff;
}
.money-box {
	height: 80rpx;
	color: #000000;
	text-align: center;
	font-size: 35rpx;
	position: relative;
	background-color: #ffffff;
	.header {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 80rpx;
		font-size: 32rpx;
		font-weight: 700;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bianj {
		position: absolute;
		right: 28rpx;
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFangSC;
		font-weight: 400;
		color: #333333;
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.goback-box {
		position: absolute;
		left: 24rpx;
		top: 0;
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.goback {
		z-index: 100;
		width: 20rpx;
		height: 34rpx;
	}
}

.commodity-box {
	width: 750rpx;
	.goodsList-item {
		position: relative;
		justify-content: flex-start;
		width: 100%;
		padding: 30rpx;
		.checkbox {
			display: flex;
			flex-shrink: 0;
			font-size: 32rpx;
			color: #eeeeee;
			background: #eeeeee;
			border-radius: 50px;
		}
		.img {
			margin-left: 28rpx;
			width: 146rpx;
			height: 146rpx;
			background: #f0f0f0;
			border-radius: 10px;
			image {
				width: 146rpx;
				height: 146rpx;
			}
		}
		.text {
			position: relative;
			padding-left: 35rpx;
			height: 146rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			.spname {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.earning {
				width: 275rpx;
				padding: 7rpx;
				margin-top: 12rpx;
				background: #fee1d7;
				border-radius: 5rpx;
				text-align: center;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fc4141;
				line-height: 1;
			}
			.price {
				margin-top: 19rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ff0000;
				font-size: 36rpx;
				text {
					font-size: 24rpx;
				}
			}
		}
		.yishou {
			position: absolute;
			right: 29rpx;
			bottom: 40rpx;
		}
	}
}

.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 12px;
		color: $font-color-dark;
		position: relative;

		&.current {
			color: $base-color;

			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 2px solid $base-color;
			}
		}
	}
}
.input {
	position: fixed;
	bottom: 38rpx;
	left: 30rpx;
	text-align: center;
	width: 674rpx;
	height: 88rpx;
	background: #52c696;
	border-radius: 44rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	line-height: 88rpx;
	color: #ffffff;
}
.btn {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 100rpx;
	justify-content: space-between;
	padding: 0 39rpx 0 54rpx;
	line-height: 1;
	border-top: 1rpx solid #f0f0f0;
	.checkAllbox {
		display: flex;
		.checkalls {
			font-size: 32rpx;
			color: #eeeeee;
			background: #eeeeee;
			border-radius: 50px;
		}
		.quanxuan {
			margin-left: 16rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #1d2023;
		}
	}
	.button {
		width: 160rpx;
		height: 64rpx;
		background: #52c696;
		border-radius: 32rpx;
		color: #ffffff;
		text-align: center;
		line-height: 64rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}
}
</style>