131 lines
2.7 KiB
Vue
131 lines
2.7 KiB
Vue
<template>
|
||
<u-popup :show="showExitPopup" @close="closeExitPopup" closeOnClickOverlay>
|
||
<view class="exit_popup df_flex df__direction_column ">
|
||
<view class="popup-header">
|
||
<u-icon name="warning" size="60rpx" color="#E33C3C"></u-icon>
|
||
<view class="popup-title">退出登录</view>
|
||
</view>
|
||
<view class="df_flex df_justify_center name">{{nick || '--'}}</view>
|
||
<view class="popup-content">确定要退出当前账号吗？</view>
|
||
<view class="df_flex">
|
||
<u-button class="custom_btn" text="退出登录" @tap="logOut"></u-button>
|
||
<u-button class="cancel_btn" text="取 消" @tap="closeExitPopup"></u-button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</template>
|
||
|
||
<script>
|
||
// import {
|
||
// mapGetters
|
||
// } from 'vuex'
|
||
export default {
|
||
name: "exitPopup",
|
||
// computed: {
|
||
// ...mapGetters(['showExitPopup', 'nick'])
|
||
// },
|
||
data() {
|
||
return {
|
||
showExitPopup: false,
|
||
nick: ''
|
||
}
|
||
},
|
||
onload() {
|
||
this.nick = this.$store.state.user.nick
|
||
this.showExitPopup = this.$store.state.user.showExitPopup
|
||
},
|
||
methods: {
|
||
closeExitPopup() {
|
||
this.$store.commit('SET_SHOWEXITPOPUP', false)
|
||
},
|
||
// 退出
|
||
logOut() {
|
||
this.$store.dispatch('LogOut').then((res) => {
|
||
this.closeExitPopup()
|
||
uni.navigateTo({
|
||
url: '/pages/login/login-one'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.exit_popup {
|
||
padding: 48rpx 60rpx 60rpx 60rpx;
|
||
background: #ffffff;
|
||
border-radius: 24rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
|
||
|
||
&>view {
|
||
width: 100%;
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 32rpx;
|
||
|
||
.popup-title {
|
||
margin-top: 16rpx;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.popup-content {
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
margin-bottom: 48rpx;
|
||
line-height: 1.5;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.name {
|
||
margin: 16rpx auto 32rpx auto;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.custom_btn {
|
||
margin: 16rpx;
|
||
color: #ffffff;
|
||
border: none;
|
||
border-radius: 12rpx;
|
||
background: linear-gradient(135deg, #E33C3C 0%, #ff4757 100%);
|
||
box-shadow: 0 4rpx 12rpx rgba(227, 60, 60, 0.3);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
box-shadow: 0 2rpx 8rpx rgba(227, 60, 60, 0.4);
|
||
}
|
||
}
|
||
|
||
.cancel_btn {
|
||
margin: 16rpx;
|
||
color: #666666;
|
||
border: 2rpx solid #e5e5e5;
|
||
border-radius: 12rpx;
|
||
background-color: #ffffff;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
background-color: #f8f9fa;
|
||
}
|
||
}
|
||
}
|
||
</style>
|