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 () => {
  const res = await UserInfoAiApi.getUserInfoAiList();
  state.list = res.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>