<template>
|
<view class="container">
|
<page-header :hasLeft="true" @tclick="tclick" style='font-size: 55upx;'>
|
<template v-slot:left >
|
<u-icon name="arrow-left"></u-icon> 退出
|
</template>
|
首页
|
</page-header>
|
|
<view class="user-card-outer">
|
<view class="user-card">
|
<view class="user-view">
|
<view class="img-box"><image class="img" :src="avatar" mode="aspectFill" /></view>
|
<view class="name-text">{{username}}</view>
|
</view>
|
|
<view class="blocks-box">
|
<view class="block-item" v-for="(item,index) in powerList" :key="index" @click="jump(item.path)">
|
<view class="icon-img"><image :style="{width:imgWidth,height:imgWidth}" :src="item.icon" /></view>
|
<view class="text">{{item.pageName}}</view>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
|
|
</view>
|
</template>
|
|
<script>
|
import PageHeader from '../../compontents/PageHeader.vue'
|
export default {
|
components:{PageHeader},
|
data() {
|
return {
|
avatar:require('../../assets/avatar.png'),
|
imgWidth:'0px',
|
pageList:[ //页面列表数据
|
{
|
icon: require('../../assets/item3.png'),
|
pageName: '缸体下线',
|
path: '../cylinder/cylinder'
|
},
|
{
|
icon: require('../../assets/item2.png'),
|
pageName: '缸盖下线',
|
path: '../cylinderHead/cylinderHead'
|
},
|
|
],
|
powerList:[
|
{
|
icon: require('../../assets/item4.png'),
|
pageName: '任务展示',
|
path: '../task/task'
|
},
|
// {
|
// icon: require('../../assets/item1.png'),
|
// pageName: '手动入库',
|
// path: '../hand/hand'
|
// }
|
],
|
}
|
},
|
onLoad() {
|
//获取当前用户的页面权限数据
|
const list = uni.getStorageSync('power');
|
this.imgWidth = (uni.getSystemInfoSync().windowWidth * 0.5 * 0.8)+'px';
|
console.log(this.imgWidth)
|
//匹配页面
|
list.forEach((item) => {
|
this.pageList.forEach(page => {
|
if(page.pageName == item) {
|
this.powerList.unshift(page);
|
}
|
})
|
})
|
},
|
computed:{
|
username(){
|
let res = uni.getStorageSync('_username');
|
if (!res) res=''
|
return res;
|
}
|
},
|
methods: {
|
//页面跳转
|
jump(path) {
|
uni.navigateTo({
|
url:path
|
})
|
},
|
tclick(){
|
uni.redirectTo({url:'../login/login'})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container{
|
font-size: 14px;
|
line-height: 24px;
|
height: 100vh;
|
overflow:auto;
|
background: linear-gradient(to right, #0067ff , #00b5ff);
|
}
|
.user-card-outer{
|
padding: 40rpx 16rpx 0 16rpx;
|
}
|
.user-card{
|
background-color: #FFFFFF;
|
border-radius: 64rpx;
|
position: relative;
|
padding-top: 110rpx;
|
padding-bottom: 30rpx;
|
}
|
.user-view{
|
position: absolute;
|
width: 100%;
|
left:0;
|
top:-50rpx;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
.img-box{
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: 50%;
|
border: 1px solid #f0f8ff;
|
}
|
.img{
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
}
|
}
|
|
|
.blocks-box{
|
display: flex;
|
flex-wrap: wrap;
|
.block-item{
|
width: 50%;
|
margin-bottom: 12px;
|
.icon-img{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
box-sizing: border-box;
|
}
|
.text{
|
padding: 2px 0;
|
text-align: center;
|
}
|
}
|
}
|
uni-page-body {
|
height: 100%;
|
}
|
</style>
|
