设置页面
This commit is contained in:
zhouyanli
210
wuye-manager-uniapp/pageSubPack/setting/setting.vue
Normal file
210
wuye-manager-uniapp/pageSubPack/setting/setting.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user