mechanicStore-app/pages/myEdit/setting.uvue

<template>
  <view class="setting-page">
    <view class="setting-list">
      <view class="setting-item" @click="goToAccountSecurity">
        <text class="item-text">
          账号安全
        </text>
        <u-icon name="arrow-right" size="18" color="#999" />
      </view>
      <view class="setting-item" @click="goToFeedback">
        <text class="item-text">
          意见反馈
        </text>
        <u-icon name="arrow-right" size="18" color="#999" />
      </view>
      <view class="setting-item" @click="goToAbout">
        <text class="item-text">
          关于我们
        </text>
        <u-icon name="arrow-right" size="18" color="#999" />
      </view>
    </view>
    <view class="logout-section">
      <button class="logout-btn" @click="doLogout">
        退出登录
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
  const goToAccountSecurity = () => {
    uni.navigateTo({
        url: '/pages/myEdit/account-security'
      })
  }
  const goToFeedback = () => {
    uni.navigateTo({
        url: '/pages/myEdit/feedback'
      })
  }
  const goToAbout = () => {
    uni.navigateTo({
        url: '/pages/myEdit/about'
      })
  }
  const doLogout = () => {
    // 清除本地 token 或其他信息
    uni.removeStorageSync('token');
    uni.showToast({ title: '已退出登录', icon: 'success' });
    setTimeout(() => {
        uni.reLaunch({
            url: '/pages/login/login'
          })
      }, 500)
  }
</script>

<style>
  .setting-page {

    background: #f7f8fa;
    padding-top: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .setting-list {
    background: #fff;
    border-radius: 20rpx;
    margin: 24rpx 24rpx 0 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
    overflow: hidden;
  }
  .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 24rpx;
    border-bottom: 1rpx solid #f1f1f1;
    font-size: 30rpx;
    color: #222;
    background: #fff;
  }
  .setting-item:last-child {
    border-bottom: none;
  }
  .item-text {
  }
  .logout-section {
    margin-top: auto;
    margin-bottom: 60rpx;
    padding: 0 24rpx;
  }
  .logout-btn {
    width: 100%;
    color: #000;
    border-radius: 40rpx;
    font-size: 32rpx;
    padding: 26rpx 0;
    border: none;
    box-shadow: 0 4rpx 10rpx rgba(186, 171, 171, 0.1);
    font-weight: bold;
    border: 1rpx solid #000;
  }
</style>