018A初步完成
This commit is contained in:
liub
@ -9,57 +9,64 @@
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view class="device-list" scroll-y @scrolltolower="onScrollToLower" :lower-threshold="100"
|
||||
style="height:80vh">
|
||||
<view v-if="deviceList.length>0">
|
||||
<view v-for="(group, groupIndex) in groupedDevices" :key="groupIndex">
|
||||
<view class="share-header">
|
||||
<text>{{
|
||||
<view style="height: calc(100% - 200rpx);">
|
||||
|
||||
|
||||
<mescroll-uni class="device-list" @init="mescrollInit" @down="downCallback" @up="upCallback"
|
||||
:up="upOption" :down="downOption" :fixed="false">
|
||||
<!-- <scroll-view class="device-list" scroll-y @scrolltolower="onScrollToLower" :lower-threshold="100"
|
||||
style="height:80vh"> -->
|
||||
<view v-if="deviceList.length>0">
|
||||
<view v-for="(group, groupIndex) in groupedDevices" :key="groupIndex">
|
||||
<view class="share-header">
|
||||
<text>{{
|
||||
tabs[activeTab].name === '我的分享'
|
||||
? `分享给“${group.sharedTo}”的设备`
|
||||
: `来自“${group.othersharedTo}”分享的设备`
|
||||
}}</text>
|
||||
<text class="edit-btn"
|
||||
@click="toggleEdit(groupIndex)">{{editingGroup === groupIndex ? '完成' : '编辑'}}</text>
|
||||
</view>
|
||||
<block>
|
||||
<text class="edit-btn"
|
||||
@click="toggleEdit(groupIndex)">{{editingGroup === groupIndex ? '完成' : '编辑'}}</text>
|
||||
</view>
|
||||
<block>
|
||||
|
||||
<view class="device-card" v-for="(item, index) in group.devices" :key="index"
|
||||
:ref="'swipeItem_' + index">
|
||||
<view class="checkbox" v-if="editingGroup === groupIndex">
|
||||
<uni-icons @click="handleDelete(item)" type="minus" size="20"
|
||||
color="#FF4D4F"></uni-icons>
|
||||
</view>
|
||||
<view class="device-content" @click.stop="handleFile(item)">
|
||||
<view class="device-header">
|
||||
<view class="deviceIMG">
|
||||
<image :src="item.devicePic" class="IMG" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="device-name">
|
||||
<view>设备:{{item.deviceName}}</view>
|
||||
<view class="ID">
|
||||
<view class="device-card" v-for="(item, index) in group.devices" :key="index"
|
||||
:ref="'swipeItem_' + index">
|
||||
<view class="checkbox" v-if="editingGroup === groupIndex">
|
||||
<uni-icons @click="handleDelete(item)" type="minus" size="20"
|
||||
color="#FF4D4F"></uni-icons>
|
||||
</view>
|
||||
<view class="device-content" @click.stop="handleFile(item)">
|
||||
<view class="device-header">
|
||||
<view class="deviceIMG">
|
||||
<image :src="item.devicePic" class="IMG" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="device-name">
|
||||
<view>设备:{{item.deviceName}}</view>
|
||||
<view class="ID">
|
||||
ID:{{item.deviceImei}}</view>
|
||||
<!-- 在线状态 -->
|
||||
<view class="onlines" v-if="item.onlineStatus==1">在线</view>
|
||||
<!-- 离线状态 -->
|
||||
<view class="offlines" v-if="item.onlineStatus==0">离线</view>
|
||||
<view>电量：{{item.battery || '0'}}%</view>
|
||||
<view class="ID">
|
||||
ID:{{item.deviceImei}}</view>
|
||||
<!-- 在线状态 -->
|
||||
<view class="onlines" v-if="item.onlineStatus==1">在线</view>
|
||||
<!-- 离线状态 -->
|
||||
<view class="offlines" v-if="item.onlineStatus==0">离线</view>
|
||||
<view>电量：{{item.battery || '0'}}%</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</view>
|
||||
</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> -->
|
||||
<!-- </scroll-view> -->
|
||||
</mescroll-uni>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 删除弹框 -->
|
||||
<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')">
|
||||
@ -81,6 +88,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var timeout=null;
|
||||
import {
|
||||
deviceShareList,
|
||||
otherDeviceShareList,
|
||||
@ -89,6 +97,23 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mescroll: null,
|
||||
downOption: {
|
||||
auto: true,
|
||||
autoShowLoading: false,
|
||||
},
|
||||
upOption: {
|
||||
auto: false,
|
||||
noMoreSize: 0,
|
||||
offset: 10,
|
||||
isLock: false,
|
||||
empty: {
|
||||
tip: '暂无数据',
|
||||
hideScroll: false,
|
||||
icon: '/static/images/common/empty.png'
|
||||
},
|
||||
textNoMore: '没有更多数据了'
|
||||
},
|
||||
deviceList: [],
|
||||
tabs: [{
|
||||
name: '我的分享',
|
||||
@ -131,6 +156,28 @@
|
||||
|
||||
},
|
||||
methods: {
|
||||
mescrollInit(mescroll) {
|
||||
this.mescroll = mescroll;
|
||||
},
|
||||
// 下拉刷新
|
||||
downCallback() {
|
||||
|
||||
|
||||
if (this.mescroll) {
|
||||
this.mescroll.resetUpScroll(false);
|
||||
this.mescroll.scrollTo(0, 0);
|
||||
}
|
||||
this.getData();
|
||||
|
||||
|
||||
},
|
||||
// 上拉加载
|
||||
upCallback() {
|
||||
|
||||
|
||||
|
||||
this.getData();
|
||||
},
|
||||
// 点击弹框外的区域关闭
|
||||
closePopup(type) {
|
||||
if (type === 'delete') {
|
||||
@ -142,12 +189,13 @@
|
||||
let url = item.detailPageUrl;
|
||||
uni.navigateTo({
|
||||
// url: "/pages/6170/deviceControl/index",
|
||||
url:url,
|
||||
url: url,
|
||||
success: (res) => {
|
||||
// 页面跳转成功后的回调函数
|
||||
res.eventChannel.emit('detailData', {
|
||||
data: item,
|
||||
apiType:this.activeTab===0?'listA':'listB' // 自定义标识 // 自定义标识，详情哪里根据这个参数不同信息
|
||||
apiType: this.activeTab === 0 ? 'listA' :
|
||||
'listB' // 自定义标识 // 自定义标识，详情哪里根据这个参数不同信息
|
||||
});
|
||||
}
|
||||
})
|
||||
@ -200,43 +248,59 @@
|
||||
},
|
||||
// 获取设备列表
|
||||
getData(tab) {
|
||||
//console.log(tab.name, 'tab');
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
let data = {
|
||||
pageNum: this.page,
|
||||
pageSize: this.size,
|
||||
}
|
||||
// 根据当前tab决定调用哪个接口
|
||||
const apiCall = tab.name === '我的分享' ? deviceShareList : otherDeviceShareList;
|
||||
console.log('nihao');
|
||||
apiCall(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
const newDevices = res.rows.map(device => ({
|
||||
...device,
|
||||
showConfirm: false,
|
||||
sharedTo: device.phonenumber,
|
||||
othersharedTo: device.otherPhonenumber
|
||||
}));
|
||||
// 分页处理
|
||||
if (this.page === 1) {
|
||||
this.deviceList = newDevices;
|
||||
} else {
|
||||
this.deviceList = [...this.deviceList, ...newDevices];
|
||||
}
|
||||
|
||||
this.total = res.total;
|
||||
// 判断是否已加载全部数据
|
||||
if (res.rows.length < this.size || this.deviceList.length >= this.total) {
|
||||
this.finished = true;
|
||||
} else {
|
||||
this.page++;
|
||||
}
|
||||
let task = () => {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
let data = {
|
||||
pageNum: this.mescroll.num,
|
||||
pageSize: this.size,
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
if (!data.pageNum) {
|
||||
this.mescroll.endSuccess(0, false);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// 根据当前tab决定调用哪个接口
|
||||
const apiCall = this.tabs[this.activeTab].name === '我的分享' ? deviceShareList : otherDeviceShareList;
|
||||
console.log('nihao');
|
||||
apiCall(data).then((res) => {
|
||||
if (res.code == 200) {
|
||||
const newDevices = res.rows.map(device => ({
|
||||
...device,
|
||||
showConfirm: false,
|
||||
sharedTo: device.phonenumber,
|
||||
othersharedTo: device.otherPhonenumber
|
||||
}));
|
||||
// 分页处理
|
||||
if (this.page === 1) {
|
||||
this.deviceList = newDevices;
|
||||
} else {
|
||||
this.deviceList = [...this.deviceList, ...newDevices];
|
||||
}
|
||||
|
||||
this.total = res.total;
|
||||
let hasNext = true;
|
||||
// 判断是否已加载全部数据
|
||||
if (res.rows.length < this.size || this.deviceList.length >= this.total) {
|
||||
this.finished = true;
|
||||
hasNext = false;
|
||||
} else {
|
||||
this.page++;
|
||||
hasNext = true;
|
||||
}
|
||||
this.mescroll.endSuccess(res.rows.length, hasNext);
|
||||
}else{
|
||||
this.mescroll.endSuccess(0, false);
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
}
|
||||
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(task, 50);
|
||||
|
||||
},
|
||||
// 滚动触底事件处理
|
||||
@ -254,7 +318,7 @@
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 组件销毁前移除监听器
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -267,6 +331,9 @@
|
||||
min-height: 100vh;
|
||||
background-color: rgb(18, 18, 18);
|
||||
padding: 30rpx;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
|
||||
Reference in New Issue
Block a user