rtk-wms-uniapp/pages/workbranch/warehouse/box/boxList.vue

<template>
  <gui-page :custom-header="true" :header-class="['gui-theme-background-color']">
    <template #gHeader>
      <view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
        <!-- 使用组件实现返回按钮及返回首页按钮 -->
        <text
          style="font-size:44rpx;"
          class="gui-header-leader-btns gui-color-white font-icons"
          @tap="goHome"
        >&#xe6c5;</text>
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <text
          class="gui-h4 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-color-white gui-primary-text"
        >功能列表</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width:40px;" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gBody>
      <view class="card-list-flexbox">
        <!-- <view v-if="cardList.length > 0">
					<view class="card-list-flexbox" v-for="(item, index) in cardList">
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">{{ item.productCode }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">产品名称</text>
							<text class="text-2 gui-color-gray">{{ item.productName }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">箱号</text>
							<text class="text-2 gui-color-gray">{{ item.caseNo }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">区域</text>
							<text class="text-2 gui-color-gray">{{ item.areaCode }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">货位</text>
							<text class="text-2 gui-color-gray">{{ item.locationCode }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">装箱数量</text>
							<text class="text-2 gui-color-gray">{{ item.inQty }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">检验结果</text>
							<text class="text-2 gui-color-gray">{{ item.testResult }}</text>
						</view>
						<view class="card-list-item">
							<text class="text-1 gui-color-gray">库位剩余容量</text>
							<text class="text-2 gui-color-gray">{{ item.remainderStorageQty }}</text>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="bg-image">
						<image src="@/static/empty.png" mode="heightFix"></image>
						<text>这里什么都没有...</text>
					</view>
				</view> -->
        <view class="card">
          <div class="card-panel" style="background-color: #55aa7f;" @click="handleNavigateTo('装箱')">
            <text class="font-icons">&#xe64a;</text>
            <text>产品入箱</text>
          </div>
        </view>
        <view class="card">
          <div class="card-panel" style="background-color: #00a0e9;" @click="handleNavigateTo('拆箱')">
            <text class="font-icons">&#xecc6;</text>
            <text>拆箱作业</text>
          </div>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<script>
import {
  ref,
  defineComponent
} from 'vue'
import {
  onReachBottom
} from '@dcloudio/uni-app'
export default defineComponent({
  setup() {
    const cardList = ref([])
    const queryParams = ref({
      pageSize: 10,
      pageNo: 1
    })
    uni.$reqGet('getWmsBoxList', queryParams.value)
      .then(({
        data,
        msg
      }) => {
        cardList.value = data?.list ?? []
      })
    const goHome = function() {
      uni.$goHome()
    }
    const handleNavigateTo = function(name) {
      switch (name) {
      case '装箱':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/box/boxMerge'
        })
        break
      case '拆箱':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/box/boxSplit'
        })
        break
      }
    }
    // uniapp移动端触底事件
    onReachBottom(() => {
      queryParams.value.pageNo += 1
      // 生产发料主列表
      uni.$reqGet('getWmsBoxList', queryParams.value)
        .then(({
          data
        }) => {
          Array.prototype.push.call(cardList.value, ...data?.list ?? [])
        })
    })
    return {
      goHome,
      cardList,
      handleNavigateTo
    }
  }
})
</script>

<style lang="scss" scoped>
	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
		margin-left: 24rpx;
	}

	.card-list-flexbox {
		margin-top: 100px;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;

		.card {
			display: flex;
			justify-content: center;
			align-items: center;

			.card-panel {
				width: 85px;
				height: 85px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 8px;
				box-shadow: 1px 1px 2px 3px #e9e9e9;

				text:nth-of-type(2) {
					margin-top: 4px;
					font-size: 12px;
					font-weight: bold;
					color: white;
				}
			}
		}

	}

	.font-icons {
		font-size: 36px;
		color: white;
	}
</style>