ios手机不兼容摇一摇功能

<template>
  <div class="fast-shake">
    <div class="shake-dialog">
      <x-dialog v-model="isHidden">
        <div class="dialog-cont">
          <div class="dialog-div">
            由于IOS系统需要手动获取<br>访问动作与方向的权限，
            <div>为保证游戏正常,请点击<strong>允许</strong></div>
            <div class="dialog-btn" @click="ios13granted()">同意授权</div>
          </div>
        </div>
      </x-dialog>
    </div>
    <div class="fast-num">摇一摇的次数
      <div style="font-size:30px;">{
   
   {logCount}}</div>
    </div>
    <div class="fast-img">
      <img src="../../assets/images/yp_sport/img_shake.gif">
    </div>
    <!-- <div v-html="tip"></div> -->
  </div>
</template>

<script>
import {
  XDialog
} from 'vux'
export default {
  data() {
    return {
      logCount: 0, //摇的次数
      tip: '',
      isHidden: false,
      isShake: false, // 是否开始倒计时
      Countdown: 15, //倒计时秒数
      timerDown: null
    };
  },

  components: {
    XDialog
  },
  beforeDestroy() { },
  created() { },
  destroyed() {
    this.$xccAlert({ show: false });
  },
  watch: {
    isShake() {
      if (this.isShake) {
        this.getDown();
      }
    }
  },
  mounted() {
    // 摇一摇函数
    this.addShakeEvent1();
  },

  methods: {
    getDown() {
      var self = this;
      self.timerDown = setInterval(function () {
        if (self.Countdown > 0) {
          self.Countdown--;
        } else {
          self.$xccAlert({
            title: ' ',
            content: `<div style="font-size:16px;color:#333333;margin-bottom:7px;"><p>您摇了`+self.logCount+`</p>感谢您的参与</div>`,
            confirmText: '知道了',
            show: true,
            onHide() {
              self.$router.replace('/home');
            }
          })
          clearInterval(self.timerDown);
        }
      }, 1000)
    },
    // 检查系统版本
    getIos() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.indexOf("like mac os x") > 0) {
        return true;
      } else {
        return false
      }
    },
    addShakeEvent1() {
      var self = this;
      self.addCheckShake();
      self.tip += '<div>addShakeEvent1-getIos=' + self.getIos() + '</div>';
      if (window.DeviceOrientationEvent) {
        this.tip += '<div>' + navigator.userAgent + '</div>';
        //  检查系统版本
        var ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf("like mac os x") > 0) {
          var reg = /os [\d._]*/gi;
          var verinfo = ua.match(reg);
          var version = (verinfo + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, ".");
          var arr = version.split(".");
          var arr2 = arr[0] + '.' + arr[1];
          var numK = parseFloat(arr2);
          var iosA = 13;
          this.tip += '<div>系统是ios,当前系统为' + numK + '</div>';
          self.permission();
          // if (numK >= iosA) {
          //   self.permission();
          // } else {
          //   this.tip += '<div>普通ios</div>';
          //   self.addCheckShake();
          // }
        } else {
          this.tip += '<div>安卓系统</div>';
          self.addCheckShake();
        }
      } else {
        self.toast_warn('很抱歉,您的手机不支持陀螺仪,无法进行操作', 'middle');
        this.tip += '<div>不支持陀螺仪</div>';
      }
    },
    // 授权
    permission() {
      var self = this;
      this.tip += '<div>DeviceMotionEvent=' + typeof (DeviceMotionEvent) + '</div>';
      this.tip += '<div>requestPermission=' + typeof (DeviceMotionEvent.requestPermission) + '</div>';
      if (typeof (DeviceMotionEvent) !== "undefined" && typeof (DeviceMotionEvent.requestPermission) === "function") {
        DeviceMotionEvent.requestPermission()
          .then(permissionState => {
            self.tip += '<div>permissionState=' + JSON.stringify(permissionState) + '</div>';
            if (permissionState == "granted") {
              this.tip += '<div>授权成功-可以摇一摇了1</div>';
              self.addCheckShake();
            } else if (permissionState === "denied") {
              self.toast_warn('授权被拒绝,后台退出APP再次进入即可弹出授权框', 'middle');
            } else {
              this.isHidden = true;
            }
          }).catch((err) => {
            this.tip += '<div> 弹出自定义提示框</div>';
            this.isHidden = true;
          })
      } else {
        this.tip += '<div>DeviceMotionEvent is not defined</div>';
      }
    },
    addCheckShake() {
      var self = this;
      this.tip += '<div> 其addCheckShake--</div>';
      var SHAKE_THRESHOLD = 2000;
      var last_update = 0;
      var x = 0, y = 0, z = 0, last_x = 0, last_y = 0, last_z = 0;
      function deviceMotionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity;
        var { x, y, z } = acceleration;
        if (!self.getIos()) {
          x = -x;
          y = -y;
          z = -z;
        }

        var curTime = new Date().getTime();
        if ((curTime - last_update) > 60) {
          var diffTime = curTime - last_update;
          last_update = curTime;
          x = acceleration.x;
          y = acceleration.y;
          z = acceleration.z;
          var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
          if (speed > SHAKE_THRESHOLD) {
            self.logCount++;//次数自增1
            self.isShake = true;
          }
          // 保存历史加速度
          last_x = x;
          last_y = y;
          last_z = z;
        }
      }
      //运动事件监听
      self.tip += '<div>window.DeviceMotionEvent-' + JSON.stringify(window.DeviceMotionEvent) + '</div>';
      window.addEventListener('devicemotion', deviceMotionHandler, false);
    },
    ios13granted() {
      //必须用户点击事件内触发，才能弹出授权框
      this.isHidden = false;
      var self = this;
      this.tip += '<div>' + this.logCount + '弹出IOS系统授权</div>';
      if (typeof (DeviceMotionEvent) !== "undefined" && typeof (DeviceMotionEvent.requestPermission) === "function") {
        DeviceMotionEvent.requestPermission()
          .then(permissionState => {
            self.tip += '<div>permissionState=' + JSON.stringify(permissionState) + '</div>';
            if (permissionState == "granted") {
              self.tip += '<div>授权成功-可以摇一摇了2</div>';
              self.addCheckShake();
            } else {
              self.toast_warn('授权被拒绝,后台退出APP再次进入即可弹出授权框', 'middle');
              self.tip += '<div>授权被拒绝-后台退出APP再次进入即可弹出授权框</div>';
            }
          }).catch((err) => {
            self.toast_warn(err);
            self.tip += '<div>错误-' + JSON.stringify(err) + '</div>';
          })
      } else {
        this.tip += '<div>ios13granted is not defined</div>';
      }
    },

  },

  computed: {}
}

</script>
<style lang='less' scoped>
.fast-img {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  img {
    width: 100%;
  }
}
.fast-shake {
  color: #ffffff;
  font-size: 14px;
  .fast-num {
    text-align: center;
    padding: 10%;
  }
}
.dialog-cont {
  width: 100%;
  height: 220px;
  .dialog-div {
    background-color: #fff;
    text-align: center;
    color: #333;
    font-size: 15px;
    border-radius: 15px;
    padding-top: 15px;
    font-family: Arial, Helvetica, sans-serif;
  }
  .dialog-btn {
    background: #e2e2e2;
    font-size: 14px;
    border-radius: 10px;
    margin: 6% 10%;
    text-align: center;
    padding: 10px 0;
  }
}
</style>
<style>
.shake-dialog .dialog-cont {
  height: 170px;
}
</style>