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>
|