小程序端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

237 lines
4.9 KiB

<template>
<view class="v-pages">
<!--顶部个人信息栏-->
<view class="header-section">
<view class="header-top">
<view class="header-bg">
<image
src="https://sy.hbcjy.com/prod-api/admin-api/infra/file/23/get/f151a4255aef5e67ab2d3745c40b767e47f6e043e0241272ef46f6941d608f99.png">
</image>
</view>
</view>
<view class="header-info">
<view v-if="!avatar" class="cu-avatar xl round bg-white">
<view class="iconfont icon-people text-gray icon"></view>
</view>
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
</image>
<view v-if="!name" @click="handleToLogin" class="login-tip">
点击登录
</view>
<view v-if="name" @click="handleToInfo" class="user-info">
<view class="u_title">
{{ name }}
</view>
</view>
</view>
<view class="user-set" @click="handleToEditInfo">
<view class="iconfont icon-setting menu-icon"></view>
</view>
</view>
<view class="content-section">
<view class="menu-list">
<view class="list-cell list-cell-arrow" @click="handleToEnterpriseInfo">
<view class="menu-item-box">
<view class="menu-icon">
<image src="@/static/images/icon_enterprise.svg"></image>
</view>
<view>企业管理</view>
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleToBaseInfo">
<view class="menu-item-box">
<view class="menu-icon">
<image src="@/static/images/icon_base.svg"></image>
</view>
<view>基地管理</view>
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleToSetting">
<view class="menu-item-box">
<view class="menu-icon">
<image src="@/static/images/icon_application-settings.svg"></image>
</view>
<view>应用设置</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import storage from '@/utils/storage'
export default {
data() {
return {
name: this.$store.state.user.name,
version: getApp().globalData.config.appInfo.version
}
},
computed: {
avatar() {
return this.$store.state.user.avatar
},
windowHeight() {
return uni.getSystemInfoSync().windowHeight - 50
}
},
methods: {
handleToEnterpriseInfo() {
this.$tab.navigateTo('/sunPages/mine/business/index')
},
handleToBaseInfo() {
this.$tab.navigateTo('/sunPages/mine/base/index')
},
handleToInfo() {
this.$tab.navigateTo('/sunPages/mine/info/index')
},
handleToEditInfo() {
this.$tab.navigateTo('/sunPages/mine/info/edit')
},
handleToSetting() {
this.$tab.navigateTo('/sunPages/mine/setting/index')
},
handleToLogin() {
this.$tab.reLaunch('/pages/login')
},
handleToAvatar() {
this.$tab.navigateTo('/sunPages/mine/avatar/index')
},
handleLogout() {
this.$modal.confirm('确定注销并退出系统吗?').then(() => {
this.$store.dispatch('LogOut').then(() => {
this.$tab.reLaunch('/pages/index')
})
})
},
handleHelp() {
this.$tab.navigateTo('/sunPages/mine/help/index')
},
handleAbout() {
this.$tab.navigateTo('/sunPages/mine/about/index')
},
handleJiaoLiuQun() {
this.$modal.showToast('微信搜索 naidaguo 后,添加好友后拉你进技术交流群')
},
handleBuilding() {
this.$modal.showToast('模块建设中~')
}
}
}
</script>
<style lang="scss">
page {
background-color: #f5f6f7;
}
.header-section {
position: relative;
height: 400rpx;
.header-top {
position: relative;
.header-bg {
height: 400rpx;
image {
width: 100%;
height: 400rpx;
}
}
}
.header-info {
position: absolute;
width: 100%;
text-align: center;
top: 80rpx;
.login-tip {
display: inline-block;
font-size: 18px;
margin-left: 10px;
}
.cu-avatar {
width: 176rpx;
height: 176rpx;
display: inline-block;
position: relative;
z-index: 1;
border: 2rpx solid #eaeaea;
.icon {
font-size: 40px;
}
}
}
.user-set {
position: absolute;
right: 40rpx;
top: 40rpx;
z-index: 3;
.iconfont::before {
color: #fff;
font-size: 40rpx;
}
}
.user-info {
position: relative;
z-index: 2;
margin-top: -10rpx;
text-align: center;
.u_title {
display: inline-block;
padding: 0 30rpx;
border-radius: 40rpx;
background-image: linear-gradient(to right, #FFA800, #FF8000);
color: #fff;
text-align: center;
font-size: 28rpx;
line-height: 40rpx;
}
}
}
.content-section {
position: relative;
top: -50px;
.mine-actions {
margin: 15px 15px;
padding: 20px 0px;
border-radius: 8px;
background-color: white;
.action-item {
.icon {
font-size: 28px;
}
.text {
display: block;
font-size: 13px;
margin: 8px 0px;
}
}
}
}
</style>