protection-applets/pages/index/index.vue

<template>
	<view class="content">
		<u-navbar title="首页" title-color="#ffffff" :background="{backgroundColor: mainColor}" :is-back="false" :border-bottom="false"></u-navbar>
		<view class="index-bg"></view>
		<u-card :show-foot="false" padding="0px" margin="20rpx 20rpx" borderRadius="20" box-shadow="0 0 4px rgba(0, 0, 0, 0.2)"
		 class="card-box">
			<view slot="head" style="padding: 12px 0;">
				<u-cell-group :border="false">
					<u-cell-item :border-bottom="false" :arrow="false" :title-style="{...filterStyle, fontWeight: 'bold'}">
						<view slot="title">
							<u-icon name="home-fill"></u-icon>
							{{tenantForm.label}}
						</view>
					</u-cell-item>
					<u-cell-item :border-bottom="false" :arrow="false" :title-style="filterStyle" @click="assetsShow = true">
						<view slot="title">
							{{assetsForm.label}}
							<u-icon :name="assetsShow ? 'arrow-up' : 'arrow-down'"></u-icon>
						</view>
					</u-cell-item>
				</u-cell-group>
			</view>
			<view slot="body">
				<u-grid :col="3" :border="false">
					<u-grid-item @click="goToRectifyInfo">
						<view class="handle-image" style="background: #a2db99;">
							<u-image :src="sectionIcon1" mode="aspectFit" width="80rpx" height="80rpx"></u-image>
						</view>
						<view class="handle-text">隐患整改清单</view>
					</u-grid-item>
					<u-grid-item @click="goToAdviseForm">
						<view class="handle-image" style="background: #feab27;">
							<u-image :src="sectionIcon2" mode="aspectFit" width="80rpx" height="80rpx"></u-image>
						</view>
						<view class="handle-text">建议反馈</view>
					</u-grid-item>
					<u-grid-item @click="goToHistoryList">
						<view class="handle-image" style="background: #5b78bb;">
							<u-image :src="sectionIcon3" mode="aspectFit" width="80rpx" height="80rpx"></u-image>
						</view>
						<view class="handle-text">历史清单</view>
					</u-grid-item>
				</u-grid>
			</view>
		</u-card>
		<u-action-sheet :list="assetsList" v-model="assetsShow" @click="setAssets"></u-action-sheet>
		<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([
				'mainColor',
				'handleCustomStyle',
			])
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				navbarHeight: 44,
				sectionIcon1: API.getServerImg + '4.png',
				sectionIcon2: API.getServerImg + '3.png',
				sectionIcon3: API.getServerImg + '5.png',
				filterStyle: {
					fontSize: '13px',
					color: '#333333'
				},
				tenantForm: {
					areaId: '',
					label: '',
					value: ''
				},
				assetsShow: false,
				assetsForm: {
					label: '',
					value: '',
					tenantId: ''
				},
				assetsList: []
			}
		},
		onLoad() {
			if (uni.getStorageSync('userData')) {
				this.initialize()
			}
		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/login/index'
				});
			}
		},
		methods: {
			//  获取初始化数据
			initialize() {
				NET.request(API.getTenantDetail + uni.getStorageSync('userData').userId, {}, 'GET').then(res => {
					this.tenantForm = {
						areaId: res.data.areaId,
						label: res.data.tenantName,
						value: res.data.tenantId
					}
					this.assetsList = res.data.assetList.map(site => {
						return {
							text: site.assetName,
							value: site.assetId,
							tenantId: site.tenantId,
						}
					})
					this.setAssets(0)
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
			//  选择资产
			setAssets(index) {
				this.assetsForm.label = this.assetsList[index].text
				this.assetsForm.value = this.assetsList[index].value
				this.assetsForm.tenantId = this.assetsList[index].tenantId
			},
			//  跳转隐患整改清单
			goToRectifyInfo() {
				NET.request(API.getHistoryList, {
					assetId: this.assetsForm.value,
					tenantId: this.tenantForm.value,
					pageIndex: 1,
					pageSize: 1,
				}, 'GET').then(res => {
					if (res.data.records.length) {
						uni.navigateTo({
							url: '/pagesHandle/rectifyInfo?taskId=' + res.data.records[0].taskId + '&tenantId=' + this.assetsForm.tenantId +
								'&assetId=' + this.assetsForm.value + '&signState=' + res.data.records[0].signState
						});
					} else {
						this.$refs.uTips.show({
							title: '暂无隐患整改清单',
							type: 'warning',
						})
					}
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
			//  跳转建议反馈
			goToAdviseForm() {
				uni.navigateTo({
					url: '/pagesHandle/adviseForm?areaId=' + this.tenantForm.areaId + '&tenantId=' + this.tenantForm.value +
						'&tenantName=' + this.tenantForm.label + '&assetId=' + this.assetsForm.value + '&assetName=' + this.assetsForm.label
				});
			},
			//  跳转历史清单
			goToHistoryList() {
				uni.navigateTo({
					url: '/pagesHandle/historyList?tenantId=' + this.assetsForm.tenantId + '&assetId=' + this.assetsForm.value
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/themes.scss";

	.content {
		width: 100%;
		height: 100vh;
		float: left;
		background-color: $pageBgColor;
		position: relative;

		.index-bg {
			width: 100%;
			height: 50px;
			background-color: $mainColor;
			position: absolute;
		}

		.handle-image {
			width: 60px;
			height: 60px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.handle-text {
			line-height: 40px;
			font-size: 12px;
			padding-bottom: 2px;
		}

		/deep/.u-cell {
			padding: 8rpx 32rpx;
		}

		/deep/.u-icon {
			margin: 0 3px;
			font-size: 14px;
			color: $mainColor;
		}
	}
</style>