142 lines
3.4 KiB
Vue
142 lines
3.4 KiB
Vue
<template>
|
|
<page-meta>
|
|
<navigation-bar :title="$tt('navBar.productList')" background-color="#007AFF">
|
|
</navigation-bar>
|
|
</page-meta>
|
|
<view class="scene-list-wrap">
|
|
<view class="container-wrap">
|
|
<view class="cell-group-wrap">
|
|
<u-cell-group :border="false">
|
|
<view class="cell-wrap" v-for="(item,index) in list" :key="index">
|
|
<u-cell :title="item.sceneName" :border="false" @click="handleDelete(item)">
|
|
<u-icon slot="right-icon" size="18" name="minus-circle-fill" color="#ff7e7e"></u-icon>
|
|
</u-cell>
|
|
</view>
|
|
</u-cell-group>
|
|
</view>
|
|
<u-loadmore :status="loadmoreStatus" v-if="total > queryParams.pageSize"
|
|
:loading-text="$tt('scene.tryingToLoad')" :loadmoreText="$tt('scene.gentlyPullUp')"
|
|
:nomoreText="$tt('scene.emptyData')" marginTop="20" />
|
|
</view>
|
|
<view class="other">
|
|
<u-empty mode="data" :show="total === 0" marginTop="60" :text="$tt('scene.emptyData')"></u-empty>
|
|
|
|
<u-modal :show="isDelete" showCancelButton :confirmText="$tt('common.delete')"
|
|
@cancel="() => isDelete = false" :title="$tt('sceneDetail.tips')" :content="deleteContent"
|
|
@confirm="handleConfirmDelete">
|
|
</u-modal>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { listScene, delScene } from '@/apis/modules/scene';
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 16,
|
|
},
|
|
list: [], // 场景列表
|
|
total: 0,
|
|
loadmoreStatus: 'loadmore', // 刷新和加载相关
|
|
isDelete: false,
|
|
deleteId: '',
|
|
deleteContent: '',
|
|
};
|
|
},
|
|
onLoad () {
|
|
this.getSceneDatas();
|
|
},
|
|
methods: {
|
|
// 获取区设备列表
|
|
getSceneDatas () {
|
|
listScene(this.queryParams)
|
|
.then(res => {
|
|
const { rows, total } = res;
|
|
this.list = this.list.concat(rows);
|
|
this.total = total;
|
|
})
|
|
.catch(err => {
|
|
console.log(err);
|
|
});
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh () {
|
|
this.list = [];
|
|
this.queryParams.pageNum = 1;
|
|
// 模拟网络请求
|
|
setTimeout(x => {
|
|
this.getSceneDatas();
|
|
uni.stopPullDownRefresh();
|
|
}, 1000);
|
|
},
|
|
// 上拉加载
|
|
onReachBottom () {
|
|
this.loadmoreStatus = 'loading';
|
|
this.queryParams.pageNum = ++this.queryParams.pageNum;
|
|
// 模拟网络请求
|
|
setTimeout(() => {
|
|
if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize >= this.total) {
|
|
this.loadmoreStatus = 'nomore';
|
|
} else {
|
|
this.loadmoreStatus = 'loading';
|
|
this.getSceneDatas();
|
|
}
|
|
}, 1000);
|
|
},
|
|
// 删除
|
|
handleDelete (item) {
|
|
this.isDelete = true;
|
|
this.deleteId = item.sceneId;
|
|
this.deleteContent = `确定删除“${item.sceneName}”?`
|
|
},
|
|
// 确认删除
|
|
handleConfirmDelete () {
|
|
delScene(this.deleteId).then(res => {
|
|
if (res.code === 200) {
|
|
this.list = [];
|
|
this.queryParams.pageNum = 1;
|
|
this.getSceneDatas();
|
|
} else {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: res.msg
|
|
});
|
|
}
|
|
this.isDelete = false;
|
|
}).catch(e => {
|
|
console.log(e);
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
height: 100%;
|
|
background: #eef3f7;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.scene-list-wrap {
|
|
.container-wrap {
|
|
.cell-group-wrap {
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
margin: 30rpx;
|
|
|
|
.cell-wrap {
|
|
padding: 6rpx;
|
|
|
|
&:not(:last-child) {
|
|
border-bottom: 1rpx solid #F1F2F5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |