sileya-ai
/
vr-shopxo-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

nvue页逻辑优化

master
于肖磊 2026-03-06 15:53:04 +08:00
parent 2fc75ba9d4
commit af2095c2ae
2 changed files with 164 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

258
components/no-data/no-data.vue
View File

@ -1,16 +1,16 @@
<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>
<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>
</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' : '')">
<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 || propLoadingUseSkeleton) && (propPage || null) != null">
<!-- 是否展示头站位 -->
<view v-if="propIsHeader" class="skeleton-header"></view>
@ -51,45 +51,51 @@
</block>
</block>
<block v-else>
<view v-if="loading_content_type == 1" class="loading-title-animation">
<text class="title">{{title}}</text>
<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(),
</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>
//#ifdef APP-NVUE
import i18n from '@/locale/index.js';
//#endif
const app = getApp();
export default {
//#ifdef APP-NVUE
i18n,
//#endif
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(),
loading_content_type: app.globalData.data.loading_content_type,
title: app.globalData.get_application_title(),
network_type_value: '',
not_network_await_status: 0,
@ -105,30 +111,30 @@
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,
},
};
},
components: {},
props: {
propStatus: {
type: [Number, String],
default: 0,
},
propNetworkTimeNum: {
type: Number,
default: 40,
propMsg: {
type: String,
default: '',
},
propUrl: {
type: String,
default: '',
},
propBackBtn: {
type: Boolean,
default: true,
},
propNetworkTimeNum: {
type: Number,
default: 40,
},
propPage: {
type: String,
@ -145,14 +151,14 @@
propLoadingUseSkeleton: {
type: Boolean,
default: false,
}
},
// 页面被展示
created: function () {
self = this;
uni.getNetworkType({
}
},
// 页面被展示
created: function () {
self = this;
uni.getNetworkType({
success: function (res) {
// 当前网络
// 当前网络
self.network_type_value = res.networkType;
// 无网络进入等待网络中
if(self.network_type_value == 'none') {
@ -160,9 +166,9 @@
}
// 定时处理
self.countdown(self);
}
});
self.countdown(self);
}
});
},
// #ifndef VUE2
destroyed() {
@ -173,7 +179,7 @@
unmounted() {
clearInterval(this.timer);
},
// #endif
// #endif
methods: {
// 定时任务
countdown(self) {
@ -208,67 +214,67 @@
}, 500);
}
},
// 返回事件
back_event(e) {
app.globalData.page_back_prev_event();
// 返回事件
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;
},
},
};
</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%;
}
*/
.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%;
}
}
/**
@ -329,5 +335,5 @@
}
.no-data-loading .goods-category-content > .right {
width: 70%;
}
</style>
}
</style>

60
pages/plugins/video/detail/detail.nvue
View File

@ -1,20 +1,7 @@
<template>
<view :class="theme_view" :style="width_height_style">
<view :class="theme_view" :style="width_height_style">
<text>{{ display_video_list }}</text>
<view v-if="display_video_list && display_video_list.length > 0" class="content pr" :style="width_height_style">
<!-- 搜索框 -->
<view v-if="!show_comment_modal" class="header-top" :style="top_content_style + menu_button_info">
<view id="search-height" class="flex-row align-c">
<!-- 支付宝小程序自带返回按钮，这里就不给返回按钮了，这里给留出一点空间就行 -->
<!-- #ifndef MP-ALIPAY -->
<view class="cp" @tap="handle_back">
<u-icon propName="arrow-left" propSize="36rpx" propColor="#333" class="mr-10"></u-icon>
</view>
<!-- #endif -->
<view class="wh-auto ht-auto" :style="header_padding_left">
<search-component propIsDisabled @disabledSearch="handle_search" />
</view>
</view>
</view>
<!-- 视频列表 -->
<swiper class="swiper-container" :key="'top-or-buttom-' + swiper_key" :style="swiperStyle" :duration="500" :vertical="true" :circular="close_circular ? false : true" :skip-hidden-item-layout="true" :current="current_index" easing-function="linear" @transition="on_transition" @change="handle_swiper_change">
<swiper-item v-for="(video_item, index) in display_video_list" :key="video_item.id">
@ -79,7 +66,22 @@
</template>
</view>
</swiper-item>
</swiper>
</swiper>
<!-- 搜索框 -->
<view v-if="!show_comment_modal" class="header-top" :style="top_content_style + menu_button_info">
<view id="search-height" class="flex-row align-c">
<!-- 支付宝小程序自带返回按钮，这里就不给返回按钮了，这里给留出一点空间就行 -->
<!-- #ifndef MP-ALIPAY -->
<view class="cp" @tap="handle_back">
<u-icon propName="arrow-left" propSize="36rpx" propColor="#333" class="mr-10"></u-icon>
</view>
<!-- #endif -->
<view class="wh-auto ht-auto" :style="header_padding_left">
<search-component propIsDisabled @disabledSearch="handle_search" />
</view>
</view>
</view>
</view>
<template v-else>
<component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
@ -164,8 +166,8 @@
</view>
</view>
<!-- 举报弹窗 -->
<component-popup :propShow="popup_report_status" propPosition="bottom" @onclose="popup_report_close_event">
<!-- 举报弹窗 -->
<u-popup ref="popupReportRef" propMode="bottom" class="pointer-events-auto" :propTitle="$t('video-detail.video-detail.rfsdfg')" :propCloseable="true" @change="popup_report_close_event" @callBack="submit_report">
<view class="report-content">
<!-- 顶部按钮区域 -->
<view class="report-header flex-row align-c jc-sb">
@ -202,7 +204,7 @@
</view>
</view>
</view>
</component-popup>
</u-popup>
<!-- 添加评论弹出框 -->
<view v-if="is_add_comment" class="keyboard-input br-top-shadow" :style="'width:'+ windowWidth +'px;bottom:' + listener_height + 'px;'">
<view class="comment-input-content flex-col jc-c">
@ -292,7 +294,7 @@
comment_start_y: 0, // 评论开始拖拽位置
comment_current_y: 0, // 评论当前拖拽位置
move_distance: 0, // 评论拖拽距离
current_video_id: 1, // 当前播放视频的ID
current_video_id: '', // 当前播放视频的ID
is_slide_start: false,
swiper_key: get_math(),
comment_scroll_top: 0, // 评论滚动距离顶部的距离
@ -312,7 +314,6 @@
params: {},
header_padding_left: '',
report_type_list: [], // 举报类型列表
popup_report_status: false, // 举报弹窗状态
current_main_index: 0, // 默认选中第一个举报原因
current_sub_index: 0, // 默认选中第一个具体类型
report_comment_id: '', // 举报的评论id
@ -499,7 +500,8 @@
* 获取视频详情
* @param {*} id 视频 id
*/
get_video_detail(id) {
get_video_detail(id) {
console.log(id);
try {
// 获取数据
uni.request({
@ -610,12 +612,14 @@
}
});
// 更新所有视频信息
this.video_data_list = this.video_data_list;
// this.video_data_list = this.video_data_list;
this.current_index = is_last == 1 && is_next == 1 ? (new_index == this.video_data_list.length - 1 ? 2 : (new_index == this.video_data_list.length - 2 ? 1 : 0)) : this.current_index;
if (is_last == 1 && is_next == 1) {
// 更新显示数据数据信息
this.update_display_data();
this.update_display_data();
console.log(this.display_video_list, '1125');
setTimeout(() => {
if (this.display_video_list && this.display_video_list.length > 0) {
@ -1606,8 +1610,8 @@
}
});
} else if (obj.type == 'report') {
// 举报评论
this.popup_report_status = true;
// 举报评论
this.$refs.popupReportRef.open();
this.report_comment_id = comment_id;
}
} catch (error) {
@ -1728,8 +1732,8 @@
},
// 关闭举报弹窗
popup_report_close_event() {
try {
this.popup_report_status = false;
try {
this.$refs.popupReportRef.close();
this.current_main_index = 0;
this.current_sub_index = 0;
} catch (error) {