uniapp+＜script setup lang=“ts“＞解决有数据与暂无数据切换显示，有数据加载时暂无数据闪现（先加载空数据）问题

声明showEmpty 为false，在接口返回处判断有数据时设置showEmpty 为false，接口返回数据为空则判断showEmpty 为true （这样就解决有数据的时候会闪现暂无数据的问题啦）

<!--* @Date: 2024-02-26 03:38:52* @LastEditTime: 2025-06-05 09:02:58* @Description: 救援详情页面
-->
<template><view class="consolidated-order"><view class="consolidated-order-filter"><view class="consolidated-order-filter-cont flex-center-between"><select-date ref="dateRef" @change-date="changeDate" /><select-time ref="timeRef" @change-time="changeTime" /><select-goods ref="goodsRef" @change-goods="changeGoods" /></view></view><scroll-viewv-if="!showEmpty"scroll-with-animation:scroll-y="true":show-scrollbar="false"class="consolidated-cont"><view class="service-order-item-box"><view v-for="(item, index) in splicingOrdersList" :key="index" class="service-order-item"><view class="service-order-item-time">{{ timeFormat(item.departureTime) }} - {{ timeFormat(item.arriveTime) }}</view><viewv-for="(item1, index1) in item.flyRecordModelList":key="index1"class="service-order-item-cont flex-center-start"><view class="cont-left flex-center-between"><view class="fly-no-box fly-no-yellow flex-center-start"><view class="fly-no-text">架次</view><view class="fly-no-num">{{ item1.flyNo || '--' }}</view></view><view class="fly-id">飞行记录ID：{{ item1.id }}</view></view><view class="cont-right flex-center-start"><view class="balance-num">空位：{{ item1.balanceNum }}人</view><view class="service-order-item-btn" @click="splicingOrders(item1)">拼单</view></view></view></view></view></scroll-view><!-- 拼单空状态 --><view v-if="showEmpty" class="empty-wrap"><empty-block :image-src="EMPTY_PNG" text="还没有拼单信息哦" /></view></view>
</template><script setup lang="ts">
import config from '@/../config/config';
import { qryCanJoinFly, combineServerOrder } from '@/services/api-order';
import { timeFormat } from '@/utils/DateUtils';
import { onLoad } from '@dcloudio/uni-app';
import { computed, ref, onMounted } from 'vue';
const EMPTY_PNG = `${config.assetPath}/images/book/empty-order.png`;
import { useStore } from 'vuex';
const store = useStore();
const openId = computed(() => store.state.userStore?.userInfo.openId);
const changeDate = (e) => {};
const changeTime = (e) => {};
const changeGoods = (e) => {};
const splicingOrdersList = ref();
const orderNoVal = ref();
const showEmpty = ref(false); //是否显示空状态
// 拼单列表
const getCanJoinFly = async () => {// ATO24080900075466有数据await qryCanJoinFly({orderNo: orderNoVal.value,}).then((res) => {if (res?.code == 0 && res?.data) {if (res?.data.length <= 0) {showEmpty.value = true; //没有数据的时候展示空状态} else {showEmpty.value = false; //有数据则正常展示数据}splicingOrdersList.value = res?.data;}});
};
const splicingOrders = (item) => {uni.showModal({title: '',content: '是否选择拼机',confirmText: '确认',success: (data) => {if (data.confirm) {let params = {orderNo: orderNoVal.value,combineFlyId: item.id,openId: openId.value,};combineServerOrder(params).then((res) => {if (res?.code == 0) {uni.showToast({title: '拼机成功',icon: 'success',});}});} else if (data.cancel) {console.log('用户取消了操作');}},});
};
onLoad((option) => {orderNoVal.value = option.orderNo || '';
});
onMounted(() => {getCanJoinFly();
});
</script><style lang="scss">
@import './index.scss';
</style>

有数据

 

空状态