app/pages/member/UserInfoAiList.vue

<!-- 用户信息列表 -->
<template>
  <s-layout :bgStyle="{ color: '#FFF' }" title="用户信息">
    <view>
      <s-userinfoai-item
        v-for="item in state.list"
        :key="item.id"
        :item="item"
        hasBorderBottom
        @tap="onSelect(item)"
      />
    </view>

    <su-fixed bottom placeholder>
      <view class="footer-box ss-flex ss-row-between ss-p-20">
        <button
          class="add-btn ss-reset-button ui-Shadow-Main"
          @tap="sheep.$router.go('/pages/member/UserInfoAiEdit')"
        >
          新增用户信息
        </button>
      </view>
    </su-fixed>
    <s-empty
      v-if="state.list.length === 0 && !state.loading"
      icon="/static/data-empty.png"
      text="暂无用户信息"
    />
  </s-layout>
</template>

<script setup>
  import { onBeforeMount, reactive } from 'vue';
  import { onLoad, onShow } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import AreaApi from '@/sheep/api/system/area';
  import UserInfoAiApi from '@/sheep/api/member/UserInfoAi';

  const state = reactive({
    list: [], // 地址列表
    loading: true,
    openType: '', // 页面打开类型
  });

  // 选择用户信息
  const onSelect = (userinfoaiInfo) => {
    if (state.openType !== 'select') {
      // 不作为选择组件时阻断操作
      return;
    }
    uni.$emit('SELECT_USERINFOAI', {
      userinfoaiInfo,
    });
    sheep.$router.back();
  };

  onLoad((option) => {
    if (option.type) {
      state.openType = option.type;
    }
  });

  onShow(async () => {
    state.list = (await UserInfoAiApi.getUserInfoAiList()).data;
    state.loading = false;
  });

  onBeforeMount(() => {
    if (!!uni.getStorageSync('areaData')) {
      return;
    }
    // 提前加载省市区数据
    AreaApi.getAreaTree().then((res) => {
      if (res.code === 0) {
        uni.setStorageSync('areaData', res.data);
      }
    });
  });
</script>

<style lang="scss" scoped>
  .footer-box {
    .add-btn {
      flex: 1;
      background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
      border-radius: 80rpx;
      font-size: 30rpx;
      font-weight: 500;
      line-height: 80rpx;
      color: $white;
      position: relative;
      z-index: 1;
    }

    .sync-wxuserinfoai {
      flex: 1;
      line-height: 80rpx;
      background: $white;
      border-radius: 80rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: $dark-6;
      margin-right: 18rpx;
    }
  }
</style>