uni-pda/pages/index/index.vue

<template>
  <view class="page">
    <!-- 用户信息栏 -->
    <view class="user-bar">
      <view class="user-left">
        <text class="username">{{ userInfo.username }}</text>
        <text class="role-tag" :class="{ admin: userInfo.isSuper }">{{ userInfo.isSuper ? '管理员' : '操作员' }}</text>
      </view>
      <text class="mode-tag" :class="{ offline: offlineMode }">{{ offlineMode ? '离线' : '在线' }}</text>
    </view>

    <!-- 快速扫码 -->
    <button class="btn-scan" type="primary" @click="navigateToScanner">
      <uni-icons type="scan" color="#fff"></uni-icons>
      快速扫码
    </button>

    <!-- 功能九宫格 -->
    <uni-grid :column="3" :highlight="true" @change="onGridTap">
      <uni-grid-item v-for="(item, index) in gridList" :key="index" :index="index">
        <view class="grid-item-inner">
          <uni-icons :type="item.icon" :size="40" color="#999" />
          <text class="grid-text">{{ item.text }}</text>
          <text class="grid-desc">{{ item.desc }}</text>
        </view>
      </uni-grid-item>
    </uni-grid>

    <!-- 系统信息 -->
    <view class="info-bar">
      <text>离线数据: {{ offlineDataCount }}条</text>
      <text>v1.0.0</text>
    </view>

    <!-- 退出登录 -->
    <button class="btn-logout" @click="autoprint">蓝牙自连</button>
    <button class="btn-logout" @click="bleprint">蓝牙打印</button>
    <button class="btn-logout" @click="handleLogout">退出登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      offlineDataCount: 0,
      gridList: [
        { text: '危废产生', desc: '称重计量', icon: 'info' },
        { text: '危废入库', desc: '', icon: 'download' },
        { text: '危废出库', desc: '', icon: 'upload' },
        { text: '库存调整', desc: '', icon: 'tune' },
        { text: '联单填领', desc: '', icon: 'circle' },
        { text: '标签补打', desc: '', icon: 'plus' },
        { text: '数据接入撤销', desc: '', icon: 'refreshempty' },
        { text: '记录', desc: '', icon: 'calendar' },
        { text: '同步', desc: '', icon: 'loop' },
        { text: '设置', desc: '', icon: 'gear' }
      ]
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo || {}
    },
    offlineMode() {
      return this.$store.state.app.offlineMode
    }
  },
  onShow() {
    this.offlineDataCount = uni.getStorageSync('inboundRecords')?.length || 0
  },
  methods: {
    onGridTap(e) {
      const { index } = e.detail
      switch (index) {
        case 0: this.navigateToInbound(); break
        case 1: this.navigateToOutbound(); break
        case 2: this.navigateToInventory(); break
        case 3: this.navigateToRecords(); break
        case 4: this.navigateToSync(); break
        case 5: this.navigateToSettings(); break
      }
    },
    navigateToScanner() {
		  // uni.navigateTo({ url: '/pages/scanner/scanner' })
	    uni.navigateTo({ url: '/pages/testpages/scantest' })
    },
    autoprint() {
		  uni.navigateTo({ url: '/pages/testpages/autoprint' })
    }, 
    bleprint() {
		  uni.navigateTo({ url: '/pages/testpages/bleprint' })
    }, 
    navigateToInbound() {
      uni.navigateTo({ url: '/pages/inout/in' })
    },
    navigateToOutbound() {
      uni.navigateTo({ url: '/pages/inout/out' })
    },
    navigateToInventory() {
      uni.showToast({ title: '功能开发中', icon: 'none' })
    },
    navigateToRecords() {
      uni.showToast({ title: '功能开发中', icon: 'none' })
    },
    navigateToSync() {
      uni.showToast({ title: '功能开发中', icon: 'none' })
    },
    navigateToSettings() {
      uni.showToast({ title: '功能开发中', icon: 'none' })
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录？',
        success: (res) => {
          if (res.confirm) {
            this.$store.dispatch('user/logout')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page { padding: 20rpx; background: #f5f5f5; min-height: 100vh; }

.user-bar { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 30rpx; border-radius: 12rpx; margin-bottom: 20rpx; }
.user-left { display: flex; align-items: center; gap: 16rpx; }
.username { font-size: $font-size-lg; font-weight: bold; color: #333; }
.role-tag { font-size: $font-size-xs; padding: 4rpx 12rpx; border-radius: 4rpx; background: #007aff; color: #fff; }
.role-tag.admin { background: #f0ad4e; }
.mode-tag { font-size: $font-size-xs; padding: 4rpx 12rpx; border-radius: 4rpx; background: #4cd964; color: #fff; }
.mode-tag.offline { background: #ff9900; }

.btn-scan { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; margin-bottom: 20rpx; height: 100rpx; line-height: 100rpx; font-size: $font-size-lg; border-radius: 12rpx; }

.grid-item-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30rpx 0; }
.grid-text { font-size: $font-size-lg; font-weight: bold; color: #333; margin-top: 16rpx; }
.grid-desc { font-size: $font-size-base; color: #999; }
.info-bar { display: flex; justify-content: space-between; padding: 20rpx; font-size: $font-size-sm; color: #999; }

.btn-logout { margin-top: 20rpx; color: #666; font-size: $font-size-md; background: #fff; height: 90rpx; line-height: 90rpx; }
</style>