delivery-depot-uniapp/pages/systemSet/systemSet.vue

<template>
  <view class="my-container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="avatar">
        <image
          :src="userInfo.avatar || '/static/default-avatar.png'"
          mode="aspectFill"
        ></image>
      </view>
      <view class="user-info">
        <view class="info-item">
          <text class="label">姓名：</text>
          <text class="value">{{ userInfo.nickname || "未设置" }}</text>
        </view>
        <view class="info-item">
          <text class="label">手机号：</text>
          <text class="value">{{ userInfo.phone || "-" }}</text>
        </view>
      </view>
    </view>

    <!-- 退出按钮 -->
    <view class="logout-section">
      <button class="logout-btn" @click="handleLogout">退出账号</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: uni.getStorageSync("userInfo").user || {},
    };
  },
  methods: {
    handleLogout() {
      uni.showModal({
        title: "提示",
        content: "确定要退出账号吗？",
        success: (res) => {
          if (res.confirm) {
            // 清除token和用户信息
            uni.removeStorageSync("token");
            uni.removeStorageSync("userInfo");

            // 跳转到登录页
            uni.reLaunch({
              url: "/pages/login/login",
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-container {
  min-height: 100vh;
  background: linear-gradient(#cfddfc 0%, #e6eeff 10%, #fff 100%);
  padding: 30rpx;
}

.user-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  .avatar {
    text-align: center;
    margin-bottom: 30rpx;

    image {
      width: 150rpx;
      height: 150rpx;
      border-radius: 75rpx;
      border: 4rpx solid #e6eeff;
    }
  }

  .user-info {
    .info-item {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .label {
        width: 160rpx;
        color: #666;
        font-size: 28rpx;
      }

      .value {
        flex: 1;
        color: #333;
        font-size: 28rpx;
      }
    }
  }
}

.logout-section {
  margin-top: 60rpx;
  padding: 0 40rpx;

  .logout-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background-color: #f44336;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;

    &:active {
      opacity: 0.8;
    }
  }
}
</style>