14 changed files with 997 additions and 155 deletions
@ -1,33 +1,158 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<view> |
|||
<u-button type="primary" text="退出登录" @click="handleLogout"></u-button> |
|||
<view class="mine-content"> |
|||
<view class="user-info"> |
|||
<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> |
|||
</template> |
|||
|
|||
<script> |
|||
import { logout } from '@/pages/api' |
|||
import { logout } from "@/pages/api"; |
|||
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: { |
|||
async handleLogout() { |
|||
try { |
|||
await logout(); |
|||
} catch (e) {} |
|||
uni.removeStorageSync('token'); |
|||
uni.removeStorageSync("token"); |
|||
uni.reLaunch({ |
|||
url: '/pages/login/login' |
|||
url: "/pages/login/login", |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
goPage(url) { |
|||
uni.navigateTo({ |
|||
url, |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.mine-content { |
|||
min-height: 100vh; |
|||
background: #f5f6fa; |
|||
.user-info { |
|||
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> |
|||
|
|||
@ -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