新增智能电表、空调管理

doum

2026-06-18 93de43267e1663031fe5dc2f5ae40d128a182a76

 h5/pages/customer/index.vue

@@ -1,11 +1,19 @@
<template>
  <view class="cu-page cu-page--home">
    <view class="cu-hero">
      <view class="cu-hero__greet">
        <view class="cu-avatar">{{ customerInitial }}</view>
        <view>
          <view class="cu-hero__hi">{{ greeting }}</view>
          <view class="cu-hero__name">{{ home.customerName || '商户用户' }}</view>
      <view class="cu-profile-bar">
        <view class="cu-profile-bar__info">
          <view class="cu-avatar">{{ customerInitial }}</view>
          <view>
            <view class="cu-hero__hi">{{ greeting }}</view>
            <view class="cu-hero__name">{{ displayName }}</view>
          </view>
        </view>
        <view class="cu-profile-actions">
          <view class="cu-profile-action cu-profile-action--pill" @click="logout">
            <u-icon name="minus-circle-fill" color="#ffffff" size="18" />
            <text class="cu-profile-action__text">退出</text>
          </view>
        </view>
      </view>
    </view>
@@ -15,43 +23,61 @@
        <u-swiper :list="banners" keyName="imageUrl" height="160" radius="12" indicator indicatorMode="dot" />
      </view>

      <view class="cu-section-title">专属服务</view>
      <view class="cu-service-grid">
        <view class="cu-service-item cu-service-item--electric" @click="go('/pages/customer/electricity/list')">
          <view class="cu-service-item__icon">⚡</view>
          <text class="cu-service-item__label">交电费</text>
          <text class="cu-service-item__desc">电表 / 空调充值</text>
      <view class="cu-service-panel">
        <view class="cu-section-head">
          <view class="cu-section-head__bar" />
          <text class="cu-section-head__title">专属服务</text>
        </view>
        <view class="cu-service-item cu-service-item--contract" @click="go('/pages/customer/contract/list')">
          <view class="cu-service-item__icon">
            <u-icon name="file-text-fill" color="#40a9ff" size="24" />
        <view class="cu-service-grid">
          <view class="cu-service-card cu-service-card--electric" @click="go('/pages/customer/electricity/list')">
            <view class="cu-service-card__top">
              <view class="cu-service-card__icon">
                <u-icon name="coupon-fill" color="#fa8c16" size="26" />
              </view>
              <text class="cu-service-card__arrow">›</text>
            </view>
            <text class="cu-service-card__label">交电费</text>
            <text class="cu-service-card__desc">电表 / 空调充值</text>
          </view>
          <text class="cu-service-item__label">查合同</text>
          <text class="cu-service-item__desc">租赁合同查询</text>
          <view class="cu-service-card cu-service-card--contract" @click="go('/pages/customer/contract/list')">
            <view class="cu-service-card__top">
              <view class="cu-service-card__icon">
                <u-icon name="file-text-fill" color="#40a9ff" size="26" />
              </view>
              <text class="cu-service-card__arrow">›</text>
            </view>
            <text class="cu-service-card__label">查合同</text>
            <text class="cu-service-card__desc">租赁合同查询</text>
          </view>
          <view class="cu-service-card cu-service-card--bill" @click="go('/pages/customer/bill/list')">
            <view class="cu-service-card__top">
              <view class="cu-service-card__icon">
                <u-icon name="red-packet-fill" color="#597ef7" size="26" />
              </view>
              <text class="cu-service-card__arrow">›</text>
            </view>
            <text class="cu-service-card__label">查账单</text>
            <text class="cu-service-card__desc">在线缴费</text>
          </view>
          <view class="cu-service-card cu-service-card--record" @click="go('/pages/customer/recharge/record')">
            <view class="cu-service-card__top">
              <view class="cu-service-card__icon">
                <u-icon name="list" color="#9254de" size="26" />
              </view>
              <text class="cu-service-card__arrow">›</text>
            </view>
            <text class="cu-service-card__label">充值记录</text>
            <text class="cu-service-card__desc">历史充值明细</text>
          </view>
        </view>
        <view class="cu-service-item cu-service-item--bill" @click="go('/pages/customer/bill/list')">
          <view class="cu-service-item__icon">💳</view>
          <text class="cu-service-item__label">查账单</text>
          <text class="cu-service-item__desc">在线缴费</text>
        </view>
        <view class="cu-service-item cu-service-item--record" @click="go('/pages/customer/recharge/record')">
          <view class="cu-service-item__icon">📋</view>
          <text class="cu-service-item__label">充值记录</text>
          <text class="cu-service-item__desc">历史充值明细</text>
        </view>
      </view>

      <view class="cu-footer-bar">
        <view class="cu-footer-btn cu-footer-btn--primary" @click="onSwitchRole">切换角色</view>
        <view class="cu-footer-btn" @click="logout">退出登录</view>
      </view>
    </view>
  </view>
</template>

<script>
import { customerBanners, customerHome } from '@/api'
import { switchRole, goRoleSelect } from '@/utils/roleSwitch.js'
import { customerBanners, customerHome, customerLogout } from '@/api'
import { switchRole } from '@/utils/roleSwitch.js'
export default {
  data () {
    return { banners: [], home: {} }
@@ -63,8 +89,11 @@
      if (h < 18) return '下午好'
      return '晚上好'
    },
    displayName () {
      return this.home.displayName || this.home.customerName || '商户用户'
    },
    customerInitial () {
      const name = (this.home.customerName || '商').trim()
      const name = (this.home.memberName || this.home.customerName || '商').trim()
      return name.charAt(0)
    }
  },
@@ -76,8 +105,7 @@
  },
  methods: {
    go (url) { uni.navigateTo({ url }) },
    onSwitchRole () { switchRole() },
    logout () { goRoleSelect() }
    logout () { switchRole(customerLogout) }
  }
}
</script>