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';
有数据
空状态