220 lines
6.7 KiB
Vue
220 lines
6.7 KiB
Vue
<template>
|
||
<view class="home_wraper">
|
||
<view class="zd_content">
|
||
<view class="header">首页</view>
|
||
<view class="userInfo-wrap">
|
||
<view class="userInfo">
|
||
<text v-if="userName !== ''" class="p1">{{userName}}</text>
|
||
<text class="p2">欢迎进入海亮三线LMS系统！</text>
|
||
</view>
|
||
<view class="exit" @tap="Quit">
|
||
<view class="icon-exit"></view>
|
||
<view class="exit-text">退出</view>
|
||
</view>
|
||
</view>
|
||
<view class="zd-row zd_home_wrapper">
|
||
<view class="zd-col-12 fir_menus_wrap">
|
||
<view class="fir-menu_item" v-for="e in menuList" :key="e.id" :class="{'fir_menu_active': index === e.id}">
|
||
<view class="zd-row fir-menu_name" :style="{'background-image': 'url(../../static/image/menu/' + e.icon +'.png)'}" @tap="toMenu(e)">{{e.name}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="zd-col-12 sec_menus_wrap">
|
||
<view class="sec_menu_item" v-for="e in activeArr" :key="e.id">
|
||
<view class="sec_menu_name">{{e.name}}</view>
|
||
<view class="thi_menus_wrap">
|
||
<view class="thi_menu_item" v-for="el in e.sonTreen" :key="el.id">
|
||
<view class="thi_menu_name" @click="toPage(el)">{{el.name}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
userName: '',
|
||
index: '',
|
||
activeArr: [],
|
||
menuList: [
|
||
{id: '1', name: '仓储管理', icon: 'RF01', sonTreen: [{
|
||
id: '0101', name: '半成品库管理',sonTreen: [
|
||
{id: '010101', name: '半成品入库', path: '/pages/modules/SemifinishedInStore'},
|
||
{id: '010102', name: '半成品出库', path: '/pages/modules/SemifinishedOutStore'},
|
||
{id: '010103', name: '空箱出库', path: '/pages/modules/EmptyOutStore'},
|
||
{id: '010104', name: '出入库顺序表', path: '/pages/modules/SequenceTable'}
|
||
]
|
||
}]},
|
||
{id: '2', name: '振动清洗管理', icon: 'RF02', sonTreen: [{
|
||
id: '0201', name: '缓存线管理',sonTreen: [
|
||
{id: '020101', name: '缓存线叫料', path: '/pages/modules/SemifinishedInStore'},
|
||
{id: '020102', name: '缓存线盘点', path: '/pages/modules/SemifinishedInStore'}
|
||
]
|
||
}, {
|
||
id: '0202', name: '清洗管理',sonTreen: [
|
||
{id: '020201', name: '清洗上料', path: '/pages/modules/SemifinishedInStore'},
|
||
{id: '020202', name: '清洗下料', path: '/pages/modules/SemifinishedInStore'}
|
||
]
|
||
}]},
|
||
{id: '3', name: '激光下料清洗管理', icon: 'RF03', sonTreen: [{
|
||
id: '0301', name: '清洗管理',sonTreen: [
|
||
{id: '030101', name: '清洗上料', path: '/pages/modules/SemifinishedInStore'},
|
||
{id: '030102', name: '清洗下料', path: '/pages/modules/SemifinishedInStore'}
|
||
]
|
||
}]},
|
||
{id: '4', name: '发黑清洗管理', icon: 'RF04', sonTreen: [{
|
||
id: '0401', name: '清洗管理',sonTreen: [
|
||
{id: '040101', name: '清洗上料', path: '/pages/modules/SemifinishedInStore'},
|
||
{id: '040102', name: '清洗下料', path: '/pages/modules/SemifinishedInStore'}
|
||
]
|
||
}, {
|
||
id: '0402', name: '退货管理',sonTreen: [
|
||
{id: '040201', name: '退货缓存区', path: '/pages/modules/SemifinishedInStore'},
|
||
{id: '040202', name: '退货中物料', path: '/pages/modules/SemifinishedInStore'}
|
||
]
|
||
}]},
|
||
{id: '5', name: '环保清洗管理', icon: 'RF05', sonTreen: [{
|
||
id: '0501', name: '缓存区管理',sonTreen: [
|
||
{id: '050101', name: '缓存线叫料', path: '/pages/modules/SemifinishedInStore'},
|
||
{id: '050102', name: '缓存线盘点', path: '/pages/modules/SemifinishedInStore'}
|
||
]
|
||
}, {
|
||
id: '0502', name: '清洗管理',sonTreen: [
|
||
{id: '050201', name: '清洗叫料', path: '/pages/modules/SemifinishedInStore'},
|
||
{id: '050202', name: '清洗上料', path: '/pages/modules/SemifinishedInStore'},
|
||
{id: '050203', name: '清洗物料列表', path: '/pages/modules/SemifinishedInStore'}
|
||
]
|
||
}]}
|
||
]
|
||
};
|
||
},
|
||
created () {
|
||
this.$store.dispatch('setPublicObj', '')
|
||
if (this.$store.getters.userInfo) {
|
||
this.userName = JSON.parse(this.$store.getters.userInfo).username
|
||
}
|
||
this.index = this.menuList[0].id
|
||
this.activeArr = this.menuList[0].sonTreen
|
||
},
|
||
methods: {
|
||
toMenu (e) {
|
||
this.index = e.id
|
||
this.activeArr = [...e.sonTreen]
|
||
},
|
||
toPage (e) {
|
||
let url = e.path
|
||
uni.redirectTo({
|
||
url: url
|
||
})
|
||
},
|
||
Quit () {
|
||
this.$store.dispatch('delUserInfo', '')
|
||
uni.redirectTo({
|
||
url: '/pages/login/login'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus">
|
||
@import '../../common/style/mixin.styl';
|
||
.home_wraper
|
||
_wh(100%, 100%)
|
||
overflow hidden
|
||
.zd_content
|
||
padding 0 24rpx
|
||
height 100%
|
||
padding-top calc(var(--status-bar-height) + 86rpx)
|
||
background linear-gradient(to bottom, #fae2ca 0%, #fff5ea 20%, #fdfdfd 100%)
|
||
.header
|
||
position fixed
|
||
left 0
|
||
top 0
|
||
padding-top var(--status-bar-height)
|
||
z-index 100
|
||
_wh(100%, calc(var(--status-bar-height) + 86rpx))
|
||
// background-color #f8e6db
|
||
_font(36rpx,86rpx,#333,,center)
|
||
.userInfo-wrap
|
||
_fj()
|
||
_wh(100%,190rpx)
|
||
padding 0 30rpx
|
||
background-color $red
|
||
_bis('../../static/image/info_bg.png',auto,100%,right,bottom)
|
||
border-radius 12rpx
|
||
margin-bottom 24rpx
|
||
.userInfo
|
||
_fj(,flex-start,column)
|
||
.p1
|
||
_font(34rpx,1,#fff)
|
||
padding-bottom 18rpx
|
||
.p2
|
||
_font(32rpx,1,#fff)
|
||
.exit
|
||
_fj()
|
||
height 50rpx
|
||
padding 0 20rpx
|
||
border 1px solid #FF967C
|
||
border-radius 20rpx
|
||
.icon-exit
|
||
_wh(22rpx, 22rpx)
|
||
_bis('../../static/image/exit.png',22rpx)
|
||
.exit-text
|
||
_font(32rpx,50rpx,#fff,,right)
|
||
padding-left 10rpx
|
||
.zd_home_wrapper
|
||
_wh(100%, calc(100% - 238rpx))
|
||
background-color #fff
|
||
border-radius: 12rpx;
|
||
margin-bottom: 24rpx
|
||
.fir_menus_wrap
|
||
height 100%
|
||
background-color #dedede
|
||
.sec_menus_wrap
|
||
height 100%
|
||
background-color #fff
|
||
padding 0 40rpx
|
||
overflow-y auto
|
||
.fir-menu_item
|
||
_wh(100%, 90rpx)
|
||
padding 0 20rpx
|
||
.fir-menu_name
|
||
height 90rpx
|
||
_font(28rpx, 30rpx, #666,,)
|
||
_bis('../../static/image/menu/RF01.png', 50rpx,,left,)
|
||
padding-left 70rpx
|
||
.sec_menu_item
|
||
width 100%
|
||
padding 20rpx 0 0 0
|
||
.sec_menu_name
|
||
width max-content
|
||
height 70rpx
|
||
_font(26rpx, 70rpx, #333,700,)
|
||
background linear-gradient(to right, #fbfef1 0%, #fff2a9 100%)
|
||
transform: skew(-10deg)
|
||
border-top-right-radius: 10px;
|
||
border-bottom-right-radius: 10px;
|
||
padding 0 40rpx 0 10rpx
|
||
margin-bottom 20rpx
|
||
.sec_menu_item
|
||
&:nth-child(1) .sec_menu_name
|
||
background linear-gradient(to right, #fbfef1 0%, #f5dc51 100%)
|
||
&:nth-child(2) .sec_menu_name
|
||
background linear-gradient(to right, #fefcff 0%, #80c5e5 100%)
|
||
&:nth-child(3) .sec_menu_name
|
||
background linear-gradient(to right, #fefbf6 0%, #e6c096 100%)
|
||
.thi_menu_name
|
||
height 60rpx
|
||
_font(28rpx, 60rpx, #333,,)
|
||
.fir_menu_active
|
||
background-color #fff
|
||
.fir-menu_name
|
||
color #000
|
||
font-weight: 700
|
||
</style>
|