Files
APP/pages/6170/shareManagement/index.vue

231 lines
4.2 KiB
Vue
Raw Normal View History

2025-07-16 16:43:22 +08:00
<template>
<view class="share">
<view class="device-title">已分享用户</view>
<view class="device-info" v-for="(item, index) in deviceList" :key="index">
<view class="device-header">
<view class="deviceIMG">
<image :src="item.devicePic" mode="" class="IMG"></image>
</view>
<view class="device-name">
2025-07-19 10:22:48 +08:00
<view>{{item.deviceName}}</view>
2025-07-16 16:43:22 +08:00
<view class="ID">
2025-07-19 10:22:48 +08:00
<view class="ID">ID:{{item.id}}
2025-07-16 16:43:22 +08:00
</view>
</view>
</view>
2025-07-19 10:22:48 +08:00
<view class="device-delete" >
<text class="delete" @click="handleDelete(item)">移除</text>
2025-07-16 16:43:22 +08:00
</view>
</view>
</view>
<!-- 删除弹框 -->
<view class="agreement-mask" v-if="deleteShow" @click="closePopup('delete')">
<view class="agreement-popup" @click.stop>
<view class="popup-content">
<image src="/static/images/dell.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>
2025-07-19 10:22:48 +08:00
import {deviceShareList,deviceShareDelete} from '@/api/6170/share.js'
2025-07-16 16:43:22 +08:00
export default {
data() {
return {
2025-07-19 10:22:48 +08:00
deviceList: [],
deleteShow:false,
delelteItemInfo:''
2025-07-16 16:43:22 +08:00
}
},
methods: {
// 删除
2025-07-19 10:22:48 +08:00
handleDelete(item) {
console.log(item,'www');
2025-07-16 16:43:22 +08:00
this.deleteShow=true
2025-07-19 10:22:48 +08:00
this.delelteItemInfo=item
2025-07-16 16:43:22 +08:00
},
handleBtn(){
2025-07-19 10:22:48 +08:00
let allId=this.delelteItemInfo.id
deviceShareDelete(allId).then((res)=>{
if (res.code=200) {
uni.showToast({
title:res.msg,
icon:'none'
})
this.deleteShow=false
this.getData()
} else{
uni.showToast({
title:res.msg,
icon:'none'
})
}
})
//
},
getData(){
let data ={
}
deviceShareList(data).then((res)=>{
if (res.code==200) {
this.deviceList=res.rows
}
})
2025-07-16 16:43:22 +08:00
}
2025-07-19 10:22:48 +08:00
},
onLoad() {
this.getData()
2025-07-16 16:43:22 +08:00
}
}
</script>
<style scoped>
.share {
padding: 30rpx;
background: #121212;
min-height: 100vh;
}
.device-title {
color: rgba(255, 255, 255, 0.87);
padding: 30rpx 0;
}
.device-info {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.87);
padding-top: 10rpx;
position: relative;
2025-07-19 10:22:48 +08:00
margin-bottom: 20rpx;
2025-07-16 16:43:22 +08:00
}
.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;
border-radius: 16rpx;
position: relative;
background-color: rgba(42, 42, 42, 0.6);
display: flex;
align-items: center;
}
.device-delete {
text-align: end;
width: 50%;
}
.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(255, 200, 78, 1);
cursor: pointer;
}
.IMG {
width: 68rpx;
height: 50rpx;
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-color: rgb(42, 42, 42);
border-radius: 40rpx;
padding: 30rpx;
text-align: center;
border: 1px solid rgba(255, 200, 78, 0.3);
}
.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: #FFC84E;
color: #232323;
border: none;
width: 170rpx !important;
}
</style>