<script setup lang="ts">
const router = useRouter()
definePage({
name: 'setting',
style: {
navigationBarTitleText: '设置',
navigationStyle: 'custom'
},
})
const logoutSheet = ref(false)
const userInfo = ref({
nickName: '爱吃鱼的猫',
avatarUrl: ''
})
// 返回上一页
const onClickLeft = () => {
uni.navigateBack()
}
// 退出按钮(确认弹框)
const logoutPopup = () => {
logoutSheet.value = true
}
// 退出登录
const logout = () => {
router.pushTab({path: '/pages/user/index'})
}
</script>
<template>
<view class="setting-page-container">
<wd-navbar custom-class="ai-navbar" fixed
custom-style="background-color: transparent !important; height: 140rpx !important;"
safeAreaInsetTop>
<template #left>
<view class="left-button" @click="onClickLeft">
<wd-icon name="arrow-left1" size="22px"></wd-icon>
</view>
</template>
<template #title>
<view class="title-box">帐号设置</view>
</template>
</wd-navbar>
<view class="user-info-box">
<demo-block title="帐号信息" transparent>
<wd-cell-group border custom-class="rounded-3! overflow-hidden">
<wd-cell >
<template #title>
<text class="list-text"> 头像</text>
</template>
<view class="avatar-box">
<wd-img :width="50" :height="50" round src="/static/top.png" />
</view>
</wd-cell>
<wd-cell >
<template #title>
<text class="list-text"> 用户ID</text>
</template>
<text class="user-info-text">{{ '
888888888888888' }}</text>
</wd-cell>
<wd-cell >
<template #title>
<text class="list-text"> 昵称</text>
</template>
<text class="user-name">{{ '爱吃鱼的猫' }}</text>
</wd-cell>
<wd-cell >
<template #title>
<text class="list-text"> 手机号</text>
</template>
<text class="user-info-text">{{ '188888888888' }}</text>
</wd-cell>
<wd-cell >
<template #title>
<text class="list-text"> 邮箱</text>
</template>
<text class="user-info-text">{{ '123456@123.com' }}</text>
</wd-cell>
</wd-cell-group>
</demo-block>
</view>
<view class="footer">
<wd-button @click="logoutPopup" icon="logout" size="large" type="info" custom-class="custom-logout-button">退出登录</wd-button>
</view>
</view>
<wd-popup v-model="logoutSheet" position="bottom" transition="fade-up"
custom-style="border-radius:32rpx;bottom:80rpx;left:40rpx;right:40rpx;padding-bottom: 30rpx; z-index=9999">
<wd-card class="logout-container">
<template #title>
<p class="logout-container-title">退出帐号</p>
<p class="logout-container-desc">退出帐号后无法享受更多权益，是否确认退出？</p>
</template>
<view class="logout-container-content">
<view class="logout-user">
<wd-img :width="50" :height="50" round src="/static/top.png" />
<view class="row-user">
<wd-row >
<wd-col :span="24">
<text class="current-account">当前登录帐号</text>
</wd-col>
<wd-col :span="24">
<text class="user-name">{{ userInfo.nickName }}</text>
</wd-col>
</wd-row>
</view>
</view>
</view>
<view class="login-container-content">
<view class="login-button">
<wd-button size="large" type="info" plain custom-class="custom-logout-cancel" block @click="logoutSheet = false">取消</wd-button>
<wd-button size="large" type="info" plain custom-class="custom-logout-ok" block @click="logout">确认</wd-button>
</view>
</view>
</wd-card>
</wd-popup>
</template>
<style scoped lang="scss">
.setting-page-container {
display: flex;
flex-direction: column;
height: 100vw;
padding: 0 0 env(safe-area-inset-bottom);
}
.left-button {
margin: 20rpx;
border-radius: 50px;
height: 80rpx;
width: 80rpx;
background-color: rgba(172, 172, 172, 0.13);
display: flex;
align-items: center;
justify-content: center;
}
.title-box {
font-size: 38rpx;
font-weight: 700;
height: 100%;
align-items: center;
justify-content: center;
/* 设置字体透明 */
color: transparent;
/* 设置线性渐变，从红色渐变到蓝色 */
background-image: linear-gradient(45deg, rgba(0, 225, 255, 0.6), rgba(230, 0, 255, 0.6));
/* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
-webkit-background-clip: text;
/* 非Webkit内核浏览器需要使用标准前缀 */
background-clip: text;
/* 把当前元素设置为行内块，以便能够应用背景 */
display: flex;
}
.user-info-box {
flex: 1;
padding-top: calc(140rpx + 54px);
}
.list-text {
font-size: 32rpx !important;
font-weight: 500 !important;
}
.avatar-box {
display: flex;
align-items: center;
justify-content: flex-end;
}
.footer {
height: 180rpx;
display: flex;
justify-content: center;
align-items: center;
:deep() {
.custom-logout-button {
width: 90%;
border-radius: 18rpx !important;
height: 120rpx !important;
background-color: rgba(124, 124, 124, 0.3);
font-size: 35rpx !important;
border: rgba(193, 193, 193, 0.38) solid 2rpx;
}
}
}
.logout-container-title {
line-height: 55rpx;
font-size: 35rpx;
font-weight: 400;
}
.logout-container-desc {
line-height: 45rpx;
font-size: 23rpx;
color: #8c8c8c;
}
.logout-container-content {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30rpx;
}
.logout-user {
padding-left: 20rpx;
padding-right: 20rpx;
height: 138rpx;
width: 100%;
border: rgba(177, 177, 177, 0.5) solid 1rpx;
background-color: rgba(230, 230, 230, 0.47);
border-radius: 15rpx;
display: flex;
align-items: center;
}
.login-button {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
:deep() {
.custom-logout-cancel {
height: 90rpx !important;
font-size: 38rpx !important;
font-weight: 500 !important;
color: #efefef !important;
width: 35%;
background: linear-gradient(45deg, rgba(0, 225, 255, 0.6), rgba(230, 0, 255, 0.6)) !important;
border: rgba(217, 48, 223, 0.6) solid 2rpx !important;
}
.custom-logout-ok {
height: 90rpx !important;
font-size: 38rpx !important;
font-weight: 500 !important;
width: 60%;
background: linear-gradient(45deg, rgba(255, 0, 98, 0.6), rgba(255, 151, 204, 0.6)) !important;
border: rgba(217, 48, 223, 0.6) solid 2rpx !important;
}
}
}
.current-account {
font-size: 20rpx;
font-weight: 500;
}
.row-user {
padding-left: 25rpx;
}
.user-name {
font-size: 32rpx;
font-weight: 600;
/* 设置字体透明 */
color: transparent;
/* 设置线性渐变，从红色渐变到蓝色 */
background-image: linear-gradient(45deg, rgba(0, 149, 255, 0.6), rgba(31, 248, 132, 0.6));
/* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
-webkit-background-clip: text;
/* 非Webkit内核浏览器需要使用标准前缀 */
background-clip: text;
/* 把当前元素设置为行内块，以便能够应用背景 */
display: inline-block;
}
.user-info-text {
font-size: 28rpx;
font-weight: 400;
}
</style>
退出登录按钮靠底部
扫一扫
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
