front-end/hdApp/src/admin/itemClass/pull.vue

<template>
	<view class="app-content">
		<view v-if="!$util.isEmpty(list.data)" style="padding-bottom:120upx;">
			<view class="sort-list-wrap">
				<block v-for="(item, index) in list.data" :key="item.id">
					<view
						class="sort-item"
						:class="{
							dragging: draggedIndex === index,
							'target-position': targetIndex === index && isDragging && targetIndex !== draggedIndex
						}"
						:style="{
							transform: transformStyle(index),
							transition: isDragging ? 'none' : 'transform 0.3s ease',
							zIndex: draggedIndex === index ? 999 : targetIndex === index && isDragging ? 888 : 1
						}"
					>
						<!-- 可拖拽的内容区域 -->
					<view
						class="item-content"
						:data-index="index"
						:data-id="item.id"
						@touchstart="dragStart"
						@touchmove="dragMove"
						@touchend="dragEnd"
						style="width: fit-content;"
					>
						<view class="item-name">{{ item.name }}</view>
						<view class="item-index">第{{ index + 1 }}个，按住名字可以拖拽</view>
					</view>

						<!-- 操作按钮区域 -->
						<view class="buttons-area">
							<!-- 置顶 -->
							<view
								v-if="index > 0"
								class="move-btn move-btn-top"
								:class="{ disabled: isOperating }"
								@click.stop="topFn(item.id)"
								title="置顶"
							>
								<zui-svg-icon icon="general-top-line" color="#fff" :width="20" :height="20" />
							</view>

							<!-- 置底 -->
							<view
								v-if="index < list.data.length - 1"
								class="move-btn move-btn-bottom"
								:class="{ disabled: isOperating }"
								@click.stop="bottomFn(item.id)"
								title="置底"
							>
								<zui-svg-icon icon="general-bottom-line" color="#fff" :width="20" :height="20" />
							</view>

							<!-- 上移 -->
							<text
								v-if="index > 0"
								class="move-btn move-btn-up"
								:class="{ disabled: isOperating }"
								@click.stop="upFn(item.id)"
								title="上移一位"
							>↑</text>

							<!-- 下移 -->
							<text
								v-if="index < list.data.length - 1"
								class="move-btn move-btn-down"
								:class="{ disabled: isOperating }"
								@click.stop="downFn(item.id)"
								title="下移一位"
							>↓</text>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view v-else>
			<AppWrapperEmpty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
		</view>
	</view>
</template>
<script>
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import { productList, batchChangeMore } from '@/api/product'
import list from '@/mixins/list'

export default {
	name: "more",
	components: {
		AppWrapperEmpty
	},
	mixins: [list],
	data() {
		return {
			// 拖拽相关状态
			draggedIndex: -1,
			draggedItem: null,
			dragOffsetY: 0,
			isDragging: false,
			itemHeight: 160, // 列表项高度，单位upx（实际高度=160upx）
			startY: 0,
			scrollTop: 0, // 页面滚动高度
			originalOrder: [], // 原始顺序，用于拖拽失败时恢复
			targetIndex: -1, // 目标交换位置的索引
			isOperating: false, // 防止快速点击操作按钮
			totalNum: 0 // 总数量
		};
	},
	onPageScroll(e) {
		// 拖拽期间禁止更新滚动高度
		if (!this.isDragging) {
			this.scrollTop = e.scrollTop;
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		
		// 响应 transform 样式变化
		transformStyle(index) {
			if (index === this.draggedIndex) {
				return 'translateY(0upx)';
			}
			return 'translateY(0upx)';
		},

		// 拖拽开始
		dragStart(e) {
			if (this.isDragging) return;

			this.isDragging = true;

			const index = parseInt(e.currentTarget.dataset.index);
			if (isNaN(index) || index < 0 || index >= this.list.data.length) {
				this.isDragging = false;
				return;
			}

			this.draggedIndex = index;
			this.draggedItem = this.list.data[index];
			this.startY = e.touches[0].clientY;
			this.targetIndex = index;

			// 保存原始顺序
			this.originalOrder = [...this.list.data];

			// 添加拖拽模式样式
			this.toggleDragMode(true);

			if (e.preventDefault) {
				e.preventDefault();
			}
			if (e.stopPropagation) {
				e.stopPropagation();
			}
			return false;
		},

		// 拖拽移动
		dragMove(e) {
			if (!this.isDragging || this.draggedIndex === -1) return;

			if (!e.touches || !e.touches[0]) return;

			if (e.preventDefault) {
				e.preventDefault();
			}
			if (e.stopPropagation) {
				e.stopPropagation();
			}

			const currentY = e.touches[0].clientY;
			const deltaY = currentY - this.startY;

			// 根据设备像素比例转换为upx单位
			const systemInfo = uni.getSystemInfoSync();
			const pixelRatio = 750 / systemInfo.windowWidth;
			const deltaYupx = deltaY * pixelRatio;

			// 限制拖拽范围
			const maxOffset = (this.list.data.length - 1 - this.draggedIndex) * this.itemHeight;
			const minOffset = -this.draggedIndex * this.itemHeight;
			const limitedOffset = Math.max(minOffset, Math.min(maxOffset, deltaYupx));

			this.dragOffsetY = limitedOffset;

			// 实时计算目标位置
			const moveItems = Math.round(limitedOffset / this.itemHeight);
			this.targetIndex = Math.max(0, Math.min(this.list.data.length - 1, this.draggedIndex + moveItems));
		},

		// 拖拽结束
		dragEnd() {
			if (!this.isDragging) return;

			// 计算最终位置
			const moveItems = Math.round(this.dragOffsetY / this.itemHeight);
			const targetIndex = Math.max(0, Math.min(this.list.data.length - 1, this.draggedIndex + moveItems));

			// 如果位置有变化，则更新数组
			if (targetIndex !== this.draggedIndex) {
				const newData = [...this.list.data];
				const draggedItem = newData[this.draggedIndex];

				newData.splice(this.draggedIndex, 1);
				newData.splice(targetIndex, 0, draggedItem);

				this.list.data = newData;
				// 拖拽结束后立即保存
				this.saveOrder();
			}

			// 移除拖拽模式样式
			this.toggleDragMode(false);

			// 重置拖拽状态
			this.draggedIndex = -1;
			this.draggedItem = null;
			this.dragOffsetY = 0;
			this.isDragging = false;
			this.startY = 0;
			this.originalOrder = [];
			this.targetIndex = -1;
		},

		// 切换拖拽模式
		toggleDragMode(isDragging) {
			// #ifdef H5
			if (isDragging) {
				document.body.classList.add('dragging-mode');
			} else {
				document.body.classList.remove('dragging-mode');
			}
			// #endif

			// #ifdef MP-WEIXIN
			if (typeof uni.setPageStyle !== 'function') {
				console.warn('uni.setPageStyle is not available on this platform.');
				return;
			}

			if (isDragging) {
				uni.setPageStyle({
					style: {
						overflow: 'hidden',
						position: 'fixed',
						width: '100%',
						top: `-${this.scrollTop}px`,
						left: '0',
						right: '0'
					}
				});
			} else {
				uni.setPageStyle({
					style: {
						overflow: '',
						position: '',
						width: '',
						top: '',
						left: '',
						right: ''
					}
				});
				uni.pageScrollTo({
					scrollTop: this.scrollTop,
					duration: 0
				});
			}
			// #endif

			// #ifdef APP-PLUS
			const webview = this.$scope.$getAppWebview();
			if (!webview) {
				console.warn('无法获取 webview。');
				return;
			}

			if (isDragging) {
				webview.evalJS(`
					var body = document.body;
					body.style.overflow = 'hidden';
					body.style.position = 'fixed';
					body.style.width = '100%';
					body.style.left = '0';
					body.style.right = '0';
					body.style.top = '-${this.scrollTop}px';
				`);
			} else {
				webview.evalJS(`
					var body = document.body;
					body.style.overflow = '';
					body.style.position = '';
					body.style.width = '';
					body.style.left = '';
					body.style.right = '';
					body.style.top = '';
				`);
				uni.pageScrollTo({
					scrollTop: this.scrollTop,
					duration: 0
				});
			}
			// #endif
		},

		// 上移
		upFn(id) {
			if (this.isOperating) return;
			this.isOperating = true;

			const index = this.list.data.findIndex((item) => item.id === id);
			if (index > 0) {
				const newData = [...this.list.data];
				const temp = newData[index];
				newData[index] = newData[index - 1];
				newData[index - 1] = temp;
				this.list.data = newData;
				// 操作后立即保存
				this.saveOrder();
			}

			setTimeout(() => {
				this.isOperating = false;
			}, 300);
		},

		// 下移
		downFn(id) {
			if (this.isOperating) return;
			this.isOperating = true;

			const index = this.list.data.findIndex((item) => item.id === id);
			if (index < this.list.data.length - 1) {
				const newData = [...this.list.data];
				const temp = newData[index];
				newData[index] = newData[index + 1];
				newData[index + 1] = temp;
				this.list.data = newData;
				// 操作后立即保存
				this.saveOrder();
			}

			setTimeout(() => {
				this.isOperating = false;
			}, 300);
		},

		// 置顶
		topFn(id) {
			if (this.isOperating) return;
			this.isOperating = true;

			const index = this.list.data.findIndex((item) => item.id === id);
			if (index > 0) {
				const newData = [...this.list.data];
				const targetItem = newData[index];

				newData.splice(index, 1);
				newData.unshift(targetItem);

				this.list.data = newData;
				// 操作后立即保存
				this.saveOrder();
			}

			setTimeout(() => {
				this.isOperating = false;
			}, 300);
		},

		// 置底
		bottomFn(id) {
			if (this.isOperating) return;
			this.isOperating = true;

			const index = this.list.data.findIndex((item) => item.id === id);
			if (index < this.list.data.length - 1) {
				const newData = [...this.list.data];
				const targetItem = newData[index];

				newData.splice(index, 1);
				newData.push(targetItem);

				this.list.data = newData;
				// 操作后立即保存
				this.saveOrder();
			}

			setTimeout(() => {
				this.isOperating = false;
			}, 300);
		},

		// 保存排序
		saveOrder() {
			let that = this;
			const sortData = this.list.data.map((item, index) => ({
				id: item.id,
				inTurn: this.list.data.length - index // 反向索引，第一个有最大值
			}));
			batchChangeMore({ addData: JSON.stringify(sortData) }).then(res => {
				if (res.code == 1) {
					//that.$msg('已保存')
				}
			})
		},

		async init() {
			const res = await productList({
				page: this.list.page,
				showPage: 1,
				pageSize: 2000,
				classId: this.option.classId
			});
			this.completes(res);
			this.totalNum = res.data && res.data.total ? Number(res.data.total) : this.list.data.length;
		}
	},
	async onPullDownRefresh() {
		this.resetList();
		await this.init();
		uni.stopPullDownRefresh();
	},
	async onReachBottom() {
		if (!this.list.finished) {
			await this.init();
			uni.stopPullDownRefresh();
		} else {
			uni.stopPullDownRefresh();
		}
	}
};
</script>
<style lang="scss" scoped>
.app-content {
	min-height: 100vh;
	padding-bottom: 20upx;
}

.sort-list-wrap {
	position: relative;
	background-color: #fff;

		.sort-item {
			height: 100upx;
			display: flex;
			align-items: center;
			padding: 12upx 0;
			margin: 0 30upx;
			color: #333;
			border-bottom: 1px solid #f0f0f0;
			position: relative;
			transition: all 0.3s ease;

			.item-content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: auto;
				user-select: none;
				-webkit-user-select: none;
				touch-action: none;
				-webkit-touch-callout: none;

				.item-name {
					font-size: 28upx;
					font-weight: bold;
					color: #000;
					margin-bottom: 4upx;
					white-space: nowrap;
				}

				.item-index {
					font-size: 22upx;
					color: #999;
					white-space: nowrap;
				}
			}

		.buttons-area {
			display: flex;
			gap: 24upx;
			align-items: center;
			padding-left: 20upx;
			pointer-events: auto;
			margin-left: auto;
		}
		}
}

.move-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50upx;
	height: 50upx;
	color: #fff;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	font-size: 24upx;
	font-weight: bold;
	box-shadow: 0 3upx 10upx rgba(102, 126, 234, 0.25);
	transition: all 0.2s ease;
	z-index: 10;
	cursor: pointer;
	flex-shrink: 0;
	/* #ifdef MP-WEIXIN || APP-PLUS || MP-ALIPAY */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	/* #endif */

	/* 触摸反馈 */
	&:active {
		transform: scale(0.92);
		box-shadow: 0 2upx 6upx rgba(102, 126, 234, 0.4);
	}

	/* 悬停效果 - 仅在 H5 显示 */
	/* #ifdef H5 */
	&:hover:not(.disabled) {
		transform: translateY(-2upx);
		box-shadow: 0 4upx 15upx rgba(102, 126, 234, 0.35);
	}
	/* #endif */
}

/* 置顶按钮 - 黄色渐变 */
.move-btn-top {
	background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
	box-shadow: 0 3upx 10upx rgba(254, 202, 87, 0.25);

	&:active {
		box-shadow: 0 2upx 6upx rgba(254, 202, 87, 0.4);
	}

	/* #ifdef H5 */
	&:hover:not(.disabled) {
		box-shadow: 0 4upx 15upx rgba(254, 202, 87, 0.35);
	}
	/* #endif */
}

/* 置底按钮 - 黄色渐变 */
.move-btn-bottom {
	background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
	box-shadow: 0 3upx 10upx rgba(254, 202, 87, 0.25);

	&:active {
		box-shadow: 0 2upx 6upx rgba(254, 202, 87, 0.4);
	}

	/* #ifdef H5 */
	&:hover:not(.disabled) {
		box-shadow: 0 4upx 15upx rgba(254, 202, 87, 0.35);
	}
	/* #endif */
}

/* 上移按钮 - 青色渐变 */
.move-btn-up {
	background: linear-gradient(135deg, #48dbfb 0%, #0abde3 100%);
	box-shadow: 0 3upx 10upx rgba(72, 219, 251, 0.25);

	&:active {
		box-shadow: 0 2upx 6upx rgba(72, 219, 251, 0.4);
	}

	/* #ifdef H5 */
	&:hover:not(.disabled) {
		box-shadow: 0 4upx 15upx rgba(72, 219, 251, 0.35);
	}
	/* #endif */
}

/* 下移按钮 - 青色渐变 */
.move-btn-down {
	background: linear-gradient(135deg, #48dbfb 0%, #0abde3 100%);
	box-shadow: 0 3upx 10upx rgba(72, 219, 251, 0.25);

	&:active {
		box-shadow: 0 2upx 6upx rgba(72, 219, 251, 0.4);
	}

	/* #ifdef H5 */
	&:hover:not(.disabled) {
		box-shadow: 0 4upx 15upx rgba(72, 219, 251, 0.35);
	}
	/* #endif */
}

/* 按钮禁用状态 */
.move-btn.disabled {
	opacity: 0.5;
	transform: none !important;
	box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.08) !important;
	pointer-events: none;
	cursor: not-allowed;
	&:hover,
	&:active {
		transform: none !important;
		box-shadow: 0 2upx 6upx rgba(0, 0, 0, 0.08) !important;
	}
}

// 拖拽相关样式
.sort-list-wrap .sort-item.dragging {
	border: 2px dashed #007aff !important;
	box-shadow: 0 8upx 40upx rgba(0, 122, 255, 0.25) !important;
	background-color: rgba(0, 122, 255, 0.08) !important;
	opacity: 0.9;
	border-radius: 16upx;
	transform: scale(1.02);
	transition: none !important; /* 拖拽时禁用过渡动画 */
}

.sort-list-wrap .sort-item.target-position {
	border: 3px solid #52c41a !important; /* 使用绿色边框区别于拖拽元素 */
	box-shadow: 0 6upx 30upx rgba(82, 196, 26, 0.3) !important;
	background-color: rgba(82, 196, 26, 0.1) !important;
	opacity: 0.95;
	border-radius: 16upx;
	transform: scale(1.01);
	transition: all 0.2s ease !important; /* 目标位置保持平滑过渡 */

	/* 添加一个内部指示器 */
	&::before {
		content: '移动到这儿';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 8upx 22upx;
		background: linear-gradient(90deg, #52c41a, #73d13d);
		border-radius: 8upx;
		color: #fff;
		font-size: 26upx;
		font-weight: bold;
		opacity: 0.9;
		z-index: 99990;
	}
}

/* 防止拖拽时页面滚动 */
.dragging-mode {
	overflow: hidden !important;
	touch-action: none !important;
	-webkit-overflow-scrolling: auto !important;
}
</style>