恢复原生toast,loading修改为自定义组件
This commit is contained in:
parent
348fee275f
commit
5ca760942d
|
@ -4,15 +4,6 @@ export default {
|
||||||
pageConfig: {},
|
pageConfig: {},
|
||||||
},
|
},
|
||||||
onLaunch: function () {
|
onLaunch: function () {
|
||||||
let that = this;
|
|
||||||
for (let method of ["navigateTo", "redirectTo", "reLaunch", "switchTab", "navigateBack"]) {
|
|
||||||
uni.addInterceptor(method, {
|
|
||||||
success() {
|
|
||||||
that.$store.commit("toast/show", false);
|
|
||||||
that.$store.commit("toast/title", "");
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
let pageConfig = this.$storage.get("system_config");
|
let pageConfig = this.$storage.get("system_config");
|
||||||
if (!pageConfig) {
|
if (!pageConfig) {
|
||||||
const { windowWidth, windowHeight, statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
|
const { windowWidth, windowHeight, statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
|
||||||
|
|
|
@ -31,13 +31,13 @@
|
||||||
<view class="page-footer"></view>
|
<view class="page-footer"></view>
|
||||||
<!-- 组件 -->
|
<!-- 组件 -->
|
||||||
<auth-login-box />
|
<auth-login-box />
|
||||||
<widget-toast />
|
<widget-loading />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import AuthLoginBox from "@/components/auth/login-box";
|
import AuthLoginBox from "@/components/auth/login-box";
|
||||||
import WidgetToast from "@/components/widgets/toast";
|
import WidgetLoading from "@/components/widgets/loading/loading";
|
||||||
import { mapGetters } from "vuex";
|
import { mapGetters } from "vuex";
|
||||||
export default {
|
export default {
|
||||||
name: "component-layout",
|
name: "component-layout",
|
||||||
|
@ -50,7 +50,7 @@ export default {
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
AuthLoginBox,
|
AuthLoginBox,
|
||||||
WidgetToast,
|
WidgetLoading,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
minHeight: {
|
minHeight: {
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
|
@ -0,0 +1,67 @@
|
||||||
|
<template>
|
||||||
|
<view v-show="show" class="components-widgets-loading">
|
||||||
|
<image class="icon" :src="require('./loading.png')" mode="scaleToFill" />
|
||||||
|
<text class="text">{{ title }}</text>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from "vuex";
|
||||||
|
export default {
|
||||||
|
name: "components-widgets-loading",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
show: (state) => state.loading.show,
|
||||||
|
title: (state) => state.loading.title,
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
components: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
destroyed() {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@keyframes Loading {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.components-widgets-loading {
|
||||||
|
z-index: 25;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 270rpx;
|
||||||
|
margin: 0 auto;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background-color: #646464;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 20rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
opacity: 0.9;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
.icon {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
animation: Loading 1s infinite linear;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,50 +0,0 @@
|
||||||
<template>
|
|
||||||
<view v-show="show" class="components-widgets-toast">
|
|
||||||
<view class="toast">
|
|
||||||
{{ title }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapState } from "vuex";
|
|
||||||
export default {
|
|
||||||
name: "components-widgets-toast",
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState({
|
|
||||||
show: (state) => state.toast.show,
|
|
||||||
title: (state) => state.toast.title,
|
|
||||||
}),
|
|
||||||
},
|
|
||||||
components: {},
|
|
||||||
created() {},
|
|
||||||
mounted() {},
|
|
||||||
destroyed() {},
|
|
||||||
methods: {},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less" scoped>
|
|
||||||
.components-widgets-toast {
|
|
||||||
z-index: 25;
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
max-width: 400rpx;
|
|
||||||
.toast {
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #ffffff;
|
|
||||||
background-color: #575757;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 20rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
import $store from '@/store/index'
|
||||||
|
export default {
|
||||||
|
show(title) {
|
||||||
|
$store.commit('loading/show', true);
|
||||||
|
if (title) {
|
||||||
|
$store.commit('loading/title', title);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hide() {
|
||||||
|
$store.commit('loading/show', false);
|
||||||
|
$store.commit('loading/title', "");
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +1,4 @@
|
||||||
import $storage from '@/core/storage'
|
import $storage from '@/core/storage'
|
||||||
import $store from '@/store/index'
|
|
||||||
|
|
||||||
function time() {
|
function time() {
|
||||||
return parseInt(Math.round(new Date() / 1000));
|
return parseInt(Math.round(new Date() / 1000));
|
||||||
|
@ -191,20 +190,22 @@ function toPage(url, options, type) {
|
||||||
}
|
}
|
||||||
|
|
||||||
let toastTimer;
|
let toastTimer;
|
||||||
function toast(title, duration) {
|
function toast(title, options) {
|
||||||
uni.hideLoading();
|
if (typeof options === "undefined") {
|
||||||
return new Promise((resolve, reject) => {
|
options = {};
|
||||||
if (typeof duration === "undefined") {
|
|
||||||
duration = 1500;
|
|
||||||
}
|
}
|
||||||
$store.commit('toast/show', true);
|
return new Promise((resolve, reject) => {
|
||||||
$store.commit('toast/title', title);
|
if (!options.duration) {
|
||||||
|
options.duration = 1500;
|
||||||
|
}
|
||||||
|
uni.showToast({
|
||||||
|
...{ title: title, icon: "none" },
|
||||||
|
...options
|
||||||
|
});
|
||||||
clearTimeout(toastTimer);
|
clearTimeout(toastTimer);
|
||||||
toastTimer = setTimeout(() => {
|
toastTimer = setTimeout(() => {
|
||||||
$store.commit('toast/show', false);
|
|
||||||
$store.commit('toast/title', "");
|
|
||||||
resolve();
|
resolve();
|
||||||
}, duration);
|
}, options.duration);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -32,9 +32,7 @@ const request = async (args) => {
|
||||||
throw "登录态失效";
|
throw "登录态失效";
|
||||||
}
|
}
|
||||||
|
|
||||||
(rule.showLoading) && uni.showLoading({
|
(rule.showLoading) && prototype.$loading.show('加载中');
|
||||||
title: "加载中"
|
|
||||||
});
|
|
||||||
|
|
||||||
const contentType = (args.contentType) ? args.contentType : 'application/json';
|
const contentType = (args.contentType) ? args.contentType : 'application/json';
|
||||||
|
|
||||||
|
@ -51,7 +49,7 @@ const request = async (args) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
(rule.showLoading) && uni.hideLoading();
|
(rule.showLoading) && prototype.$loading.hide();
|
||||||
|
|
||||||
if (error || response.statusCode != 200) {
|
if (error || response.statusCode != 200) {
|
||||||
prototype.$utils.toast('网络错误');
|
prototype.$utils.toast('网络错误');
|
||||||
|
|
|
@ -24,9 +24,7 @@ let upload = async (args) => {
|
||||||
throw "找不到API:" + args.api;
|
throw "找不到API:" + args.api;
|
||||||
}
|
}
|
||||||
|
|
||||||
(rule.showLoading) && uni.showLoading({
|
(rule.showLoading) && prototype.$loading.show('上传中');
|
||||||
title: "上传中"
|
|
||||||
});
|
|
||||||
|
|
||||||
let [error, response] = await uni.uploadFile({
|
let [error, response] = await uni.uploadFile({
|
||||||
url: prototype.$config.root + rule.url,
|
url: prototype.$config.root + rule.url,
|
||||||
|
@ -35,7 +33,8 @@ let upload = async (args) => {
|
||||||
formData: args.data || {},
|
formData: args.data || {},
|
||||||
});
|
});
|
||||||
|
|
||||||
(rule.showLoading) && uni.hideLoading();
|
(rule.showLoading) && prototype.$loading.hide();
|
||||||
|
|
||||||
if (error || response.statusCode != 200) {
|
if (error || response.statusCode != 200) {
|
||||||
prototype.$utils.toast('网络错误');
|
prototype.$utils.toast('网络错误');
|
||||||
throw "网络错误";
|
throw "网络错误";
|
||||||
|
|
|
@ -5,6 +5,7 @@ import store from "./store/index"
|
||||||
import storage from './core/storage'
|
import storage from './core/storage'
|
||||||
import request from './core/request'
|
import request from './core/request'
|
||||||
import upload from './core/upload'
|
import upload from './core/upload'
|
||||||
|
import loading from './core/libs/loading'
|
||||||
import test from './core/libs/test'
|
import test from './core/libs/test'
|
||||||
import event from './core/libs/event'
|
import event from './core/libs/event'
|
||||||
import utils from './core/libs/utils'
|
import utils from './core/libs/utils'
|
||||||
|
@ -18,6 +19,7 @@ Vue.use({
|
||||||
Vue.prototype.$storage = storage
|
Vue.prototype.$storage = storage
|
||||||
Vue.prototype.$request = request
|
Vue.prototype.$request = request
|
||||||
Vue.prototype.$upload = upload
|
Vue.prototype.$upload = upload
|
||||||
|
Vue.prototype.$loading = loading
|
||||||
Vue.prototype.$test = test
|
Vue.prototype.$test = test
|
||||||
Vue.prototype.$event = event
|
Vue.prototype.$event = event
|
||||||
Vue.prototype.$utils = utils
|
Vue.prototype.$utils = utils
|
||||||
|
|
|
@ -5,7 +5,7 @@ import system from "@/store/modules/system"
|
||||||
import user from "@/store/modules/user"
|
import user from "@/store/modules/user"
|
||||||
import service from "@/store/modules/service"
|
import service from "@/store/modules/service"
|
||||||
import cart from "@/store/modules/cart"
|
import cart from "@/store/modules/cart"
|
||||||
import toast from "@/store/modules/toast"
|
import loading from "@/store/modules/loading"
|
||||||
|
|
||||||
Vue.use(Vuex)
|
Vue.use(Vuex)
|
||||||
export default new Vuex.Store({
|
export default new Vuex.Store({
|
||||||
|
@ -14,6 +14,6 @@ export default new Vuex.Store({
|
||||||
user,
|
user,
|
||||||
service,
|
service,
|
||||||
cart,
|
cart,
|
||||||
toast,
|
loading,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -11,7 +11,7 @@ export default {
|
||||||
},
|
},
|
||||||
title(state, data) {
|
title(state, data) {
|
||||||
state.title = data;
|
state.title = data;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
actions: {}
|
actions: {}
|
||||||
}
|
}
|
Loading…
Reference in New Issue