ZYC-mobile/pages/tabBar/alert/index - 副本.vue

<template>
	<page-meta>
		<navigation-bar :title="$tt('navBar.alarmLog')" background-color="#007AFF">
		</navigation-bar>
	</page-meta>
	<view class="alert-wrap">
		<u-sticky bgColor="#FFF" customStyle="border-bottom:1px solid #eee;">
			<u-tabs :list="tabList" :scrollable="false" lineWidth="80" lineHeight="2" :duration="100"
				@change="handleTabsClick">
			</u-tabs>
		</u-sticky>

		<view class="content">
			<view class="alert-item" v-for="(item, index) in datas" :key="index">
				<view class="left">
					<u-avatar v-if="item.status === 1" bg-color="#c4c6c9" icon="info-circle" fontSize="22"></u-avatar>
					<u-avatar v-if="item.status === 3" bg-color="#5ac752" icon="attach" fontSize="22"></u-avatar>
					<u-avatar v-if="item.status === 2" bg-color="#f9ae3d" icon="warning" fontSize="22"></u-avatar>
				</view>
				<view class="middle">
					<u--text lineHeight="22" :text="$tt('alert.alert')+`：${item.alertName}`"></u--text>
					<u--text type="info" :text="$tt('alert.device')+`：${item.deviceName}`"></u--text>
					<u--text type="info" :text="$tt('alert.time')+`：${item.createTime}`"></u--text>
					<u--text type="info" :text="$tt('alert.data')+`：${item.detail}`"></u--text>
				</view>
				<view class="right">
					<u-button v-if="item.status !== 1" type="primary" icon="edit-pen-fill" shape="circle" size="mini"
						:text="`${item.status === 2 ? $tt('alert.process') : $tt('alert.update')}`"
						@click="gotoDeviceDetail(item.deviceId)"></u-button>
				</view>
			</view>
		</view>
		<u-empty mode="list" :show="total === 0" marginTop="60"></u-empty>
		<u-loadmore :status="loadmoreStatus" v-if="total > queryParams.pageSize" marginTop="20" />
		<u-loading-page :loading="loading" bg-color="#eef3f7" loadingText="ZYC.cn"></u-loading-page>
	</view>
</template>

<script>
	import {
		getAlertList,
		getAlertTemplateId
	} from '@/apis/modules/alertLog.js';

	export default {
		data() {
			return {
				// tabs列表
				tabList: [{
					id: 2,
					name: this.$tt('alert.pendingProcessing'),
					badge: {
						value: 5,
					}
				}, {
					id: 1,
					name: this.$tt('alert.noProcessing'),
				}, {
					id: 3,
					name: this.$tt('alert.processed'),
				}],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					status: 2,
				},
				loading: true,
				datas: [], // log列表数据
				total: 0, // 总条数
				loadmoreStatus: 'loadmore',
				tmpIds: [], //模板ids
			};
		},
		onShow() {
			// #ifdef MP-WEIXIN
			// 检查用户是否登录
			if (!this.isLogin()) {
				uni.showModal({
					title: '提示',
					content: '您还未登录，请登录后查看',
					success: (res) => {
						if (res.confirm) {
							// 用户点击确定，跳转到登录页面
							uni.navigateTo({
								url: '/pages/login/index'
							});
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/tabBar/home/index'
							})
							console.log('用户点击取消');
						}
					}
				});
			}
			// #endif
		},
		created() {
			this.getToken();
			if (this.token != '' && this.token != null) {
				this.getDatas();
				this.getTmplIds();
			}
		},
		methods: {
			gotoDeviceDetail(deviceId) {
				uni.navigateTo({
					url: '/pagesA/home/device/index?deviceId=' + deviceId
				});
			},
			getToken() {
				// 本地缓存获取token
				this.token = uni.getStorageSync('token');
				// vuex存储token
				uni.$u.vuex('vuex_token', this.token);
				console.log(this.token)
			},
			//判断是否登录
			isLogin() {
				if (this.token == '' || this.token == null) {
					return false;
				} else {
					return true;
				}
			},
			// 获取列表数据
			getDatas() {
				this.loading = true;
				getAlertList(this.queryParams).then(res => {
					console.log(JSON.stringify(res))
					if (this.queryParams.pageNum == 1) {
						this.datas = res.rows;
					} else {
						this.datas = this.datas.concat(res.rows);
					}
					this.total = res.total;
					this.loading = false;
					if (this.queryParams.status === 2) {
						this.tabList[0].badge.value = res.total;
					}
					uni.stopPullDownRefresh();
				});
			},
			// 单击查询
			handleTabsClick(e) {
				this.queryParams.status = e.id;
				this.datas = [];
				this.queryParams.pageNum = 1;
				this.getDatas();
			},
			// 上拉加载
			onReachBottom() {
				this.loadmoreStatus = 'loading';
				this.queryParams.pageNum = this.queryParams.pageNum + 1;
				if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize > this.total) {
					this.loadmoreStatus = 'nomore';
				} else {
					this.getDatas();
					this.loadmoreStatus = 'loadmore';
				}
			},
			// 下拉刷新
			onPullDownRefresh() {
				this.datas = [];
				this.queryParams.pageNum = 1;
				this.getDatas();
			},
			// 处理
			handleDispose(item) {
				// 订阅通知
				// #ifdef MP-WEIXIN
				uni.requestSubscribeMessage({
					tmplIds: [this.tmpIds],
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.error(err); //失败
					}
				});
				// #endif
				uni.navigateTo({
					url: '/pages/tabBar/alert/edit?alertLogId=' + item.alertLogId
				});
			},
			//获取模板id
			getTmplIds() {
				getAlertTemplateId().then(res => {
					if (res.code == 200) {
						if (res.msg != '') {
							this.tmpIds = res.msg;
						} else {
							console.log('模板id为空！');
						}
					} else {
						console.log(res.msg);
					}
				});
			},
		}
	};
</script>

<style>
	page {
		background: ##eef3f7;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.alert-wrap {
		padding-bottom: 100px;

		.content {
			.alert-item {
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1);
				border-radius: 5px;
				margin: 10px;
				padding: 10px;
				background-color: #ffffff;

				.left {
					margin-right: 10px;
				}

				.middle {
					flex: 1;
				}

				.right {
					margin-left: 10px;
				}
			}
		}
	}
</style>