meida_applet/pages/index/user.vue

<!-- 个人中心：支持装修 -->
<template>
  <s-layout
    title="我的"
    tabbar="/pages/index/user"
    navbar="custom"
    :bgStyle="template.page"
    :navbarStyle="template.navigationBar"
    onShareAppMessage
  >
    <userAvatarCard
      :userFormData="userFormData"
      :userFaceInfo="userFaceInfo"
      :detectionTime="detectionTime"
      :uploadAvatarImage="uploadAvatarImage"
      v-if="userFaceInfo"
    />

    <s-block
      v-for="(item, index) in template.components"
      :key="index"
      :styles="item.property.style"
    >
      <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
    </s-block>

    <userTryOn :recordList="dataState.pagination.list" />

    <uni-load-more
      v-if="dataState.pagination.total > 0"
      :status="dataState.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadMore"
    />

    <view class="logout-box" v-if="isLogin">
      <button class="ss-rest-button logout-btn" @click="handleLayout">退出登录</button>
    </view>

    <!-- 购物车 -->
    <view class="chat-box" @click="sheep.$router.go('/pages/chat/index')">
      <uni-icons type="chat" size="28" color="#fff" />
    </view>
  </s-layout>
</template>

<script setup>
  import { computed, reactive, ref } from 'vue';
  import {
    onShow,
    onPageScroll,
    onPullDownRefresh,
    onReachBottom,
    onLoad,
  } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import _ from 'lodash-es';
  import userAvatarCard from './components/user-avatar-card.vue';
  import userTryOn from './components/user-tryOn.vue';
  import AuthUtil from '@/sheep/api/member/auth';
  import UserApi from '@/sheep/api/member/user';

  // 隐藏原生tabBar
  uni.hideTabBar({
    fail: () => {},
  });

  const template = computed(() => sheep.$store('app').template.user);
  const isLogin = computed(() => sheep.$store('user').isLogin);

  onShow(() => {
    sheep.$store('user').updateUserData();

    getPersonalInfo();
    getFaceInfo();
    getUploadFaceImage();

    dataState.pagination.list = [];
    dataState.pagination.total = 0;
    dataState.pagination.pageNo = 1;
    dataState.pagination.pageSize = 10;
    getTryOnList();
  });

  const userFormData = ref({});
  async function getPersonalInfo() {
    const { data } = await UserApi.getInfoByUser();
    try {
      userFormData.value = data?.dataJson ? JSON.parse(data?.dataJson) : {};
    } catch (err) {
      userFormData.value = {};
      console.log(err);
    }
  }

  const userFaceInfo = ref();
  const detectionTime = ref('');
  async function getFaceInfo() {
    const { result } = await UserApi.getFaceInfo({ dataScope: '0' });
    try {
      const dataObj = result?.length ? JSON.parse(result[0].thridResp) : null;
      userFaceInfo.value = dataObj?.data?.face_figure || null;
      detectionTime.value = result[0]?.time || '';
    } catch (err) {
      console.log(err);
    }
  }

  const uploadAvatarImage = ref('');
  async function getUploadFaceImage() {
    const { data } = await UserApi.getUploadFaceImage();
    if (data?.list?.length) {
      uploadAvatarImage.value = data?.list[0]?.userFaceImageUrl || '';
    }
  }

  onPullDownRefresh(() => {
    sheep.$store('user').updateUserData();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {});

  const pattern = reactive({
    icon: 'uni-icons-heart',
  });

  const handleLayout = () => {
    uni.showModal({
      title: '提示',
      content: '确认注销账号？',
      success: async function (res) {
        if (!res.confirm) {
          return;
        }
        const { code } = await AuthUtil.logout();
        if (code !== 0) {
          return;
        }
        sheep.$store('user').logout();
        sheep.$router.go('/pages/login/index');
      },
    });
  };

  const dataState = reactive({
    pagination: {
      list: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
    },
    loadStatus: '',
  });

  async function getTryOnList() {
    dataState.loadStatus = 'loading';
    const { code, data } = await UserApi.getTryOnList({
      pageNo: dataState.pagination.pageNo,
      pageSize: dataState.pagination.pageSize,
    });
    if (code !== 0) {
      return;
    }
    dataState.pagination.list = _.concat(dataState.pagination.list, data.list);
    dataState.pagination.total = data.total;
    dataState.loadStatus =
      dataState.pagination.list.length < dataState.pagination.total ? 'more' : 'noMore';
  }

  // 加载更多
  function loadMore() {
    if (dataState.loadStatus === 'noMore') {
      return;
    }
    dataState.pagination.pageNo++;
    getTryOnList();
  }

  // 上拉加载更多
  onReachBottom(() => {
    loadMore();
  });
</script>

<style lang="scss" scoped>
  .chat-box {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: #000;
    position: fixed;
    bottom: 100px;
    right: 10px;
    text-align: center;
    line-height: 80rpx;
  }
  .logout-box {
    width: 100%;
    box-sizing: border-box;
    margin: 24rpx 0;
    background: #fff;
    .logout-btn {
      width: 710rpx;
      height: 80rpx;
      background: linear-gradient(90deg, #000, #000);
      border-radius: 40rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: $white;
    }
  }
</style>