uni-pda/pages/home/home.vue

<template>
  <view class="page-container">
    <view class="page-body">
      <view class="status-bar"></view>
      <!-- 顶部蓝色区域 -->
      <view class="home-header">
        <view class="home-hospital">
          <!-- <text class="hospital-icon">🏥</text> -->
          <text>{{ hospitalName }}</text>
        </view>
        <view class="home-welcome">欢迎使用危废管理系统</view>
      </view>

      <!-- 快速入口 -->
      <view class="quick-section">

        <view class="quick-grid">
          <view class="quick-item" @click="navigateTo('/pages/weigh/generate')">
            <view class="quick-icon" style="background: #e6f7ff;">
              <uni-icons type="plus" :size="28" color="#1890ff"></uni-icons></view>
            <text>危废产生</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/inout/in')">
            <view class="quick-icon" style="background: #f6ffed;">
              <uni-icons type="scan" :size="28" color="#52c41a"></uni-icons></view>
            <text>危废入库</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/inout/out')">
            <view class="quick-icon" style="background: #fff1f0;">
              <uni-icons type="cloud-upload" :size="28" color="#ff4d4f"></uni-icons></view>
            <text>危废出库</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/waste/manifest')">
            <view class="quick-icon" style="background: #fff7e6;">
              <uni-icons type="paperclip" :size="28" color="#fa8c16"></uni-icons></view>
            <text>联单填领</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/waste/reprint')">
            <view class="quick-icon" style="background: #fff1f0;">
              <uni-icons type="paperplane" :size="28" color="#ff4d4f"></uni-icons></view>
            <text>标签补打</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/waste/adjust')">
            <view class="quick-icon" style="background: #e6f7ff;">
              <uni-icons type="tune" :size="28" color="#1890ff"></uni-icons></view>
            <text>库存调整</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/waste/undo')">
            <view class="quick-icon" style="background: #f9f0ff;">
              <uni-icons type="undo" :size="28" color="#722ed1"></uni-icons></view>
            <text>数据撤销</text>
          </view>
          <view class="quick-item" @click="switchTab('/pages/settings/index')">
            <view class="quick-icon" style="background: #f6ffed;">
              <uni-icons type="settings" :size="28" color="#52c41a"></uni-icons></view>
            <text>系统设置</text>
          </view>
        </view>
      </view>

    </view>

  </view>
</template>

<script>
import { api } from '@/api/index'
import { mapGetters } from 'vuex'

export default {
  name: 'HomePage',
  computed: {
    ...mapGetters('user', ['enterpriseName', 'enterpriseInfo']),
    isLogin() {
      return this.$store.state.user.isLogin
    }
  },
  data() {
    return {
      hospitalName: '',
      enterpriseId: ''
    }
  },
  onLoad() {
    this.checkLogin()
  },
  onShow() {
    this.checkLogin()
  },
  methods: {
    checkLogin() {
      if (!this.isLogin) {
        uni.reLaunch({ url: '/pages/login/login' })
        return
      }
      this.loadData()
    },
    navigateTo(path) { uni.navigateTo({ url: path }) },
    switchTab(path) { uni.switchTab({ url: path }) },
    async loadData() {
      const enterpriseInfo = await this.$store.dispatch('user/getEnterpriseInfo')
      console.log('企业名称:', enterpriseInfo)
      this.hospitalName = enterpriseInfo.fullEnterpriseName
      this.enterpriseId = enterpriseInfo.enterpriseId
    }
  }
}
</script>

<style lang="scss" scoped>
.home-header {
  background: $primary-color;
  padding: 16px 16px 20px;
  color: #ffffff;
  border-radius: 0 0 20px 20px;
}
.home-hospital {
  font-size: $font-size-lg;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.home-welcome {
  font-size: $font-size-xs;
  opacity: 0.85;
  margin-top: 4px;
}
.quick-section { padding: 16px 16px 8px; }
.section-title {
  font-size: $font-size-md;
  font-weight: 600;
  color: $text-primary;
  margin-bottom: 12px;
}
.quick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 12px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  &:active { opacity: 0.7; }
}
.quick-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quick-item text {
  font-size: $font-size-base;
  color: $text-primary;
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}
.recent-section { padding: 0 16px 16px; }
.recent-item {
  background: #ffffff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.recent-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $font-size-lg;
  background: #f0f0f0;
  flex-shrink: 0;
}
.recent-info { flex: 1; }
.recent-info .name { font-size: $font-size-base; color: $text-primary; font-weight: 500; }
.recent-info .detail { font-size: $font-size-xs; color: $text-placeholder; margin-top: 2px; }
.recent-time { font-size: calc(10 * var(--font-scale) * 1px); color: #bbbbbb; }
</style>