添加空状态

components/cb-empty/cb-empty.vue

@@ -2,20 +2,46 @@
   const props = defineProps({
     name: {
       type: String,
-      default: '空状态'
+      default: '暂无数据'
+    },
+    top: {
+      type: Number,
+      default: 10
     }
   })
 </script>
 
 <template>
-  <view class="cb-empty">
+  <view :style="{'margin-top': `${top}vh` }" class="cb-empty">
     <image
       src="/static/images/public/empty-icon.png"
       mode="scaleToFill"
-      class="left-img"
+      class="empty-icon"
     ></image>
     <text class="bottom-name">{{ props.name }}</text>
   </view>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .cb-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .empty-icon {
+      width: 285rpx;
+      height: 285rpx;
+      margin-bottom: 64rpx;
+    }
+    .bottom-name {
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 500;
+      font-size: 32rpx;
+      color: #999999;
+      text-align: center;
+      font-style: normal;
+      text-transform: none;
+    }
+  }
+</style>

pages/address/index.vue

@@ -1,16 +1,23 @@
 <script setup>
   import { navigateTo } from '@/utils/router'
   import { onShow } from '@dcloudio/uni-app'
-  import { getUserAddress, updateUserAddress, deleteUserAddress } from '@/api'
+  import {
+    getUserAddress,
+    updateUserAddress,
+    deleteUserAddress
+  } from '@/api'
   import { ref } from 'vue'
   import { useUI } from '@/utils/use-ui'
 
   const { showDialog, showToast } = useUI()
 
   const listData = ref([])
+  const loading = ref(true)
   const getData = async () => {
+    loading.value = true
     const res = await getUserAddress({ pageNum: 1, pageSize: 99 })
     listData.value = res.rows
+    loading.value = false
   }
 
   const onAdd = () => {
@@ -59,6 +66,9 @@
         <text class="top-right-name" @click="onAdd">添加地址</text>
       </template>
     </nav-bar>
+
+    <cb-empty v-if="!loading && listData.length === 0"></cb-empty>
+
     <view class="address-list">
       <uni-swipe-action>
         <uni-swipe-action-item v-for="item in listData" :key="item.id">