mrr.sj.front/pages/artisan/service-list.vue

<template>
	<view class="service-page">
		<custom-navbar title="服务列表" :showBack="true" backgroundColor="#FFFFFF" :show-headle="true"
			headleSrc="/static/images/add_icon.png" @onHeadleClick="addService"></custom-navbar>
		<view class="flexed">
			<!-- 搜索框 -->
			<view class="search-box">
				<input type="text" class="search-inp" placeholder="请输入你的服务名称" placeholder-class="placeholder"
					v-model="title" @confirm="getServicesList" />
				<image src="/static/home/search.png" class="search-icon" mode="aspectFit" @click="getServicesList">
				</image>
			</view>

			<!-- 状态标签 -->
			<view class="tab-container">
				<view v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: currentTab === index }]"
					@click="switchTab(index, tab.id)">
					{{ tab.text }}
				</view>
			</view>
		</view>

		<!-- 服务列表 -->
		<view class="service-list" v-if="services.length != 0 || !services">
			<view v-for="(item, index) in services" :key="index" class="service-item"
				@touchstart="touchStart($event, index)" @touchmove="touchMove" @touchend="touchEnd"
				@mousedown="mouseDown($event, index)" @mousemove="mouseMove" @mouseup="mouseUp" @mouseleave="mouseUp">
				<!-- 左滑删除按钮 -->
				<view class="delete-btn" :style="{ transform: `translateX(${item.slideX || 0}rpx)` }"
					@click="deleteService(item)" v-if="item.state == 0">
					<text>删除</text>
				</view>

				<!-- 服务内容 -->
				<view class="service-content" :style="{ transform: `translateX(${item.slideX || 0}rpx)` }">
					<!-- 服务图片 -->
					<image :src="item.photo[0]" mode="aspectFill" class="service-image" />

					<!-- 服务信息 -->
					<view class="service-info">
						<view class="service-title text-overflow">{{ item.title }}</view>
						<view class="service-price">
							<text class="price-symbol">¥</text>
							<text class="price-value">{{ item.server_price }}</text>
							<text class="price-unit">元</text>
						</view>
					</view>

					<!-- 状态标签 -->
					<view :class="['status-tag', 'state' + item.state]">
						<text class="status-text">{{
							item.state == 0
								? "草稿"
								: item.state == 1
									? "审核中"
									: item.state == 2
										? "已上架"
										: item.state == 3
											? "下架"
											: item.state == 4
												? "驳回"
												: ""
						}}</text>
					</view>

					<!-- 编辑按钮 -->
					<view class="btns">
						<view class="view-btn" @click="viewRemove(item)" v-if="item.state == 2">
							<image src="/static/images/remove_icon.png" class="view-icon" mode="aspectFit"></image>
							<text class="view-text">下架</text>
						</view>
						<view class="view-btn" @click="viewList(item)" v-if="item.state == 3">
							<image src="/static/images/list_icon.png" class="view-icon" mode="aspectFit"></image>
							<text class="view-text">上架</text>
						</view>
						<view class="view-btn" @click="viewEdit(item)">
							<image src="/static/images/edit_active.png" class="view-icon" mode="aspectFit"></image>
							<text class="view-text">编辑</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 暂无数据 -->
		<view class="service-nothings" v-else>
			<text class="nothings-text">暂无数据...</text>
		</view>

		<!-- 加载更多 -->
		<view v-if="hasMore" class="load-more">
			<text>已加载全部</text>
		</view>

		<!-- 添加服务 -->
		<view class="serviceBtn-box" @click="addService">
			<view class="serviceBtn-card">
				<text class="serviceBtn-text">添加服务</text>
			</view>

		</view>

		<!-- 服务分类选择弹窗 -->
		<view class="category-popup-mask" v-if="showCategoryPopup" @click="closeCategoryPopup">
			<view class="category-popup" @click.stop>
				<view class="category-popup-header">
					<text class="category-popup-title">选择服务类型</text>
					<view class="category-popup-close" @click="closeCategoryPopup">
						<text class="category-popup-close-icon">&times;</text>
					</view>
				</view>
				<view class="category-popup-body">
					<!-- 左侧一级分类 -->
					<scroll-view scroll-y class="category-left">
						<view v-for="(item, index) in firstClassList" :key="item.id"
							:class="['category-left-item', { active: selectedFirstIndex === index }]"
							@click="selectFirstClass(index, item)">
							<text class="category-left-text">{{ item.title }}</text>
						</view>
					</scroll-view>
					<!-- 右侧二级分类 -->
					<scroll-view scroll-y class="category-right">
						<view v-if="secondClassList.length === 0" class="category-empty">
							<text class="category-empty-text">暂无子分类</text>
						</view>
						<view v-for="item in secondClassList" :key="item.id"
							:class="['category-right-item', { selected: selectedSecondId === item.id }]"
							@click="selectSecondClass(item)">
							<text class="category-right-text">{{ item.title }}</text>
							<image class="category-icon"
								src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b6fa6b5b-b5c1-45e3-9372-74ade548f76b.png"
								mode="widthFix" v-if="!selectedSecondId || selectedSecondId !== item.id"></image>
							<image class="category-icon"
								src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/f0f97cad-03f6-4363-abb5-58d3176cfa81.png"
								mode="widthFix" v-else></image>
						</view>
					</scroll-view>
				</view>
				<!-- 底部按钮 -->
				<view class="category-popup-footer">
					<view class="category-popup-btn category-popup-btn-cancel" @click="closeCategoryPopup">
						<text>取消</text>
					</view>
					<view class="category-popup-btn category-popup-btn-confirm" @click="confirmCategory">
						<text>确认</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from "../../utils/request";
export default {
	data() {
		return {
			title: "",
			state: 2,
			currentTab: 0,
			tabs: [{
				id: 2,
				text: "已上架",
			},
			{
				id: 1,
				text: "审核中",
			},
			{
				id: 3,
				text: "下架",
			},
			{
				id: 0,
				text: "草稿",
			},
			{
				id: 4,
				text: "驳回",
			},
			],
			services: [],
			hasMore: false,
			startX: 0,
			moveX: 0,
			currentIndex: -1,
			// 分类选择相关
			showCategoryPopup: false,
			firstClassList: [],
			secondClassList: [],
			selectedFirstIndex: -1,
			selectedSecondId: null,
		};
	},
	onLoad() {
		this.getServicesList();
	},
	methods: {
		getServicesList() {
			let url = "/user/sjserverlist";
			request
				.post(url, {
					state: this.state,
					title: this.title
				})
				.then((res) => {
					if (res.state == 1) {
						this.services = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				});
		},
		switchTab(index, id) {
			this.currentTab = index;
			this.state = id;
			this.getServicesList();
		},
		viewRemove(item) {
			uni.showModal({
				title: "提示",
				content: "确定要下架该服务吗？",
				success: (res) => {
					if (res.confirm) {
						request
							.post("/user/serveronoff", {
								id: item.id,
								state: 3
							})
							.then((res) => {
								if (res.state == 1) {
									uni.showToast({
										title: "下架成功",
										icon: "none",
									});
									this.getServicesList(0);
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none",
									});
								}
							});
					}
				},
			});
		},
		viewList(item) {
			request
				.post("/user/serveronoff", {
					id: item.id,
					state: 2
				})
				.then((res) => {
					if (res.state == 1) {
						uni.showToast({
							title: "上架成功",
							icon: "none",
						});
						this.getServicesList(0);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				});
		},
		viewEdit(item) {
			uni.navigateTo({
				url: `/pages/shop/add-service?id=${item.id}&state=${item.state}&first_class_id=${item.first_class_id}`,
			});

		},
		addService() {
			const userId = uni.getStorageSync('userId') || '';
			request.post("/sj/firstclass", { id: userId }).then((res) => {
				if (res.data && res.data.length > 0) {
					this.firstClassList = res.data;
					this.selectedFirstIndex = 0;
					this.selectedSecondId = null;
					this.secondClassList = [];
					this.showCategoryPopup = true;
					this.loadSecondClass(res.data[0].id);
				} else {
					uni.showToast({
						title: "暂无分类数据",
						icon: "none",
					});
				}
			});
		},
		loadSecondClass(firstId) {
			request.post("/user/secondclass", {
				id: firstId,
			}).then((res) => {
				this.secondClassList = res.data || [];
			});
		},
		selectFirstClass(index, item) {
			if (this.selectedFirstIndex === index) return;
			this.selectedFirstIndex = index;
			this.selectedSecondId = null;
			this.loadSecondClass(item.id);
		},
		selectSecondClass(item) {
			this.selectedSecondId = item.id;
		},
		confirmCategory() {
			if (this.selectedFirstIndex < 0) {
				uni.showToast({
					title: "请选择服务分类",
					icon: "none",
				});
				return;
			}
			if (this.secondClassList.length > 0 && !this.selectedSecondId) {
				uni.showToast({
					title: "请选择服务子类",
					icon: "none",
				});
				return;
			}
			const firstItem = this.firstClassList[this.selectedFirstIndex];
			let url = `/pages/shop/add-service?first_class_id=${firstItem.id}`;
			if (this.selectedSecondId) {
				url += `&second_class_id=${this.selectedSecondId}`;
			}
			uni.navigateTo({ url });
			this.closeCategoryPopup();
		},
		closeCategoryPopup() {
			this.showCategoryPopup = false;
			this.firstClassList = [];
			this.secondClassList = [];
			this.selectedFirstIndex = -1;
			this.selectedSecondId = null;
		},
		deleteService(item) {
			uni.showModal({
				title: "提示",
				content: "确定要删除该服务吗？",
				success: (res) => {
					if (res.confirm) {
						request.post("/user/serverdel", {
							id: item.id
						}).then((res) => {
							if (res.state == 1) {
								uni.showToast({
									title: "删除成功",
									icon: "none",
								});
								this.getServicesList(0);
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none",
								});
							}
						});
					}
				},
			});
		},
		touchStart(e, index) {
			if (this.currentTab != 3) return;
			e.preventDefault();
			e.stopPropagation();
			if (e.touches && e.touches[0]) {
				this.startX = e.touches[0].clientX;
				this.currentIndex = index;
			}
		},
		touchMove(e) {
			if (this.currentTab != 3) return;
			if (this.currentIndex === -1) return;
			e.preventDefault();
			e.stopPropagation();
			if (e.touches && e.touches[0]) {
				this.moveX = e.touches[0].clientX - this.startX;
				if (this.moveX > 0) {
					this.moveX = 0;
				}
				if (this.moveX < -160) {
					this.moveX = -160;
				}
				this.$set(this.services[this.currentIndex], "slideX", this.moveX);
			}
		},
		touchEnd(e) {
			if (this.currentTab != 3) return;
			if (this.currentIndex === -1) return;
			e.preventDefault();
			e.stopPropagation();
			if (this.moveX < -80) {
				this.$set(this.services[this.currentIndex], "slideX", -160);
			} else {
				this.$set(this.services[this.currentIndex], "slideX", 0);
			}
			this.currentIndex = -1;
		},
		mouseDown(e, index) {
			if (this.currentTab != 3) return;
			e.preventDefault();
			e.stopPropagation();
			this.startX = e.clientX;
			this.currentIndex = index;
		},
		mouseMove(e) {
			if (this.currentTab != 3) return;
			if (this.currentIndex === -1) return;
			e.preventDefault();
			e.stopPropagation();
			this.moveX = e.clientX - this.startX;
			if (this.moveX > 0) {
				this.moveX = 0;
			}
			if (this.moveX < -160) {
				this.moveX = -160;
			}
			this.$set(this.services[this.currentIndex], "slideX", this.moveX);
		},
		mouseUp(e) {
			if (this.currentTab != 3) return;
			if (this.currentIndex === -1) return;
			e.preventDefault();
			e.stopPropagation();
			if (this.moveX < -80) {
				this.$set(this.services[this.currentIndex], "slideX", -160);
			} else {
				this.$set(this.services[this.currentIndex], "slideX", 0);
			}
			this.currentIndex = -1;
		},
		resetSlide() {
			this.services.forEach((item, index) => {
				if (index !== this.currentIndex) {
					this.$set(item, "slideX", 0);
				}
			});
		},
	},
};
</script>

<style scoped lang="less">
.service-page {
	padding-bottom: 120rpx;
}

/* 搜索框样式 */
.search-box {
	width: 750rpx;
	background-color: #ffffff;
	border-radius: 8rpx;
	padding: 24rpx;
	box-sizing: border-box;
	position: relative;
}

.flexed {
	position: sticky;
	top: 88rpx;
	left: 0;
	z-index: 999;
}

.search-inp {
	width: 700rpx;
	height: 68rpx;
	background-color: #eef4fa;
	border-radius: 34rpx;
	padding: 0 70rpx 0 48rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.placeholder {
	color: #999999;
}

.search-icon {
	width: 32rpx;
	height: 32rpx;
	position: absolute;
	right: 56rpx;
	top: 50%;
	transform: translateY(-50%);
}

/* 标签栏样式 */
.tab-container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	padding: 24rpx 24rpx 30rpx;
	box-sizing: border-box;
}

.tab-item {
	flex: 1;
	text-align: center;
	font-size: 30rpx;
	color: #666666;
	padding: 16rpx 0;
	position: relative;
}

.tab-item.active {
	color: #000000;
	font-weight: 500;
}

.tab-item.active::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 32rpx;
	height: 6rpx;
	background-color: #FF4767;
	border-radius: 3rpx;
}

/* 服务列表样式 */
.service-list {
	margin: 24rpx 24rpx 0;
}

.service-item {
	height: 248rpx;
	position: relative;
	background-color: #ffffff;
	border-radius: 20rpx;
	margin-bottom: 32rpx;
	box-sizing: border-box;
	overflow: hidden;
	touch-action: pan-y pinch-zoom;
}

.service-item:last-child {
	margin-bottom: 0;
}

.service-content {
	width: 100%;
	height: 100%;
	padding: 24rpx;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box;
	background-color: #ffffff;
	transition: transform 0.3s ease;
	position: relative;
	z-index: 1;
}

.delete-btn {
	position: absolute;
	right: -160rpx;
	top: 0;
	width: 160rpx;
	height: 100%;
	background-color: #FF4767;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 28rpx;
	transition: transform 0.3s ease;
	z-index: 2;
}

.service-item:active .service-content,
.service-item:active .delete-btn {
	transform: none;
}

.service-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 24rpx;
	margin-right: 16rpx;
	background-color: rgba(0, 0, 0, 0.05);
}

.service-info {
	height: 200rpx;
	width: 350rpx;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.service-title {
	font-size: 28rpx;
	color: #000000;
	margin-bottom: 24rpx;
	font-weight: 500;
}

.service-price {
	display: flex;
	align-items: baseline;
}

.price-symbol {
	font-size: 24rpx;
	color: #FF4767;
	font-weight: 500;
}

.price-value {
	font-size: 28rpx;
	color: #FF4767;
	font-weight: 500;
	margin: 0 4rpx;
}

.price-unit {
	font-size: 24rpx;
	color: #FF4767;
}

.status-tag {
	position: absolute;
	top: 0rpx;
	right: 0rpx;
	border-radius: 0 0 0 20rpx;
	width: 90rpx;
	height: 38rpx;
	line-height: 38rpx;
	text-align: center;
	box-sizing: border-box;
	font-size: 24rpx;
}

/* 已上架 */
.status-tag.state2 {
	background-color: rgba(255, 71, 103, 0.2);
}

.status-tag.state2 .status-text {
	color: #FF4767;
}

/* 审核中 */
.status-tag.state1 {
	background-color: rgba(40, 209, 137, 0.2);
}

.status-tag.state1 .status-text {
	color: #28d189;
}

/* 草稿/撤回 */
.status-tag.state0,
.status-tag.state3,
.status-tag.state4 {
	background-color: rgba(255, 71, 103, 0.2);
}

.status-tag.state0 .status-text,
.status-tag.state3 .status-text,
.status-tag.state4 .status-text {
	color: #FF4767;
}

.btns {
	position: absolute;
	bottom: 26rpx;
	right: 24rpx;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
}

.view-btn {
	display: flex;
	align-items: center;
	margin-left: 24rpx;
}

.view-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 8rpx;
}

.view-text {
	font-size: 20rpx;
	color: #666666;
}

.load-more {
	text-align: center;
	padding: 20rpx 0;
	color: #999999;
	font-size: 24rpx;
}

.service-item {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.service-content,
.delete-btn {
	will-change: transform;
}

.service-nothings {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	padding: 280rpx 0 0;
}

.nothings-text {
	font-size: 32rpx;
	font-weight: 500;
	color: #999999;
	text-align: center;
	font-style: italic;
}

.add-btn {
	height: 140rpx;
}

/* 平台特定样式 */
/* #ifdef H5 */
.service-container {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

/* #endif */

/* #ifdef APP-PLUS */
.service-image {
	border: 1rpx solid #eeeeee;
}

.flexed {
	top: calc(var(--status-bar-height) + 88rpx);
}

/* #endif */

/* #ifdef MP-WEIXIN */
.search-box input {
	box-sizing: border-box;
}

.flexed {
	top: calc(var(--status-bar-height) + 88rpx);
}

.service-item {
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

/* #endif */


.serviceBtn-box {
	position: fixed;
	left: 0px;
	bottom: 0px;
	right: 0px;
	padding: 20rpx 12rpx 34rpx 12rpx;
	z-index: 999;
	background-color: #fff;

	.serviceBtn-card {
		width: 100%;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		background-color: #FF4767;
		border-radius: 16px;

		.serviceBtn-text {
			font-size: 14px;
			font-weight: 500;
			color: #ffffff;
		}
	}
}

/* 分类选择弹窗样式 */
.category-popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 2000;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.category-popup {
	width: 100%;
	height: 70vh;
	background-color: #ffffff;
	border-radius: 32rpx 32rpx 0 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	.category-popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 32rpx;
		position: relative;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.category-popup-title {
		font-size: 34rpx;
		font-weight: 600;
		color: #333333;
	}

	.category-popup-close {
		position: absolute;
		right: 32rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.category-popup-close-icon {
		font-size: 48rpx;
		color: #999999;
		line-height: 1;
	}

	.category-popup-body {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.category-left {
		width: 220rpx;
		background-color: #f5f5f5;
		height: 100%;
	}

	.category-left-item {
		padding: 30rpx 24rpx;
		text-align: center;
		position: relative;
	}

	.category-left-item.active {
		background-color: #ffffff;
	}

	.category-left-item.active::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 40rpx;
		background-color: #FF4767;
		border-radius: 0 3rpx 3rpx 0;
	}

	.category-left-text {
		font-size: 28rpx;
		color: #333333;
	}

	.category-left-item.active .category-left-text {
		color: #FF4767;
		font-weight: 500;
	}

	.category-right {
		flex: 1;
		background-color: #ffffff;
		height: 100%;
	}

	.category-right-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 32rpx;
		/* 移除 border-bottom: 1rpx solid #f5f5f5; */
	}

	.category-right-item.selected .category-right-text {
		color: #FF4767;
		font-weight: 500;
	}

	.category-right-text {
		font-size: 28rpx;
		color: #333333;
		flex: 1;
	}

	.category-icon {
		width: 36rpx;
		height: 36rpx;
		margin-left: 16rpx;
	}

	.category-empty {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}

	.category-empty-text {
		font-size: 28rpx;
		color: #999999;
	}

	.category-popup-footer {
		display: flex;
		padding: 24rpx 32rpx;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		border-top: 1rpx solid #f0f0f0;
		background-color: #ffffff;
	}

	.category-popup-btn {
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 44rpx;
		font-size: 30rpx;
	}

	.category-popup-btn-cancel {
		background-color: #f5f5f5;
		margin-right: 24rpx;
	}

	.category-popup-btn-cancel text {
		color: #666666;
	}

	.category-popup-btn-confirm {
		background-color: #FF4767;
	}

	.category-popup-btn-confirm text {
		color: #ffffff;
	}
}
</style>