rtk-wms-uniapp/pages/workbranch/warehouse/trestle/trestleDetails.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="goBack"
        >&#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="list-content">
        <view v-for="(item, key) in cardList" :key="key" class="card-list-flexbox">
          <view class="select-all-list">
            <view class="flex-2">
              <view class="flex-row">
                <view class="card-list-item">
                  <text class="text-1 gui-color-gray">物料编码</text>
                  <text class="text-2 gui-color-gray">{{ item.materialNo }}</text>
                </view>
                <view class="card-list-item">
                  <text class="text-1 gui-color-gray">物料名称</text>
                  <text class="text-2 gui-color-gray">{{ item.materialName }}</text>
                </view>
                <view class="card-list-item">
                  <text class="text-1 gui-color-gray">物料批次</text>
                  <text class="text-2 gui-color-gray">{{ item.materialLots }}</text>
                </view>
                <view class="card-list-item">
                  <text class="text-1 gui-color-gray">物料类别</text>
                  <text class="text-2 gui-color-gray">{{ item.materialType }}</text>
                </view>
                <view class="card-list-item">
                  <text class="text-1 gui-color-gray">当前箱数</text>
                  <text class="text-2 gui-color-gray">{{ item.qty }}</text>
                </view>
                <view class="card-list-item">
                  <text class="text-1 gui-color-gray">创建时间</text>
                  <text class="text-2 gui-color-gray">{{ $parseTime(item.createTime) }}</text>
                </view>
              </view>
            </view>

          </view>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<script>
import {
  ref,
  defineComponent,
  computed
} from 'vue'
// import {
//   onReachBottom
// } from '@dcloudio/uni-app'
export default defineComponent({
  setup(options) {
    const queryParams = ref({
      pageSize: 10,
      pageNo: 1
    })
    const wmsPalletId = options?.id ?? ''
    const cardList = ref([])

    uni.$reqGet('pdaMaterialsPage', {
      ...queryParams.value,
      wmsPalletId
    })
      .then(({
        data
      }) => {
        cardList.value = data?.list ?? []
      })

    const goBack = function() {
      uni.$goBack()
    }
    // // uniapp移动端触底事件
    // onReachBottom(() => {
    //   queryParams.value.pageNo += 1
    //   uni.$reqGet('getMaterialList', {
    //     ...queryParams.value,
    //     id
    //   })
    //     .then(({
    //       data,
    //       msg
    //     }) => {
    //       Array.prototype.push.call(cardList.value, ...data?.list ?? [])
    //     })
    // })
    return {
      goBack,
      cardList,
    }
  }
})
</script>

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

	.list-content {
		margin-top: 80px;
	}

	.card-list-flexbox {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		// height: 500rpx;
		// box-shadow: 1px -3px 4px 2px rgba(218, 218, 218, 1.0);

		.select-all-list {
			display: flex;
			flex-direction: row;
			align-items: center;

			.flex-1 {
				width: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.flex-2 {
				// width: calc(750rpx - 60rpx);
			}
		}

		.flex-row {
			display: flex;
			flex-wrap: wrap;

			.card-list-item {
				width: 750rpx;
				height: 40px;
				border-bottom-width: 2rpx;
				border-bottom-style: dotted;
				border-bottom-color: #6a6a6a;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				uni-text {
					font-size: 14px;
					height: 50rpx;
					text-align: left;
					padding: 0 12px;
					display: flex;
					flex-direction: row;
					align-items: center;
				}

				.text-1 {
					flex: 2;
					height: 40px;
					justify-content: center;
					border-right-width: 2rpx;
					border-right-style: dotted;
					border-right-color: #6a6a6a;
				}

				.text-2 {
					flex: 5;
					height: 40px;
					justify-content: flex-start;
					margin-right: 8px;
					padding: 2px 12px;
				}
			}

			.card-list-item:nth-of-type(1) {
				background-color: rgba(0, 138, 255, .4);

				.gui-color-gray {
					color: white !important;
				}
			}
		}
	}
</style>