You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
213 lines
4.2 KiB
213 lines
4.2 KiB
<template>
|
|
<view class="main">
|
|
<view :style="{height:iSMT+'px'}"></view>
|
|
|
|
<view style="height:1.5vh;"></view>
|
|
|
|
<view class="setting-list">
|
|
<view class="setting-item">
|
|
<text class="item-label">头像</text>
|
|
<view class="item-right">
|
|
<image src="/static/avatar.png" class="avatar" mode="aspectFill"></image>
|
|
<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="setting-item">
|
|
<text class="item-label">昵称</text>
|
|
<view class="item-right">
|
|
<text class="item-text">DeepChart</text>
|
|
<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="setting-item">
|
|
<text class="item-label">ID</text>
|
|
<view class="item-right">
|
|
<text class="item-text">{{ jwcode }}</text>
|
|
<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="setting-item">
|
|
<text class="item-label">密码</text>
|
|
<view class="item-right">
|
|
<text class="item-text">qwertyuiop</text>
|
|
<uni-icons type="eye" size="16" class="eye-icon"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="setting-item" @click="goToPassword">
|
|
<text class="item-label">修改密码</text>
|
|
<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
|
|
</view>
|
|
<view class="setting-item">
|
|
<text class="item-label">注销账号</text>
|
|
<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
|
|
</view>
|
|
<view class="setting-item" @click="goToBind">
|
|
<text class="item-label">绑定账号</text>
|
|
<uni-icons type="arrowright" size="16" class="arrow"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="height:1.5vh;"></view>
|
|
|
|
<view class="logout" @click="showLogout = true">
|
|
<text>退出登录</text>
|
|
</view>
|
|
|
|
<view class="logout-confirm" v-if="showLogout">
|
|
<view class="logoutDialog">
|
|
<view class="tips">是否退出登录</view>
|
|
<view class="tips-button">
|
|
<button class="confirm-btn" @click="handleConfirmLogout">确认</button>
|
|
<button class="cancel-btn" @click="showLogout = false">取消</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted
|
|
} from 'vue'
|
|
const iSMT = ref(0)
|
|
const jwcode = ref('90047681')
|
|
const showLogout = ref(false)
|
|
|
|
const handleConfirmLogout = () => {
|
|
showLogout.value = false
|
|
uni.showToast({
|
|
title: '退出登录成功',
|
|
icon: 'none',
|
|
})
|
|
}
|
|
|
|
const goToBind = () =>{
|
|
uni.navigateTo({
|
|
url:'../setting/bind'
|
|
})
|
|
}
|
|
|
|
const goToPassword = () =>{
|
|
uni.navigateTo({
|
|
url:'../setting/password'
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
iSMT.value = uni.getSystemInfoSync().statusBarHeight;
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.setting-list {
|
|
height: 49vh;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.setting-item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 7vh;
|
|
padding: 0 40rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.setting-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.item-label {
|
|
font-size: 28rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.item-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
margin-right: 20rpx;
|
|
background-color: #999;
|
|
}
|
|
|
|
.item-text {
|
|
margin-right: 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.arrow,
|
|
.eye-icon {
|
|
color: #999;
|
|
}
|
|
|
|
.logout {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 7vh;
|
|
font-size: 28rpx;
|
|
color: #f56c6c;
|
|
background-color: white;
|
|
}
|
|
|
|
.logout-confirm {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 999;
|
|
}
|
|
|
|
.logoutDialog {
|
|
width: 500rpx;
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.tips {
|
|
font-size: 32rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.tips-button {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.confirm-btn,
|
|
.cancel-btn {
|
|
width: 180rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 30rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.confirm-btn {
|
|
background-color: #fff;
|
|
color: #000;
|
|
border: 1rpx solid #ddd;
|
|
}
|
|
|
|
.cancel-btn {
|
|
background-color: #000;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
</style>
|