351 lines
7.8 KiB
Vue
351 lines
7.8 KiB
Vue
<template>
|
||
<view class="share">
|
||
<!-- 下拉刷新区域 -->
|
||
<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
|
||
<view class="device-title">已分享用户</view>
|
||
<view class="" v-if="deviceList.length>0">
|
||
<view class="device-info" v-for="(item, index) in deviceList" :key="index">
|
||
<view class="device-header" @click.stop="handleFile(item)">
|
||
<view class="deviceIMG">
|
||
<image src="@/static/images/common/user.png" mode="aspectFit" class="IMG"></image>
|
||
</view>
|
||
<view class="device-name">
|
||
<view>用户名：{{item.deviceName}}</view>
|
||
<view class="ID">
|
||
<view class="ID">{{item.phonenumber}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="device-delete">
|
||
<text class="delete" @click.stop="handleDelete(item)">移除</text>
|
||
</view>
|
||
</view>
|
||
</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>
|
||
</mescroll-uni>
|
||
|
||
<!-- 删除弹框 -->
|
||
<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')">
|
||
<view class="agreement-popup" @click.stop>
|
||
<view class="popup-content">
|
||
<image src="/static/images/common/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,
|
||
deviceShareDelete
|
||
} from '@/api/6170/share.js'
|
||
import MescrollUni from 'mescroll-uni/mescroll-uni.vue'
|
||
|
||
export default {
|
||
components: {
|
||
MescrollUni
|
||
},
|
||
data() {
|
||
return {
|
||
deviceList: [],
|
||
deleteShow: false,
|
||
delelteItemInfo: '',
|
||
itemInfo: '',
|
||
mescroll: null, // mescroll实例对象
|
||
downOption: {
|
||
auto: false // 不自动加载
|
||
},
|
||
upOption: {
|
||
auto: false, // 不自动加载
|
||
noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据
|
||
empty: {
|
||
tip: '暂无相关数据'
|
||
}
|
||
},
|
||
page: 1, // 当前页码
|
||
size: 10, // 每页条数
|
||
total: 0 // 总数据量
|
||
}
|
||
},
|
||
methods: {
|
||
// mescroll组件初始化的回调,可获取到mescroll对象
|
||
mescrollInit(mescroll) {
|
||
this.mescroll = mescroll;
|
||
},
|
||
// 下拉刷新的回调
|
||
downCallback() {
|
||
// 重置分页参数
|
||
this.page = 1;
|
||
this.getData(this.itemInfo.id).then(res => {
|
||
// 数据请求成功后,隐藏下拉刷新的状态
|
||
this.mescroll.endSuccess();
|
||
}).catch(() => {
|
||
// 请求失败,隐藏下拉刷新的状态
|
||
this.mescroll.endErr();
|
||
})
|
||
},
|
||
// 上拉加载的回调
|
||
upCallback() {
|
||
this.getData(this.itemInfo.id).then(res => {
|
||
// 根据是否有数据来决定是否显示无更多数据的提示
|
||
const hasNext = this.deviceList.length < this.total;
|
||
this.mescroll.endSuccess(this.deviceList.length, hasNext);
|
||
}).catch(() => {
|
||
// 请求失败,隐藏上拉加载的状态
|
||
this.mescroll.endErr();
|
||
})
|
||
},
|
||
// 点击弹框外的区域关闭
|
||
closePopup(type) {
|
||
if (type === 'delete') {
|
||
this.deleteShow = false;
|
||
}
|
||
},
|
||
// 删除
|
||
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.page = 1;
|
||
this.getData(this.itemInfo.id).then(() => {
|
||
this.mescroll.resetUpScroll();
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getData(val) {
|
||
return new Promise((resolve, reject) => {
|
||
let data = {
|
||
deviceId: val,
|
||
pageNum: this.page,
|
||
pageSize: this.size,
|
||
}
|
||
deviceShareList(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.total = res.total;
|
||
if (this.page === 1) {
|
||
// 如果是第一页，直接替换数据
|
||
this.deviceList = res.rows;
|
||
} else {
|
||
// 如果不是第一页，追加数据
|
||
this.deviceList = this.deviceList.concat(res.rows);
|
||
}
|
||
resolve(res);
|
||
} else {
|
||
reject(res);
|
||
}
|
||
}).catch(err => {
|
||
reject(err);
|
||
})
|
||
})
|
||
},
|
||
// 跳转分享详情
|
||
handleFile(item) {
|
||
uni.navigateTo({
|
||
url: "/pages/6170/deviceControl/index",
|
||
success: (res) => {
|
||
// 页面跳转成功后的回调函数
|
||
res.eventChannel.emit('detailData', {
|
||
data: item,
|
||
apiType: 'listB' // 自定义标识 // 自定义标识，详情哪里根据这个参数不同信息
|
||
});
|
||
}
|
||
})
|
||
}
|
||
},
|
||
onLoad() {
|
||
const eventChannel = this.getOpenerEventChannel();
|
||
// 监听 'shareDevice' 事件，获取传过来的数据
|
||
eventChannel.on('shareManagement', (data) => {
|
||
console.log(data, 'data1t111');
|
||
this.itemInfo = data.data;
|
||
// 初始化加载数据
|
||
this.page = 1;
|
||
this.getData(this.itemInfo.id).then(() => {
|
||
// 数据加载完成后，如果需要可以手动触发下拉刷新结束
|
||
if (this.mescroll) {
|
||
this.mescroll.endSuccess();
|
||
}
|
||
})
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.share {
|
||
padding: 30rpx;
|
||
background: #121212;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.device-title {
|
||
color: rgba(255, 255, 255, 0.87);
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.device-info {
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
padding-top: 10rpx;
|
||
position: relative;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.device-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.device-name {
|
||
font-size: 32rpx;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
margin-left: 25rpx;
|
||
line-height: 50rpx;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.ID {
|
||
color: rgba(255, 255, 255, 0.6);
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.deviceIMG {
|
||
/* width: 100rpx; */
|
||
/* height: 100rpx; */
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.device-delete {
|
||
text-align: end;
|
||
width: 50%;
|
||
}
|
||
|
||
.noDATA {
|
||
text-align: center;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
transform: translate(-0%, 100%);
|
||
}
|
||
|
||
.delete {
|
||
border-radius: 32px;
|
||
background: rgba(255, 200, 78, 0.06);
|
||
display: inline-block;
|
||
width: 152rpx;
|
||
height: 60rpx;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
color: rgba(224, 52, 52, 1);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.IMG {
|
||
width: 120rpx;
|
||
height: 100rpx;
|
||
margin-left: 17%;
|
||
}
|
||
|
||
.title {
|
||
font-size: 18px;
|
||
color: white;
|
||
}
|
||
|
||
.device-info {
|
||
width: 100%;
|
||
padding: 10px;
|
||
background: rgba(26, 26, 26, 1);
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
/* 遮罩层 */
|
||
.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: 60%;
|
||
background: rgba(56, 57, 52, 0.4);
|
||
border-radius: 40rpx;
|
||
padding: 30rpx;
|
||
text-align: center;
|
||
border: 1px solid rgba(224, 52, 52, 0.3);
|
||
}
|
||
|
||
.svg {
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
}
|
||
|
||
/* 通用按钮样式 */
|
||
.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: rgba(255, 255, 255, 0.87);
|
||
border: none;
|
||
width: 170rpx !important;
|
||
}
|
||
</style> |