warewms-PDA/pages/Warehousing/Warehousingthree/index.vue

<template>
  <view class="content">
    <view class="vercode_content">
      <view class="vontent_boby" @click="warehous">
        <view class="uicon-volume_text">
          <text>物料名称:原料</text>
        </view>
        <view class="uicon-volume_text">
          <text>规格:FESA-02131-345K</text>
        </view>
      </view>
    </view>
    <view class="border-buttons">
      <view class="buttons" @click="Material">
        <text>新增物料</text>
      </view>
      <view class="buttons2">
        <text>新增入库</text>
      </view>
    </view>
    <xw-scan></xw-scan>
  </view>
</template>

<script>
export default {
  data() {
    return {
      recshow: false,
      value: "",
      placeholder: "请输入入库单位",
      //logo图片 base64
    };
  },
  onLoad(option) {
    // this.$broadcastScan.init(this.getScancode);
  },
  onUnload() {
    // 移除监听事件
    uni.$off("xwscan");
  },
  onHide() {
    // this.$broadcastScan.stop();
  },
  onShow() {
    // this.$broadcastScan.start();
    let that = this;
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1]; //当前页面
    if (currPage.testdata != undefined) {
      console.log("$attrs", currPage.testdata);
      this.value = currPage.testdata.name;
    }
  },
  created() {
    // 抓取扫描枪数据
    document.onkeydown = (e) => {
      this.startScan();
    };
  },

  watch: {
    scanCodeValue(value) {
      if (!!value) {
        document.onkeydown = null;
      } else {
        this.placeholder = "扫码失败，请重新扫码...";
      }
    },
  },

  mounted() {
    let _this = this;
  },
  onHide() {
    this.recshow = false;
  },
  methods: {
    Material() {
      uni.navigateTo({
        url: "/pages/Warehousing/selectMaterial/index",
      });
    },
    focusFn(e) {
      this.recshow = true;
      uni.$off("xwscan"); // 每次进来先 移除全局自定义事件监听器
      uni.$on("xwscan", (res) => {
        console.log("扫码结果：", res.code);
        this.value = res.code;
      });
      console.log("focus事件");
    },
    startScan() {
      this.$nextTick(() => {
        this.focusState = true;
      });
      // 自动获取input输入框焦点
      if (e.which === 13) {
        // 安卓版PDA扫描枪扫描完后完成键的keycode=229
        // 其他类型可根据keycode值来确认哪一个是完成值，我的是13
        setTimeout(() => {
          if (this.value.length < 3) return;
          this.value = "";
        }, 500);
        return;
      }
    },

    getScancode(code) {
      console.log("进", code);
      // 有些PDA会自带换行符，trim函数处理下
      code = code.trim();
      this.value = code;
      //code就是扫描获取的值
      console.log(code);
      uni.showLoading({
        title: code,
      });
      setTimeout(() => {
        uni.hideLoading();
      }, 3000);
    },
    goto(data) {
      uni.navigateTo({
        url: data,
      });
    },
  },
};
</script>
<style scoped>
/deep/.is-input-border {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;

  border-radius: 4px;
  background-color: rgb(245 245 245) !important;
  /* background: #24bdbd; */
}
/deep/uni-button {
  color: #000;
  border: 1px solid #ff0000;
  border-radius: 31px;
  width: 21%;
  background-color: #f5f5f5;
  height: 42px;
  font-size: 16px;
  color: #ff0000;
}
/deep/.uni-easyinput__content-input[data-v-abe12412] {
  width: auto;
  position: relative;
  overflow: hidden;
  flex: 1;
  line-height: 1;
  font-size: 14px;
  height: 35px;
  /* border-bottom: 1px solid #ff0000 !important; */
}
/deep/.is-input-border {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  border: none !important;
  border-radius: 4px;
}
</style>
<style lang="scss" scoped>
.content {
  .vontent_boby {
    padding: 0 15px;
    background: #fff;
    border-top: 1px solid #dbdbdb;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #838383;
    border-bottom: 1px solid #dbdbdb;
    height: 55px;
    align-items: center;
  }
  .border-buttons {
    display: flex;
    position: absolute;
    button: 0;
    bottom: 32px;
    justify-content: space-between;
    /* width: 91%; */
    left: 0;
    text-align: center;
    right: 0;
    padding: 0 15px;
    .buttons {
      width: 46%;
      border: 1px solid #f00;
      border-radius: 34px;
      height: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: red;
      font-weight: 500;
    }
    .buttons2 {
      width: 46%;
      border: 1px solid #ff0505;
      border-radius: 34px;
      height: 42px;
      background: red;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color: white;
      font-weight: 500;
    }
  }
}
</style>