uniapp+<script setup lang=“ts“>解决有数据与暂无数据切换显现,有材料加载时暂无资料闪现(先加载空数据)困难

声明showEmpty 为false,在接口返回处判断有资料时设置showEmpty 为false,接口返回内容为空则判断showEmpty 为true(这样就解决有数据的时候会闪现暂无数据的问题啦)

                                                                                                                                                    {{ timeFormat(item.departureTime) }} - {{ timeFormat(item.arriveTime) }}                                                                                                        架次{{ item1.flyNo || '--' }}                            飞行记录ID:{{ item1.id }}                                                                            空位:{{ item1.balanceNum }}人                            拼单                                                                                                                         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  {    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();}); @import './index.scss';

有数据

 

空状态

 

posted @ 2025-07-19 18:52  yjbjingcha  阅读(18)  评论(0)    收藏  举报