nursing-home-app/src/pages/mine/index/index.vue

<template>
  <view class="mine">
    <view class="mine-header">
      <view class="mine-header-info">
        <image :src="avatarSrc" />
        <view>
          {{ state.info.userName }}
        </view>
      </view>
    </view>
    <view class="mine-content">
      <view class="mine-content-cell">
        <view class="mine-content-cell-left">
          <image :src="phoneSrc" />
          手机号码
        </view>
        <view>
          {{ state.info.phoneNumber }}
        </view>
      </view>
    </view>
    <view class="mine-button">
      <wd-button :round="false" :block="true" :loading="state.buttonLoading" @click="onClickLogout">
        退出登录
      </wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app';
import { reactive } from 'vue';
import avatarSrc from '@/static/public/avatar@2x.png';
import phoneSrc from '@/static/mine/phone@2x.png';
import LocalStorage from '@/LocalStorage';
import { apis } from '@/apis';

interface State {
  info: {
    userName: string,
    phoneNumber: string,
  },
  buttonLoading: boolean,
};

const state: State = reactive({
  info: {
    userName: '测试',
    phoneNumber: '18888888888',
  },
  buttonLoading: false,
});

const api = {
  // 退出登录
  logout: async () => {
    state.buttonLoading = true;
    try {
      await apis.logout();
    } catch (error: any) {
      console.error(error);
    } finally {
      LocalStorage.clear();
      uni.reLaunch({
        url: '/pages/login/index/index',
        success: () => {
          uni.showToast({
            icon: 'success',
            mask: true,
            duration: 2000,
            title: '退出成功',
          });
        }
      });
      state.buttonLoading = false;
    }
  },
}

onShow(() => {

});

// 点击退出登录
const onClickLogout = async () => {
  // 退出登录
  await api.logout();
}
</script>

<style lang="scss" scoped>
.mine {
  &-header {
    height: 180rpx;
    padding: 20rpx;
    border-bottom: 2rpx solid $background-color;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-info {
      display: flex;
      align-items: center;

      image {
        width: 100rpx;
        height: 100rpx;
        background: $background-color;
        border: 2rpx solid $background-color;
        border-radius: 50%;
        margin-right: 20rpx;
      }
    }
  }

  &-content {
    padding: 0 20rpx;

    &-cell {
      width: 100%;
      height: 120rpx;
      border-bottom: 2rpx solid $border-color;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-left {
        display: flex;
        align-items: center;

        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
      }
    }
  }

  &-button {
    width: 100%;
    height: 150rpx;
    padding: 0 20rpx;
    position: fixed;

    /* #ifdef H5 */
    bottom: var(--tab-bar-height);
    left: 0;
    /* #endif */

    /* #ifndef H5 */
    bottom: 0;
    left: 0;
    /* #endif */
  }
}
</style>