pda-cli/src/pages/sys/workbench/index.vue

<template>
  <view class="app-center">
    <view class="app-center__status" :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="app-center__header">
      <text class="app-center__version">v{{ appVersion }}</text>
      <text class="app-center__title">工作台</text>
      <view class="app-center__setting" @click="navTo('/pages/sys/user/setting')">
        <u-icon name="setting" color="#333333" size="34"></u-icon>
        <text>设置</text>
      </view>
    </view>

    <view class="app-center__grid">
      <view
        v-for="item in menuList"
        :key="item.path"
        class="menu-card"
        :class="item.tone"
        hover-class="menu-card--pressed"
        @click="navTo(item.path)"
      >
        <image class="menu-card__bg" :src="item.bg" mode="aspectFill"></image>
        <view class="menu-card__mask"></view>
        <text class="menu-card__quote">“</text>
        <view v-if="item.tag" class="menu-card__tag">
          <text>{{ item.tag }}</text>
        </view>
        <view class="menu-card__body">
          <text class="menu-card__name">{{ item.name }}</text>
          <text class="menu-card__en">{{ item.en }}</text>
        </view>
        <view class="menu-card__arrow">
          <text>›</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import scanMixin from '@/common/scanMixin.js';
/**
 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
 */
export default {
  mixins: [scanMixin],
  data() {
    return {
      statusBarHeight: 20,
      appVersion: '1.1.10',
      menuList: [
        {
          name: '坯布出库',
          en: 'FABRIC OUT',
          tag: '出库',
          path: '/pages/storefabric/storeFabricBusinessOutList',
          tone: 'tone-out',
          bg: '/static/img/workbench/fabric-out.jpg'
        },
        {
          name: '坯布库存',
          en: 'FABRIC STOCK',
          tag: '库存',
          path: '/pages/storefabric/storeFabricWarehouseGroupList',
          tone: 'tone-stock',
          bg: '/static/img/workbench/fabric-stock.jpg'
        },
        {
          name: '手动进仓',
          en: 'MANUAL ENTRY',
          tag: '进仓',
          path: '/pages/storefabric/storeFabricManualIn',
          tone: 'tone-in',
          bg: '/static/img/workbench/fabric-stock.jpg'
        }
      ]
    };
  },

  onLoad() {
    const sys = uni.getSystemInfoSync();
    this.statusBarHeight = sys.statusBarHeight || 20;
    // #ifdef APP-PLUS
    plus.runtime.getProperty(plus.runtime.appid, (inf) => {
      if (inf && inf.version) {
        this.appVersion = inf.version;
      }
    });
    // #endif
    this.registerScanBroadcast(this.handleScanCode);
  },

  methods: {
    handleScanCode(scanResult) {
      const cleanResult = scanResult.trim().replace(/[\r\n]/g, '');
      uni.navigateTo({
        url: '/pages/saleship/salepickscandetail?order_no=' + cleanResult
      });
    },
    navTo(url) {
      uni.navigateTo({ url });
    }
  }
};
</script>
<style lang="scss">
page {
  background: #eef1f4;
}

.app-center {
  min-height: 100vh;
  background: #eef1f4;
  box-sizing: border-box;
}

.app-center__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding: 0 24rpx;
  background: #ffffff;
  border-bottom: 1rpx solid #e5e8ec;
}

.app-center__version {
  position: absolute;
  left: 24rpx;
  font-size: 24rpx;
  color: #9aa3ad;
  line-height: 1;
}

.app-center__title {
  font-size: 36rpx;
  font-weight: 700;
  color: #1f2430;
  letter-spacing: 2rpx;
}

.app-center__setting {
  position: absolute;
  right: 24rpx;
  display: flex;
  align-items: center;
  gap: 6rpx;
  font-size: 26rpx;
  color: #333333;
}

.app-center__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 28rpx 48rpx 40rpx;
  box-sizing: border-box;
}

.menu-card {
  position: relative;
  width: 310rpx;
  height: 200rpx;
  margin-bottom: 22rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 6rpx 14rpx rgba(20, 40, 70, 0.12);
}

.menu-card--pressed {
  opacity: 0.88;
  transform: scale(0.985);
}

.menu-card__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.38;
}

.menu-card__mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.menu-card__quote {
  position: absolute;
  left: 14rpx;
  top: 2rpx;
  font-size: 48rpx;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  z-index: 2;
}

.menu-card__tag {
  position: absolute;
  top: 14rpx;
  right: 48rpx;
  padding: 2rpx 12rpx;
  border-radius: 6rpx;
  background: #ffffff;
  z-index: 3;
}

.menu-card__tag text {
  font-size: 20rpx;
  font-weight: 700;
  line-height: 1.2;
}

.menu-card__body {
  position: absolute;
  left: 22rpx;
  right: 22rpx;
  top: 50%;
  transform: translateY(-42%);
  z-index: 2;
}

.menu-card__name {
  display: block;
  font-size: 34rpx;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.menu-card__en {
  display: block;
  margin-top: 8rpx;
  font-size: 18rpx;
  letter-spacing: 1rpx;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.2;
}

.menu-card__arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48rpx;
  height: 42rpx;
  background: #eef1f4;
  border-top-left-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.menu-card__arrow text {
  font-size: 30rpx;
  color: #8a93a0;
  line-height: 1;
  margin-top: -4rpx;
}

.tone-out {
  background: #e14b3b;
}

.tone-out .menu-card__mask {
  background: rgba(225, 75, 59, 0.72);
}

.tone-out .menu-card__tag text {
  color: #e14b3b;
}

.tone-stock {
  background: #2f78e6;
}

.tone-stock .menu-card__mask {
  background: rgba(47, 120, 230, 0.72);
}

.tone-stock .menu-card__tag text {
  color: #2f78e6;
}

.tone-in {
  background: #3f51b5;
}

.tone-in .menu-card__mask {
  background: rgba(63, 81, 181, 0.72);
}

.tone-in .menu-card__tag text {
  color: #3f51b5;
}
</style>