jp-housekeep-hall/pages/index/index.vue

<template>
	<view>
		<u-navbar title="微营业厅" title-color="#fff" :is-back="false" :background="background" back-icon-color="#ffffff"></u-navbar>
		<!-- 账户充值 扣费记录 -->
		<view  class="function2">
			{{personInfo.fullName}}
		</view>
		<view class="function">
			<view class="item" @click="gotoUrl('/pages/recharge/accountRecharge')">
				<view class="icon">
					<image class="img" src="@/assets/img/iconPark-wallet.svg" mode=""></image>
				</view>

				<view class="text">
					<view class="title">
						账户充值
					</view>
					<view class="infos">
						余额 {{personInfo.balance}}元

					</view>
				</view>
			</view>

			<view class="item" @click="gotoUrl('/pages/deductionRecord/deductionRecord')">
				<view class="icon icon2">
					<image class="img" src="@/assets/img/iconPark-order.svg" mode=""></image>
				</view>

				<view class="text">
					<view class="title">
						扣费记录
					</view>
					<view class="infos">
						查看每日用电情况
					</view>
				</view>
			</view>
		</view>

		<!-- 管家服务 -->
		<view class="housekeeper-service">
			<view class="title">
				管家服务
			</view>
			<view class="grid">
				<u-grid :col="4" :border="false">
					<u-grid-item @click="gotoUrl('/pages/meterManagement/meterManagement')" >
						<view class="icon icon10">
							<image class="img" src="@/assets/img/fas fa-plus-circle.svg" mode=""></image>
						</view>
						<view class="grid-text">电表绑定
						</view>
					</u-grid-item>
					<u-grid-item @click="gotoUrl('/pages/recharge/rechargeRecord')" >
						<view class="icon icon1">
							<image class="img" src="@/assets/img/far fa-clock.svg" mode=""></image>
						</view>
						<view class="grid-text">充值记录
						</view>
					</u-grid-item>
					<u-grid-item  @click="gotoUrl('/pages/billingRules/billingRules')" >
						<view class="icon icon2">
							<image class="img" src="@/assets/img/fas fa-file-alt.svg" mode=""></image>
						</view>
						<view class="grid-text">计费规则
						</view>
					</u-grid-item>
					<u-grid-item   @click="gotoUrl('/pages/message/messageList?type=AA&typeName=账单提醒')">
						<view class="icon icon3">
							<image class="img" src="@/assets/img/antFill-account-book.svg" mode=""></image>
							<view class="dot" v-if="headlineBill.unReadtNum" >
								
							</view>
						</view>
						<view class="grid-text">账单提醒
						</view>
					</u-grid-item>
					<u-grid-item   @click="gotoUrl('/pages/message/messageList?type=3&typeName=断电提醒')">
						<view class="icon icon9">
							<image class="img" src="@/assets/img/fas fa-exclamation-triangle.svg" mode=""></image>
							<view class="dot" v-if="unReadtNum(3)" >
								
							</view>
						</view>
						<view class="grid-text">断电提醒
						</view>
					</u-grid-item>
					<u-grid-item    v-if="false"
					@click="gotoUrl('/pages/message/messageList?type=5&typeName=停电通知')">
						<view class="icon icon5">
							<image class="img" src="@/assets/img/antFill-notification.svg" mode=""></image>
							<view class="dot" v-if="unReadtNum(5)" >
								
							</view>
						</view>
						<view class="grid-text">停电通知

						</view>
					</u-grid-item>
					
					<u-grid-item   v-if="false"
					 @click="gotoUrl('/pages/remoteControl/remoteControl')">
						<view class="icon icon11">
							<image class="img" src="@/assets/img/antFill-control.svg" mode=""></image>
							
						</view>
						<view class="grid-text">远程控制
					
						</view>
					</u-grid-item>
					
					<u-grid-item   @click="gotoUrl('/pages/message/messageList?type=4&typeName=故障警报')">
						<view class="icon icon6">
							<image class="img" src="@/assets/img/fas fa-exclamation-triangle.svg" mode=""></image>
							<view class="dot" v-if="unReadtNum(4)" >
								
							</view>
						</view>
						<view class="grid-text">故障警报

						</view>
					</u-grid-item>
					
				
					<u-grid-item   @click="gotoUrl('/pages/mine/electronicMonitoring')">
						<view class="icon icon7">
							<image class="img" src="@/assets/img/fas fa-chart-pie.svg" mode=""></image>
						</view>
						<view class="grid-text">用电监控
						</view>
					</u-grid-item>
					
					<u-grid-item     @click="gotoUrl('/pages/mine/contactService')"  >
						<view class="icon icon4">
							<image class="img" src="@/assets/img/if-support.svg" mode=""></image>
						</view>
						<view class="grid-text">客服热线
						</view>
					</u-grid-item>
					<u-grid-item v-if="false"   @click="gotoUrl('/pages/billingRules/billingRules')">
						<view class="icon icon8">
							<image class="img" src="@/assets/img/fas fa-book.svg" mode=""></image>
						</view>
						<view class="grid-text">用电常识
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view class="cover">
			<view class="text">
				预存余额 安心用电
			</view>
		</view>
		<u-modal v-model="openModalBl" @confirm="confirmPhone" confirm-text="拨打电话" confirm-color="#606266"
			:show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" content="400-8899-619"
			:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
			
		<u-divider border-color="#bbbbbb" half-width="80"
		 @click="openModalBl=true"
		 color="#777777">荆鹏电管家 服务热线 <text
				class="tel">400-8899-619</text></u-divider>
		<Tabbar :current="0" ref="tabbarMain"  :prefetchNum="prefetchNum" ></Tabbar>
	</view>

</template>

<script>
	import * as API from '@/apis/pagejs/index.js'
	import * as API_message from '@/apis/pagejs/message.js'
	
	import Tabbar from '@/components/Tabbar.vue'
	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				openModalBl:false,
				personInfo:{},
				background: {
					backgroundColor: '#3D86FF',
				},
				prefetchNum:0,
				headlineBill:{},
				messageList:[],
			}
		},
		onLoad() {
			
		},
		onShow(){
			this.homePage()
			this.prefetch()
		},
		methods: {
			unReadtNum(num){
				for(var i in this.messageList){
					var item=this.messageList[i];
					if(item.typeId==num){
						return item.unReadtNum
					}
				}
				return 0
			},
			prefetch(){
				API_message.prefetch({
					
				}).then((response) => {
					this.prefetchNum=response.data
					
					this.getBillList()
					this.getMessageTypeList()
					
				
					
				}).catch(error => {
					//uni.hideLoading();
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			getMessageTypeList(){
				
				API_message.messageTypeList().then((response) => {
				
					this.messageList=response.data.typeList;
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			getBillList(){
				
				API_message.headlineBill().then((response) => {
				
					this.headlineBill=response.data;
					var num=response.data.unReadtNum;
					
					if (this.$refs.tabbarMain) {
						this.$refs.tabbarMain.setprefetchNum(this.prefetchNum+num);
					}
					
				}).catch(error => {
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			},
			confirmPhone() {
				this.openModalBl = false;
				uni.makePhoneCall({
					phoneNumber:"400-8899-619" //仅为示例
				});
			},
			homePage(){
				// uni.showLoading({
				// 	title: "加载中",
				// 	mask: true,
				// })
				
				API.homePage({
					
				}).then((response) => {
					//uni.hideLoading();
					this.personInfo=response.data.tenantInfo;
					//console.log(response.data.tenantInfo)
				}).catch(error => {
					//uni.hideLoading();
					uni.hideLoading();
					uni.showToast({
						icon: "none",
						title: error
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	//  账户充值 扣费记录 
	.function2 {
			background-color: #fff;
				padding: 26rpx 40rpx;
				    border-bottom: 1px solid #F4F4F4;
					font-size: 36rpx;
					font-weight: bold;
	}
	.function {
		background-color: #fff;
		padding: 56rpx 40rpx;
		display: flex;
		justify-content: space-between;

		.item {
			display: flex;
			align-items: center;

			.icon {
				width: 96rpx;
				height: 96rpx;

				border-radius: 12px;
				background: linear-gradient(180deg, rgba(93, 155, 255, 1) 0%, rgba(0, 97, 255, 1) 100%);
				display: flex;
				align-items: center;
				justify-content: center;

				.img {
					width: 64rpx !important;
					height: 64rpx !important;


				}
			}

			.icon2 {
				background: linear-gradient(179.2deg, rgba(96, 213, 124, 1) -0.62%, rgba(0, 161, 39, 1) 97.92%);
			}

			.text {
				margin-left: 16rpx;

				.title {
					color: rgba(51, 51, 51, 1);
					font-size: 36rpx;
					font-weight: bold;
				}

				.infos {
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
					margin-top: 8rpx;
				}
			}
		}
	}

	// 管家服务
	.housekeeper-service {
		background-color: #fff;
		margin-top: 24rpx;
		padding: 32rpx;

		.title {
			font-size: 36rpx;
			color: #333333;
			font-weight: bold;
		}
		.dot{
			width: 20rpx;
			height: 20rpx;
			border-radius:999px;
			background-color: rgba(255,0,0,1);
			position: absolute;
			top:24rpx;
			right:24rpx;
		}
		.grid-text {
			margin-top: 28rpx;
			color: rgba(51, 51, 51, 1);
		}

		.icon {
			width: 96rpx;
			height: 96rpx;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.img {
				width: 56rpx;
				height: 56rpx;
			}
		}
		
		.icon10 {
			
			background: linear-gradient(180.4deg, rgba(127,213,151,1) 2.1%,rgba(67,176,116,1) 101.21%);
		}
		.icon11 {
			background: linear-gradient(180.4deg, rgba(127,213,151,1) 2.1%,rgba(67,176,116,1) 101.21%);
			//background: linear-gradient(180.29deg, rgba(255,124,112,1) 0.9%,rgba(255,79,63,1) 100.4%);
		}
		
		.icon1 {
			background: linear-gradient(181.79deg, rgba(117, 213, 224, 1) -1.13%, rgba(53, 153, 203, 1) 94.2%);
		}

		.icon2 {
			background: linear-gradient(179.2deg, rgba(168, 178, 238, 1) 6.28%, rgba(123, 123, 240, 1) 96.94%);
		}

		.icon3 {
			background: linear-gradient(180deg, rgba(121, 172, 255, 1) 0%, rgba(57, 132, 255, 1) 100%);
		}

		.icon4 {
			background: linear-gradient(180.82deg, rgba(247, 186, 154, 1) 0.58%, rgba(255, 128, 158, 1) 97.52%);
		}

		.icon5 {
			background: linear-gradient(180.4deg, rgba(127, 213, 151, 1) 2.1%, rgba(67, 176, 116, 1) 101.21%);
		}

		.icon6 {
			background: linear-gradient(180.29deg, rgba(255, 214, 125, 1) 0.9%, rgba(255, 150, 0, 1) 100.4%);
		}

		.icon7 {
			background: linear-gradient(178.44deg, rgba(122, 232, 227, 1) 3.96%, rgba(57, 182, 182, 1) 100.6%);
		}

		.icon8 {
			background: linear-gradient(180.4deg, rgba(127, 213, 151, 1) 2.1%, rgba(67, 176, 116, 1) 101.21%);
		}
		.icon9 {
			background: linear-gradient(180.29deg, rgba(255,124,112,1) 0.9%,rgba(255,79,63,1) 100.4%);
		}
	}

	.cover {
		background: radial-gradient(at 100% 100%, rgba(194, 255, 216, 1) 3%, rgba(138, 182, 232, 1) 39%, rgba(82, 110, 248, 1) 100%);
		color: #ffffff;
		text-align: center;
		padding: 40rpx 0;
		margin: 24rpx 0;

		.text {
			font-size: 64rpx;
			// box-shadow: 0px 4px 12px 0px  rgba(0, 0, 0, 0.2);
			text-align: center;
		}
	}

	.tel {
		color: #1677FF;
		margin-left: 16rpx;
	}
</style>