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="add-btn"></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,
			};
		},
		// computed: {
		//   filteredServices() {
		//     return this.services.filter(service => {
		//       // 根据搜索文本过滤
		//       if (this.title && !service.title.includes(this.title)) {
		//         return false
		//       }
		//       // 根据当前标签过滤
		//       switch (this.currentTab) {
		//         case 0: // 草稿
		//           return service.state === 2
		//         case 1: // 审核中
		//           return service.state === 1
		//         case 2: // 已上架
		//           return service.state === 2
		//         case 3: // 下架
		//           return service.state === 3
		//         case 4: // 驳回
		//           return service.state === 4
		//         default:
		//           return true
		//       }
		//     })
		//   }
		// },
		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}`,
				});

			},
			addService() {
				uni.navigateTo({
					url: `/pages/shop/add-service`,
				});
			},
			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(232, 16, 30, 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(209, 15, 19, 0.2);
	}

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

	.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;
			}
		}

	}
</style>