257 lines
6.2 KiB
Vue
257 lines
6.2 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar title="设备分组" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
|
||
height='36'></u-navbar>
|
||
<view class="fzbox">
|
||
<view class="card" :class="{fixed: index === 0}" v-for="(item,index) in obj " :key="index" v-if="index==0">
|
||
<view class="card_left">
|
||
<view class="img">
|
||
<image src="@/static/sc.png" mode="" v-show="index === 0"></image>
|
||
<image src="@/static/sc1.png" mode="" v-show="index !== 0"></image>
|
||
</view>
|
||
<view class="txt">
|
||
{{item.name}}({{item.num}})
|
||
</view>
|
||
</view>
|
||
<view class="card_right">
|
||
<image src="@/static/xg.png" mode=""
|
||
style="width: 34rpx;height: 34rpx;margin-right: 30rpx;"></image>
|
||
<image src="@/static/xq.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<HM-dragSorts ref="dragSorts" :list="newobj" :autoScroll="true" :feedbackGenerator="false" rowHeight='65'
|
||
@change="change" @confirm="confirm" @onclick="onclick" :listBackgroundColor='F7FAFE'></HM-dragSorts>
|
||
|
||
</view>
|
||
<view class="btn">
|
||
<image src="@/static/tj.png" mode=""></image>
|
||
新建分组
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import dragSorts from '@/components/HM-dragSorts/HM-dragSorts.vue'
|
||
export default {
|
||
components: {
|
||
'HM-dragSorts': dragSorts
|
||
},
|
||
data() {
|
||
return {
|
||
bgc: {
|
||
backgroundColor: "#F7FAFE",
|
||
},
|
||
obj: [],
|
||
newobj:[],
|
||
cardHeight: 114,
|
||
touchStartIndex: -1,
|
||
startY: 0,
|
||
direction: 'vertical',
|
||
touchMoveTimer: null,
|
||
|
||
};
|
||
},
|
||
computed: {
|
||
totalHeight() {
|
||
return this.obj.length * this.cardHeight;
|
||
},
|
||
},
|
||
onLoad() {
|
||
this.generateAndLogObject();
|
||
},
|
||
methods: {
|
||
push() {
|
||
// 和数组的push使用方法一致，可以push单行，也可以push多行
|
||
this.$refs.dragSorts.push({
|
||
"name": "push行",
|
||
"icon": "/static/img/2.png"
|
||
});
|
||
},
|
||
unshift() {
|
||
// 和数组的unshift使用方法一致，可以unshift单行，也可以unshift多行
|
||
this.$refs.dragSorts.unshift({
|
||
"name": "unshift行",
|
||
"icon": "/static/img/2.png"
|
||
});
|
||
},
|
||
splice() {
|
||
// 和数组的unshift使用方法一致 下标1开始删除1个并在下标1位置插入行
|
||
this.$refs.dragSorts.splice(1, 1, {
|
||
"name": "splice行",
|
||
"icon": "/static/img/2.png"
|
||
});
|
||
},
|
||
onclick(e) {
|
||
console.log('=== onclick start ===');
|
||
console.log("被点击行: " + JSON.stringify(e.value));
|
||
console.log("被点击下标: " + JSON.stringify(e.index));
|
||
console.log('=== onclick end ===');
|
||
},
|
||
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('=== confirm start ===');
|
||
console.log("被拖动行: " + JSON.stringify(e.moveRow));
|
||
console.log('原始下标：', e.index);
|
||
console.log('移动到：', e.moveTo);
|
||
console.log('=== confirm end ===');
|
||
},
|
||
generateRandomName() {
|
||
const communityNames = ["碧桂园", "万达", "万科", "金华小区", "太姥山小区", "宁德时代", "霞浦小区"];
|
||
const randomIndex = Math.floor(Math.random() * communityNames.length);
|
||
return communityNames[randomIndex];
|
||
},
|
||
|
||
generateObject() {
|
||
const object = {
|
||
arrays: [],
|
||
};
|
||
|
||
for (let i = 0; i < 5; i++) {
|
||
const array = {
|
||
name: i === 0 ? "全部" : this.generateRandomName(),
|
||
num: Math.floor(Math.random() * 100),
|
||
top: i * this.cardHeight,
|
||
};
|
||
object.arrays.push(array);
|
||
}
|
||
|
||
return object.arrays;
|
||
},
|
||
|
||
generateAndLogObject() {
|
||
this.obj = this.generateObject();
|
||
this.newobj = this.obj.slice(1);
|
||
|
||
console.log(this.obj);
|
||
},
|
||
|
||
handleTouchStart(e) {
|
||
this.touchStartIndex = e.currentTarget.dataset.index;
|
||
this.startY = e.touches[0].clientY;
|
||
},
|
||
|
||
handleTouchMove(e) {
|
||
clearTimeout(this.touchMoveTimer);
|
||
|
||
this.touchMoveTimer = setTimeout(() => {
|
||
const deltaY = e.touches[0].clientY - this.startY;
|
||
const newIndex = Math.floor((this.obj[this.touchStartIndex].top + deltaY) / this.cardHeight);
|
||
const maxIndex = this.obj.length - 1;
|
||
|
||
if (newIndex >= 1 && newIndex <= maxIndex) {
|
||
this.obj[this.touchStartIndex].top += deltaY;
|
||
this.obj[newIndex].top -= deltaY;
|
||
|
||
this.startY = e.touches[0].clientY;
|
||
this.$nextTick(() => {
|
||
this.direction = 'vertical';
|
||
});
|
||
} else {
|
||
this.direction = 'none';
|
||
}
|
||
}, 16); // 控制触发频率，大约 60 帧每秒
|
||
},
|
||
|
||
handleTouchEnd() {
|
||
this.touchStartIndex = -1;
|
||
this.startY = 0;
|
||
},
|
||
|
||
handleMoveChange(e) {
|
||
this.obj = e.detail.source;
|
||
|
||
// 调整位置，防止重叠
|
||
this.obj.forEach((item, index) => {
|
||
// 添加保护，确保 item 存在
|
||
if (item) {
|
||
item.top = index * this.cardHeight;
|
||
}
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F7FAFE;
|
||
}
|
||
|
||
.page {
|
||
width: 750rpx;
|
||
|
||
.fzbox {
|
||
|
||
.card {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 32rpx auto 0;
|
||
width: 682rpx;
|
||
height: 114rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||
|
||
.card_left {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
margin-left: 48rpx;
|
||
|
||
.img {
|
||
width: 35.3rpx;
|
||
height: 35.3rpx;
|
||
}
|
||
|
||
.txt {
|
||
margin-left: 52rpx;
|
||
font-size: 36rpx;
|
||
font-family: Source Han Sans, Source Han Sans;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
.card_right {
|
||
margin-right: 38rpx;
|
||
|
||
image {
|
||
width: 45.51rpx;
|
||
height: 31.86rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 32rpx auto 0;
|
||
border-radius: 30rpx;
|
||
width: 682rpx;
|
||
height: 114rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
|
||
|
||
image {
|
||
margin-right: 28rpx;
|
||
width: 39.92rpx;
|
||
height: 39.92rpx;
|
||
}
|
||
|
||
font-size: 36rpx;
|
||
font-family: Source Han Sans,
|
||
Source Han Sans;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
}
|
||
</style> |