gao-customer-h5/src/pages/management/StoreSort.vue

<template>
	<div v-can="permissionCodes.store.update" class="store-sort">
		<div class="tip" v-text="'按住右侧拖动手柄调整门店顺序，保存后生效'" />
		<div ref="sortListRef" class="items">
			<t-cell-group v-if="storeList.length" theme="card">
				<t-cell
					v-for="(item, index) in storeList"
					:key="item.id"
					class="cell"
					:title="item.name || '未命名门店'"
					:description="`编码：${item.code || '-'}`"
					:class="{ dragging: draggingIndex === index }"
				>
					<template #note>
						<t-tag :theme="getStatusTheme(item.status)" variant="outline" :content="getStatusText(item.status)" />
					</template>
					<template #rightIcon>
						<t-icon
							class="handle"
							role="button"
							name="move"
							aria-label="拖动排序"
							@pointerdown.stop="startDrag($event, index)"
							@pointermove.stop="moveDrag"
							@pointerup.stop="finishDrag"
							@pointercancel.stop="finishDrag"
							@lostpointercapture.stop="finishDrag"
							@touchstart.stop="startTouchDrag($event, index)"
							@touchmove.stop="moveTouchDrag"
							@touchend.stop="finishTouchDrag"
							@touchcancel.stop="finishTouchDrag"
						/>
					</template>
				</t-cell>
			</t-cell-group>
			<div v-else class="empty-block" v-text="isLoading ? '正在加载门店' : '暂无门店'" />
		</div>
		<t-button
			class="save"
			theme="primary"
			:loading="isSaving"
			:disabled="!sortDirty || isSaving || isLoading"
			@click="saveSort"
		>
			保存排序
		</t-button>
	</div>
</template>

<script setup lang="ts">
import { Toast, type TagProps } from "tdesign-mobile-vue";
import StoreAPI from "@/api/StoreAPI";
import { useNavBarStore } from "@/store/navBarStore";
import type { Store, StoreStatus } from "@/types/Store";
import { permissionCodes } from "@/utils/permission";

defineOptions({
	name: "StoreSort"
});

const navBarStore = useNavBarStore();

// ---------- 列表数据 ----------

const storeList = ref<Store[]>([]);
const sortListRef = ref<HTMLElement>();
const isLoading = ref(false);
const isSaving = ref(false);
const sortDirty = ref(false);

// ---------- 拖拽状态 ----------

const draggingIndex = ref(-1);
let pointerId: number | undefined;
let pointerStartY = 0;
let pointerMoved = false;
let pointerTarget: HTMLElement | undefined;
let dragInputType: "pointer" | "touch" | undefined;

// ---------- 展示文案 ----------

function getStatusText(status?: StoreStatus): string {
	return status === "ACTIVE" ? "启用" : "停用";
}

function getStatusTheme(status?: StoreStatus): TagProps["theme"] {
	return status === "ACTIVE" ? "primary" : "default";
}

// ---------- 拖拽排序 ----------

function resolveDropIndex(clientY: number): number {
	const elements = sortListRef.value?.querySelectorAll<HTMLElement>(".cell");
	if (!elements?.length) {
		return -1;
	}

	for (let index = 0; index < elements.length; index++) {
		const rect = elements[index].getBoundingClientRect();
		if (clientY < rect.top + rect.height / 2) {
			return index;
		}
	}
	return elements.length - 1;
}

function beginDrag(index: number, clientY: number, target: EventTarget | null): void {
	pointerStartY = clientY;
	pointerMoved = false;
	draggingIndex.value = index;
	pointerTarget = target instanceof HTMLElement ? target : undefined;
}

function moveDragAt(clientY: number): void {
	if (0 > draggingIndex.value) {
		return;
	}

	if (!pointerMoved && 8 > Math.abs(clientY - pointerStartY)) {
		return;
	}

	pointerMoved = true;
	const targetIndex = resolveDropIndex(clientY);
	if (0 > targetIndex || targetIndex === draggingIndex.value) {
		return;
	}

	const [item] = storeList.value.splice(draggingIndex.value, 1);
	storeList.value.splice(targetIndex, 0, item);
	draggingIndex.value = targetIndex;
	sortDirty.value = true;
}

function finishDragState(): void {
	if (pointerMoved) {
		sortDirty.value = true;
	}
	pointerId = undefined;
	pointerTarget = undefined;
	dragInputType = undefined;
	draggingIndex.value = -1;
}

function startDrag(event: PointerEvent, index: number): void {
	if (isSaving.value || isLoading.value || dragInputType || !event.isPrimary || event.button !== 0) {
		return;
	}

	event.preventDefault();
	pointerId = event.pointerId;
	dragInputType = "pointer";
	beginDrag(index, event.clientY, event.currentTarget);
	pointerTarget?.setPointerCapture(event.pointerId);
}

function moveDrag(event: PointerEvent): void {
	if (dragInputType !== "pointer" || pointerId !== event.pointerId || 0 > draggingIndex.value) {
		return;
	}

	event.preventDefault();
	moveDragAt(event.clientY);
}

function finishDrag(event: PointerEvent): void {
	if (dragInputType !== "pointer" || pointerId !== event.pointerId) {
		return;
	}

	if (pointerTarget?.hasPointerCapture(event.pointerId)) {
		pointerTarget.releasePointerCapture(event.pointerId);
	}
	finishDragState();
}

function startTouchDrag(event: TouchEvent, index: number): void {
	if (isSaving.value || isLoading.value || dragInputType || event.touches.length !== 1) {
		return;
	}

	event.preventDefault();
	const touch = event.touches[0];
	pointerId = touch.identifier;
	dragInputType = "touch";
	beginDrag(index, touch.clientY, event.currentTarget);
}

function moveTouchDrag(event: TouchEvent): void {
	if (dragInputType !== "touch" || pointerId === undefined || 0 > draggingIndex.value || event.touches.length !== 1) {
		return;
	}

	event.preventDefault();
	moveDragAt(event.touches[0].clientY);
}

function finishTouchDrag(event: TouchEvent): void {
	if (dragInputType !== "touch" || pointerId === undefined) {
		return;
	}

	const touch = event.changedTouches[0];
	if (touch && touch.identifier !== pointerId) {
		return;
	}
	finishDragState();
}

// ---------- 保存 ----------

async function saveSort(): Promise<void> {
	if (!sortDirty.value || isSaving.value) {
		return;
	}

	isSaving.value = true;
	try {
		const idList = storeList.value
			.map(item => item.id)
			.filter((id): id is string => Boolean(id));
		await StoreAPI.sort(idList);
		storeList.value.forEach((item, index) => {
			item.sort = index;
		});
		sortDirty.value = false;
		Toast.success("门店排序已保存");
	} catch {
		Toast.error("门店排序保存失败");
	} finally {
		isSaving.value = false;
	}
}

// ---------- 页面数据 ----------

async function loadData(): Promise<void> {
	isLoading.value = true;
	try {
		const result = await StoreAPI.list({
			index: 0,
			size: 100,
			orderMap: {
				sort: "ASC",
				createdAt: "DESC"
			}
		});
		storeList.value = result.list || [];
		sortDirty.value = false;
	} finally {
		isLoading.value = false;
	}
}

onMounted(async () => {
	navBarStore.clearRight();
	try {
		await loadData();
	} catch {
		Toast.error("门店加载失败");
	}
});

onUnmounted(() => {
	navBarStore.clearRight();
});
</script>

<style scoped lang="less">
.store-sort {
	padding: calc(var(--app-nav-height) + 1rem) 0 6rem;

	.tip {
		color: #52607a;
		padding: 0 1rem .75rem;
		font-size: .8125rem;
	}

	.items {
		.cell {
			position: relative;

			&.dragging {
				z-index: 1;
				box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .16);
			}

			.handle {
				color: #52607a;
				cursor: grab;
			}

			&.dragging,
			&.dragging * {
				touch-action: none;
			}
		}
	}

	.empty-block {
		color: #52607a;
		padding: 2rem 1rem;
		text-align: center;
	}

	.save {
		left: 1rem;
		right: 1rem;
		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
		position: fixed;
	}
}

:global(html.theme-dark) {
	.store-sort {
		.tip,
		.empty-block,
		.handle {
			color: #94a3b8;
		}

		.cell.dragging {
			box-shadow: 0 .5rem 1rem rgba(2, 6, 23, .28);
		}
	}
}
</style>