添加运维登录页

Liuyi

2024-11-23 4a0caa2a9251457f0b5a9c73bffdf2c4b5e1e1d8

 pages/userInfo/index.vue

@@ -132,6 +132,24 @@
         })
      }
   }
   function loginout(){
       wx.showModal({
         title: '提示',
         content: '您确定要退出登录吗',
         success: function (res) {
           if (res.confirm) {//点击确定
             console.log('用户点击确定')
             uni.setStorageSync('token', '');//将token置空
             uni.setStorageSync('openId', '');//将openId置空
             uni.redirectTo({
               url: '/pages/login/index',//跳去登录页
             })
           } else {//这里是点击了取消以后
             console.log('用户点击取消')
           }
         }
       })
     }
</script>
<template>
   <view class="container">
@@ -177,10 +195,15 @@
                  </view>
               </view>
            </view>
         </view>
            <view class="edit-box">
         <view v-if="!isEdit" @click="edit()" class="subBtn">修改</view>
         <view v-if="isEdit" @click="cancel()" class="btn btn1">取消</view>
         <view v-if="isEdit" @click="submitEdit()" class="btn btn2">确认修改</view>
            </view>
         </view>
         <view class="login-out" @click="loginout">
            <view class="login-out-btn">退出登录</view>
         </view>
      </view>
   </view>
</template>
@@ -207,6 +230,8 @@
         // }
         .info-box{
            width: 100%;
            background: #FFFFFF;
            height:85%;
            //该页面公用input样式
            input{
               border-radius:5rpx;
@@ -303,45 +328,67 @@
               }
            }
         }
         .edit-box{
            margin-top: 20rpx;
            width:100%;
            height:100rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            // background: linear-gradient(to right,#FFFFFF,#E8EFFF);
         .subBtn{
            width: 686rpx;
            height: 98rpx;
            background:#5EA1FA;
            border-radius:50rpx;
               width:200rpx;
               height:60rpx;
               background:#fff;
               border: 1rpx solid rgba(102, 148, 255, 0.3);
               border-radius:32rpx;
            text-align: center;
            line-height: 98rpx;
               line-height: 60rpx;
            letter-spacing:3rpx;
            font-weight: 300;
            font-size: 36rpx;
            color: #FFFFFF;
            position: absolute;
            bottom:100rpx;
            left:32rpx;
               color: #5EA1FA;
         }
         .btn{
               width: 200rpx;
               height:60rpx;
                  border-radius: 32rpx;
                  text-align: center;
                  line-height: 60rpx;
                  letter-spacing:3rpx;
                  font-weight: 300;
                  font-size: 36rpx;
            }
            .btn1{
               color:#5EA1FA;
               background:#FFFFFF;
               border: 1rpx solid rgba(102, 148, 255, 0.3);
               margin-right:50rpx;
            }
            .btn2{
               color: #FFFFFF;
               background:rgba(94, 161, 250, 0.8);
            }
         }
         .login-out{
            width:100%;
               height: 70rpx;
            position: absolute;
            bottom:100rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .login-out-btn{
               width:50%;
               border-radius: 32rpx;
               text-align: center;
               line-height: 70rpx;
               letter-spacing:3rpx;
               font-weight: 300;
               font-size: 36rpx;
               position: absolute;
               bottom:100rpx;
         }
         .btn1{
            color:#5EA1FA;
            background:#FFFFFF;
            position: absolute;
            left:130rpx;
            border:2rpx solid #5EA1FA;
         }
         .btn2{
               background: rgba(245, 108, 108, 0.9);
            color: #FFFFFF;
            background:#5EA1FA;
            position: absolute;
            right:130rpx;
            }
         }
      }
   }