aiot-app/pages/ScanCode/ScanCode.vue

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="扫描设备"
      @clickLeft="back"
    ></uni-nav-bar>
    <view class="main">
      <view class="ts"> 请将红外设备对准条形码 </view>
      <view class="title" v-if="info"> 扫描结果： </view>
      <view class="content" v-if="info">
        {{ info }}
      </view>
    </view>
    <view class="fixed-bottom-bar">
      <view class="item s2" @click="back"> 返回 </view>
      <view class="item s1" @click="submit"> 确定 </view>
    </view>
    <ScanCode @scancodedate="cbScancodedate"></ScanCode>
  </view>
</template>

<script>
import ScanCode from '@/components/ScanCode.vue'
import { get, postJ, post } from '@/utils/api.js'
export default {
  data () {
    return {
      info: null
    }
  },
  components: {
    ScanCode
  },
/*  onShow () {
    var _this = this
    uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器
    uni.$on('scancodedate', function (data) {
      _this.info = data.code
    })
  }, */
  methods: {
    submit () {
      if (this.info) {
        uni.$emit('scancode', { code: this.info })
        //this.back()
      } else {
        uni.showToast({
          title: '请先扫描条形码',
          icon: 'none'
        })
      }
    },
    // 返回
    back () {
      uni.navigateBack({
        delta: 1
      })
    },
	cbScancodedate(data){
		this.info = data.code
	}
  }
}
</script>

<style scoped lang="scss">
.main {
  padding: 30rpx;
  padding-bottom: 81rpx;
}
.title {
  margin-top: 30rpx;
}
.fixed-bottom-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80rpx;
  box-sizing: border-box;
  border-top: 1px solid #f2f2f2;

  .item {
    flex: 1;
    height: 100%;
    line-height: 80rpx;
    text-align: center;

    &.s1 {
      background-color: #157a2c;
      color: #fff;
    }
  }
}
</style>