fix: 对接

zhengyiming

2025-03-07 818d0f406772f00c43c8d6d68e9b52e9b729f35a

 apps/h5/src/components/Layout/LoadingLayout.vue

@@ -1,58 +1,53 @@
<template>
  <div v-if="loading" class="loading-layout-loading-content-wrapper">
    <IconFont name="loading" />
    <div class="list-empty-hint-text">数据加载中......</div>
  </div>
  <nut-empty
    v-else-if="error"
    class="loading-layout-error-wrapper"
    status="error"
    description="加载失败"
  >
    <div :style="{ marginTop: '10px' }">
      <nut-button type="primary" @click="loadError"> 重试 </nut-button>
  <div class="loading-layout-wrapper">
    <div class="spinner-wrapper" v-if="props.loading">
      <div class="el-loading-spinner">
        <el-icon class="is-loading">
          <Loading />
        </el-icon>
        <p class="el-loading-text">拼命加载中</p>
      </div>
    </div>
  </nut-empty>
  <template v-else>
    <NoData v-if="showNoData" />
    <slot v-else></slot>
  </template>
    <template v-else>
      <div v-if="props.error">出错了</div>
      <template v-else>
        <slot></slot>
      </template>
    </template>
  </div>
</template>

<script setup lang="ts">
import { loadingLayoutProps } from './layout';
import { IconFont } from '@nutui/icons-vue-taro';
import NoData from '../NoData/NoData.vue';

defineOptions({
  name: 'LoadingLayout',
});

const props = defineProps(loadingLayoutProps);
type Props = {
  loading?: boolean;
  error?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  loading: false,
  error: false,
});
</script>

<style lang="scss">
@import '@/styles/common.scss';

.loading-layout-loading-content-wrapper {
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;

  .nut-icon {
    color: boleGetCssVar('text-color', 'primary');
    margin-right: 8px;
  }

  .list-empty-hint-text {
    line-height: 1;
    font-size: 30px;
    color: boleGetCssVar('text-color', 'primary');
  }
<style lang="scss" scoped>
.loading-layout-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.loading-layout-error-wrapper {
  height: 100%;
.spinner-wrapper {
  min-height: calc(100vh - 80px);
  // position: relative;
}

.hasTagsView {
  .spinner-wrapper {
    min-height: calc(100vh - 124px);
  }
}
</style>