liubiao/APP
1
0
Fork 0
forked from dyf/APP
Code Pull Requests Activity

优化首页的下拉刷新、数据排序、绑定后刷新

Browse Source
This commit is contained in:
liub
2025-12-24 10:52:28 +08:00
parent 425b7b9cfd
commit 637658a762
202 changed files with 5432 additions and 301514 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
pages/common/index/index.vue
View File

@ -3,7 +3,7 @@
<!-- 使用自定义导航栏 -->
<custom-navbar :title="navTitle" :showBack="false" backgroundColor="#202020" color="#FFFFFF"
rightIcon="/static/images/common/add.png" @right-click="scan"></custom-navbar>
<view class="device-page" :style="{ paddingTop: navBarHeight + 'px' }">
<view class="device-page">
<!-- handleSend 发送信息 -->
<view class="tab-bar-wrap">
<scroll-view class="tab-bar" scroll-x="true" scroll-with-animation>
@ -24,8 +24,9 @@
<view class="Sendmessage" @click="location">位置</view>
<view class="Sendmessage" @click="handleSend">发送信息</view>
</view>
<scroll-view class="device-list" scroll-y @scrolltolower="onScrollToLower" :lower-threshold="100"
style="height:80vh;">
<!-- <scroll-view class="device-list" scroll-y @scrolltolower="onScrollToLower" :lower-threshold="100" style="height:80vh;"> -->
<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
:down="downOption" :fixed="false" :style="{ height: mescrollHeight + 'px' }">
<view v-if="deviceList.length>0">
<uni-swipe-action ref="swipeAction">
<block v-for="(item, index) in deviceList" :key="index" :ref="'swipeItem_' + index">
@ -66,21 +67,18 @@
</uni-swipe-action-item>
</block>
</uni-swipe-action>
<!-- 加载状态提示 -->
<view class="loading-status">
<text v-if="loading">加载中...</text>
<text v-if="finished">没有更多数据了</text>
</view>
</view>
<view v-else class="noDATA">
<!-- <view v-else class="noDATA">
<view> <uni-icons type="image-filled" size="120" color="rgba(255, 255, 255, 0.9)"></uni-icons>
</view>
暂无数据
</view>
</scroll-view>
</view> -->
</mescroll-uni>
<!-- </scroll-view> -->
</view>
<!-- 删除弹框 -->
<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')" catchtouchmove="true">
<view class="agreement-mask" v-if="deleteShow" @click.stop="closePopup('delete')" catchtouchmove="true">
<view class="agreement-popupC" @click.stop>
<view class="popup-content">
<image src="/static/images/common/dell.png" mode="" class="svg"></image>
@ -146,16 +144,22 @@
deviceReName
} from '@/api/common/index.js'
import BleHelper from '@/utils/BleHelper.js';
import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue'
var pagePath = 'pages/common/index';
var ble = null;
var timeout = null;
export default {
onPullDownRefresh() {
// 执行下拉刷新时的操作，比如重新获取数据
this.onIntall();
components: {
MescrollUni
},
data() {
return {
navBarHeight: 70 + uni.getSystemInfoSync().statusBarHeight,
mescroll: null,
deviceType: '',
navBarHeight: 56 + uni.getSystemInfoSync().statusBarHeight,
deviceList: [],
tabs: [],
activeTab: 0,
@ -203,17 +207,70 @@
action: 'share'
}
],
page: 1, // 当前页码
downOption: {
auto: true,
autoShowLoading: false,
},
upOption: {
auto: false,
noMoreSize: 0,
offset: 50,
isLock: false,
empty: {
tip: '暂无数据',
hideScroll: false
},
textNoMore: '没有更多数据了'
},
mescrollHeight: 0,
page: 0, // 当前页码
size: 10, // 每页条数
total: 0, // 总数据量
loading: false,
finished: false,
deviceId: '',
deviceName: "", //重命名
activeTabInfo: ''
}
},
methods: {
getSystemInfoSyncH() {
let sysInfo = uni.getSystemInfoSync();
// 底部 footer 高度约 220rpx + 120rpx = 340rpx，转换为 px（1rpx = sysInfo.pixelRatio / 750 * 屏幕宽度？不，直接用 rpx 转 px 公式）
let footerHeight = 340 * (sysInfo.screenWidth / 750); // rpx 转 px
console.log("footerHeight=", footerHeight);
this.mescrollHeight = sysInfo.screenHeight - footerHeight;
console.log("mescrollHeight=", this.mescrollHeight);
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
// 下拉刷新
downCallback() {
debugger;
console.log("下拉加载")
this.mescroll && this.mescroll.resetUpScroll(false);
// 重置分页参数
this.getData();
},
// 上拉加载
upCallback() {
debugger;
console.log("上拉加载")
this.page += 1;
this.getData();
},
bleStateRecovery() {
console.log("蓝牙适配器恢复可用,重连断开的设备");
ble.linkAllDevices();
@ -247,9 +304,9 @@
},
updateBleStatu(deviceId) {//更新列表的蓝牙连接状态
updateBleStatu(deviceId) { //更新列表的蓝牙连接状态
if (ble) {
for (var i = 0; i < this.deviceList.length; i++) {
let bleStatu = false;
@ -260,7 +317,7 @@
}
if (v.macAddress && v.device && v.device.id) {
if (v.device.id == this.deviceList[i].id && v.Linked) {
bleStatu = true;
return true;
}
@ -270,7 +327,7 @@
}
this.$set(this.deviceList[i], 'bleStatu', bleStatu);
}
return;
@ -299,6 +356,7 @@
},
// 点击弹框外的区域关闭
closePopup(type) {
debugger;
if (type === 'delete') {
this.deleteShow = false;
uni.showTabBar(); // 显示TabBar
@ -333,44 +391,66 @@
this.activeTab = index;
this.activeTabInfo = tab
this.page = 1; // 重置页码
this.finished = false; // 重
// 明确传递参数，空字符串改为null或undefined
const deviceType = tab.id === '' ? undefined : tab.id;
this.getData(deviceType);
this.getData();
},
// 获取设备列表
getData(deviceType = '') {
if (this.loading || this.finished) return;
this.loading = true;
let data = {
pageNum: this.page,
pageSize: this.size,
deviceType: deviceType // 使用传入的设备类型
}
deviceInfo(data).then((res) => {
if (res.code == 200) {
const newDevices = res.rows.map(device => ({
...device,
showConfirm: false
}));
getData() {
// 如果是第一页或切换分类，替换数据
this.deviceList = this.page === 1 ? newDevices : [...this.deviceList, ...newDevices];
this.updateBleStatu();
this.total = res.total;
// 判断是否加载完成
if (res.rows.length < this.size || this.deviceList.length >= this.total) {
this.finished = true;
} else {
this.page++;
var task = () => {
console.error("正在加载第" + this.mescroll.num + "页数据");
return new Promise((resolve, reject) => {
let data = {
pageNum: this.mescroll.num,
pageSize: this.size,
deviceType: this.activeTabInfo ? this.activeTabInfo.id : '', // 使用传入的设备类型
isAsc:'desc',
orderByColumn:'bindingTime'
}
}
}).finally(() => {
this.loading = false;
});
deviceInfo(data).then((res) => {
if (res.code == 200) {
const newDevices = res.rows.map(device => ({
...device,
showConfirm: false
}));
// 如果是第一页或切换分类，替换数据
this.deviceList = data.pageNum === 1 ? newDevices :this.deviceList.concat(newDevices);
this.updateBleStatu();
this.total = res.total;
// 判断是否加载完成
let hasNext = true;
if (res.rows.length < this.size || this.deviceList.length >= this
.total) {
hasNext = false;
} else {
hasNext = true;
}
this.mescroll.endSuccess(res.rows.length, hasNext);
}else{
this.mescroll.endSuccess(0, false);
}
}).finally(() => {
resolve();
});
});
}
clearTimeout(timeout);
//防止下拉刷新的同时会调用一次上拉加载的问题
timeout = setTimeout(task, 50);
},
// 滚动触底事件处理
onScrollToLower() {
@ -398,21 +478,24 @@
// 处理新的扫码结果
const cleanedResult = res.result.trim();
console.log('扫码结果：', cleanedResult);
let url=`/pages/common/qrcode/qrcode?deviceId=${encodeURIComponent(cleanedResult)}`;
try{
let json=JSON.parse(cleanedResult);
if('imei' in json){
url=`/pages/common/qrcode/qrcode?deviceId=${encodeURIComponent(json.imei)}`;
}else if('blue' in json){
if(!json.blue.includes(':')){
json.blue=json.blue.replace(
/(.{2})/g, '$1:')
.slice(0, -1)
let url =
`/pages/common/qrcode/qrcode?deviceId=${encodeURIComponent(cleanedResult)}`;
try {
let json = JSON.parse(cleanedResult);
if ('imei' in json) {
url =
`/pages/common/qrcode/qrcode?deviceId=${encodeURIComponent(json.imei)}`;
} else if ('blue' in json) {
if (!json.blue.includes(':')) {
json.blue = json.blue.replace(
/(.{2})/g, '$1:')
.slice(0, -1)
}
url=`/pages/common/addBLE/LinkBle?mac=${encodeURIComponent(json.blue)}`;
url =
`/pages/common/addBLE/LinkBle?mac=${encodeURIComponent(json.blue)}`;
}
}catch(ex){
} catch (ex) {
}
// 跳转并传递扫描结果
uni.navigateTo({
@ -440,21 +523,26 @@
const {
content
} = e
console.log(item, 'eeeee');
switch (e.content.text) {
case '删除':
this.handleDeleteDevice(item, index)
break
case '重命名':
this.handleRenameDevice(item, index)
break
};
setTimeout(() => {
console.log(item, 'eeeee');
switch (e.content.text) {
case '删除':
this.handleDeleteDevice(item, index)
break
case '重命名':
this.handleRenameDevice(item, index)
break
};
}, 200);
},
// 删除设备
handleDeleteDevice(item, index) {
this.deviceId = item
this.deleteShow = true
uni.hideTabBar()
},
// 确认删除
handleBtn() {
@ -477,7 +565,7 @@
// 关闭所有滑动项
this.$refs.swipeAction.closeAll();
ble && ble.DropDevice(null,data.id);
ble && ble.DropDevice(null, data.id);
} else {
uni.showToast({
title: res.msg,
@ -598,14 +686,7 @@
})
},
onIntall() {
this.page = 1;
this.finished = false;
const deviceType = this.activeTabInfo?.id === '' ? undefined : this.activeTabInfo?.id;
this.getData(deviceType); // 重新加载第一页数据
setTimeout(() => {
// 停止下拉刷新动画
uni.stopPullDownRefresh();
}, 800);
this.downCallback();
},
updateDeviceStatus(data) {
this.deviceList = this.deviceList
@ -633,6 +714,7 @@
},
},
onLoad() {
console.error("首页加载");
this.getTab()
this.onIntall()
// 绑定页面做了监听,新增成功,刷新页面
@ -646,25 +728,25 @@
this.onIntall()
});
ble = BleHelper.getBleTool();
//蓝牙连接成功的回调
ble.addRecoveryCallback((res) => {
console.log("11111");
this.bleRecovery(res);
}, pagePath);
}, pagePath);
//蓝牙断开连接的回调
ble.addDisposeCallback((res) => {
console.log("2222222");
this.bleBreak(res);
}, pagePath);
}, pagePath);
//蓝牙适配器恢复可用的回调，一般是重连设备
ble.addStateRecoveryCallback(res => {
this.bleStateRecovery();
}, pagePath);
}, pagePath);
this.getSystemInfoSyncH();
},
beforeDestroy() {
@ -684,11 +766,20 @@
.device-page {
display: flex;
flex-direction: column;
min-height: 100vh;
height: calc(100vh - 100rpx);
background-color: rgb(18, 18, 18);
padding: 30rpx;
overflow-y: hidden;
box-sizing: border-box;
/* border: 1px solid #FF0000; */
position: fixed;
top: 70px;
width: 100%;
z-index: 1;
}
.tab-bar {
width: 100%;
color: rgb(255, 255, 255);
@ -772,6 +863,7 @@
position: relative;
}
.device-header {
display: flex;
align-items: center;