SmartStorage/pages/user/user.vue

175 lines
4.8 KiB
Vue

<template>
<view>
<view class="sticky" @click="seeMore">更多</view>
<view class="infos">
<view class="info-lef">
<image src="/static/bg1.jpg" mode=""></image>
</view>
<view class="info-rig">
<view class="name">{{ username }}</view>
<view class="phone">{{ phone }}</view>
</view>
</view>
<view class="auth">
<h4>{{ companyName }}</h4>
<h4 class="authed">
<uni-icons
style="margin-right: 8rpx; color: #f19600"
type="checkbox-filled"></uni-icons>
<span>已认证</span>
</h4>
</view>
<!-- <u-cell-group style="width: 95%; margin: 15rpx auto;" :border="false">
<u-cell
title="个人信息"
:isLink="true"
icon="/static/personal.png"
:border="false"
>
</u-cell>
<u-cell
title="设置"
:isLink="true"
icon="/static/setting.png"
:border="false"
>
</u-cell>
</u-cell-group> -->
<!-- <button ></button> -->
<view class="exit-log" @click="exitLogin"> 退出登录 </view>
</view>
</template>
<script>
import { authPath } from "../../public";
import store from "../../store/user";
export default {
data() {
return {
companyName: uni.getStorageSync("companyName"),
username: uni.getStorageSync("userInfo").username,
phone: uni.getStorageSync("userInfo").sysUser.phonenumber,
};
},
methods: {
exitLogin() {
let that = this;
uni.showModal({
title: "退出登录",
content: "确定退出登录吗?",
success: (res) => {
if (res.confirm) {
that.$api.user
.logOut({}, null)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.log(err);
});
store.SET_PERMISSIONS = [];
uni.removeStorageSync("token");
uni.removeStorageSync("userInfo");
uni.reLaunch({
url: "/pages/login/login",
// url: "/pages/nwLogin/index",
});
}
},
});
},
seeMore() {
console.log("更多");
},
},
};
</script>
<style lang="scss">
body {
background: url("/static/user-bgd.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
.sticky {
box-sizing: border-box;
padding: 10rpx 15rpx 10rpx 30rpx;
border-radius: 30rpx 0 0 30rpx;
background-color: #fff;
position: absolute;
top: 3vh;
right: 0;
font-size: 12px;
}
.infos {
width: 80%;
margin: 6vh auto;
margin-bottom: 0;
display: flex;
.info-lef {
width: 18%;
height: 8vh;
border-radius: 50%;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.info-rig {
flex: 1;
box-sizing: border-box;
padding: 15rpx 25rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
view {
color: #fff;
}
.name {
font-size: 20px;
font-weight: bold;
}
.phone {
font-size: 14px;
letter-spacing: 5rpx;
}
}
}
.auth {
width: 85%;
display: flex;
margin: 2.5vh auto;
justify-content: space-between;
align-items: center;
font-size: 30rpx;
background-color: #ffe8c2;
box-sizing: border-box;
padding: 1.6vh;
border-radius: 20rpx 20rpx 0 0;
h4 {
font-weight: normal;
}
.authed {
display: flex;
align-items: center;
color: #f19600;
}
}
.exit-log {
margin: 40vh auto;
margin-bottom: 0;
width: 70%;
box-sizing: border-box;
border-radius: 50rpx;
padding: 20rpx 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #3888ff;
color: #fff;
}
</style>