13 changed files with 986 additions and 154 deletions
@ -1,33 +1,158 @@ |
|||||
<template> |
<template> |
||||
<view class="content"> |
<view class="mine-content"> |
||||
<view> |
<view class="user-info"> |
||||
<u-button type="primary" text="退出登录" @click="handleLogout"></u-button> |
<image |
||||
|
:src="userInfo.avatar ? 'userInfo.avatar' : '/static/img/login-top.png'" |
||||
|
class="avatar" |
||||
|
></image> |
||||
|
<view class="nickname" >{{ |
||||
|
userInfo.userName |
||||
|
}}</view> |
||||
|
</view> |
||||
|
<view class="menu-list"> |
||||
|
<view |
||||
|
class="menu-item" |
||||
|
v-for="(item, idx) in menuList" |
||||
|
:key="idx" |
||||
|
@click="goPage(item.url)" |
||||
|
> |
||||
|
<image :src="item.icon" class="menu-icon"></image> |
||||
|
<text class="menu-text">{{ item.text }}</text> |
||||
|
<u-icon name="arrow-right" color="#bbb" size="22"></u-icon> |
||||
|
</view> |
||||
|
<u-button |
||||
|
:hairline="false" |
||||
|
shape="circle" |
||||
|
:custom-style="btnStyle" |
||||
|
@click="handleLogout" |
||||
|
color="#fff" |
||||
|
text="退出登录" |
||||
|
></u-button> |
||||
</view> |
</view> |
||||
</view> |
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import { logout } from '@/pages/api' |
import { logout } from "@/pages/api"; |
||||
export default { |
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
userInfo:{}, |
||||
|
menuList: [ |
||||
|
// { |
||||
|
// icon: "/static/img/repair.png", |
||||
|
// text: "我的维修记录", |
||||
|
// url: "/pagesA/repair/record", |
||||
|
// }, |
||||
|
// { |
||||
|
// icon: "/static/img/report.png", |
||||
|
// text: "我的报事记录", |
||||
|
// url: "/pagesA/bs/record", |
||||
|
// }, |
||||
|
{ |
||||
|
icon: "/static/img/巡检记录.png", |
||||
|
text: "我的巡检记录", |
||||
|
url: "/pagesA/xjPage/xjRecord", |
||||
|
}, |
||||
|
// { |
||||
|
// icon: "/static/img/password.png", |
||||
|
// text: "修改密码", |
||||
|
// url: "/pagesA/mine/changePwd", |
||||
|
// }, |
||||
|
], |
||||
|
btnStyle: { |
||||
|
position: "fixed", |
||||
|
left: "40rpx", |
||||
|
bottom: 0, |
||||
|
width: "60%", |
||||
|
height: "44px", |
||||
|
fontSize: "18px", |
||||
|
margin: "50px", |
||||
|
marginTop: "200rpx", |
||||
|
background: "linear-gradient(90deg, #0DC6C6 0%, #13C2C2 100%)", |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
onLoad() { |
||||
|
if (!uni.getStorageSync("token")) { |
||||
|
uni.redirectTo({ |
||||
|
url: "/pages/login/login", |
||||
|
}); |
||||
|
} |
||||
|
const userInfo = uni.getStorageSync("userInfo"); |
||||
|
if (userInfo) { |
||||
|
this.$store.dispatch("user/setUserInfo", userInfo); |
||||
|
} |
||||
|
this.userInfo = userInfo; |
||||
|
|
||||
|
console.log("userInfo", userInfo); |
||||
|
}, |
||||
methods: { |
methods: { |
||||
async handleLogout() { |
async handleLogout() { |
||||
try { |
try { |
||||
await logout(); |
await logout(); |
||||
} catch (e) {} |
} catch (e) {} |
||||
uni.removeStorageSync('token'); |
uni.removeStorageSync("token"); |
||||
uni.reLaunch({ |
uni.reLaunch({ |
||||
url: '/pages/login/login' |
url: "/pages/login/login", |
||||
}); |
}); |
||||
} |
}, |
||||
} |
goPage(url) { |
||||
} |
uni.navigateTo({ |
||||
|
url, |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.content { |
.mine-content { |
||||
display: flex; |
min-height: 100vh; |
||||
flex-direction: column; |
background: #f5f6fa; |
||||
align-items: center; |
.user-info { |
||||
justify-content: center; |
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: flex-start; |
||||
|
padding: 40rpx 0 30rpx 0; |
||||
|
background: linear-gradient(90deg, #cbf3fb 0%, #e2e7fd 100%); |
||||
|
height: 228rpx; |
||||
|
padding-left: 40rpx; |
||||
|
.avatar { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 50%; |
||||
|
margin-bottom: 16rpx; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.nickname { |
||||
|
font-size: 36rpx; |
||||
|
color: #333; |
||||
|
margin-left: 30rpx; |
||||
|
margin-top: 30rpx; |
||||
|
} |
||||
|
} |
||||
|
.menu-list { |
||||
|
margin-top: 30rpx; |
||||
|
.menu-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
background: #fff; |
||||
|
border-radius: 18rpx; |
||||
|
margin: -110rpx 24rpx 28rpx 24rpx; |
||||
|
padding: 44rpx 24rpx; |
||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); |
||||
|
.menu-icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
margin-right: 24rpx; |
||||
|
} |
||||
|
.menu-text { |
||||
|
flex: 1; |
||||
|
font-size: 30rpx; |
||||
|
color: #222; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,11 @@ |
|||||
|
import Vue from "vue"; |
||||
|
import Vuex from "vuex"; |
||||
|
import user from "./user"; |
||||
|
|
||||
|
Vue.use(Vuex); |
||||
|
|
||||
|
export default new Vuex.Store({ |
||||
|
modules: { |
||||
|
user, |
||||
|
}, |
||||
|
}); |
||||
@ -0,0 +1,23 @@ |
|||||
|
// store/user.js
|
||||
|
const state = { |
||||
|
userInfo: null, |
||||
|
}; |
||||
|
|
||||
|
const mutations = { |
||||
|
SET_USER_INFO(state, info) { |
||||
|
state.userInfo = info; |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
const actions = { |
||||
|
setUserInfo({ commit }, info) { |
||||
|
commit("SET_USER_INFO", info); |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
export default { |
||||
|
namespaced: true, |
||||
|
state, |
||||
|
mutations, |
||||
|
actions, |
||||
|
}; |
||||
Loading…
Reference in new issue