327 lines
7.8 KiB
Vue
327 lines
7.8 KiB
Vue
<template>
|
|
<view :class="darkFans?`darkbackgroundContainer`:`backgroundContainer`">
|
|
<view class="index-title">
|
|
<view class="index-title-left">
|
|
<image class="index-title-left-img" src="/static/index/customer.png" />
|
|
<view class="index-title-left-font">
|
|
王金福
|
|
</view>
|
|
<view class="index-title-left-wel">
|
|
欢迎
|
|
</view>
|
|
<view class="index-title-left-weight">
|
|
张春凤
|
|
</view>
|
|
<view class="">
|
|
登录护理单元操作台
|
|
</view>
|
|
</view>
|
|
<view class="index-title-right">
|
|
|
|
<view v-for="(item,index) in ballList" :key="index">
|
|
<view class="ball-bgc" @click="jumpToIndex(index)">
|
|
<image class="ball-img" :src="item.url" />
|
|
</view>
|
|
</view>
|
|
<view v-for="(item,index) in iconTop" :key="index">
|
|
<view class="top-card" @click="clicktopright(index)">
|
|
<image class="top-card-img" :src="item.url" />
|
|
<view class="top-card-font">
|
|
{{ item.name }}
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="index-content">
|
|
<view class="index-content-leftMenus">
|
|
<view v-for="(item,index) in iconList" :key="index" class="blue-circle-pos">
|
|
<view class="blue-circle" v-show="index === menuIndex">
|
|
<image class="blue-circle-size" :src="`/static/index/ray.png`" />
|
|
</view>
|
|
<view class="red-pao" v-if="item.pao" @click="changeMenu(index)">
|
|
{{ item.pao > 99 ? `99+` : item.pao}}
|
|
</view>
|
|
<image class="left-img" :src="index === menuIndex ? item.targetUrl : item.url"
|
|
@click="changeMenu(index)" />
|
|
<view :class="index === menuIndex ? `left-img-font-target` :`left-img-font`"
|
|
@click="changeMenu(index)">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 首页 -->
|
|
<storeroomindex :isShow="menuIndex == -1" @nav="navMenu" />
|
|
<leidaindex :isShow="menuIndex==-2" />
|
|
<saoma :isShow="menuIndex==-3" />
|
|
<!-- <storeroomorders :isShow="menuIndex===1" /> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue';
|
|
import type { Link, buttonLink, iconTopLink } from "./index";
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|
// 首页
|
|
import storeroomindex from "@/component/Initialization/index.vue";
|
|
import leidaindex from "@/component/Initialization/leida.vue";
|
|
import saoma from "@/component/Initialization/saoma.vue";
|
|
// 订单页
|
|
// import storeroomorders from "@/component/storeroom/orders.vue"
|
|
// 暗黑模式
|
|
const darkFans = ref(false);
|
|
const menuIndex = ref(-1);
|
|
// 删除表格弹窗
|
|
const detailisopen = ref(false);
|
|
const detailisopacity = ref(false)
|
|
// 初始化左侧菜单列表
|
|
const iconList = ref<Link[]>([
|
|
{ url: '/static/index/lefticon/index.png', targetUrl: '/static/index/lefticontarget/blueindex.png', name: '服务考核', pao: 0 },
|
|
{ url: '/static/index/Warehousing/dingdan.png', targetUrl: '/static/index/Warehousing/dingdanblue.png', name: '实时监控', pao: 0 },
|
|
{ url: '/static/index/Warehousing/chuku.png', targetUrl: '/static/index/Warehousing/chukublue.png', name: '机构功能', pao: 5 },
|
|
{ url: '/static/index/Warehousing/pandian.png', targetUrl: '/static/index/Warehousing/pandianblue.png', name: '机构功能', pao: 0 },
|
|
{ url: '/static/index/Warehousing/jiankong.png', targetUrl: '/static/index/Warehousing/jiankongblue.png', name: '机构功能', pao: 0 },
|
|
{ url: '/static/index/lefticon/back.png', targetUrl: '/static/index/lefticontarget/blueback.png', name: '返回', pao: 0 }
|
|
]);
|
|
|
|
const iconTop = ref<iconTopLink[]>([
|
|
{ url: '/static/index/topright/title/0.png', name: '切换机构' },
|
|
{ url: '/static/index/topright/title/1.png', name: '修改密码' },
|
|
{ url: '/static/index/topright/title/2.png', name: '注销账号' },
|
|
])
|
|
|
|
// 上方小球
|
|
const ballList = ref([
|
|
{ url: '/static/index/topright/scan/00.png', targetUrl: '/static/index/topright/scan/01.png', name: '雷达扫描' },
|
|
{ url: '/static/index/topright/scan/10.png', targetUrl: '/static/index/topright/scan/11.png', name: '扫码添加' },
|
|
{ url: '/static/index/topright/scan/20.png', targetUrl: '/static/index/topright/scan/21.png', name: '手动录入' },
|
|
]);
|
|
const opendetail = () => {
|
|
detailisopen.value = true;
|
|
detailisopacity.value = false;
|
|
setTimeout(() => {
|
|
detailisopacity.value = true
|
|
}, 200)
|
|
}
|
|
// 变更菜单
|
|
const changeMenu = (index : number) => {
|
|
if (index === 5) {
|
|
uni.navigateBack()
|
|
return
|
|
}
|
|
menuIndex.value = index;
|
|
};
|
|
const clicktopright = (index : number) => {
|
|
if (index == 2) {
|
|
uni.navigateTo({
|
|
url: '/pages/login/login'
|
|
});
|
|
}
|
|
}
|
|
const jumpToIndex = (index : number) => {
|
|
switch (index) {
|
|
case 0:
|
|
menuIndex.value = -2;
|
|
break
|
|
case 1:
|
|
menuIndex.value = -3;
|
|
break
|
|
case 2:
|
|
menuIndex.value = -4;
|
|
break
|
|
default:
|
|
|
|
}
|
|
}
|
|
const navMenu = (index : number) => {
|
|
switch (index) {
|
|
case 0:
|
|
menuIndex.value = -2;
|
|
break
|
|
case 1:
|
|
menuIndex.value = -3;
|
|
break
|
|
case 2:
|
|
menuIndex.value = -4;
|
|
break
|
|
default:
|
|
|
|
}
|
|
}
|
|
// 生命周期钩子
|
|
onLoad(() => {
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.backgroundContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-image: url('/static/index/lightbgcnew.png');
|
|
background-size: cover;
|
|
background-position: center center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
//暗黑模式
|
|
.darkbackgroundContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-image: url('/static/index/background.png');
|
|
background-size: cover;
|
|
background-position: center center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.index-title {
|
|
display: flex;
|
|
width: calc(100% - 110rpx);
|
|
height: 130rpx;
|
|
justify-content: space-between;
|
|
// background-color: #fff;
|
|
margin: 20rpx 50rpx 0 60rpx;
|
|
|
|
.index-title-left {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
|
|
.index-title-left-img {
|
|
width: 75rpx;
|
|
height: 75rpx;
|
|
|
|
}
|
|
|
|
.index-title-left-font {
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.index-title-left-wel {
|
|
margin-left: 40rpx;
|
|
}
|
|
|
|
.index-title-left-weight {
|
|
font-weight: 700;
|
|
margin: 0 10rpx;
|
|
}
|
|
}
|
|
|
|
.index-title-right {
|
|
display: flex;
|
|
height: 100%;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
|
|
.top-card {
|
|
width: 180rpx;
|
|
height: 55rpx;
|
|
border-radius: 30rpx;
|
|
background-color: #E2E7FF;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20rpx;
|
|
|
|
.top-card-img {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
margin-right: 5rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.top-card-font {
|
|
font-size: 25rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.index-content {
|
|
width: 100%;
|
|
height: calc(100vh - 150rpx);
|
|
display: flex;
|
|
|
|
.index-content-leftMenus {
|
|
height: 100%;
|
|
width: 170rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
.left-img {
|
|
width: 93rpx;
|
|
height: 93rpx;
|
|
// margin: 50rpx 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.left-img-font {
|
|
margin-top: 10rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.left-img-font-target {
|
|
margin-top: 10rpx;
|
|
color: #0174D3;
|
|
}
|
|
|
|
.blue-circle-pos {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 230rpx;
|
|
|
|
.blue-circle {
|
|
position: absolute;
|
|
top: -50rpx;
|
|
left: -68rpx;
|
|
|
|
.blue-circle-size {
|
|
width: 170rpx;
|
|
height: 250rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.red-pao {
|
|
position: absolute;
|
|
top: 40rpx;
|
|
// right: 0;
|
|
left: 60rpx;
|
|
padding: 3rpx 10rpx;
|
|
background-color: #FF4C4E;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
border-radius: 20rpx;
|
|
z-index: 101;
|
|
}
|
|
|
|
.ball-bgc {
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
border-radius: 50%;
|
|
background-color: #E2E7FF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 25rpx;
|
|
|
|
.ball-img {
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
}
|
|
}
|
|
</style> |