property-manager-side/wuye-manager-uniapp/pageSubPack/setting/setting.vue

<template>
  <view class="setting-container">

    <!-- 内容区域 -->
    <view class="content">
      <!-- 手机号设置项 -->
      <view class="setting-item" @tap="goToChangePhone">
        <view class="item-label">手机号</view>
        <view class="item-value">{{ phoneNumber }}</view>
        <uni-icons type="arrowright" size="20" color="#ccc"></uni-icons>
      </view>

      <!-- 修改密码设置项 -->
      <view class="setting-item" @tap="goToModifyPassword">
        <view class="item-label">修改密码</view>
        <view class="item-value">{{ passwordNumber }}</view>
        <uni-icons type="arrowright" size="20" color="#ccc"></uni-icons>
      </view>
      <!-- 注销账号 -->
      <view class="setting-item" @tap="goToDeleteAccount">
        <view class="item-label">注销账号</view>
        <!-- <view class="item-value">{{  }}</view> -->
        <uni-icons type="arrowright" size="20" color="#ccc"></uni-icons>
      </view>
    </view>

    <!-- 底部占位，避免内容被固定按钮遮挡 -->
    <view class="placeholder"></view>

    <!-- 退出登录按钮（固定底部） -->
    <view class="logout-btn-wrap">
      <button class="logout-btn" @tap="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { logout, getSettingInfo } from '../../api/api.js'
import { clearAccountStorage } from '../../api/request.js'
import { usePermStore } from '@/stores/usePermStore'

const permStore = usePermStore()

// 响应式数据
const phoneNumber = ref('') // 绑定手机号
const passwordNumber = ref('')

// 获取用户信息中的手机号
const fetchUserInfo = () => {
  getSettingInfo().then(res => {
    if (res.code === 200 && res.data) {
      phoneNumber.value = res.data.phonenumber || ''
    }
  })
}

// 页面显示时读取最新数据（从修改页返回也会触发）
onShow(() => {
  const userInfo = uni.getStorageSync('tempChangePwdParams')
  if (userInfo && userInfo.phoneNumber) {
    phoneNumber.value = userInfo.phoneNumber
  } else {
    fetchUserInfo()
  }
})

// 返回上一页
const goBack = () => {
  uni.switchTab({
    url: '/pages/my/my'
  })
}

// 跳转到更改手机号页面
const goToChangePhone = () => {
  uni.navigateTo({
    url: '/pageSubPack/setting/change-phone'
  })
}

// 跳转到修改密码页面
const goToModifyPassword = () => {
  uni.navigateTo({
    url: '/pageSubPack/setting/change-password'
  })
}
// 跳转到注销账号
const goToDeleteAccount = () => {
  uni.navigateTo({
    url: '/pageSubPack/setting/deleteAccount'
  })
}

// 点击退出登录，显示原生确认弹窗
const handleLogout = () => {
  uni.showModal({
    title: '退出登录',
    content: '确定要退出当前账号吗？',
    confirmText: '确定',
    cancelText: '取消',
    success: res => {
      if (res.confirm) {
        confirmLogout() // 确认退出
      }
    }
  })
}

// 确认退出登录
const confirmLogout = () => {
  uni.showLoading({ title: '退出中...' })

  logout()
    .then(res => {
      if (res.code === 200) {
        permStore.clearPerm()
        clearAccountStorage()
        uni.showToast({ title: '退出登录成功', icon: 'success' })
        // 使用 reLaunch 销毁所有页面（包括 tab 页），确保新账号登录后页面重新初始化
        uni.reLaunch({ url: '/pageSubPack/loginSub/login?mode=pwd' })
      } else {
        uni.showToast({ title: res.msg || '退出失败', icon: 'none' })
      }
    })
    .catch(() => {
      uni.showToast({ title: '退出失败，请重试', icon: 'none' })
    })
    .finally(() => {
      uni.hideLoading()
    })
}
</script>

<style scoped>
/* 页面容器 */
.setting-container {
  min-height: 100vh;
  background-color: #ffffff;
  box-sizing: border-box;
}

/* 内容区域 */
.content {
  padding: 0;
}

/* 底部占位，高度与固定按钮区一致 */
.placeholder {
  height: 104px;
}

/* 设置项样式 */
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
}

.item-label {
  font-size: 28rpx;
  color: #333;
}

.item-value {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
  color: #666;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 退出登录按钮 */
.logout-btn-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 15px;
  background-color: #ffffff;
}

.logout-btn {
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: #4d5dfa;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 32rpx;
}

.logout-btn::after {
  border: none;
}
</style>