新增智能电表、空调管理

doum

2026-06-18 93de43267e1663031fe5dc2f5ae40d128a182a76

 h5/pages/index.vue

@@ -1,39 +1,51 @@
<template>

   <view class="main_app">

      <view class="hone_name title">{{ userInfo.realname }}，欢迎登录～</view>

      <view class="home_con">

         <image class="bg" src="@/static/home/home_bg.jpg" mode=""></image>

         <view class="h1">阜宁文体中心</view>

         <view class="h2">欢迎你</view>

      </view>

      <view class="title">业务办理</view>

      <view class="list">

         <view v-for="item in list1" class="item" @click="itemClick(item)">

            <image :src="item.img"></image>

            <view class="name">{{item.name}}</view>

   <view class="cu-page ops-home">

      <view class="cu-hero">

         <view class="cu-profile-bar">

            <view class="cu-profile-bar__info">

               <view class="cu-avatar">{{ userInitial }}</view>

               <view>

                  <view class="cu-hero__hi">{{ greeting }}</view>

                  <view class="cu-hero__name">{{ userInfo.realname || '运维人员' }}</view>

               </view>

            </view>

            <view class="cu-profile-actions">

               <view class="cu-profile-action cu-profile-action--pill" @click="loginOut">

                  <u-icon name="minus-circle-fill" color="#ffffff" size="18" />

                  <text class="cu-profile-action__text">退出</text>

               </view>

            </view>

         </view>

      </view>

      <view class="title">业务查询</view>

      <view class="list">

         <view v-for="item in list2" class="item" @click="itemClick(item)">

            <image :src="item.img"></image>

            <view class="name">{{item.name}}</view>

            <view v-if="item.name == '待办中心' && taskNum" class="superscript">{{taskNum}}</view>



      <view class="ops-home__body">

         <view class="home_con">

            <image class="bg" src="@/static/home/home_bg.jpg" mode=""></image>

            <view class="h1">阜宁文体中心</view>

            <view class="h2">欢迎你</view>

         </view>

      </view>

      <view class="footer-actions">

         <view class="switch-role" @click="switchRole">切换角色</view>

         <view class="loginout" @click="loginOut">退出登录</view>

         <view class="title">业务办理</view>

         <view class="list">

            <view v-for="item in list1" :key="item.name" class="item" @click="itemClick(item)">

               <image :src="item.img"></image>

               <view class="name">{{ item.name }}</view>

            </view>

         </view>

         <view class="title">业务查询</view>

         <view class="list list--last">

            <view v-for="item in list2" :key="item.name" class="item" @click="itemClick(item)">

               <image :src="item.img"></image>

               <view class="name">{{ item.name }}</view>

               <view v-if="item.name == '待办中心' && taskNum" class="superscript">{{ taskNum }}</view>

            </view>

         </view>

      </view>

   </view>

</template>



<script>

   import {

      logoutPost,

      myNoticesH5

   } from '@/api'

   import { switchRole as doSwitchRole, goRoleSelect } from '@/utils/roleSwitch.js'

   import { logoutPost, myNoticesH5 } from '@/api'

   import { goRoleSelect } from '@/utils/roleSwitch.js'

   export default {

      data() {

         return {

@@ -85,8 +97,21 @@
            taskNum: 0

         }

      },

      computed: {

         greeting () {

            const h = new Date().getHours()

            if (h < 12) return '早上好'

            if (h < 18) return '下午好'

            return '晚上好'

         },

         userInitial () {

            const name = (this.userInfo.realname || '运').trim()

            return name.charAt(0)

         }

      },

      onShow() {

         myNoticesH5({ page: 1, capacity: 1,model: {status: 0}}).then(res => {

         this.userInfo = uni.getStorageSync('userInfo') || {}

         myNoticesH5({ page: 1, capacity: 1, model: { status: 0 } }).then(res => {

            this.taskNum = res.data.total

         })

      },

@@ -96,116 +121,98 @@
               url: item.url

            })

         },

         switchRole () {

            doSwitchRole(logoutPost)

         },

         loginOut() {

            logoutPost().catch(() => {}).finally(() => goRoleSelect())

         },



      }

   }

</script>



<style lang="scss" scoped>

   .main_app {

      padding: 0 30rpx;

   .ops-home__body {

      margin-top: -28rpx;

      padding: 0 30rpx 48rpx;

   }



      .hone_name {

   .home_con {

      width: 100%;

      height: 270rpx;

      border-radius: 16rpx;

      margin-bottom: 40rpx;

      padding: 36rpx 40rpx;

      position: relative;

      color: #fff;

      box-sizing: border-box;

      overflow: hidden;

      box-shadow: 0 8rpx 32rpx rgba(15, 35, 95, 0.08);



         height: 90rpx;

         display: flex;

         align-items: center;

      }



      .home_con {

         width: 690rpx;

         height: 270rpx;

         border-radius: 8rpx;

         margin-bottom: 40rpx;

         padding: 36rpx 40rpx;

         position: relative;

         color: #fff;



         .h1 {

            font-weight: bold;

            font-size: 44rpx;

            margin-bottom: 14rpx;

         }

      }



      .title {

         font-weight: 500;

         font-size: 34rpx;

      }



      .list {

         margin-top: 30rpx;

         margin-bottom: 80rpx;

         display: flex;



         .item {

            display: flex;

            flex-direction: column;

            align-items: center;

            width: 25%;

            position: relative;

            image {

               width: 88rpx;

               height: 88rpx;

               margin-bottom: 20rpx;

            }



            .name {

               font-size: 26rpx;

            }

            .superscript{

               height: 40rpx;

               width: 40rpx;

               position: absolute;

               top: -16rpx;

               right: 24rpx;

               background-color: red;

               color: #fff;

               font-size: 24rpx;

               display: flex;

               align-items: center;

               justify-content: center;

               border-radius: 50%;

            }

         }

      }



      .footer-actions {

         position: fixed;

         bottom: 88rpx;

      .bg {

         position: absolute;

         left: 0;

         right: 0;

         display: flex;

         justify-content: center;

         align-items: center;

         gap: 24rpx;

         top: 0;

         width: 100%;

         height: 100%;

         z-index: 0;

      }



      .switch-role,

      .loginout {

         height: 60rpx;

         padding: 0 32rpx;

         border-radius: 30rpx;

         font-size: 26rpx;

         display: flex;

         justify-content: center;

         align-items: center;

      .h1,

      .h2 {

         position: relative;

         z-index: 1;

      }



      .switch-role {

         border: 1rpx solid $primaryColor;

         color: $primaryColor;

      }



      .loginout {

         border: 1rpx solid #ccc;

         color: #666;

      .h1 {

         font-weight: bold;

         font-size: 44rpx;

         margin-bottom: 14rpx;

      }

   }

</style>


   .title {

      font-weight: 500;

      font-size: 34rpx;

   }



   .list {

      margin-top: 30rpx;

      margin-bottom: 40rpx;

      display: flex;



      &--last {

         margin-bottom: 48rpx;

      }



      .item {

         display: flex;

         flex-direction: column;

         align-items: center;

         width: 25%;

         position: relative;



         image {

            width: 88rpx;

            height: 88rpx;

            margin-bottom: 20rpx;

         }



         .name {

            font-size: 26rpx;

         }



         .superscript {

            height: 40rpx;

            width: 40rpx;

            position: absolute;

            top: -16rpx;

            right: 24rpx;

            background-color: red;

            color: #fff;

            font-size: 24rpx;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 50%;

         }

      }

   }

</style>