pco/app/uview-ui/components/u-no-network/u-no-network.vue

<template>
  <u-overlay
      :show="!isConnected"
      @touchmove.stop.prevent="noop"
      :customStyle="{
			backgroundColor: '#fff',
			display: 'flex',
			justifyContent: 'center',
		}"
  >
    <view
        class="u-no-network"
    >
      <u-icon
          :name="image"
          size="150"
          imgMode="widthFit"
          class="u-no-network__error-icon"
      ></u-icon>
      <text class="u-no-network__tips">{{ tips }}</text>
      <!-- 只有APP平台，才能跳转设置页，因为需要调用plus环境 -->
      <!-- #ifdef APP-PLUS -->
      <view class="u-no-network__app">
        <text class="u-no-network__app__setting">请检查网络，或前往</text>
        <text
            class="u-no-network__app__to-setting"
            @tap="openSettings"
        >设置
        </text>
      </view>
      <!-- #endif -->
      <view class="u-no-network__retry">
        <u-button
            size="mini"
            text="重试"
            type="primary"
            plain
            @click="retry"
        ></u-button>
      </view>
    </view>
  </u-overlay>
</template>

<script>
import props from './props.js';

/**
 * noNetwork 无网络提示
 * @description 该组件无需任何配置，引入即可，内部自动处理所有功能和事件。
 * @tutorial https://www.uviewui.com/components/noNetwork.html
 * @property {String}      tips  没有网络时的提示语 （默认：'哎呀，网络信号丢失' ）
 * @property {String | Number}  zIndex  组件的z-index值
 * @property {String}      image  无网络的图片提示，可用的src地址或base64图片
 * @event {Function}      retry  用户点击页面的"重试"按钮时触发
 * @example <u-no-network></u-no-network>
 */
export default {
  name: "u-no-network",
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  data() {
    return {
      isConnected: true, // 是否有网络连接
      networkType: "none", // 网络类型
    }
  },
  mounted() {
    this.isIOS = (uni.getSystemInfoSync().platform === 'ios')
    uni.onNetworkStatusChange((res) => {
      this.isConnected = res.isConnected
      this.networkType = res.networkType
      this.emitEvent(this.networkType)
    })
    uni.getNetworkType({
      success: (res) => {
        this.networkType = res.networkType
        this.emitEvent(this.networkType)
        if (res.networkType == 'none') {
          this.isConnected = false
        } else {
          this.isConnected = true
        }
      }
    })
  },
  methods: {
    retry() {
      // 重新检查网络
      uni.getNetworkType({
        success: (res) => {
          this.networkType = res.networkType
          this.emitEvent(this.networkType)
          if (res.networkType == 'none') {
            uni.$u.toast('无网络连接')
            this.isConnected = false
          } else {
            uni.$u.toast('网络已连接')
            this.isConnected = true
          }
        }
      })
      this.$emit('retry')
    },
    // 发出事件给父组件
    emitEvent(networkType) {
      this.$emit(networkType === 'none' ? 'disconnected' : 'connected')
    },
    async openSettings() {
      if (this.networkType == "none") {
        this.openSystemSettings()
        return
      }
    },
    openAppSettings() {
      this.gotoAppSetting()
    },
    openSystemSettings() {
      // 以下方法来自5+范畴，如需深究，请自行查阅相关文档
      // https://ask.dcloud.net.cn/docs/
      if (this.isIOS) {
        this.gotoiOSSetting()
      } else {
        this.gotoAndroidSetting()
      }
    },
    network() {
      var result = null
      var cellularData = plus.ios.newObject("CTCellularData")
      var state = cellularData.plusGetAttribute("restrictedState")
      if (state == 0) {
        result = null
      } else if (state == 2) {
        result = 1
      } else if (state == 1) {
        result = 2
      }
      plus.ios.deleteObject(cellularData)
      return result
    },
    gotoAppSetting() {
      if (this.isIOS) {
        var UIApplication = plus.ios.import("UIApplication")
        var application2 = UIApplication.sharedApplication()
        var NSURL2 = plus.ios.import("NSURL")
        var setting2 = NSURL2.URLWithString("app-settings:")
        application2.openURL(setting2)
        plus.ios.deleteObject(setting2)
        plus.ios.deleteObject(NSURL2)
        plus.ios.deleteObject(application2)
      } else {
        var Intent = plus.android.importClass("android.content.Intent")
        var Settings = plus.android.importClass("android.provider.Settings")
        var Uri = plus.android.importClass("android.net.Uri")
        var mainActivity = plus.android.runtimeMainActivity()
        var intent = new Intent()
        intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
        var uri = Uri.fromParts("package", mainActivity.getPackageName(), null)
        intent.setData(uri)
        mainActivity.startActivity(intent)
      }
    },
    gotoiOSSetting() {
      var UIApplication = plus.ios.import("UIApplication")
      var application2 = UIApplication.sharedApplication()
      var NSURL2 = plus.ios.import("NSURL")
      var setting2 = NSURL2.URLWithString("App-prefs:root=General")
      application2.openURL(setting2)
      plus.ios.deleteObject(setting2)
      plus.ios.deleteObject(NSURL2)
      plus.ios.deleteObject(application2)
    },
    gotoAndroidSetting() {
      var Intent = plus.android.importClass("android.content.Intent")
      var Settings = plus.android.importClass("android.provider.Settings")
      var mainActivity = plus.android.runtimeMainActivity()
      var intent = new Intent(Settings.ACTION_SETTINGS)
      mainActivity.startActivity(intent)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-no-network {
  @include flex(column);
  justify-content: center;
  align-items: center;
  margin-top: -100px;

  &__tips {
    color: $u-tips-color;
    font-size: 14px;
    margin-top: 15px;
  }

  &__app {
    @include flex(row);
    margin-top: 6px;

    &__setting {
      color: $u-light-color;
      font-size: 13px;
    }

    &__to-setting {
      font-size: 13px;
      color: $u-primary;
      margin-left: 3px;
    }
  }

  &__retry {
    @include flex(row);
    justify-content: center;
    margin-top: 15px;
  }
}
</style>