519 lines
11 KiB
Vue
519 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="device-page">
|
|||
|
|
<scroll-view class="tab-bar" scroll-x="true" scroll-with-animation>
|
|||
|
|
<view class="tab-container">
|
|||
|
|
<view v-for="(tab, index) in tabs" :key="index"
|
|||
|
|
:class="['tab-item', activeTab === index ? 'active' : '']" @click="switchTab(tab,index)">
|
|||
|
|
{{tab.name}}
|
|||
|
|
</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>分享给"{{group.sharedTo}}"的设备</text>
|
|||
|
|
<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"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="device-name">
|
|||
|
|
<view>设备:{{item.deviceName}}</view>
|
|||
|
|
<view class="ID">
|
|||
|
|
<view class="ID">
|
|||
|
|
ID:{{item.deviceImei}}</view>
|
|||
|
|
<view class="onlines">在线</view>
|
|||
|
|
<view>电量：{{item.battery || '80'}}%</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
</view>
|
|||
|
|
<!-- 加载状态提示 -->
|
|||
|
|
<!-- <view class="loading-status">
|
|||
|
|
<text v-if="loading">加载中...</text>
|
|||
|
|
<text v-if="finished">没有更多数据了</text>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
<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>
|
|||
|
|
<!-- 删除弹框 -->
|
|||
|
|
<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')">
|
|||
|
|
<view class="agreement-popupC" @click.stop>
|
|||
|
|
<view class="popup-content">
|
|||
|
|
<image src="/static/images/delel.png" mode="" class="svg"></image>
|
|||
|
|
<uni-icon class="trash"></uni-icon>
|
|||
|
|
<view>
|
|||
|
|
<view class="popup-Title">确定停止分享该设备</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 按钮组 -->
|
|||
|
|
<view class="popup-buttons">
|
|||
|
|
<button class="btn agreeBtn" @click="handleBtn">确定</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
deviceShareList,
|
|||
|
|
otherDeviceShareList,
|
|||
|
|
deviceShareDelete
|
|||
|
|
} from '@/api/6170/share.js'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
deviceList: [],
|
|||
|
|
tabs: [{
|
|||
|
|
name: '我的分享',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '他人分享',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
activeTab: 0,
|
|||
|
|
deleteShow: false,
|
|||
|
|
page: 1, // 当前页码
|
|||
|
|
size: 10, // 每页条数
|
|||
|
|
total: 0, // 总数据量
|
|||
|
|
loading: false,
|
|||
|
|
finished: false,
|
|||
|
|
deviceId: '',
|
|||
|
|
editingGroup: null, // 编辑的分组索引
|
|||
|
|
currentGroup: null // 当前操作的分组
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 根据分享用户分组设备
|
|||
|
|
groupedDevices() {
|
|||
|
|
const groups = {};
|
|||
|
|
this.deviceList.forEach(device => {
|
|||
|
|
// 这里假设device.sharedTo是分享目标的手机号
|
|||
|
|
const key = device.sharedTo || '未分享';
|
|||
|
|
if (!groups[key]) {
|
|||
|
|
groups[key] = {
|
|||
|
|
sharedTo: key,
|
|||
|
|
devices: []
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
groups[key].devices.push(device);
|
|||
|
|
});
|
|||
|
|
return Object.values(groups);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 点击弹框外的区域关闭
|
|||
|
|
closePopup(type) {
|
|||
|
|
if (type === 'delete') {
|
|||
|
|
this.deleteShow = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 跳转到详情页面
|
|||
|
|
handleFile(item) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/6170/deviceControl/index",
|
|||
|
|
success: (res) => {
|
|||
|
|
// 页面跳转成功后的回调函数
|
|||
|
|
res.eventChannel.emit('deviceControl', {
|
|||
|
|
data: item,
|
|||
|
|
apiType: 'listB' // 自定义标识 // 自定义标识，详情哪里根据这个参数不同信息
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 编辑
|
|||
|
|
toggleEdit(groupIndex) {
|
|||
|
|
if (this.editingGroup === groupIndex) {
|
|||
|
|
this.editingGroup = null;
|
|||
|
|
} else {
|
|||
|
|
this.editingGroup = groupIndex;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 停止分享
|
|||
|
|
handleDelete(item) {
|
|||
|
|
console.log(item, 'www');
|
|||
|
|
this.deleteShow = true
|
|||
|
|
this.delelteItemInfo = item
|
|||
|
|
},
|
|||
|
|
// 确认停止移除
|
|||
|
|
handleBtn() {
|
|||
|
|
let allId = this.delelteItemInfo.id
|
|||
|
|
deviceShareDelete(allId).then((res) => {
|
|||
|
|
if (res.code = 200) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
this.deleteShow = false
|
|||
|
|
this.editingGroup = null;
|
|||
|
|
this.onIntall()
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
//
|
|||
|
|
},
|
|||
|
|
// tab切换页
|
|||
|
|
switchTab(tab, index) {
|
|||
|
|
console.log(tab, 'tabsss');
|
|||
|
|
this.deviceList = [];
|
|||
|
|
this.activeTab = index;
|
|||
|
|
this.page = 1; // 重置页
|
|||
|
|
this.getData(tab);
|
|||
|
|
},
|
|||
|
|
// 获取设备列表
|
|||
|
|
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 || '未分享'
|
|||
|
|
}));
|
|||
|
|
// 分页处理
|
|||
|
|
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++;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}).finally(() => {
|
|||
|
|
this.loading = false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 滚动触底事件处理
|
|||
|
|
onScrollToLower() {
|
|||
|
|
this.getData();
|
|||
|
|
},
|
|||
|
|
onIntall() {
|
|||
|
|
this.page = 1;
|
|||
|
|
const currentTab = this.tabs[this.activeTab];
|
|||
|
|
this.getData(currentTab);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.onIntall()
|
|||
|
|
// 绑定页面做了监听,新增成功,刷新页面
|
|||
|
|
uni.$on('refreshDeviceList', () => {
|
|||
|
|
this.onIntall()
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
// 组件销毁前移除监听器
|
|||
|
|
uni.$off('refreshDeviceList');
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
/* 页面整体样式 */
|
|||
|
|
.device-page {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: rgb(18, 18, 18);
|
|||
|
|
padding: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-bar {
|
|||
|
|
width: 100%;
|
|||
|
|
color: rgb(255, 255, 255);
|
|||
|
|
white-space: nowrap;
|
|||
|
|
/* 禁止换行 */
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-container {
|
|||
|
|
display: flex;
|
|||
|
|
/* justify-content: space-around; */
|
|||
|
|
cursor: pointer;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
/* min-width: 100%; */
|
|||
|
|
/* 最小宽度 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
/* min-width: 120rpx; */
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
/* 左右内边距 */
|
|||
|
|
text-align: center;
|
|||
|
|
/* 文字居中 */
|
|||
|
|
/* 设置最小宽度 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
color: rgba(187, 230, 0, 1);
|
|||
|
|
border-bottom: 6rpx solid rgba(187, 230, 0, 1);
|
|||
|
|
height: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 设备卡片 */
|
|||
|
|
.device-card {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device-content {
|
|||
|
|
background-color: rgb(26, 26, 26);
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.device-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 15rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.device-name {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: rgba(255, 255, 255, 0.87);
|
|||
|
|
margin-left: 24rpx;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
width: 78%;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ID {
|
|||
|
|
color: rgba(255, 255, 255, 0.6);
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.circle {
|
|||
|
|
width: 8rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 25rpx;
|
|||
|
|
top: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.online {
|
|||
|
|
color: rgb(187, 230, 0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.deviceIMG {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
position: relative;
|
|||
|
|
background-color: rgba(42, 42, 42, 0.6);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.IMG {
|
|||
|
|
width: 68rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
margin-left: 17%;
|
|||
|
|
object-fit: contain;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.onlines {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.onlines::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
width: 15rpx;
|
|||
|
|
height: 15rpx;
|
|||
|
|
background: rgb(0, 171, 103);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
top: 20rpx;
|
|||
|
|
left: -20rpx
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.line {
|
|||
|
|
width: 2rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
background: linear-gradient(90deg,
|
|||
|
|
rgba(0, 0, 0, 0) 0%,
|
|||
|
|
rgb(255, 255, 255) 50%,
|
|||
|
|
rgba(255, 255, 255, 0) 100%);
|
|||
|
|
margin-top: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-status {
|
|||
|
|
text-align: center;
|
|||
|
|
color: rgba(255, 255, 255, 0.6);
|
|||
|
|
padding: 20rpx;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.noDATA {
|
|||
|
|
text-align: center;
|
|||
|
|
color: rgba(255, 255, 255, 0.87);
|
|||
|
|
transform: translate(-0%, 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.share-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
color: rgba(255, 255, 255, 0.6);
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.edit-btn {
|
|||
|
|
color: rgba(255, 255, 255, 0.6);
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 遮罩层 */
|
|||
|
|
.agreement-mask {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
z-index: 9999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-Title {
|
|||
|
|
color: rgba(255, 255, 255, 0.86);
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 30rpx 0rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 弹窗主体 */
|
|||
|
|
.agreement-popup {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 50%;
|
|||
|
|
background-color: rgb(42, 42, 42);
|
|||
|
|
border-radius: 60rpx 60rpx 0rpx 0rpx;
|
|||
|
|
padding: 40rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-popupC {
|
|||
|
|
width: 60%;
|
|||
|
|
background-color: rgb(42, 42, 42);
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
border: 1px solid rgba(255, 200, 78, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-flex {
|
|||
|
|
display: flex;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
color: rgba(255, 255, 255, 0.87);
|
|||
|
|
height: 50rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-input {
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
margin-left: 15rpx;
|
|||
|
|
padding: 10rpx 0rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.svg {
|
|||
|
|
width: 58rpx;
|
|||
|
|
height: 62rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 通用按钮样式 */
|
|||
|
|
.btn {
|
|||
|
|
height: 60rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
border-radius: 40rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
margin: 10rpx auto;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 同意按钮 */
|
|||
|
|
.agreeBtn {
|
|||
|
|
background: rgba(224, 52, 52, 1);
|
|||
|
|
color: #232323;
|
|||
|
|
border: none;
|
|||
|
|
width: 170rpx !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.closeBtn {
|
|||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|||
|
|
background-color: rgba(35, 35, 35, 0.87);
|
|||
|
|
color: rgba(255, 255, 255, 1);
|
|||
|
|
}
|
|||
|
|
</style>
|