rtk-wms-uniapp/pages/workbranch/production/shipmentMHT/shipmentPage.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"
          style="font-size: 1rem;"
        >出货通知单</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <!-- 实际宽度请根据自己情况设置 -->
        <view style="width:40px;" />
        <!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
      </view>
    </template>
    <template #gBody>
      <view class="list-content">
        <view class="scan">
          <view class="scan-card">
            <uni-easyinput
              ref="easyinput"
              v-model="scanNumber"
              :input-border="false"
              :clearable="false"
              type="text"
              focus
			  @focus="handleInputFocus"
              placeholder="扫描内部标签"
              @confirm="handleKeydown"
            />
            <text class="font-icons" @click="handleMapass">&#xe6b7;</text>
          </view>
        </view>
        <view class="tabs">
			<div class="tabs-list">
			  <text :class="!isBefore?'tabs-item-active': 'tabs-item'" @click="handleCheckTabs(1)">待出货列表</text>
			  <text :class="isBefore?'tabs-item-active': 'tabs-item'" @click="handleCheckTabs(0)">已出货列表</text>
			</div>
        </view>
        <view v-if="dataList?.length > 0" class="list-panel">
          <div
            v-for="(item, key) in dataList"
            :key="key"
            class="panel"
            @click="handleNavigateToProductList(item)"
          >
            <div class="panel-row">
              <span>出货单号</span>
              <span>{{ item.saleOrderNo }}</span>
            </div>
            <div class="panel-row">
              <span>客户</span>
              <span>{{ item.client }}</span>
            </div>
            <div class="panel-row">
              <span>交货日期</span>
              <span>{{ $parseTime(item.handOverTime) }}</span>
            </div>
          </div>
        </view>
        <view v-else>
          <view class="bg-image">
            <image src="@/static/empty.png" mode="heightFix" />
            <text>这里什么都没有...</text>
          </view>
        </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 {
  defineComponent,
  onBeforeMount,
  ref,
  watch,
  computed
} from 'vue'
import {
  onReachBottom
} from '@dcloudio/uni-app'
export default defineComponent({
  setup() {
    const errorState = ref(0)
    const easyinput = ref()
    const errorTip = ref('')
    const errorTipMessage = ref('')
    const dataList = ref([])
    const scanNumber = ref('')
    const isBefore = ref(false)
    const queryParams = ref({
      pageSize: 8,
      pageNo: 1
    })

    onBeforeMount(() => {
      uni.$reqGet('unCompetePage', {
        pageNo: 1,
        PageSize: 8
      })
        .then(({
          code,
          data,
          msg
        }) => {
          if (code === 0) {
            dataList.value = data?.list ?? []
          } else {
            uni.showToast({
              title: msg,
              icon: 'none',
              duration: 2000
            })
          }
        })
    })

    const handleMapass = function() {
      // #ifdef APP-PLUS
      const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
      mpaasScanModule.mpaasScan({
        // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
        'scanType': ['qrCode', 'barCode'],
        // 是否隐藏相册，默认false不隐藏
        'hideAlbum': false
      },
      (ret) => {
        if (ret.resp_code === 1000) {
          //
        }
      })
      // #endif
    }

    // 扫描完成品标签输入框回车事件
    const handleKeydown = function(e) {
      // uni.$reqPost('transferTrayCode', {
      // 		qrCode: e
      // 	})
      // 	.then(({
      // 		code,
      // 		data,
      // 		msg
      // 	}) => {
      // 		if (code === 0) {
      // 			uni.showToast({
      // 				title: '标签打印中,请勿操作',
      // 				icon: 'loading',
      // 				duration: 10000
      // 			})
      // 			qrCodeList.value.push(data.shippingLabelId)
      // 			btnReadonly.value = !data.outerBoxPrint
      // 			setInputFocus()
      // 			labelInnerTest(data)
      // 			setTimeout(() => {
      // 				labelExternalTest(data)
      // 			}, 3000)
      // 		} else {
      // 			// #ifdef APP-PLUS
      // 			plus.device.beep(2)
      // 			// #endif
      // 			errorTipMessage.value = msg
      // 			errorTip.value.open()
      // 			errorState.value = 0
      // 		}
      // 	})
    }
    const goHome = function() {
      uni.$goHome()
    }

    const setInputFocus = function() {
      scanNumber.value = ''
      easyinput.value.onBlur()
      easyinput.value.onFocus()
    }

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

    // tabs-item切换事件
    const handleCheckTabs = function(state) {
      if (!state) {
        isBefore.value = true
      } else {
        isBefore.value = false
      }
      setInputFocus()
    }

    const handleNavigateToProductList = function(ret) {
      uni.navigateTo({
        url: `/pages/workbranch/production/shipmentMHT/shipmentProduct?detail=${JSON.stringify({ ...ret, isItComplete: isBefore.value })}`
      })
    }

    watch(isBefore, (state) => {
      queryParams.value.pageNo = 1
      if (state) {
        uni.$reqGet('saleOutOrderDetailOutedPage', {
          pageNo: 1,
          PageSize: 8
        })
          .then(({
            code,
            data,
            msg
          }) => {
            if (code === 0) {
              dataList.value = data?.list ?? []
            } else {
              uni.showToast({
                title: msg,
                icon: 'none',
                duration: 2000
              })
            }
          })
      } else {
        uni.$reqGet('unCompetePage', {
          pageNo: 1,
          PageSize: 8
        })
          .then(({
            code,
            data,
            msg
          }) => {
            if (code === 0) {
              dataList.value = data?.list ?? []
            } else {
              uni.showToast({
                title: msg,
                icon: 'none',
                duration: 2000
              })
            }
          })
      }
    })
	
	// 禁用软键盘
	const handleInputFocus = function() {
		setTimeout(() => {
			uni.hideKeyboard()
		}, 1000)
	}

    // uniapp移动端触底事件
    onReachBottom(() => {
      queryParams.value.pageNo += 1
      if (isBefore.value) {
        uni.$reqGet('saleOutOrderDetailOutedPage', queryParams.value)
          .then(({
            data
          }) => {
            Array.prototype.push.call(dataList.value, ...data?.list ?? [])
          })
      } else {
        uni.$reqGet('unCompetePage', queryParams.value)
          .then(({
            data,
            msg
          }) => {
            Array.prototype.push.call(dataList.value, ...data?.list ?? [])
          })
      }
    })

    return {
      goHome,
      isBefore,
      dataList,
      easyinput,
      errorTip,
      errorState,
      errorTipMessage,
	  handleInputFocus,
      scanNumber,
      handleMapass,
      handleKeydown,
      handleCheckTabs,
      handleNavigateToProductList,
      handleCloseErrorTipsModal
    }
  }
})
</script>

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

	.list-content {
		margin-top: 80px;
		min-height: calc(100vh - 80px);
		background-color: #edeeee;
	}

	.input-200 {
		width: 200px;
		padding-left: 10px;
	}

	span,
	text {
		font-size: 12px;
	}

	.font-icons {
		width: 40px;
		font-size: 20px;
		text-align: right;
	}

	.scan {
		position: fixed;
		top: 116px;
		left: 0;
		height: 45px;
		width: calc(100% - 24px);
		padding: 0 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #edeeee;
		border-bottom: 1px solid #edeeee;
		z-index: 9;
		background-color: white;

		.scan-card {
			width: 100%;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 7fr 2fr;
			align-items: center;

			input {
				height: 35px;
				line-height: 35px;
			}

			text {
				width: 100%;
				text-align: right;
			}
		}
	}
	
	.tabs {
		position: fixed;
		top: 72px;
		left: 0;
		width: 100%;
		height: 45px;
		display: flex;
		align-items: flex-end;
		padding: 0 12px;
		z-index: 9;
		background-color: white;
		
		.tabs-list {
			border-radius: 3px;
			overflow: hidden;
		}
	
		.tabs-item {
			display: inline-block;
			width: 72px;
			height: 30px;
			line-height: 30px;
			padding: 0 8px;
			font-size: 14px;
			font-weight: bold;
			text-align: center;
			color: black;
			border-bottom: 1.5px dashed #00a0e9;
			transition: all .5s ease-in-out;
		}
	
		.tabs-item-active {
			position: relative;
			display: inline-block;
			width: 72px;
			height: 30px;
			line-height: 30px;
			padding: 0 8px;
			font-size: 14px;
			font-weight: bold;
			text-align: center;
			color: white;
			border-left: 1px solid #00a0e9;
			border-top: 1px solid #00a0e9;
			border-right: 1px solid #00a0e9;
			border-bottom: 1.5px solid #00a0e9;
			border-radius: 5px 5px 0 0;
			animation: .3s linear show;
			background-color: #00a0e9;
		}
	
		.tabs-item-active::before {
			content: '';
			position: absolute;
			left: -10px;
			bottom: 0;
			width: 10px;
			height: 10px;
			background: radial-gradient(circle at 0% 25%, transparent 10px, #00a0e9 0)
		}
	
		.tabs-item-active::after {
			content: '';
			position: absolute;
			right: -10px;
			bottom: 0;
			width: 10px;
			height: 10px;
			background: radial-gradient(circle at 100% 25%, transparent 10px, #00a0e9 0)
		}
	}
	
	@keyframes show {
		from {
			transform: translateY(5%);
		}
	
		to {
			transform: translateY(0%);
		}
	}

	.list-panel {
		// height: calc(100vh - 225px);
		// min-height: 230px;
		padding: 5px 8px;
		margin-top: 92px;
		overflow-y: scroll;
	}
</style>