234 lines
22 KiB
Vue
234 lines
22 KiB
Vue
|
<template>
|
|||
|
|
<view class="u-no-network" v-if="!isConnected" :style="{'z-index': uZIndex}" @touchmove.stop.prevent="">
|
|||
|
|
<view class="u-inner">
|
|||
|
|
<image class="u-error-icon" :src="image" mode="widthFix"></image>
|
|||
|
|
<view class="u-tips">
|
|||
|
|
{{tips}}
|
|||
|
|
</view>
|
|||
|
|
<!-- 只有APP平台，才能跳转设置页，因为需要调用plus环境 -->
|
|||
|
|
<!-- #ifdef APP-PLUS -->
|
|||
|
|
<view class="u-to-setting">
|
|||
|
|
请检查网络，或前往<text class="u-setting-btn" @tap="openSettings">设置</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view class="u-retry" :hover-stay-time="150" @tap="retry" hover-class="u-retry-hover">
|
|||
|
|
重试
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* noNetwork 无网络提示
|
|||
|
|
* @description 该组件无需任何配置，引入即可，内部自动处理所有功能和事件。
|
|||
|
|
* @tutorial https://www.uviewui.com/components/noNetwork.html
|
|||
|
|
* @property {String} tips 没有网络时的提示语（默认哎呀，网络信号丢失）
|
|||
|
|
* @property {String Number} zIndex 组件的z-index值（默认1080）
|
|||
|
|
* @property {String} image 无网络的图片提示，可用的src地址或base64图片
|
|||
|
|
* @event {Function} retry 用户点击页面的"重试"按钮时触发
|
|||
|
|
* @example <u-no-network></u-no-network>
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
name: "u-no-network",
|
|||
|
|
props: {
|
|||
|
|
// 页面文字提示
|
|||
|
|
tips: {
|
|||
|
|
type: String,
|
|||
|
|
default: '哎呀，网络信号丢失'
|
|||
|
|
},
|
|||
|
|
// 一个z-index值，用于设置没有网络这个组件的层次，因为页面可能会有其他定位的元素层级过高，导致此组件被覆盖
|
|||
|
|
zIndex: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
// image 没有网络的图片提示
|
|||
|
|
image: {
|
|||
|
|
type: String,
|
|||
|
|
default: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEYCAMAAABFglBLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0U3MjVFMzQwNEY1MTFFQUE4MTNDOUEzMTVBREMxQjIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0U3MjVFMzUwNEY1MTFFQUE4MTNDOUEzMTVBREMxQjIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozRTcyNUUzMjA0RjUxMUVBQTgxM0M5QTMxNUFEQzFCMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozRTcyNUUzMzA0RjUxMUVBQTgxM0M5QTMxNUFEQzFCMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkHIU9QAAAMAUExURdHW2OWiou7u7tve4dnc3/vw8N3g4sPCwvjn5+jo6M7Q0u6+vtyEhPXY2Li+wuikpPXW1uXo6dba3Pbg4Na5u+qurqqyt/HJydjb3fjo6LrAxO7Bwey1td6MjOrs7fbc3OTn6Maytf7+/vz19eqqqrzCxvzz87a8wLO6vuqxsf78/PDFxenr7L/FyNTY26+2u/z09MjMzqy0udnZ2dvb27G4vMjN0O7v8P339+Ll5u3v8NDS1ODj5frt7bC3vP76+u24uOKamtTW2MTIy9zc3N7e3vPQ0OCTk8DGyfDDw9LR0c7S1LussNbY2fPOztLU1cLHyrK6vvji4vrv78bKzPX29/np6crP0vjk5Ozu78bLzuepqczR1MHFyMDEyOq1tfTS0vP09cLIy9DU173Ex8bGxvHy88/U18vO0LK4vM7OzsTKzcPJzPLMzM/T1sbMz8HJy+7FxbW8wNTW18XKzvb3+MjLzczP0d3e3+Dh4r3Dxtna29zd3rK5vdPU1cfM0Prq6uOenuPm58HGyfHz8/ro6Lq/w8nO0bzCxcrKytjZ2uXm5vTU1LvBxbW7v+rp6eefn/39/eLi4u3t7Ozs7Pj4+Pr6+vX19fHx8erq6vPz8+Xl5ff39+fn5/v7+/z8/PLx8fX09Pb29ri4uOTk5PHw8OPj4/Py8ubm5vn5+e3s7Pb19fTz8/f29tfX1+7t7cvQ0+zr6/Ly8u3t7fr5+efm5quzuOvq6vT19uvr6/j5+a61uuy6uvb39/T09Ojn5+jq6621uvn6+t/i5KyzuPn4+Le+wvv6+s3S1fj4+fDw8OHk5vv7/Pr7++Xk5LS7v7y8vObl5fz9/ff4+OTj48DEx8XJy+Hk5euysu/x8re9wfn5+v38/Pv8/Pr6++vt7uLi4+Pi4ubl5uXk5dPV1tbV1fHMzNPX2e7u7ejn6PT19fX19PDw7/b29f39/vnr6+Hh4a+3u+7t7q61uePi48PHyf35+enp6fLz9PPz8qmxtuDg4N/f3/Dv7////////1cfN/UAAAEAdFJOU////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wBT9wclAAAlqElEQVR42uydCXwUVZrAk5CEJBAQshACCGyjIRwBJR0It6JBGZZBkRtm5PBgFXAXHBghqAMz6LjGTrd9n7lvwn0JQhARxYNxVJTMwcwOM+7uzK6Z3VXcrnTXVr2q6q7urrvfq26c+n4egXTSVfXv993veym4JkklKdoj0IBoogHRgGiiAdGAaKIB0YBoogHRgGiiAdFEA6IBUVuwx+vqet/v1YAkhxwmcNT9gvjnsAYkGcT7eN1TtThe+1TdL2o1IEkg+rrvUV90MF9oQBIqv6ijF4a3d51XA5J4jVVXx3z587ojGpDEm/QwkO9pQJJB2CvksAYk8fJUXT31xZG63ppRTwI5QgcgR35Rd1MDkgxSX1f31P33P1V3i3u936HUyc3edWSsjuEakKRRW3r9kVv+JrRsrwbklpKTnXs+z0wfONOtAUm8rJu55oqfkZ0TOzUgCZS3Zh7s54+S5RqQhNGYMsnPISkakCSiQcjkNzUgasvUDaVsBF1fb9GXd//B0ziliPzjEA2IujLqGRaMST+cawgLNpn4q30aEDV1Va+dYRqzNy00RMoYUmdpQNTzcb8sCtuKH8w9Z4iWLuIbVzQgapmOBedDOO6c0WjgENK2vKwBUUUmvBSiUbrqxwZuOU18d5MGhEe/dI6a2WvIxA0HX1hfvH7V8gUpA9Mz3x/VuVTRLxvwdAhH5aJjBj4hv39QAxIl743ITHm6azBPnOCfVLwlc6pR3upYFbLjvIuDlEUqRYZo38JYS4gVt5rNZhMQO46byksoMeG4w8QIjtvMpJA/wP1EdZ0bKvkitkh555mBA3zSLnBlSFnNnlJvEJJ95ItW3pJAamvtZhy3m/T0g7fhthJGiG+EviYgmEJ/wHFP6GsbnlZSoicoucxmGwHVguPTBz543C9LHky/Jnql1w5KxWGo8KsThsAFYneYMOb5mlnP11ZCrwOPjfgGI8RqsZuZtUOsFmbllFhZP+zEbc8vGcqzMibv7qos3rd7Mg+TrQv2vCVkiLYcl4rDYLhKvi79FgFirDU7TPpyHHexINg9ZnOazWazyPxlVhsBzcKAKrl84cHo5zx758H0ASufWGrVBWkxup8YMepCespDV6Jfe3z9kOnc7/OjLydJx2FoJF983norAEkLqSbiw4+ZHGY7+UQhyYCDEZml8+ufzLz+RlBAPpieGYPloczYdaIb8rAMHAbD1yr5WHEBqTW7XIwZwEykBoIcrH3JrkgcL554PShRPpie/hDbE9v97oTIXz2zUhYOw0Lw4glJDMRiNtGrIo1AYUFwYZlsVbVzwyhfUJ4YO1MqWb/hsfRw6rzzPnk4DNlk2sQ/BU9aIGZaS2EOI6LLunBn+Fk+fWFpUJmcvPBSWH2dXz4A/OqTB2XiMBimgJf/NCmBGO0OykM1mW3ILur9cNq1cuATwbjk801htC8QcUQmk0NcIhWHoWKwPBdr9KwVuWvz//nVxYXIgTg
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isConnected: true, // 是否有网络连接
|
|||
|
|
networkType: "none", // 网络类型
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
uZIndex() {
|
|||
|
|
return this.zIndex ? this.zIndex : this.$u.zIndex.noNetwork;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.isIOS = (uni.getSystemInfoSync().platform === 'ios');
|
|||
|
|
uni.onNetworkStatusChange((res) => {
|
|||
|
|
this.isConnected = res.isConnected;
|
|||
|
|
this.networkType = res.networkType;
|
|||
|
|
});
|
|||
|
|
uni.getNetworkType({
|
|||
|
|
success: (res) => {
|
|||
|
|
this.networkType = res.networkType;
|
|||
|
|
if (res.networkType == 'none') {
|
|||
|
|
this.isConnected = false;
|
|||
|
|
} else {
|
|||
|
|
this.isConnected = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
retry() {
|
|||
|
|
// 重新检查网络
|
|||
|
|
uni.getNetworkType({
|
|||
|
|
success: (res) => {
|
|||
|
|
this.networkType = res.networkType;
|
|||
|
|
if (res.networkType == 'none') {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '无网络连接',
|
|||
|
|
icon: 'none',
|
|||
|
|
position: 'top'
|
|||
|
|
})
|
|||
|
|
this.isConnected = false;
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '网络已连接',
|
|||
|
|
icon: 'none',
|
|||
|
|
position: 'top'
|
|||
|
|
})
|
|||
|
|
this.isConnected = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.$emit('retry');
|
|||
|
|
},
|
|||
|
|
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/style.components.scss";
|
|||
|
|
|
|||
|
|
.u-no-network {
|
|||
|
|
background-color: #fff;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-inner {
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-top: -15%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-tips {
|
|||
|
|
color: $u-tips-color;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-error-icon {
|
|||
|
|
width: 300rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-to-setting {
|
|||
|
|
color: $u-light-color;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-setting-btn {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: $u-type-primary;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-retry {
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
border: 1px solid $u-tips-color;
|
|||
|
|
color: $u-tips-color;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
padding: 6rpx 30rpx;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.u-retry-hover {
|
|||
|
|
color: #fff;
|
|||
|
|
background-color: $u-tips-color;
|
|||
|
|
}
|
|||
|
|
</style>
|