jsm-mall-h5-front/src/packageAttachment/pages/fittingsManagement/index.vue

<template>
  <view class="fittings_management_page">
    <view class="fittings_management_bg"></view>
    <view class="fittings_management_scroll">
      <scroll-view
        scroll-y="true"
        :style="{
          height: '100vh'
        }"
        :refresher-enabled="true"
        :refresher-triggered="refresherTriggered"
        @refresherrefresh="refresherrefresh"
        refresher-background="#6DA7FF"
      >
        <view class="page_scroll_view">
          <view class="fittings_management_statistical">
            <block v-for="(item, index) in fittingsStatisticals" :key="index">
              <view class="fittings_statistical_view">
                <view class="fittings_statistical_a">
                  <text class="fittings_statistical_num">{{ item.num }}</text>
                  <text class="fittings_statistical_title">{{ item.title }}</text>
                </view>
              </view>
            </block>
          </view>
          <view class="fittings_management_module">
            <block v-for="(item, index) in fittingsModules" :key="index">
              <view @tap.stop="toUrl(item)" class="fittings_module_a">
                <image :src="`/static/images/fittingsManagement/module_${item.src}.png`" mode="aspectFill"></image>
                <text>
                  {{ item.name }}
                </text>
              </view>
            </block>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getStorage } from '@/common/utils/storage.js'
export default {
  data() {
    return {
      refresherTriggered: false,
      fittingsStatisticals: [
        {
          num: 0,
          title: '新件库存'
        },
        {
          num: 0,
          title: '新件待返还'
        },
        {
          num: 0,
          title: '新件返还金额'
        },
        {
          num: 0,
          title: '旧件库存'
        },
        {
          num: 0,
          title: '旧件待返还'
        },
        {
          num: 0,
          title: '旧件返还金额'
        }
      ],
      fittingsModules: [
        // {
        // 	src: 0,
        // 	name: "配件申请"
        // },
        {
          src: 1,
          name: '配件库存',
          url: '/packageAttachment/pages/sparePartsInventory/index'
        },
        {
          src: 2,
          name: '新件返还',
          url: '/packageAttachment/pages/returnOfNewParts/index'
        },
        {
          src: 3,
          name: '旧件返还',
          url: '/packageAttachment/pages/returnOfOldParts/index'
        },
        {
          src: 4,
          name: '转销售单',
          url: '/packageAttachment/pages/forwardSaleOrder/index'
        },
        {
          src: 4,
          name: '配件申请',
          url: '/packageAttachment/pages/applicationParts/index'
        },
        {
          src: 4,
          name: '配件申请记录',
          url: '/packageAttachment/pages/orderOfSales/index'
        },
        {
          src: 4,
          name: '保外转销售',
          url: '/packageAttachment/pages/beyondInsuranceTransferToSale/index'
        }
      ],
      info: {}
    }
  },
  computed: {
    userInfo() {
      return getStorage('user')
    },
    idcard() {
      return this.userInfo.idCard
    }
  },
  onLoad() {
    uni.$on('DataStatisticsOfParts', () => {
      this.getInfo()
    })
  },
  onUnload() {
    uni.$off('DataStatisticsOfParts')
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    refresherrefresh() {
      this.refresherTriggered = true
      this.getInfo(() => {
        this.refresherTriggered = false
      })
    },
    getInfo(cbk) {
      this.$api
        .get('/app/parts/stock/query/worker-stock', {
          identity: this.idcard,
          websiteNumber: uni.getStorageSync('websit_number')
        })
        .then(res => {
          ;['newQty', 'newRefundQty', 'newRefundAmount', 'oldQty', 'oldRefundQty', 'oldRefundAmount'].forEach(
            (key, index) => {
              this.fittingsStatisticals[index].num = res.data[key] || 0
            }
          )
          cbk && cbk()
        })
        .catch(err => {
          console.log(err)
        })
    },
    toUrl({ src, name, url }) {
      if (url) {
        this.$navToPage({
          url
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.fittings_management_page {
  width: 100%;
  height: 100%;
  position: relative;

  .fittings_management_bg {
    width: 100%;
    height: 100rpx;
    background: #6da7ff;
  }

  .fittings_management_scroll {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .page_scroll_view {
    width: 100%;
    box-sizing: border-box;
    padding: 48rpx 30rpx;

    .fittings_management_statistical {
      width: 100%;
      height: auto;
      background: #ffffff;
      border-radius: 20rpx;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20rpx;

      .fittings_statistical_view {
        width: 33.333%;
        height: 140rpx;
        box-sizing: border-box;
        padding: 28rpx;

        &:not(:nth-child(3n + 3)) {
          border-right: 1rpx solid #f7f7f7;
        }

        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          border-bottom: 1rpx solid #f7f7f7;
        }

        .fittings_statistical_a {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .fittings_statistical_num {
            font-size: 36rpx;
            font-family: PingFang SC, PingFang SC-Heavy;
            font-weight: 800;
            text-align: left;
            color: #e95505;
          }

          .fittings_statistical_title {
            font-size: 26rpx;
            font-family: PingFang SC, PingFang SC-Medium;
            font-weight: 500;
            text-align: left;
            color: #333333;
          }
        }
      }
    }

    .fittings_management_module {
      width: 100%;
      height: auto;
      background: #ffffff;
      border-radius: 20rpx;
      box-sizing: border-box;
      padding: 60rpx 0 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .fittings_module_a {
        width: 33.333%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 60rpx;

        image {
          width: 64rpx;
          height: 64rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }
}
</style>