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" :disabled="!phoneNumber" @tap="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

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

// 页面加载时可从接口获取用户信息
onLoad(() => {
  // 实际项目中从接口获取用户手机号
  // getUserInfo().then(res => {
  //   phoneNumber.value = res.phone || ''
  // })
})

// 返回上一页
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: '退出中...' })
  
  setTimeout(() => {
    uni.hideLoading()
    // 清除本地存储的token等信息
    uni.removeStorageSync('token')
    uni.removeStorageSync('userInfo')
    
    // 提示并跳转到登录页
    uni.showToast({
      title: '退出登录成功',
      icon: 'success'
    })
    
    // 跳转到登录页，关闭所有页面
    uni.redirectTo({
      url: '/pageSubPack/loginSub/pwd-login'
    })
  }, 800)
}
</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: 18px;
  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: 16px;
  color: #333;
}

.item-value {
  flex: 1;
  text-align: right;
  font-size: 16px;
  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: 16px;
}

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