330 lines
12 KiB
Vue
330 lines
12 KiB
Vue
<template>
|
|
<view :class="theme_view">
|
|
<!-- 是否有网络 -->
|
|
<view v-if="network_type_value == 'none' && not_network_await_status == 0" class="network-type-tips wh-auto tc bs-bb padding-horizontal-main">
|
|
<view class="cr-base text-size">{{$t('no-data.no-data.1u202v')}}</view>
|
|
<view class="cr-grey margin-top-sm">{{$t('no-data.no-data.imw8f1')}}{{title}}{{$t('no-data.no-data.q87572')}}</view>
|
|
<view class="margin-top-lg tc">
|
|
<button type="default" class="br-main bg-main cr-white round padding-horizontal-xxl" size="mini" @tap="open_setting_event">{{ $t('setup.setup.377uwg') }}</button>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<!-- 1 加载中(0loog, 1名称) -->
|
|
<view v-if="propStatus == 1 && network_type_value != 'none'" :class="'no-data-box tc no-data-loading '+(is_loading_use_skeleton == 1 && (propPage || null) != null ? 'skeleton' : '')">
|
|
<block v-if="is_loading_use_skeleton == 1 && (propPage || null) != null">
|
|
<!-- 是否展示头站位 -->
|
|
<view v-if="propIsHeader" class="skeleton-header"></view>
|
|
<!-- 首页 -->
|
|
<block v-if="propPage == 'home'">
|
|
<x-skeleton propType="banner"></x-skeleton>
|
|
<x-skeleton propType="menu"></x-skeleton>
|
|
<x-skeleton propType="waterfall"></x-skeleton>
|
|
<x-skeleton propType="list" propRowNumber="4"></x-skeleton>
|
|
</block>
|
|
<!-- 商品分类-整体内容 -->
|
|
<block v-else-if="propPage == 'goods-category'">
|
|
<x-skeleton propType="menu" propRowNumber="1"></x-skeleton>
|
|
<view class="goods-category-content flex-row jc-sb">
|
|
<view class="left">
|
|
<x-skeleton :propConfig="skeleton_goods_category_left_config"></x-skeleton>
|
|
</view>
|
|
<view class="right">
|
|
<x-skeleton propType="list" propRowNumber="7"></x-skeleton>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 商品分类-内容项 -->
|
|
<block v-else-if="propPage == 'goods-category-item'">
|
|
<x-skeleton propType="list" propRowNumber="6"></x-skeleton>
|
|
</block>
|
|
<!-- 购物车 -->
|
|
<block v-else-if="propPage == 'cart'">
|
|
<x-skeleton propType="list" propRowNumber="3"></x-skeleton>
|
|
<x-skeleton propType="waterfall" propRowNumber="4"></x-skeleton>
|
|
</block>
|
|
<!-- 商品详情 -->
|
|
<block v-else-if="propPage == 'goods'">
|
|
<x-skeleton propType="banner" propHeightNumber="600"></x-skeleton>
|
|
<x-skeleton propType="text"></x-skeleton>
|
|
<x-skeleton propType="info"></x-skeleton>
|
|
<x-skeleton propType="waterfall" propRowNumber="4"></x-skeleton>
|
|
</block>
|
|
</block>
|
|
<block v-else>
|
|
<view v-if="loading_content_type == 1" class="loading-title-animation">
|
|
<text class="title">{{title}}</text>
|
|
</view>
|
|
<view v-else class="loading-logo-content" :style="'margin-top: '+propLoadingLogoTop+';'">
|
|
<view class="loading-logo" :style="'background-image: url('+loading_logo+')'"></view>
|
|
<view class="loading-border" :style="'background-image: url('+loading_logo_border+')'"></view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
<!-- 2 处理错误 -->
|
|
<view v-else-if="propStatus == 2" class="no-data-box tc">
|
|
<image class="image" :src="static_dir + 'error.png'" mode="widthFix"></image>
|
|
<view class="no-data-tips">{{propMsg || $t('form.form.bniyyt')}}</view>
|
|
<view v-if="propBackBtn" class="margin-top-xxxl tc">
|
|
<button type="default" size="mini" class="bg-grey-e br-grey cr-base round" @tap="back_event">{{$t('common.return')}}</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 0 默认没有数据 -->
|
|
<view v-else-if="propStatus == 0" class="no-data-box tc">
|
|
<image class="image" :src="propUrl ? propUrl : static_dir + 'empty.png'" mode="widthFix"></image>
|
|
<view class="no-data-tips">{{propMsg || $t('common.no_relevant_data_tips')}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
const app = getApp();
|
|
export default {
|
|
data() {
|
|
return {
|
|
theme_view: app.globalData.get_theme_value_view(),
|
|
static_dir: '/static/images/common/',
|
|
is_loading_use_skeleton: app.globalData.data.is_loading_use_skeleton,
|
|
loading_logo_border: app.globalData.data.static_url+'static/common/svg/loading-border.svg',
|
|
loading_logo: app.globalData.get_application_logo_square() || app.globalData.data.static_url+'favicon.ico',
|
|
loading_content_type: app.globalData.data.loading_content_type,
|
|
title: app.globalData.get_application_title(),
|
|
network_type_value: '',
|
|
not_network_await_status: 0,
|
|
|
|
// 骨架屏配置
|
|
// 商品分类内容-左侧
|
|
skeleton_goods_category_left_config: {
|
|
padding: '30rpx',
|
|
gridRows: 19,
|
|
gridColumns: 1,
|
|
gridRowsGap: '30rpx',
|
|
headShow: true,
|
|
headWidth: '200rpx',
|
|
headHeight: '60rpx',
|
|
headBorderRadius: '16rpx',
|
|
textShow: false,
|
|
},
|
|
};
|
|
},
|
|
components: {},
|
|
props: {
|
|
propStatus: {
|
|
type: [Number, String],
|
|
default: 0,
|
|
},
|
|
propMsg: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
propUrl: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
propBackBtn: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
propNetworkTimeNum: {
|
|
type: Number,
|
|
default: 40,
|
|
},
|
|
propPage: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
propIsHeader: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
propLoadingLogoTop: {
|
|
type: String,
|
|
default: '50%',
|
|
}
|
|
},
|
|
// 页面被展示
|
|
created: function () {
|
|
self = this;
|
|
uni.getNetworkType({
|
|
success: function (res) {
|
|
// 当前网络
|
|
self.network_type_value = res.networkType;
|
|
// 无网络进入等待网络中
|
|
if(self.network_type_value == 'none') {
|
|
self.not_network_await_status = 1;
|
|
}
|
|
|
|
// 定时处理
|
|
self.countdown(self);
|
|
}
|
|
});
|
|
},
|
|
// #ifndef VUE2
|
|
destroyed() {
|
|
clearInterval(this.timer);
|
|
},
|
|
// #endif
|
|
// #ifdef VUE3
|
|
unmounted() {
|
|
clearInterval(this.timer);
|
|
},
|
|
// #endif
|
|
methods: {
|
|
// 定时任务
|
|
countdown(self) {
|
|
// 销毁之前的任务
|
|
clearInterval(self.timer);
|
|
|
|
// 没有网络则启动定时任务
|
|
if(self.network_type_value == 'none') {
|
|
var temp_num = self.propNetworkTimeNum;
|
|
self.timer = setInterval(function () {
|
|
// 读取网络状态
|
|
uni.getNetworkType({
|
|
success: function (res) {
|
|
self.network_type_value = res.networkType;
|
|
// 已经有网络了则结束定时任务、并正常继续等待走加载过程
|
|
if(self.network_type_value != 'none') {
|
|
clearInterval(self.timer);
|
|
}
|
|
}
|
|
});
|
|
|
|
// 每次减1
|
|
temp_num--;
|
|
|
|
// 0则结束
|
|
if(temp_num <= 0) {
|
|
// 销毁任务
|
|
clearInterval(self.timer);
|
|
// 无需等待网络
|
|
self.not_network_await_status = 0;
|
|
}
|
|
}, 500);
|
|
}
|
|
},
|
|
|
|
// 返回事件
|
|
back_event(e) {
|
|
app.globalData.page_back_prev_event();
|
|
},
|
|
|
|
// 打开权限管理中心
|
|
open_setting_event() {
|
|
app.globalData.open_setting_event();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.no-data-box {
|
|
padding: 15% 0;
|
|
}
|
|
.no-data-box .image {
|
|
width: 160rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
.no-data-box .no-data-tips {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
.no-data-loading .title {
|
|
color: #999;
|
|
}
|
|
|
|
/**
|
|
* 名称加载
|
|
*/
|
|
.loading-title-animation,
|
|
.network-type-tips {
|
|
padding-top: 25%;
|
|
}
|
|
.loading-title-animation {
|
|
background: #e7e7e7 -webkit-linear-gradient(left, #c6c6c6 0%, #c6c6c6 90%) no-repeat 0 0;
|
|
background-size: 20% 100%;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
font-size: 60rpx;
|
|
font-weight: bold;
|
|
-webkit-animation: loading-text-animation 2s linear infinite;
|
|
animation: loading-text-animation 2s linear infinite;
|
|
}
|
|
@-webkit-keyframes loading-text-animation {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 100% 100%;
|
|
}
|
|
}
|
|
@keyframes loading-text-animation {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 100% 100%;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* logo加载
|
|
*/
|
|
.loading-logo-content {
|
|
position: absolute;
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
left: calc(50% - 70rpx);
|
|
top: 0;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
margin-top: 50%;
|
|
}
|
|
.loading-logo-content .loading-logo {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 30rpx;
|
|
top: 30rpx;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
opacity: 0.8;
|
|
background-size: contain;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.loading-logo-content .loading-border {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
width: 168rpx;
|
|
height: 168rpx;
|
|
left: -14rpx;
|
|
top: -14rpx;
|
|
opacity: 0.8;
|
|
background-size: contain;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
/**
|
|
* 骨架屏
|
|
*/
|
|
.skeleton-header {
|
|
/* #ifndef H5 || APP */
|
|
padding-top: var(--status-bar-height);
|
|
padding-bottom: 55px;
|
|
/* #endif */
|
|
}
|
|
.no-data-box.skeleton {
|
|
padding: 0;
|
|
}
|
|
.no-data-loading .goods-category-content > .left {
|
|
width: 30%;
|
|
}
|
|
.no-data-loading .goods-category-content > .right {
|
|
width: 70%;
|
|
}
|
|
</style>
|