Xazn-app/pagesA/scene/list.vue

<template>
	<page-meta>
		<navigation-bar :title="$tt('navBar.sceneList')" background-color="#007AFF">
		</navigation-bar>
	</page-meta>
	<view class="scene-list-wrap">
		<view class="container-wrap">
			<view class="cell-group">
				<u-cell-group :border="false">
					<view class="cell-wrap" v-for="(item,index) in list" :key="index">
						<u-cell :title="item.sceneName" :border="false">
							<u-icon slot="right-icon" size="18" name="minus-circle-fill" color="#ff7e7e"
								@click="handleDelete(item)"></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 {
				background-color: #fff;
				border-radius: 10rpx;
				margin: 20rpx;

				.cell-wrap {
					padding: 6rpx;

					&:not(:last-child) {
						border-bottom: 1rpx solid #F1F2F5;
					}
				}
			}
		}
	}
</style>