rtk-wms-uniapp/pages/workbranch/warehouse/coldStorage/indexPage.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: #00a0e9;" @click="handleTriggerMpaas('回冷库')">
            <text class="font-icons">&#xe660;</text>
            <text>回冷库</text>
          </div>
        </view>
        <view class="card">
          <div class="card-panel" style="background-color: #55aa7f;" @click="handleTriggerMpaas('出冷库')">
            <text class="font-icons">&#xe660;</text>
            <text>出冷库</text>
          </div>
        </view>
      </view>
      <uni-popup ref="errorTip" type="dialog">
        <uni-popup-dialog
          type="error"
          cancel-text="关闭"
          confirm-text="确认"
          title="提示"
          :content="errorTipMessage"
          @confirm="handleCloseErrorTipsModal"
          @close="handleCloseErrorTipsModal"
        />
      </uni-popup>
    </template>
  </gui-page>
</template>
<script>
import {
  ref,
  defineComponent
} from 'vue'
export default defineComponent({
  setup() {
    // #ifdef APP-PLUS
    const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
    // #endif
    const errorTip = ref('')
    const errorTipMessage = ref('')
    const goHome = function() {
      uni.$goHome()
    }
    const handleTriggerMpaas = function(state) {
      switch (state) {
      case '回冷库':
        // #ifdef APP-PLUS
        mpaasScanModule.mpaasScan({
          // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
          'scanType': ['qrCode', 'barCode'],
          // 是否隐藏相册，默认false不隐藏
          'hideAlbum': false
        },
        (ret) => {
          if (ret.resp_code === 1000) {
            uni.$reqPost('scanMaterialReturnColdStorage', {
              batchNumber: ret.resp_result
            })
              .then(({
                code,
                data,
                msg
              }) => {
                if (code === 0) {
                  uni.showToast({
                    title: '回冷库成功',
                    icon: 'none',
                    duration: 2000
                  })
                } else {
                  // #ifdef APP-PLUS
                  plus.device.beep(2)
                  // #endif
                  errorTipMessage.value = msg
                  errorTip.value.open()
                }
              })
          }
        })
        // #endif
        break
      case '出冷库':
        // #ifdef APP-PLUS
        mpaasScanModule.mpaasScan({
          // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
          'scanType': ['qrCode', 'barCode'],
          // 是否隐藏相册，默认false不隐藏
          'hideAlbum': false
        },
        (ret) => {
          if (ret.resp_code === 1000) {
            uni.$reqPost('scanMaterialOutColdStorage', {
              batchNumber: ret.resp_result
            })
              .then(({
                code,
                data,
                msg
              }) => {
                if (code === 0) {
                  uni.showToast({
                    title: '出冷库成功',
                    icon: 'none',
                    duration: 2000
                  })
                } else {
                  // #ifdef APP-PLUS
                  plus.device.beep(2)
                  // #endif
                  errorTipMessage.value = msg
                  errorTip.value.open()
                }
              })
          }
        })
        // #endif
        break
      }
    }

    // 关闭错误信息弹窗
    const handleCloseErrorTipsModal = async function() {
      errorTip.value.close()
    }

    return {
      goHome,
      errorTip,
      errorTipMessage,
      handleCloseErrorTipsModal,
      handleTriggerMpaas
    }
  }
})
</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>