405 lines
9.2 KiB
Vue
405 lines
9.2 KiB
Vue
<template>
|
|
<view class="work-container">
|
|
<!--顶部个人信息栏-->
|
|
<view class="header-section ">
|
|
<view class="flex justify-between">
|
|
<view class="flex align-center">
|
|
<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">
|
|
Hi.{{ name }}
|
|
</view>
|
|
<view class="s_text">
|
|
欢迎使用RF
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view @click="handleToInfo" class="flex align-center">
|
|
<text>个人信息</text>
|
|
<view class="iconfont icon-right"></view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<!-- 轮播图 -->
|
|
<swiper class="work-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
|
|
:autoplay="true" interval="5000" duration="500">
|
|
<swiper-item v-for="(item,index) in swiperList" :key="index">
|
|
<image :src="item.url" v-if="item.type=='image'" ></image>
|
|
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
|
|
v-if="item.type=='video'"></video>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="grid-body">
|
|
<view class="bodytitle">
|
|
业务操作
|
|
</view>
|
|
<view class="bodybox">
|
|
<view v-for="(item,index) in wmsRouter" class="bodyboxitem" :key="index">
|
|
<view class="grid-item-box" @click="navChange(item)">
|
|
<!-- <uni-icons :class='item.icon' size="30"></uni-icons> -->
|
|
<image :src="item.icon" ></image>
|
|
<text class="text">{{item.title}}</text>
|
|
</view>
|
|
</view>
|
|
<view style="width: 140rpx;"></view>
|
|
<view style="width: 140rpx;"></view>
|
|
<view style="width: 140rpx;"></view>
|
|
</view>
|
|
</view>
|
|
<view class="grid-body" v-if="userRoutes.length>0">
|
|
<template v-for="oneMenuList in userRoutes">
|
|
<view class="bodytitle">
|
|
{{oneMenuList.title}}
|
|
</view>
|
|
<view class="bodybox">
|
|
<view v-for="(item,index) in oneMenuList.children" class="bodyboxitem" :key="index">
|
|
<view class="grid-item-box" @click="navChange(item)">
|
|
<uni-icons :class='item.icon' size="30"></uni-icons>
|
|
|
|
<text class="text">{{item.title}}</text>
|
|
</view>
|
|
</view>
|
|
<view style="width: 140rpx;"></view>
|
|
<view style="width: 140rpx;"></view>
|
|
<view style="width: 140rpx;"></view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import store from '@/store'
|
|
import {
|
|
data as wmsRouter
|
|
} from "@/static/json/dynamicRouter.json";
|
|
export default {
|
|
data() {
|
|
return {
|
|
wmsRouter,
|
|
name: this.$store.state.user.name,
|
|
swiperList: [
|
|
// {
|
|
// id: 0,
|
|
// type: 'image',
|
|
// url: '/static/images/banner/banner01.jpg'
|
|
// }, {
|
|
// id: 1,
|
|
// type: 'image',
|
|
// url: '/static/images/banner/banner02.jpg',
|
|
// }, {
|
|
// id: 2,
|
|
// type: 'image',
|
|
// url: '/static/images/banner/banner03.jpg'
|
|
// },
|
|
{
|
|
id: 3,
|
|
type: 'image',
|
|
url: '/static/images/banner/banner04.jpg'
|
|
}, {
|
|
id: 4,
|
|
type: 'image',
|
|
url: '/static/images/banner/banner05.jpg'
|
|
}, {
|
|
id: 5,
|
|
type: 'image',
|
|
url: '/static/images/banner/banner06.jpg'
|
|
}, {
|
|
id: 6,
|
|
type: 'image',
|
|
url: '/static/images/banner/banner07.jpg'
|
|
},
|
|
],
|
|
towerStart: 0,
|
|
direction: '',
|
|
dotStyle: true,
|
|
userRoutes: []
|
|
}
|
|
},
|
|
computed: {
|
|
avatar() {
|
|
return this.$store.state.user.avatar
|
|
},
|
|
windowHeight() {
|
|
return uni.getSystemInfoSync().windowHeight - 50
|
|
},
|
|
warehouseinfo() {
|
|
if (Array.isArray(this.warehouse) && this.warehouse.length > 0) {
|
|
return '【' + this.warehouse[0].warehouseCode + '】' + this.warehouse[0].warehouseName
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.TowerSwiper('swiperList');
|
|
this.direction = 'left';
|
|
// 初始化towerSwiper 传已有的数组名即可
|
|
//获取缓存内容
|
|
console.log(store)
|
|
console.log(store.getters.userRoutes)
|
|
this.userRoutes = store.getters.userRoutes;
|
|
},
|
|
methods: {
|
|
changeGrid(e) {
|
|
this.$modal.showToast('模块建设中~')
|
|
console.log(e)
|
|
},
|
|
navChange(e) {
|
|
console.log("navChange", e)
|
|
//todo 校验是否有权限
|
|
var path = e.path;
|
|
console.log(path)
|
|
//this.PageCur = e.currentTarget.dataset.cur
|
|
this.$tab.navigateTo(path)
|
|
},
|
|
// 初始化towerSwiper
|
|
TowerSwiper(name) {
|
|
let list = this[name];
|
|
console.log(list)
|
|
for (let i = 0; i < list.length; i++) {
|
|
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
|
|
list[i].mLeft = i - parseInt(list.length / 2)
|
|
}
|
|
this.swiperList = list
|
|
},
|
|
// towerSwiper触摸开始
|
|
TowerStart(e) {
|
|
console.log(e)
|
|
this.towerStart = e.touches[0].pageX
|
|
},
|
|
// towerSwiper计算方向
|
|
TowerMove(e) {
|
|
this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
|
|
},
|
|
// towerSwiper计算滚动
|
|
TowerEnd(e) {
|
|
let direction = this.direction;
|
|
let list = this.swiperList;
|
|
if (direction == 'right') {
|
|
let mLeft = list[0].mLeft;
|
|
console.log(list[0])
|
|
let zIndex = list[0].zIndex;
|
|
for (let i = 1; i < this.swiperList.length; i++) {
|
|
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
|
|
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
|
|
}
|
|
this.swiperList[list.length - 1].mLeft = mLeft;
|
|
this.swiperList[list.length - 1].zIndex = zIndex;
|
|
} else {
|
|
let mLeft = list[list.length - 1].mLeft;
|
|
let zIndex = list[list.length - 1].zIndex;
|
|
for (let i = this.swiperList.length - 1; i > 0; i--) {
|
|
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
|
|
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
|
|
}
|
|
this.swiperList[0].mLeft = mLeft;
|
|
this.swiperList[0].zIndex = zIndex;
|
|
}
|
|
this.direction = ""
|
|
this.swiperList = this.swiperList
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import url("../../components/colorui/main.css");
|
|
@import url("../../components/colorui/icon.css");
|
|
|
|
/* #ifndef APP-NVUE */
|
|
page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
min-height: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
view {
|
|
font-size: 14px;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.work-swiper {
|
|
width: 686rpx;
|
|
height: 180rpx;
|
|
margin: 0 auto;
|
|
border-radius: 24rpx;
|
|
|
|
image {
|
|
width: 686rpx;
|
|
height: 180rpx;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
video {
|
|
width: 686rpx;
|
|
height: 180rpx;
|
|
border-radius: 24rpx;
|
|
}
|
|
}
|
|
|
|
.header-section {
|
|
padding: 40rpx 32rpx;
|
|
color: white;
|
|
|
|
.login-tip {
|
|
font-size: 18px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.cu-avatar {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border: 2px solid #eaeaea;
|
|
border-radius: 24rpx;
|
|
|
|
.icon {
|
|
font-size: 40px;
|
|
}
|
|
}
|
|
|
|
.user-info {
|
|
margin-left: 36rpx;
|
|
|
|
.u_title {
|
|
|
|
color: rgb(255, 255, 255);
|
|
font-family: 苹方-简;
|
|
font-size: 42rpx;
|
|
font-weight: 500;
|
|
line-height: 59rpx;
|
|
letter-spacing: 0%;
|
|
text-align: left;
|
|
}
|
|
|
|
.s_text {
|
|
color: rgb(255, 255, 255);
|
|
font-family: 苹方-简;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 34rpx;
|
|
letter-spacing: 0%;
|
|
text-align: left;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* #endif */
|
|
.work-container {
|
|
background: linear-gradient(180.00deg, rgb(181, 202, 245) 0%, rgb(184, 204, 245) 40.449%, rgba(213, 227, 249, 0) 87.96%);
|
|
width: 100%;
|
|
height: 90vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.text {
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.grid-item-box {
|
|
flex: 1;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 15px 0;
|
|
image{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
|
|
.uni-margin-wrap {
|
|
width: 690rpx;
|
|
width: 100%;
|
|
;
|
|
}
|
|
|
|
.swiper {
|
|
height: 300rpx;
|
|
}
|
|
|
|
.swiper-box {
|
|
height: 150px;
|
|
}
|
|
|
|
.grid-body {
|
|
width: 686rpx;
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
margin: 32rpx auto;
|
|
box-shadow: 0px 4rpx 11rpx 0px rgba(111, 150, 198, 0.09), 0px 4px 84px 0px rgba(130, 154, 190, 0.11);
|
|
background: rgb(255, 255, 255);
|
|
padding-bottom: 64rpx;
|
|
.bodytitle {
|
|
color: rgb(29, 33, 41);
|
|
font-family: 苹方-简;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
line-height: 45rpx;
|
|
letter-spacing: 0px;
|
|
text-align: left;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.bodybox {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.bodyboxitem {
|
|
width: 140rpx;
|
|
height: 195rpx;
|
|
}
|
|
}
|
|
|
|
.swiper-item {
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
height: 300rpx;
|
|
line-height: 300rpx;
|
|
}
|
|
|
|
@media screen and (min-width: 500px) {
|
|
.uni-swiper-dot-box {
|
|
width: 400px;
|
|
/* #ifndef APP-NVUE */
|
|
margin: 0 auto;
|
|
/* #endif */
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.tower-swiper .tower-item {
|
|
transform: scale(calc(0.5 + var(--index) / 10));
|
|
margin-left: calc(var(--left) * 100upx - 150upx);
|
|
z-index: var(--index);
|
|
}
|
|
</style> |