<template>
|
<full-page-layout :safety="false" background-color="#f0f8ff">
|
<view class="home-bk-layer"></view>
|
<view class="home-float-layer">
|
<header-page-layout :full="false" ref="page" title="首页" headerColor="#fff" @headerclick="onHeaderClick">
|
<template v-slot:headerright><text class="iconfont icon-out-right"></text></template>
|
|
<view class="home-page-containter" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
|
<view class="user-view-box">
|
<view class="user-card home-card">
|
<view class="left-view">
|
<view class="user-circle"><text class="iconfont icon-worker"></text></view>
|
</view>
|
<view class="right-view">
|
<view class="text-row1 auto-wrap">{{userName}}</view>
|
<view class="text-row2 auto-wrap">{{userAcc}}</view>
|
</view>
|
</view>
|
</view>
|
<view class="blocks-view-box">
|
<view class="home-card pic-block" v-if="picList.length>0">
|
<u-swiper :list="picList" circular indicator indicatorMode="line" circular></u-swiper>
|
</view>
|
<view class="home-card item-block-card" v-for="(itema,indexa) in blocks"
|
:key="'item-block-card-'+indexa">
|
<view class="title" v-if="itema.workShopName">{{itema.workShopName}}</view>
|
<view class="items-view">
|
<view class="block-item" v-for="(itemb,indexb) in (itema.wmsPdaPowerOutput || [])"
|
:key="'block-item-'+indexa+'-'+indexb" @tap="onClickBlockItem(itemb.code)">
|
<view class="block-item-icon" :style="{color:itemb.color}">
|
<text class="iconfont" :class="[itemb.icon]"></text>
|
<view class="opacity-layer"></view>
|
</view>
|
<view class="block-item-text no-wrap">{{itemb.name}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</header-page-layout>
|
</view>
|
</full-page-layout>
|
</template>
|
|
<script>
|
import FullPageLayout from '@/components/FullPageLayout.vue'
|
import HeaderPageLayout from '@/components/HeaderPageLayout.vue'
|
let initInterVal = null;
|
export default {
|
name: 'homePage',
|
components: {
|
FullPageLayout,
|
HeaderPageLayout
|
},
|
data() {
|
return {
|
pageBodyHeight: 0,
|
userName: '',
|
userAcc: '',
|
picList: [],
|
blocks: []
|
}
|
},
|
methods: {
|
onHeaderClick(type) {
|
if (type === 'right') {
|
uni.redirectTo({
|
url: this.$config.path.login
|
})
|
}
|
},
|
onClickBlockItem(path) {
|
if (path) {
|
console.log(path)
|
uni.navigateTo({
|
url: this.$config.path[path]
|
});
|
} else {
|
uni.showToast({
|
title: '开发中...',
|
icon: 'none'
|
})
|
}
|
},
|
startInitInterval(callback) {
|
initInterVal = setInterval(() => {
|
if (this.pageBodyHeight) {
|
this.clearInitInterval()
|
} else {
|
this.pageBodyHeight = this.$refs.page.getBodyHeight()
|
callback && callback()
|
}
|
}, 200)
|
},
|
clearInitInterval() {
|
try {
|
clearInterval(initInterVal)
|
initInterVal = null
|
} catch (e) {
|
//TODO handle the exception
|
}
|
}
|
},
|
onLoad() {
|
let _user = this.$store.getters['user/getUserInfo'];
|
this.userName = _user.nickName;
|
this.userAcc = _user.account;
|
//暂时注释,不用菜单权限 【Editby shaocx,2025-05-14】
|
//this.blocks = _user.wmsPdaPowerOutputs?[..._user.wmsPdaPowerOutputs]:[]
|
this.blocks = [{
|
workShopName: '分拣',
|
wmsPdaPowerOutput:[
|
// {icon:'icon-worker',code:'bind',name:'组盘',color:'#1e90ff'},
|
{icon:'icon-worker',code:'pick',name:'分拣',color:'#1e90ff'},
|
// {icon:'icon-worker',code:'bindInForLocation',name:'分拣',color:'#1e90ff'},
|
// {icon:'icon-worker',code:'bindWXJ',name:'分拣',color:'#1e90ff'},
|
]
|
},
|
{
|
workShopName: '其他操作',
|
wmsPdaPowerOutput:[{icon:'icon-worker',code:'PointHandling',name:'点到点',color:'#1e90ff'}]
|
}
|
]
|
},
|
onReady() {
|
this.startInitInterval()
|
},
|
onUnload() {
|
this.clearInitInterval()
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.home-page {
|
height: 100%;
|
background-color: #f0f8ff;
|
position: relative;
|
}
|
|
.home-bk-layer,
|
.home-float-layer {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
}
|
|
.home-bk-layer {
|
height: 240rpx;
|
border-radius: 0 0 80rpx 80rpx;
|
background-image: linear-gradient(to right, $color-paimary-middle, $color-paimary-darken);
|
z-index: 1;
|
}
|
|
.home-float-layer {
|
height: 100%;
|
overflow: hidden;
|
z-index: 2;
|
}
|
|
.home-page-containter {
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
|
.user-view-box {
|
flex-shrink: 0;
|
padding-bottom: 30rpx;
|
}
|
|
.blocks-view-box {
|
flex-grow: 1;
|
overflow: auto;
|
}
|
}
|
|
.home-card {
|
background-color: #fff;
|
width: 95%;
|
border-radius: 10rpx;
|
margin: 0 auto;
|
box-sizing: border-box;
|
}
|
|
.pic-block {
|
margin-bottom: 30rpx;
|
}
|
|
.user-card {
|
display: flex;
|
padding: 30rpx 0;
|
|
.left-view {
|
width: 180rpx;
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.user-circle {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 50%;
|
background-image: linear-gradient(to right, $color-paimary-middle, $color-paimary-darken);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 90rpx;
|
color: #fff;
|
}
|
}
|
|
.right-view {
|
flex-grow: 1;
|
padding-right: 10rpx;
|
display: flex;
|
justify-content: center;
|
flex-direction: column;
|
|
.text-row1 {
|
font-size: 36rpx;
|
font-weight: bold;
|
line-height: 1.3;
|
}
|
|
.text-row2 {
|
padding-top: 10rpx;
|
font-size: 28rpx;
|
line-height: 1.3;
|
}
|
}
|
}
|
|
.item-block-card {
|
margin-bottom: 30rpx;
|
|
&>.title {
|
padding: 20rpx 20rpx 0 20rpx;
|
font-weight: bold;
|
}
|
|
.items-view {
|
display: flex;
|
flex-wrap: wrap;
|
padding-bottom: 12rpx;
|
}
|
|
.block-item {
|
width: 25%;
|
box-sizing: border-box;
|
padding-top: 20rpx;
|
padding-bottom: 10rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.block-item-icon {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 70rpx;
|
position: relative;
|
|
.opacity-layer {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1));
|
}
|
}
|
|
.block-item-text {
|
padding-top: 4rpx;
|
font-size: 30rpx;
|
text-align: center;
|
}
|
}
|
}
|
</style>
|
