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

<template>
  <view class="setting-container">
    <view class="status_bar"></view>
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <uni-icons type="left" size="22" color="#000"></uni-icons>
      </view>
      <view class="nav-title">设置</view>
      <view class="nav-right"></view>
    </view>

    <!-- 内容区域 -->
    <scroll-view class="content" scroll-y="true">
      <!-- 手机号设置项 -->
      <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>
    </scroll-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'

// 响应式数据
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 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) {
      uni.clearStorageSync()
      uni.showToast({ title: '退出登录成功', icon: 'success' })
      uni.redirectTo({ url: '/pageSubPack/loginSub/pwd-login' })
    } 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;
  display: flex;
  flex-direction: column;
}
.status_bar {
  width: 100%;
  height: 46px;
}
/* 导航栏样式 */
.nav-bar {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 99;
}

.nav-left {
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.nav-right {
  width: 40px;
}

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

/* 设置项样式 */
.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 {
  padding: 30px 15px;
}

.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>