bindbox-mini/pages-user/settings/index.vue

<template>
  <view class="settings-container">
    <!-- 自定义 tabBar -->
    <!-- #ifdef MP-TOUTIAO -->
    <customTabBarToutiao />
    <!-- #endif -->
    <!-- #ifndef MP-TOUTIAO -->
    <customTabBar />
    <!-- #endif -->

    <!-- 顶部导航栏 -->
    <!-- #ifndef MP-TOUTIAO -->
    <view class="navbar">
      <view class="navbar-content">
        <text class="navbar-title">设置</text>
      </view>
    </view>
    <!-- #endif -->

    <!-- 设置内容区域 -->
    <view class="settings-content">
      <!-- 退出登录按钮 -->
      <view class="logout-section">
        <view class="logout-btn" @click="handleLogout">
          <view class="logout-icon">
            <image class="logout-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRjQwNDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDIxSDVhMiAyIDAgMCAxLTItMnYtNWEyIDIgMCAwIDEgMi0yaDRtMCAwdjZtMC0wdjZtMC02aDZhMiAyIDAgMCAxIDIgMnY4YTIgMiAwIDAgMS0yIDJINyIgLz48cGF0aCBkPSJNOCAxM2w1LTU1IDU1LTUiIC8+PC9zdmc+" mode="aspectFit"></image>
          </view>
          <text class="logout-text">退出当前账号</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// #ifdef MP-TOUTIAO
import customTabBarToutiao from '@/components/app-tab-bar-toutiao.vue'
// #endif
// #ifndef MP-TOUTIAO
import customTabBar from '@/components/app-tab-bar.vue'
// #endif

export default {
  components: {
    // #ifdef MP-TOUTTAO
    customTabBarToutiao
    // #endif
    // #ifndef MP-TOUTIAO
    customTabBar
    // #endif
  },

  data() {
    return {}
  },

  methods: {
    handleLogout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出当前账号吗？退出后将清空本地缓存。',
        confirmText: '确定退出',
        confirmColor: '#FF6B00',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) {
            this.logout()
          }
        }
      })
    },

    logout() {
      try {
        // 清空所有本地存储
        uni.clearStorageSync()

        // 显示提示
        uni.showToast({
          title: '已退出登录',
          icon: 'success',
          duration: 1500
        })

        // 延迟跳转到登录页
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/login/index'
          })
        }, 1500)
      } catch (e) {
        console.error('退出登录失败:', e)
        uni.showToast({
          title: '退出失败，请重试',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.settings-container {
  min-height: 100vh;
  background-color: $bg-page;
  padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
}

/* 导航栏 */
/* #ifndef MP-TOUTIAO */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
  backdrop-filter: blur(20rpx);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding-top: env(safe-area-inset-top);
}

.navbar-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.navbar-title {
  font-size: 32rpx;
  font-weight: 800;
  color: $text-main;
}
/* #endif */

/* 设置内容区 */
/* #ifdef MP-TOUTIAO */
.settings-content {
  padding-top: $spacing-lg;
  padding-left: $spacing-lg;
  padding-right: $spacing-lg;
}
/* #endif */
/* #ifndef MP-TOUTIAO */
.settings-content {
  padding-top: calc(env(safe-area-inset-top) + 88rpx + $spacing-lg);
  padding-left: $spacing-lg;
  padding-right: $spacing-lg;
}
/* #endif */

/* 退出登录区域 */
.logout-section {
  background: $bg-card;
  border-radius: $radius-lg;
  overflow: hidden;
  box-shadow: $shadow-card;
}

.logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32rpx;
  cursor: pointer;
  transition: all 0.2s;

  &:active {
    background: $uni-bg-color-hover;
    transform: scale(0.98);
  }
}

.logout-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logout-icon-img {
  width: 48rpx;
  height: 48rpx;
}

.logout-text {
  font-size: $font-lg;
  font-weight: 700;
  color: #FF4040;
}
</style>