306 lines
5.5 KiB
Vue
306 lines
5.5 KiB
Vue
<template>
|
||
<view class="contentStyle" style="">
|
||
<view class="status-bar"></view>
|
||
<uni-nav-bar title="设置" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||
</uni-nav-bar>
|
||
|
||
<scroll-view class="page" scroll-y>
|
||
<view class="setting-item" v-for="(item, index) in settingList" :key="index" @click="onItemClick(item)">
|
||
<text class="item-title">{{ item.title }}</text>
|
||
|
||
<!-- 不同类型的右侧内容 -->
|
||
<view class="item-right" v-if="item.type === 'text'">
|
||
<text :class="item.valueClass || 'item-value'">{{ item.value }}</text>
|
||
<view class="item-arrow"></view>
|
||
</view>
|
||
|
||
<switch class="no-cross-switch" v-else-if="item.type === 'switch'" :checked="item.checked"
|
||
@change="onSwitchChange(item, $event)" />
|
||
|
||
<view class="item-arrow" v-else></view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 底部下一步按钮 -->
|
||
<view class="bottom-btn">
|
||
<button class="logout-btn" @click="logout">退出登录</button>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
onReady: function(e) {},
|
||
components: {
|
||
|
||
},
|
||
|
||
computed: {
|
||
|
||
|
||
},
|
||
created() {
|
||
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
mounted() {},
|
||
data() {
|
||
return {
|
||
message: '',
|
||
/* 设定状态栏默认高度 */
|
||
statusBarHeight: 20,
|
||
cacheSize: 0,
|
||
settingList: [{
|
||
title: '更改手机号码',
|
||
type: 'arrow'
|
||
},
|
||
{
|
||
title: '修改密码',
|
||
type: 'arrow'
|
||
},
|
||
{
|
||
title: '消息通知',
|
||
type: 'switch',
|
||
checked: false
|
||
},
|
||
{
|
||
title: '清除缓存',
|
||
type: 'text',
|
||
value: '9.2M'
|
||
},
|
||
{
|
||
title: '升级版本',
|
||
type: 'text',
|
||
value: '当前版本 2.9.8',
|
||
valueClass: 'item-version'
|
||
}
|
||
]
|
||
|
||
|
||
}
|
||
},
|
||
|
||
|
||
methods: {
|
||
onItemClick(item) {
|
||
// console.log('点击了：', item.title,item.title == '更改手机号码')
|
||
if (item.title == '更改手机号码') {
|
||
uni.redirectTo({
|
||
url: '/pages/my/changePhone',
|
||
success: res => {},
|
||
fail: () => {},
|
||
complete: () => {}
|
||
});
|
||
} else if (item.title == '修改密码') {
|
||
uni.redirectTo({
|
||
url: '/pages/my/changePwd',
|
||
success: res => {},
|
||
fail: () => {},
|
||
complete: () => {}
|
||
});
|
||
} else if (item.title == '清除缓存') {
|
||
uni.clearStorageSync();
|
||
this.message = '清除成功'
|
||
this.settingList[3].value = '0M'
|
||
uni.showLoading({
|
||
title: '清除中...',
|
||
mask: true
|
||
});
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '清除成功',
|
||
icon: 'success'
|
||
});
|
||
}, 1000);
|
||
setTimeout(() => {
|
||
// 提交成功后跳转列表页
|
||
uni.hideLoading();
|
||
|
||
}, 3000);
|
||
|
||
|
||
}
|
||
},
|
||
logout() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定要退出当前账号吗?',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.message = '退出成功'
|
||
uni.showLoading({
|
||
title: '退出中...',
|
||
mask: true
|
||
});
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '退出成功',
|
||
icon: 'success'
|
||
});
|
||
}, 1000);
|
||
setTimeout(() => {
|
||
// 登出成功后跳转回登录页
|
||
uni.hideLoading();
|
||
|
||
|
||
|
||
}, 3000);
|
||
|
||
}
|
||
}
|
||
})
|
||
|
||
},
|
||
onSwitchChange(item, e) {
|
||
item.checked = e.detail.value
|
||
},
|
||
goBack() {
|
||
uni.switchTab({
|
||
url: '/pages/myIndex/myIndex',
|
||
success: res => {},
|
||
fail: () => {},
|
||
complete: () => {}
|
||
});
|
||
},
|
||
|
||
},
|
||
|
||
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
page {
|
||
background: #f9f9f9;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.contentStyle {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
/* 关键：占满屏幕高度 */
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.page {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0px 20px;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
}
|
||
|
||
/* 底部按钮 */
|
||
.bottom-btn {
|
||
padding: 10px 15px 20px;
|
||
background-color: #fff;
|
||
}
|
||
</style>
|
||
<style scoped>
|
||
/* 列表项 */
|
||
.setting-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #ffffff;
|
||
padding: 15px 15px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
/* 标题文字 */
|
||
.item-title {
|
||
font-size: 16px;
|
||
color: #333333;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 右侧区域（文字+箭头） */
|
||
.item-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
/* 右侧数值/版本文字 */
|
||
.item-value {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.item-version {
|
||
font-size: 14px;
|
||
color: #999999;
|
||
}
|
||
|
||
/* 右侧箭头 */
|
||
.item-arrow {
|
||
display: inline-block;
|
||
width: 5px;
|
||
height: 5px;
|
||
border-top: 2rpx solid #999;
|
||
border-right: 2rpx solid #999;
|
||
transform: rotate(45deg);
|
||
margin-left: 10rpx;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
/* 开关样式适配 */
|
||
/* switch {
|
||
transform: scale(0.8);
|
||
} */
|
||
/* 底部按钮 */
|
||
.logout-btn {
|
||
|
||
width: 100%;
|
||
height: 96rpx;
|
||
line-height: 96rpx;
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
border-radius: 12rpx;
|
||
color: #666;
|
||
background-color: #F3F3F3;
|
||
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||
}
|
||
|
||
/* 按钮点击态 */
|
||
.logout-btn:active {
|
||
background-color: #f5f5f5;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
|
||
.status-bar {
|
||
width: 100vw;
|
||
height: 46px;
|
||
}
|
||
</style>
|
||
<style>
|
||
::v-deep .uni-switch-input:before {
|
||
background-color: #cccccd !important;
|
||
}
|
||
|
||
/* 隐藏 switch 关闭状态的 × 号 */
|
||
.no-cross-switch::before {
|
||
display: none !important;
|
||
|
||
}
|
||
|
||
.no-cross-switch {
|
||
transform: scale(0.85);
|
||
border-radius: 50rpx !important;
|
||
}
|
||
|
||
.no-cross-switch>>>.uni-switch-input-checked {
|
||
background-color: #007aff !important;
|
||
}
|
||
</style> |