rtk-wms-uniapp/pages/workbranch/warehouse/trestle/trestleList.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 class="card">
          <div class="card-panel" style="background-color: #55aa7f;" @click="handleNavigateTo('箱号合栈')">
            <text class="font-icons">&#xe64c;</text>
            <text>栈板组合</text>
          </div>
        </view>
        <view class="card">
          <div class="card-panel" style="background-color: #00a0e9;" @click="handleNavigateTo('箱号出栈')">
            <text class="font-icons">&#xe7d1;</text>
            <text>栈板拆分</text>
          </div>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<script>
import {
  ref,
  defineComponent,
  computed
} from 'vue'
export default defineComponent({
  setup() {
    const stateToText = ref('')
    const stateComputed = computed(() => {
      return (state) => {
        switch (state) {
        case 0:
          stateToText.value = '未使用'
          break
        case 1:
          stateToText.value = '已使用'
          break
        }
        return stateToText.value
      }
    })
    const cardList = ref([])
    // const getTrestleList = function() {
    //   uni.$reqGet('getWmsTrestlePage')
    //     .then(({
    //       data,
    //       msg
    //     }) => {
    //       cardList.value = data?.list ?? []
    //     })
    // }

    const goHome = function() {
      uni.$goHome()
    }
    const handleNavigateTo = function(name, params) {
      switch (name) {
      case '栈板详情':
        uni.navigateTo({
          url: `/pages/workbranch/warehouse/trestle/trestleDetails?id=${params.id}`
        })
        break
      case '箱号合栈':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/trestle/boxNumberStacking'
        })
        break
      case '箱号出栈':
        uni.navigateTo({
          url: '/pages/workbranch/warehouse/trestle/boxNumberOutStacking'
        })
        break
      }
    }
    // getTrestleList()
    return {
      goHome,
      cardList,
      stateComputed,
      handleNavigateTo
    }
  }
})
</script>

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

	.list-content {
		margin-top: 75px;
		background-color: #edeeee;
	}

	// .card-list-flexbox {
	// 	display: flex;
	// 	flex-direction: row;
	// 	align-items: center;
	// 	flex-wrap: wrap;
	// 	margin: 0 2px 4px 2px;

	// 	.card-list-item,
	// 	.card-list-item-operation {
	// 		width: 750rpx;
	// 		height: 40px;
	// 		margin-bottom: 3rpx;
	// 		display: flex;
	// 		flex-direction: row;
	// 		align-items: center;
	// 		justify-content: space-between;
	// 		background-color: #fff;

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

	// 		.text-1 {
	// 			flex: 1;
	// 			height: 40px;
	// 			justify-content: flex-start;
	// 		}

	// 		.text-2 {
	// 			flex: 3;
	// 			height: 40px;
	// 			justify-content: flex-end;
	// 			margin-right: 4px;
	// 			padding: 2px 6px;
	// 		}
	// 	}

	// 	.card-list-item-operation {
	// 		justify-content: flex-end;
	// 	}

	// 	.card-list-item:nth-of-type(1) {

	// 		.text-1 {
	// 			font-weight: bold;
	// 			color: black !important;
	// 		}

	// 		.text-1::before {
	// 			content: "";
	// 			width: 4px;
	// 			height: 20px;
	// 			border-radius: 4px;
	// 			margin-right: 4px;
	// 			background-color: skyblue;
	// 		}
	// 	}

	// }

	// .tag-limegreen,
	// .tag-skyblue {
	// 	margin: 0 4px;
	// 	border-radius: 5px;
	// }

	// .tag-limegreen {
	// 	border: 1px solid limegreen;
	// 	color: limegreen;
	// }

	// .tag-skyblue {
	// 	border: 1px solid skyblue;
	// 	color: skyblue;
	// }

	.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>