DWY_mobile/src/views/cms.vue

<template>
  <div style="width: 100%;height: 100%">
    <router-view class="bc" />
    <div class="footer">
      <b-nav fill class="tabBar">
        <b-nav-item to="/cms/home" @click="handleClick(1)" style="position: relative">
          <div v-show="state != 1" class="h5">
            <div>
              <img src="../assets/home/gn.png" style="width: 1.84rem;height: 1.84rem;" alt="">
            </div>

          </div>
          <div v-show="state == 1" class="h5">
            <div>
              <img src="../assets/home/gn.png" style="width: 1.84rem;height: 1.84rem;" alt="">
            </div>

          </div>
          <span style="font-size: 0.6rem" :class="state == 1 ? 'choose2' : ''">功能区</span>
        </b-nav-item>
        <b-nav-item @click="handleClick(2)" style="position: relative">
          <div v-show="state != 2" class="h5">
            <div>
              <img src="../assets/home/sm.png" style="width: 1.84rem;height: 1.84rem;" alt="">
            </div>

          </div>
          <div v-show="state == 2" class="h5">
            <div>
              <img src="../assets/home/smactive.png" style="width: 1.84rem;height: 1.84rem;" alt="">
            </div>

          </div>
          <span style="font-size: 0.6rem" :class="state == 2 ? 'choose2' : ''">扫描</span>


        </b-nav-item>
        <b-nav-item to="/cms/mine" @click="handleClick(3)" style="position: relative">
          <div v-show="state != 3" class="h5">
            <div>
              <img src="../assets/home/user.png" style="width: 1.84rem;height: 1.84rem;" alt="">
            </div>

          </div>
          <div v-show="state == 3" class="h5">
            <div>
              <img src="../assets/home/useractive.png" style="width: 1.84rem;height: 1.84rem;" alt="">
            </div>

          </div>
          <span style="font-size: 0.6rem" :class="state == 3 ? 'choose2' : ''">我的</span>
        </b-nav-item>
      </b-nav>
    </div>
    <Modal  :closable="false" v-model="is_show" footer-hide>
      <div style="text-align: center">
        <Button type="primary" style="height: 4rem;width: 8rem" @click="handleGO">{{ !qrState ? "扫码枪扫描" : "停止扫描"
        }}</Button>
        <!--        <Button type="primary" style="height: 4rem" @click="handleGoQr"-->
        <!--          >二维码扫描</Button-->
        <!--        >-->
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      state: 1,
      is_show: false,
      qrState: false,
      target: [],
    }
  },
  mounted() {
    window.uploadEPC = this.uploadEPC;
  },
  methods: {
    handleGoQr() {
      this.is_show = false;
      this.$router.push('/cms/ceshi')
    },
    uploadEPC(e) {
      if (this.target.indexOf(JSON.stringify(e)) == -1) {
        this.target.push(JSON.stringify(e));
      }
    },
    handleGO () {
      const url = ['/cms/finish/detail', '/cms/dispatch/detail', '/cms/Inventory/detail']
      if (url.indexOf(this.$route.path) !== -1) {
        this.qrState = !this.qrState;
        if (this.qrState) {
          androidJs.startInventory();
        } else {
          androidJs.stopInventory();
          this.is_show = false;
          localStorage.setItem('fyy_target', JSON.stringify(this.target))
          this.target = []
          this.$router.replace('/cms/refresh')
        }
      }
    },
    handleClick(e) {
      this.state = e
      if (e == 2) {
        this.is_show = true;
      }

    }
  }
}
</script>
<style lang="scss" scoped>
.choose2 {
  color: #03FCD3;
  position: relative;
}

.bc {
  height: 100%;
}
.tabBar {
  width: 100%;
  color: #a8a2a2;
}

.footer {
  position: absolute;
  bottom: 0rem;
  width: 100%;
  height: 3.06rem;
  z-index: 1;
  background-image: url('../assets/home/tabbarlist.png');
}

.nav-link {
  color: #ABDFFF
}

.h5 {
  margin-bottom: 0;
  position: relative;
  top: 0.24rem;
}

.nav {
  --bs-nav-link-padding-x: 0rem;
  --bs-nav-link-padding-y: 0rem;
}

.choose {
  color: #03FCD3;
}
.circle {
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  position: absolute;
}
.choose_1 {
  border-radius: 50%;
  background: #03FCD3;
  top: -0.3rem;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 2.3;
  z-index: 2;
}

.choose_3 {
  border-radius: 50%;
  background: #03FCD3;
  top: -0.3rem;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 2.3;
  z-index: 2;
}

/deep/.ivu-modal {
  top: 42%;
  width: 8rem !important;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}
/deep/.ivu-modal-content{
  background-color:rgba(0, 0, 0, 0.6) !important;
}
/deep/.ivu-modal-body{
  padding: 0;
}
/deep/.ivu-btn-primary{
  background-color: #0f4680;
}
</style>