uni-zhihuikuangshan-2/pages/index/bars_sort/bars_sort.vue

<template>
	<view class="content">
		<!-- 参数 
		* @property {ObjectArray} list = [] 列表数据,自定义数据，会传递到name="rowContent"插槽  
		* @property {Boolean} feedbackGeneratorState = [true|false] 是否开启拖动触感反馈  
		* @property {Boolean} isLongTouch = [true|false] 是否开启长按拖动  
		* @property {Boolean} isAutoScroll = [true|false] 是否拖拽至边缘自动滚动列表  
		* @property {Number} longTouchTime = [] 选填,触发长按时长,单位:ms,默认350ms,不支持微信小程序 
		* @property {Number} listHeight = [] 选填,可拖动列表整体的高度,单位:px,默认等于窗口高度 
		* @property {Number} rowHeight = [] 必填,行高,单位:px,默认44px
		* @event {Function} change 行位置发生改变时触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据'}   
		* @event {Function} confirm 拖拽结束且行位置发生了改变触发事件 返回值:{index:'原始下标',moveTo:'被拖动到的下标',moveRow:'拖动行数据',list:'整个列表拖动后的数据'}  
		* @event {Function} onclick 点击行触发事件 返回值:{index:'被点击行下标',value:'被点击行数据'} 
		*/ 
		-->
		<!-- 当前属性设置 isLongTouch关闭长按拖动 isAutoScroll开启自动滚动 feedbackGeneratorState开启触感反馈 rowHeight行高55 -->
		<HM-dragSorts :list="list" :isLongTouch="false" :isAutoScroll="true" :feedbackGeneratorState="true"
			:rowHeight="55" @change="change" @confirm="confirm" @onclick="onclick">
			<template v-slot:rowContent="{row}">
				<view class="row">
					<!-- <image v-if="row.icon" class="icon" :src="row.icon"></image> -->
					<image v-if="row.index%7 == 1" class="icon" src="./icon/01.png" mode=""></image>
					<image v-if="row.index%7 == 2" class="icon" src="./icon/02.png" mode=""></image>
					<image v-if="row.index%7 == 3" class="icon" src="./icon/03.png" mode=""></image>
					<image v-if="row.index%7 == 4" class="icon" src="./icon/04.png" mode=""></image>
					<image v-if="row.index%7 == 5" class="icon" src="./icon/05.png" mode=""></image>
					<image v-if="row.index%7 == 6" class="icon" src="./icon/06.png" mode=""></image>
					<image v-if="row.index%7 == 7" class="icon" src="./icon/07.png" mode=""></image>
					<image v-if="row.index%7 == 0" class="icon" src="./icon/08.png" mode=""></image>
					<text class="text">{{row.page_name}}</text>
				</view>
			</template>
		</HM-dragSorts>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				/*
					0.数据结构说明 可以在结构中添加其他的数据，比如id,value等，不影响组件使用，拖动调整顺序后，组件会把传入的数据排序后原封不动在@confirm中返回。
					
					1.动态修改list数据，组件会响应变化，但拖动排序不会影响list，
					  所以，要特别注意，在动态修改list数据时候，由于组件内数据可能已经拖动重新排序过，页面的list顺序和组件内数据顺序不一致了，
					  最好在操作list时候，先和@confirm返回的值同步一下，或者直接操作@confirm返回的值，然后赋值给list。
					  
					n.最后，组件你下载了，代码你也看了，不给个五星好评，我可要打人了啊  (╬￣皿￣)=○  ヽ(#`Д´)ﾉ
				*/
				list: [],
				ispush: false,
				
				index:0

			}
		},
		onLoad() {
			this.$api.getCommonMenuList({

			}).then((res) => {
				console.log(res.data)

				this.list = res.data.data
				
				this.list.forEach((item,index) => {
				    item.index = index;
				})
				
				console.log(this.list)
				
			})
		},
		methods: {
			onclick(e) {
				// console.log('=== onclick start ===');
				// console.log("被点击行: " + JSON.stringify(e.value));
				// console.log("被点击下标: " + JSON.stringify(e.index));
				// console.log('=== onclick end ===');

				uni.showActionSheet({
					itemList: ['移除常用'],
					success: (res) => {
						console.log(e.value.id)
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');

						if (res.tapIndex == 0) {
							console.log(e.value.id)

							this.list.forEach((item, index) => {
								console.log(item.id, e.value.id, index)
								if (item.id == e.value.id) {
									console.log(item)

									this.list.splice(index, 1)
								}
							})

							console.log(this.list);
							uni.showLoading({
								mask: true
							})
							this.$api.editCommonMenu({
								data: JSON.stringify(this.list)
							}).then((res) => {
								uni.hideLoading()
								uni.showToast({
									icon: "none",
									title: "移除成功"
								})
								console.log(res)
							})
						}
					},
					fail: (res) => {
						console.log(res.errMsg);
					}
				});
			},
			change(e) {
				// console.log('=== change start ===');
				// console.log("被拖动行: " + JSON.stringify(e.moveRow));
				// console.log('原始下标：', e.index);
				// console.log('移动到：', e.moveTo);
				// console.log('=== change end ===');
			},
			confirm(e) {
				console.log("this.list: ", this.list);
				console.log("e.list: ", e.list);

				this.list = e.list
				console.log(this.list);

				uni.showLoading({
					mask: true
				})
				this.$api.editCommonMenu({
					data: JSON.stringify(this.list)
				}).then((res) => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: "排序成功"
					})
					console.log(res)
				})
				// console.log('=== confirm start ===');
				// console.log("被拖动行: " + JSON.stringify(e.moveRow));
				// console.log('原始下标：', e.index);
				// console.log('移动到：', e.moveTo);
				// console.log('=== confirm end ===');
			}
		}
	}
</script>
<style lang="scss" scoped>
	//scoped css只在当前页生效 不影响子组件
	page {
		// background-color: #efeff4; 
	}

	.content {
		.row {
			display: flex;
			flex-direction: row;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 13px;
			}

			.text {
				font-size: 14px;
			}
		}
	}
</style>