integral-shop/single_uniapp22miao/pages/sub-pages/setting/index.vue

<template>
  <view class="setting-page">
    <!-- 基本设置 -->
    <view class="setting-section">
      <view class="section-title">基本设置</view>
      <view class="setting-list">
        <view class="setting-item" @click="goToUserInfo">
          <text class="label">个人信息</text>
          <text class="arrow">›</text>
        </view>
        <view class="setting-item" @click="goToChangePwd">
          <text class="label">修改密码</text>
          <text class="arrow">›</text>
        </view>
      </view>
    </view>
    
    <!-- 其他设置 -->
    <view class="setting-section">
      <view class="section-title">其他</view>
      <view class="setting-list">
        <view class="setting-item" @click="goToAgreement">
          <text class="label">用户协议</text>
          <text class="arrow">›</text>
        </view>
        <view class="setting-item" @click="goToAbout">
          <text class="label">关于我们</text>
          <text class="arrow">›</text>
        </view>
        <view class="setting-item" @click="contactService">
          <text class="label">联系客服</text>
          <text class="arrow">›</text>
        </view>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-btn-container">
      <button class="logout-btn" @click="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goToUserInfo() {
      uni.navigateTo({
        url: '/pages/sub-pages/user-info/index'
      });
    },
    
    goToChangePwd() {
      uni.navigateTo({
        url: '/pages/sub-pages/login/change-pwd'
      });
    },
    
    goToAgreement() {
      uni.navigateTo({
        url: '/pages/sub-pages/agreement/index'
      });
    },
    
    goToAbout() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      });
    },
    
    contactService() {
      uni.showToast({
        title: '请联系客服',
        icon: 'none'
      });
    },
    
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('token');
            uni.removeStorageSync('userInfo');
            
            uni.reLaunch({
              url: '/pages/sub-pages/login/index'
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx 30rpx;
  padding-bottom: 200rpx;
}

.setting-section {
  margin-bottom: 30rpx;
  
  .section-title {
    font-size: 26rpx;
    color: #999;
    padding: 0 10rpx 20rpx;
  }
}

.setting-list {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  .label {
    font-size: 28rpx;
    color: #333;
  }
  
  .arrow {
    font-size: 50rpx;
    color: #ccc;
  }
}

.logout-btn-container {
  margin-top: 60rpx;
}

.logout-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #fff;
  color: #FF4757;
  border-radius: 45rpx;
  font-size: 32rpx;
  border: 2rpx solid #FF4757;
}
</style>