fanghuayuexuan/components/channel.vue

<template>
	<u-popup :show="show" round="40rpx" @close="handleClose">
		<view class="channel-container">
			<!-- 我的频道区域 -->
			<view class="channel-section">
				<view class="section-header">
					<view class="left">
						<text class="section-title">我的频道</text>
						<text class="txt">拖拽可以排序</text>
					</view>
					<image class="w40 h40" src="/static/images/pop_close_icon.png" @click="show=false"></image>
				</view>
				<!-- 拖拽容器 -->
				<view class="channel-list" id="channelList">
					<view v-for="(item, index) in myChannels" :key="item.id" class="channel-item"
						:style="{ width: itemWidth + 'px' }" @longpress="handleLongPress(index)"
						@touchmove="(e) => handleMove(e, index)" @touchend="handleEnd" @touchcancel="handleEnd">
						<!-- 拖拽中的元素特殊样式 -->
						<view class="channel-content" :class="{ 
              'drag-item': isDragging && dragIndex === index 
            }" :style="{
              transform: isDragging && dragIndex === index 
                ? `translate(${dragOffsetX}px, ${dragOffsetY}px) scale(1.05)` 
                : 'none',
              zIndex: isDragging && dragIndex === index ? 999 : 1,
              opacity: isDragging && dragIndex === index ? 0.9 : 1, // 提高透明度更自然
              transition: isDragging && dragIndex === index ? 'none' : 'all 0.15s ease-out' // 拖拽中取消过渡，提升跟随速度
            }" @tap="handleChannelTap(item)">
							<text>{{ item.name }}</text>
							<image v-if="index !== 0" class="delete-icon" src="/static/images/remove_icon.png"
								@tap.stop="removeFromMyChannels(index)">
						</view>

						<!-- 拖拽占位符-->
						<view v-if="isDragging && placeholderIndex === index" class="channel-placeholder"></view>
					</view>
				</view>
			</view>

			<!-- 全部频道区域-->
			<view class="channel-section">
				<view class="section-header">
					<text class="section-title">全部频道</text>
				</view>
				<view class="channel-list">
					<view v-for="(item, index) in allChannels" :key="item.id" class="channel-item"
						:style="{ width: itemWidth + 'px' }">
						<view class="channel-content" :class="isChannelInMyList(item.id)?'active':''">
							<text>{{ item.name }}</text>
							
							<image v-if="!isChannelInMyList(item.id)" class="add-icon" src="/static/images/add_icon.png"
								@tap="addToMyChannels(item)">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="success">完成</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			initialMyChannels: {
				type: Array,
				default: () => []
			},
			initialAllChannels: {
				type: Array,
				default: () => []
			},
			activeChannelId: {
				type: [String, Number],
				default: ''
			},
			itemWidth: {
				type: Number,
				default: 80
			}
		},
		data() {
			return {
				show: true,
				myChannels: [],
				allChannels: [],
				activeChannel: '',
				isDragging: false,
				dragIndex: -1, // 正在拖拽的索引
				placeholderIndex: -1, // 占位符索引
				startX: 0, // 长按初始X
				startY: 0, // 长按初始Y
				dragOffsetX: 0, // 拖拽偏移X
				dragOffsetY: 0, // 拖拽偏移Y
				itemHeight: 60, // 频道项高度
				colCount: 0, // 每行显示列数
				itemRects: [], // 所有频道项的位置信息
				dragThreshold: 5, // 降低阈值，更灵敏
				lastSwapTime: 0 // 防抖：记录上次交换时间
			};
		},
		watch: {
			activeChannelId: {
				immediate: true,
				handler(newVal) {
					this.activeChannel = newVal;
				}
			},
			initialMyChannels: {
				immediate: true,
				handler(newVal) {
					this.myChannels = JSON.parse(JSON.stringify(newVal));
					this.$nextTick(() => this.calcItemRects());
				}
			},
			initialAllChannels: {
				immediate: true,
				handler(newVal) {
					this.allChannels = JSON.parse(JSON.stringify(newVal));
				}
			}
		},
		mounted() {
			// 初始化计算布局
			this.$nextTick(() => this.calcItemRects());
		},
		methods: {
			// 计算所有频道项的位置信息（适配uni-app）
			calcItemRects() {
				if (!this.myChannels.length) return;

				const query = uni.createSelectorQuery().in(this);
				query.select('#channelList').boundingClientRect(rect => {
					if (!rect) return;
					// 计算每行列数
					this.colCount = Math.floor(rect.width / this.itemWidth);
					// 预计算每个项的位置
					this.itemRects = this.myChannels.map((_, index) => {
						const row = Math.floor(index / this.colCount);
						const col = index % this.colCount;
						return {
							left: rect.left + col * this.itemWidth + 20, // +20是容器padding
							top: rect.top + row * this.itemHeight + 20,
							right: rect.left + (col + 1) * this.itemWidth + 20,
							bottom: rect.top + (row + 1) * this.itemHeight + 20,
							centerX: rect.left + (col + 0.5) * this.itemWidth + 20,
							centerY: rect.top + (row + 0.5) * this.itemHeight + 20
						};
					});
				}).exec();
			},

			// 判断频道是否已在我的列表中
			isChannelInMyList(channelId) {
				return this.myChannels.some(item => item.id === channelId);
			},

			// 添加频道到我的频道
			addToMyChannels(channel) {
				if (this.isChannelInMyList(channel.id)) return;

				this.myChannels = [...this.myChannels, channel];
				this.$nextTick(() => this.calcItemRects());
				this.$emit('channels-change', {
					myChannels: this.myChannels,
					allChannels: this.allChannels
				});
			},

			// 从我的频道中移除
			removeFromMyChannels(index) {
				if (index === 0 || this.isDragging) return;

				this.myChannels.splice(index, 1);
				this.$nextTick(() => this.calcItemRects());
				this.$emit('channels-change', {
					myChannels: this.myChannels,
					allChannels: this.allChannels
				});
			},

			// 点击频道
			handleChannelTap(channel) {
				if (this.isDragging) return;
				this.activeChannel = channel.id;
				this.$emit('channel-tap', channel);
			},

			// 长按开始拖拽（简化逻辑，提升响应速度）
			handleLongPress(index) {
				if (index === 0) return; // 第一个频道不能拖拽

				// 重新计算位置信息
				this.calcItemRects();

				this.isDragging = true;
				this.dragIndex = index;
				this.placeholderIndex = index;
				// 直接初始化，无需等待系统信息，提升响应
				this.startX = 0;
				this.startY = 0;
				this.dragOffsetX = 0;
				this.dragOffsetY = 0;
				this.lastSwapTime = Date.now();
			},

			// 拖拽移动（优化响应速度）
			handleMove(e, index) {
				if (!this.isDragging || this.dragIndex !== index) return;

				// 阻止默认滚动（兼容多端）
				if (e.preventDefault) {
					e.preventDefault();
				} else {
					e.returnValue = false;
				}

				// 获取触摸点（uni-app的touches参数）
				const touch = e.touches[0];
				const currentX = touch.clientX;
				const currentY = touch.clientY;

				// 初始化起始位置
				if (this.startX === 0 && this.startY === 0) {
					this.startX = currentX;
					this.startY = currentY;
					return;
				}

				// 实时计算偏移量（无延迟）
				this.dragOffsetX = currentX - this.startX;
				this.dragOffsetY = currentY - this.startY;

				// 防抖：20ms内只交换一次，避免频繁触发卡顿
				const now = Date.now();
				if (now - this.lastSwapTime > 20) {
					this.swapChannelItem(currentX, currentY);
					this.lastSwapTime = now;
				}
			},

			// 交换频道项（简化逻辑，减少计算）
			swapChannelItem(x, y) {
				if (this.itemRects.length === 0) return;

				// 找到当前触摸位置对应的频道索引（简化碰撞检测）
				let targetIndex = -1;
				// 只遍历可视区域附近的项，减少计算
				const minRow = Math.max(0, Math.floor((y - 100) / this.itemHeight));
				const maxRow = Math.min(Math.ceil(this.myChannels.length / this.colCount), Math.floor((y + 100) / this
					.itemHeight));

				for (let i = 1; i < this.myChannels.length; i++) {
					const rect = this.itemRects[i];
					// 扩大检测区域，更容易触发交换
					if (x >= rect.left - 10 && x <= rect.right + 10 && y >= rect.top - 10 && y <= rect.bottom + 10) {
						targetIndex = i;
						break;
					}
				}

				// 交换逻辑（减少不必要的判断）
				if (targetIndex !== -1 && targetIndex !== this.placeholderIndex) {
					// 交换数组元素（直接操作，无冗余）
					[this.myChannels[this.dragIndex], this.myChannels[targetIndex]] = [this.myChannels[targetIndex], this
						.myChannels[this.dragIndex]
					];

					// 更新索引
					this.placeholderIndex = targetIndex;
					this.dragIndex = targetIndex;

					// 延迟计算位置，避免频繁触发
					if (!this.rectTimer) {
						this.rectTimer = setTimeout(() => {
							this.calcItemRects();
							clearTimeout(this.rectTimer);
							this.rectTimer = null;
						}, 50);
					}
				}
			},

			// 拖拽结束/取消（清理定时器）
			handleEnd() {
				if (!this.isDragging) return;

				// 清理定时器
				if (this.rectTimer) {
					clearTimeout(this.rectTimer);
					this.rectTimer = null;
				}

				// 重置状态
				this.isDragging = false;
				this.dragIndex = -1;
				this.placeholderIndex = -1;
				this.dragOffsetX = 0;
				this.dragOffsetY = 0;
				this.startX = 0;
				this.startY = 0;

				// 保存顺序
				this.saveChannelOrder();
			},

			// 保存频道顺序
			saveChannelOrder() {
				this.$emit('order-change', JSON.parse(JSON.stringify(this.myChannels)));
				this.$emit('channels-change', {
					myChannels: this.myChannels,
					allChannels: this.allChannels
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.channel-container {
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 24rpx;
		background-color: #fff;

		.channel-section {
			margin-bottom: 40rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.section-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				margin-bottom: 20rpx;

				.left {
					.section-title {
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}

					.txt {
						font-size: 24rpx;
						color: #999999;
						margin-left: 18rpx;
					}

				}

				.txt {
					font-size: 24rpx;
					color: #999;
				}
			}

			.channel-list {
				display: flex;
				flex-wrap: wrap;
				position: relative;

				.channel-item {
					position: relative;
					// padding: 10rpx;
					box-sizing: border-box;
					margin-bottom: 10rpx;
					margin-right: 18rpx;

					&:last-child {
						margin-right: 0;
					}

					.channel-content {
						width: 162rpx;
						height: 88rpx;
						background: #F5F7FA;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: all 0.15s ease-out;
						color: #333333;

						&.active {
							color: #999999;
						}

						// 拖拽中的元素
						&.drag-item {
							position: relative;
							box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
							background-color: inherit;
						}

						// 图标样式
						.add-icon,
						.delete-icon,
						.added-mark {
							position: absolute;
							right: -10rpx;
							top: -10rpx;
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							z-index: 2;
						}

						.add-icon {
							// background-color: #52c41a;

							.icon-plus {
								font-size: 30rpx;
								color: #fff;
								line-height: 1;
							}
						}

						.delete-icon {
							// background-color: #ff4d4f;

							.icon-minus {
								font-size: 36rpx;
								color: #fff;
								line-height: 1;
								margin-top: -2rpx;
							}
						}

						.added-mark {
							background-color: #d9d9d9;
							color: #999;

							.icon-check {
								font-size: 26rpx;
								color: #999;
								line-height: 1;
							}
						}
					}

					// 拖拽占位符
					.channel-placeholder {
						width: 100%;
						height: 60rpx;
						border-radius: 30rpx;
						box-sizing: border-box;
					}
				}
			}
		}

		.success {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>