html
<!--packageA/pages/set/set.wxml-->
<view class="main">
<navigation-barMy default-data="{{defaultData}}"></navigation-barMy>
<view class="mainBody">
<view class="headerBox"></view>
<view class="itemBox" bind:tap="showPopup">
退出登录
</view>
</view>
<!-- 遮罩层 -->
<view class="overlay" wx:if="{{isPopupVisible}}" bindtap="hidePopup"></view>
<!-- 弹窗 -->
<view class="popup1" wx:if="{{isPopupVisible}}">
<view class="popup">
<!-- 弹窗头部 -->
<view class="popup-header">
退出登录
</view>
<!-- 弹窗内容 -->
<view class="popup-content">
你确定退出?
</view>
<view class="popup-footer">
<view class="close" bind:tap="hidePopup">取消</view>
<button class="goTo" bind:tap="getArticleDetails">确认</button>
</view>
</view>
</view>
</view>
js
var ports = require("../../../utils/ports.js")
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
defaultData: {
title: "设置", // 导航栏标题
arrow: true, //是否显示返回箭头
},
isShow: false, //是否禁用
isPopupVisible: false, // 控制弹窗显示与隐藏的状态
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
if (wx.getStorageSync('USER_SESSIONID')) {
this.setData({
isShow: true,
})
} else {
this.setData({
isShow: false,
})
}
},
// 退出登录
loginOut() {
const that = this
退出api({
sessionID: wx.getStorageSync('USER_SESSIONID'),
}, that, res => {
if (res.data.header.code == 0) {
wx.removeStorageSync('USER_SESSIONID')
wx.removeStorageSync('USER_MEMBERID')
wx.removeStorageSync('USER_MEMBER')
wx.removeStorageSync('USER_OPENID')
wx.removeStorageSync('USER_PHONE')
wx.navigateTo({
url: '/pages/mine/mine',//跳转到指定页面
})
}
})
},
// 显示弹窗
showPopup: function () {
console.log('isShow',this.data.isShow);
if (!this.data.isShow) {
return
}
this.setData({
isPopupVisible: true,
})
},
// 隐藏弹窗
hidePopup: function () {
this.setData({
isPopupVisible: false,
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
css
.main{
width: 100%;
}
.mainBody{
width: 100%;
height: 100vh;
background-color: #f2f2f2;
padding: 16rpx 25rpx;
box-sizing: border-box;
}
.headerBox{
width: 100%;
height: 150rpx;
}
.itemBox{
width: 100%;
padding: 30rpx 20rpx;
box-sizing: border-box;
background-color: #fff;
border-radius: 15rpx;
font-size: 28rpx;
}
.overlay {
/* 遮罩层样式 */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
z-index: 999; /* 确保遮罩层在弹窗下面 */
}
.popup1 {
/* 弹窗基础样式 */
position: fixed;
right: 50%;
top: 50%;
transform: translate(50%,-50%);
width: 620rpx;
height: 750rpx;
z-index: 1000; /* 确保弹窗在最上层 */
}
.popup {
/* 弹窗基础样式 */
position: absolute;
right: 50%;
top: 50%;
transform: translate(50%,-50%);
width: 620rpx;
background-color: #fff;
box-shadow: 0rpx 14rpx 12rpx 4rpx rgba(93,93,93,0.09);
border-radius: 23rpx;
padding: 25rpx;
box-sizing: border-box;
}
.shieldIcon{
width: 312rpx;
height: 197rpx;
position: absolute;
left: 50%;
top: -57rpx;
transform: translateX(-50%);
}
.popup-header{
width: 100%;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 40rpx;
color: #000000;
text-align: center;
}
.popup-content {
/* 弹窗内容样式 */
width: 100%;
height: 200rpx;
padding: 20rpx;
box-sizing: border-box;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 30rpx;
color: #333333;
text-align: center;
}
.popup-footer{
position: absolute;
left: 0;
bottom: 25rpx;
width: 100%;
height: 68rpx;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.close{
width: 203rpx;
height: 69rpx;
border-radius: 34rpx;
border: 1px solid #999999;
text-align: center;
line-height: 68rpx;
box-sizing: border-box;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 30rpx;
color: #999999;
}
.goTo{
width: 202rpx;
height: 68rpx;
background: linear-gradient(107.02deg, #015EEA 0%, #00C0FA 100%);
border-radius: 34rpx;
opacity: 0.8;
text-align: center;
line-height: 68rpx;
box-sizing: border-box;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 30rpx;
color: #FFFFFF;
}
button{
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
JSON
{
"enablePullDownRefresh": false,
"navigationBarTextStyle": "black",
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar",
"navigation-barMy": "/components/navigation-barMy/navigation-barMy"
}
}