smartswrtch-app/page_components/shebeixz.vue
2025-03-12 17:04:47 +08:00

329 lines
7.6 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="page">
<u-navbar title="应用设备" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
title-size='36' height='42'></u-navbar>
<view class="box" v-if="loading">
<view class="box_list" v-for="(item, index) in list" :key="index" @click="btnactive(item.deviceId,index,item)" >
<view :class="['boxlist', { active: tcidlist.includes(item.deviceId) }]">
<view :class="['toptime', { activewz: tcidlist.includes(item.deviceId) }]">
<text>{{item.deviceName.length > 5 ? item.deviceName.substring(0,4) + '...' : item.deviceName}}
<text style="display: block;margin-top: 10rpx;">SN:{{item.deviceNo}}</text>
</text>
<text v-if="tcidlist.includes(item.deviceId)">已应用</text>
<text v-else>未应用</text>
</view>
</view>
<view class="ccc">
</view>
</view>
</view>
<view class="" v-if="listflag"
style="color: #ccc;font-size: 36rpx;margin-top: 200rpx;text-align: center;">
暂无设备
</view>
<view class="anniu" @click="btnqd">
<!-- <view class="xinz" @click="btnadd">
新建套餐
</view> -->
<view class="xinz">
确定
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: '',
loading: false,
disabled: false,
btnWidth: 180,
show: false,
options: [{
text: '删除',
style: {
backgroundColor: '#dd524d'
}
}],
deviceId: '',
bgc: {
backgroundColor: "#8883f0",
},
activeid: '',
checkboxes: [],
tcidlist: [],
titaoc: [],
newobj: [],
listflag:false,
titflag:'',
arrlists:[],
deviceList:[],
shu:''
};
},
onLoad(option) {
uni.removeStorageSync('tcidlist')
this.shu = option.shu
this.deviceId = option.id
if(option.title == '确定'){
this.titflag = '确定'
// this.deviceList = JSON.parse(option.list)
}
},
created() {
// 初始化checkboxes数组每个元素都设为false表示初始时不显示复选框
// this.checkboxes = new Array(this.list.length).fill(false);
},
onShow() {
this.tcidlist = []
this.getlist()
},
onUnload() {
uni.setStorageSync('key','key')
},
// 分享到好友(会话)
onShareAppMessage: function() {
return {
title: '创想物联',
path: '/pages/shouye/index'
}
},
// 分享到朋友圈
onShareTimeline: function() {
return {
title: '创想物联',
query: '',
path: '/pages/shouye/index'
}
},
methods: {
// 查询套餐已有设备
getao() {
this.$u.get(`/app/suit/${this.deviceId}`).then(res => {
if (res.code == 200) {
if (res.data.deviceList.length > 0) {
this.titaoc = res.data.deviceList
let uniqueSuitIds = new Set();
this.arrlists = new Set()
this.list.forEach(item => {
if (this.titaoc.some(titaocItem => titaocItem.deviceId == item.deviceId)) {
uniqueSuitIds.add(item.deviceId);
this.arrlists.add(item)
}
})
this.tcidlist = Array.from(uniqueSuitIds);
let matchedItems = this.list.filter(item => uniqueSuitIds.has(item.deviceId))
let unmatchedItems = this.list.filter(item => !uniqueSuitIds.has(item.deviceId))
this.list = matchedItems.concat(unmatchedItems)
}else{
this.tcidlist = []
}
}
})
},
getadd(){
if (this.deviceList.length > 0) {
this.titaoc = this.deviceList
let uniqueSuitIds = new Set();
this.arrlists = new Set()
this.list.forEach(item => {
if (this.titaoc.some(titaocItem => titaocItem.deviceId == item.deviceId)) {
uniqueSuitIds.add(item.deviceId);
this.arrlists.add(item)
}
})
this.tcidlist = Array.from(uniqueSuitIds);
let matchedItems = this.list.filter(item => uniqueSuitIds.has(item.deviceId))
let unmatchedItems = this.list.filter(item => !uniqueSuitIds.has(item.deviceId))
this.list = matchedItems.concat(unmatchedItems)
}else{
this.tcidlist = []
}
},
btnactive(id, index,item) {
const indexInTcidList = this.tcidlist.indexOf(id);
if (indexInTcidList !== -1) {
this.tcidlist.splice(indexInTcidList, 1);
} else {
this.tcidlist.push(id);
}
this.toggleItemInArray(this.arrlists, item)
},
toggleItemInArray(arr, item) {
// 检查元素是否存在于数组中
const index = arr.indexOf(item);
if (index > -1) {
// 如果存在,则删除该元素
arr.splice(index, 1);
console.log('元素已删除');
} else {
// 如果不存在,则添加该元素
arr.push(item);
console.log('元素已添加');
}
// 打印更新后的数组
console.log(arr);
},
// 点击确定
btnqd() {
if(this.titflag == '确定'){
uni.setStorageSync('tcidlist', this.arrlists)
uni.navigateBack()
}else{
let numArr = this.tcidlist.map(item => parseInt(item, 10))
let data = {
deviceIds: numArr,
suitId: this.deviceId
}
this.$u.put(`/app/suit`, data).then((res) => {
if (res.code == 200) {
uni.showToast({
title: res.msg,
icon: 'success',
duration: 1000,
})
if(this.titflag == '确定'){
}else{
this.getao()
}
setTimeout(() => {
uni.navigateBack()
}, 1000)
}
})
}
},
getlist() {
let data = {
pageNum: 1,
pageSize: 99,
}
this.$u.get(`/app/device/list`, data).then((res) => {
if (res.code == 200) {
if(res.rows.length > 0){
this.listflag = false
this.list = res.rows
this.list = this.list.map(item => ({
...item,
tcidlist: this.tcidlist
}))
if(this.titflag == '确定'){
// this.getadd()
}else{
this.getao()
}
this.loading = true
}else{
this.listflag = true
}
}
})
},
}
};
</script>
<style lang="scss">
.active {
background-color: #8883F0 !important;
border-radius: 20rpx;
}
.activewz {
color: #fff !important;
}
page {
background: #F4F5F7;
}
.anniu {
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
height: 200rpx;
padding-top: 40rpx;
background-color: #fff;
width: 100%;
padding-left: 50rpx;
padding-right: 50rpx;
.xinz {
width: 100%;
height: 84rpx;
background: #8883F0;
filter: blur(0px);
text-align: center;
line-height: 84rpx;
font-size: 36rpx;
color: #FFFFFF;
border-radius: 18rpx;
}
}
.page {
width: 750rpx;
padding-bottom: 400rpx;
.box {
width: 750rpx;
height: 100%;
background: #F4F5F7;
border-radius: 0rpx 0rpx 0rpx 0rpx;
padding: 50rpx;
.box_list {
background-color: #fff;
margin-top: 20rpx;
border-radius: 20rpx;
}
.boxlist {
padding: 40rpx 42rpx;
box-sizing: border-box;
.ccc {
display: flex;
align-items: center;
justify-content: space-between;
}
.toptime {
font-size: 32rpx;
color: #000000;
display: flex;
justify-content: space-between;
}
.bumday {
margin-top: 10rpx;
text {
font-size: 32rpx;
color: #95989D;
}
}
}
/deep/ .u-swipe-action {
margin-top: 30rpx;
border-radius: 20rpx;
width: 654rpx;
height: 182rpx;
background: #FFFFFF;
box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
filter: blur(0px);
border: 0;
}
/deep/ .u-swipe-del {
height: 190rpx;
}
}
}
</style>