qyh
/
freight-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: tabbar 切换优化

This commit is contained in:
admin 2024-07-16 14:27:56 +08:00
parent e04464657e
commit b6838f3f8d
6 changed files with 785 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/TabBar/index.vue
View File

@ -65,14 +65,16 @@ const state = reactive({
text: "统计",
icon: "count.png",
activeIcon: "count_active.png",
path: "/pagesStatistics/index",
// path: "/pagesStatistics/index",
path: "/pagesHome/count",
},
{
text: "配置",
icon: "config.png",
activeIcon: "config_active.png",
path: "/pagesConfig/index",
// path: "/pagesConfig/index",
path: "/pagesHome/config",
},
{
text: "配置旧",
@ -84,17 +86,18 @@ const state = reactive({
text: "我的",
icon: "profile.png",
activeIcon: "profile_active.png",
path: "/pagesLogin/profile/index",
// path: "/pagesLogin/profile/index",
path: "/pagesHome/profile",
},
],
});
const handleClick = (item: tabBar) => {
uni.reLaunch({
url: item.path, // 要跳转到的页面路径
});
// uni.switchTab({
// uni.reLaunch({
// url: item.path, // 要跳转到的页面路径
// });
uni.switchTab({
url: item.path, // 要跳转到的页面路径
});
};
onLaunch(() => {

104
src/pages.json
View File

@ -19,6 +19,27 @@
"navigationBarTitleText": "工作台"
}
},
{
"path": "pagesHome/count",
"style": {
"navigationStyle": "custom", // 控制头部是否显示
"navigationBarTitleText": "统计"
}
},
{
"path": "pagesHome/config",
"style": {
"navigationStyle": "custom", // 控制头部是否显示
"navigationBarTitleText": "配置"
}
},
{
"path": "pagesHome/profile",
"style": {
"navigationStyle": "custom", // 控制头部是否显示
"navigationBarTitleText": "我的"
}
},
{
"path": "pagesHome/index1",
"style": {
@ -56,13 +77,13 @@
"navigationBarTitleText": "消息中心"
}
},
{
"path": "profile/index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "个人中心"
}
},
// {
// "path": "profile/index",
// "style": {
// "navigationStyle": "custom",
// "navigationBarTitleText": "个人中心"
// }
// },
{
"path": "profile/baseinfo",
"style": {
@ -72,18 +93,6 @@
}
]
},
// {
// "root": "pagesHome",
// "pages": [
// {
// "path": "index",
// "style": {
// "navigationStyle": "custom", // 控制头部是否显示
// "navigationBarTitleText": "工作台"
// }
// }
// ]
// },
{
"root": "pagesReceive",
"pages": [
@ -187,13 +196,13 @@
{
"root": "pagesStatistics",
"pages": [
{
"path": "index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "数据统计"
}
},
// {
// "path": "index",
// "style": {
// "navigationStyle": "custom",
// "navigationBarTitleText": "数据统计"
// }
// },
{
"path": "receivePanel",
"style": {
@ -259,13 +268,13 @@
{
"root": "pagesConfig",
"pages": [
{
"path": "index",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": "配置"
}
},
// {
// "path": "index",
// "style": {
// "navigationStyle": "custom",
// "navigationBarTitleText": "配置"
// }
// },
{
"path": "printTemplate",
"style": {
@ -489,39 +498,34 @@
}
]
}
// {
// "root": "uni_modules",
// "pages": [
// {
// "path": "lime-echart/components/l-echart/l-echart",
// "style": {
// "navigationBarTitleText": "echart"
// }
// }
// ]
// }
],
"tabbar": {
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#00D2E3",
"custom": true, //隐藏官方选项卡
"height": "0px",
"list": [
{
"pagePath": "/pagesHome/index",
"pagePath": "pagesHome/index",
// 不能用网络图片
// "iconPath": "https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/110/tabBar/home.png",
// "selectedIconPath": "https://backend-common.obs.cn-east-3.myhuaweicloud.com/static/110/tabBar/home_active.png",
"text": "工作台"
},
{
"pagePath": "/pagesStatistics/index",
"pagePath": "pagesHome/count",
"text": "统计"
},
{
"pagePath": "/pagesConfig/index",
"pagePath": "pagesHome/config",
"text": "配置"
},
{
"pagePath": "/pagesHome/index1",
"pagePath": "pagesHome/index1",
"text": "配置旧"
},
{
"pagePath": "/pagesLogin/profile/index",
"pagePath": "pagesHome/profile",
"text": "我的"
}
]

246
src/pagesHome/config.vue Normal file
View File

@ -0,0 +1,246 @@
<template>
<NavBar :count="0" :title="'配置'"></NavBar>
<Box
v-if="
isShowModule(list[0].child.concat(list[1].child))
"
:isShow="true"
>
<view
v-for="(item, index) in list"
:key="index"
v-show="isShowModule(item.child)"
>
<view class="title">
<Title :title="item.title" />
</view>
<view class="box-content">
<view
v-for="(child, index) in item.child"
:key="index"
@click="(child as any).fn(child)"
v-show="isShowModule([{ title: child.title }])"
:class="{ box: isShowModule([{ title: child.title }]) }"
>
<view v-if="isShowModule([{ title: child.title }])">
<up-image
:src="`${url}/static/110/config/${child.icon}`"
mode="aspectFill"
width="60rpx"
height="60rpx"
></up-image>
</view>
<view v-if="isShowModule([{ title: child.title }])">{{
child.title
}}</view>
</view>
</view>
</view>
</Box>
<!-- 当收货 出货 常用app全部为空 显示暂无权限 -->
<up-empty
v-else
mode="permission"
icon="http://cdn.uviewui.com/uview/empty/permission.png"
:text="'暂无相关权限, 请联系管理员'"
>
</up-empty>
<TabBar :select="'配置'"></TabBar>
</template>
<script setup lang="ts">
import Box from "@/components/Box/index.vue";
import Title from "@/components/Title/index.vue";
import { useMemberStore } from "@/store/index";
import { ProfileApi } from "@/services";
import pinia from "@/store";
import { url } from "@/utils/data";
const store = useMemberStore(pinia);
const list = reactive([
{
title: "参数管理",
child: [
{
icon: "1.png",
title: "收货分类",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/receiveType", // 要跳转到的页面路径
});
},
},
{
icon: "4.png",
title: "收货产品",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/receiveProduct", // 要跳转到的页面路径
});
},
},
{
icon: "3.png",
title: "出货分类",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/shipmentType", // 要跳转到的页面路径
});
},
},
{
icon: "2.png",
title: "出货产品",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/shipmentProduct", // 要跳转到的页面路径
});
},
},
{
icon: "5.png",
title: "供应商分类",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/supplierType", // 要跳转到的页面路径
});
},
},
{
icon: "6.png",
title: "供应商管理",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/supplierMgt", // 要跳转到的页面路径
});
},
},
{
icon: "7.png",
title: "客户管理",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/customerMgt", // 要跳转到的页面路径
});
},
},
{
icon: "8.png",
title: "库存卡管理",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/stockCard", // 要跳转到的页面路径
});
},
},
{
icon: "9.png",
title: "人员管理",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/user", // 要跳转到的页面路径
});
},
},
{
icon: "10.png",
title: "权限管理",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/role", // 要跳转到的页面路径
});
},
},
],
},
{
title: "货场管理",
child: [
{
icon: "11.png",
title: "打印模板",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesConfig/printTemplate", // 要跳转到的页面路径
});
},
},
{
icon: "12.png",
title: "其他配置",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesConfig/otherConfig", // 要跳转到的页面路径
});
},
},
],
},
]);
// 收货、出货、常用app是否显示
const isShowModule = (list: any) => {
let flag = false;
list.forEach((item: any) => {
if (store.profile.menusNameList.indexOf(item.title) > -1) {
flag = true;
return;
}
});
return flag;
};
onMounted(() => {
// 重新获取权限
ProfileApi.getUserInfo().then((res: any) => {
if (res.code === 200) {
store.setProfile({ ...res.data, token: store.profile.token });
}
});
});
</script>
<style lang="scss" scoped>
.title {
line-height: 80rpx;
padding: 0rpx 20rpx;
&::before {
content: "";
position: absolute;
margin-top: 13px;
margin-left: 0rpx;
width: 6rpx;
height: 26rpx;
background: #22d594;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 3rpx;
}
}
.box-content {
display: flex;
padding: 0rpx 20rpx;
flex-wrap: wrap;
.box {
width: 140rpx;
height: 140rpx;
border-radius: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 26rpx;
color: #000000;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
> view {
display: grid;
place-content: center;
width: 100%;
}
}
> .box + .box {
margin-left: 32rpx;
}
.box:nth-child(4n+1) {
margin-left: 0rpx;
}
}
</style>

280
src/pagesHome/count.vue Normal file
View File

@ -0,0 +1,280 @@
<template>
<NavBar :count="0" :title="'数据统计'"></NavBar>
<Box
v-if="
isShowModule(list[0].child.concat(list[1].child).concat(list[2].child))
"
:isShow="true"
>
<view
v-for="(item, index) in list"
:key="index"
v-show="isShowModule(item.child)"
>
<view class="title" :class="item.color">
<Title :title="item.title" />
</view>
<view class="box-content">
<view
v-for="(child, index) in item.child"
:key="index"
@click="(child as any).fn(child)"
v-show="isShowModule([{ title: child.title }])"
:class="{ box: isShowModule([{ title: child.title }]) }"
>
<view v-if="isShowModule([{ title: child.title }])">
<up-image
:src="`${url}/static/110/count/${child.icon}`"
mode="aspectFill"
width="60rpx"
height="60rpx"
></up-image>
</view>
<view v-if="isShowModule([{ title: child.title }])">{{
child.title
}}</view>
</view>
</view>
</view>
</Box>
<!-- 当收货 出货 常用app全部为空 显示暂无权限 -->
<up-empty
v-else
mode="permission"
icon="http://cdn.uviewui.com/uview/empty/permission.png"
:text="'暂无相关权限, 请联系管理员'"
>
</up-empty>
<TabBar :select="'统计'"></TabBar>
</template>
<script setup lang="ts">
import Box from "@/components/Box/index.vue";
import Title from "@/components/Title/index.vue";
import { useMemberStore } from "@/store/index";
import { ProfileApi } from "@/services";
import pinia from "@/store";
import { url } from "@/utils/data";
const store = useMemberStore(pinia);
const list = reactive([
{
title: "收货数据",
color: "green",
child: [
{
icon: "1.png",
title: "收货汇总",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesStatistics/receivePanel", // 要跳转到的页面路径
});
},
},
{
icon: "2.png",
title: "收货明细",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/receiveDetail", // 要跳转到的页面路径
});
},
},
{
icon: "3.png",
title: "收货作废",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/receiveCl", // 要跳转到的页面路径
});
},
},
{
icon: "4.png",
title: "供应商排行",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesStatistics/supplierRanking", // 要跳转到的页面路径
});
},
},
],
},
{
title: "出货数据",
color: "blue",
child: [
{
icon: "5.png",
title: "出货汇总",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesStatistics/shipmentPanel", // 要跳转到的页面路径
});
},
},
{
icon: "6.png",
title: "出货明细",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/shipmentDetail", // 要跳转到的页面路径
});
},
},
{
icon: "7.png",
title: "出货作废",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/shipmentCl", // 要跳转到的页面路径
});
},
},
{
icon: "8.png",
title: "客户排行",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesStatistics/customerRanking", // 要跳转到的页面路径
});
},
},
],
},
{
title: "我的账本",
color: "orange",
child: [
{
icon: "10.png",
title: "供应商对账",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesStatistics/supplierChecking", // 要跳转到的页面路径
});
},
},
{
icon: "11.png",
title: "客户对账",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesStatistics/customerChecking", // 要跳转到的页面路径
});
},
},
{
icon: "12.png",
title: "付款明细",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/paymentDetail", // 要跳转到的页面路径
});
},
},
{
icon: "13.png",
title: "收款明细",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesApp/incomeDetail", // 要跳转到的页面路径
});
},
},
{
icon: "14.png",
title: "经营概况",
fn: (item: any) => {
uni.navigateTo({
url: "/pagesStatistics/businessOverview", // 要跳转到的页面路径
});
},
},
],
},
]);
// 收货、出货、常用app是否显示
const isShowModule = (list: any) => {
let flag = false;
list.forEach((item: any) => {
if (store.profile.menusNameList.indexOf(item.title) > -1) {
flag = true;
return;
}
});
return flag;
};
onMounted(() => {
// 重新获取权限
ProfileApi.getUserInfo().then((res: any) => {
if (res.code === 200) {
store.setProfile({ ...res.data, token: store.profile.token });
}
});
});
</script>
<style lang="scss" scoped>
.title {
line-height: 80rpx;
padding: 0rpx 20rpx;
&::before {
content: "";
position: absolute;
margin-top: 13px;
margin-left: 0rpx;
width: 6rpx;
height: 26rpx;
background: #22d594;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 3rpx;
}
}
.green {
&::before {
background: #22d594;
}
}
.blue {
&::before {
background: rgba(34, 114, 213, 1);
}
}
.orange {
&::before {
background: rgba(255, 120, 43, 1);
}
}
.box-content {
display: flex;
padding: 0rpx 20rpx;
flex-wrap: wrap;
.box {
width: 140rpx;
height: 140rpx;
border-radius: 26rpx;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 26rpx;
color: #000000;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
> view {
display: grid;
place-content: center;
width: 100%;
}
}
> .box + .box {
margin-left: 32rpx;
}
.box:nth-child(5n) {
margin-left: 0rpx;
}
}
</style>

194
src/pagesHome/profile.vue Normal file
View File

@ -0,0 +1,194 @@
<template>
<NavBar :count="0" :title="'个人中心'"></NavBar>
<Box>
<view class="profile">
<view>
<image
class="bg"
:src="`${url}/static/pages/profile/bg.png`"
/>
</view>
<view class="baseinfo">
<view class="head">
<image
:src="`${url}/static/pages/profile/user.png`"
class="user"
></image>
<view>
<view>
<text class="name">{{ profile.name || "-" }}</text>
</view>
<view>
<text class="company">{{ profile.phone || "-" }}</text>
</view>
</view>
</view>
<view class="content">
<u-list :height="'200px'">
<u-list-item v-for="(item, index) in list" :key="index">
<u-cell
:title="item.name"
arrow-direction="right"
isLink
:url="item.path"
:border="false"
@click="hanldeClick(item)"
>
<template #icon>
<view style="width: 40rpx">
<image
:src="`${url}/static/pages/profile/${item.icon}`"
mode="widthFix"
/>
</view>
</template>
</u-cell>
</u-list-item>
</u-list>
</view>
</view>
</view>
</Box>
<TabBar :select="'我的'"></TabBar>
<SmallModal
:title="'确认退出吗？'"
:content="'退出后将返回至登陆页'"
:okText="'确认退出'"
:isMain="true"
:show="isShowCancelModal"
@handleModal="(v:boolean) => {handleModal(v)}"
@handleOk="handleOk()"
/>
</template>
<script setup lang="ts">
import { ProfileApi } from "@/services/index";
import { reactive } from "vue";
import { useMemberStore } from "@/store/index";
import SmallModal from "@/components/Modal/smallModal.vue";
import Box from "@/components/Box/index.vue";
import pinia from "@/store";
import {url} from "@/utils/data";
const isShowCancelModal = ref(false);
const handleModal = (v: boolean) => {
isShowCancelModal.value = v;
};
const handleOk = () => {
ProfileApi.logOut().then((res: any) => {
if (res.code === 200) {
uni.reLaunch({
url: "/pagesLogin/login/index", // 要跳转到的页面路径
});
}
});
};
const store = useMemberStore(pinia);
const profile = store.profile.userInfo;
const list = reactive([
{
name: "个人信息",
icon: "1.png",
path: "/pagesLogin/profile/baseinfo",
},
{
name: "用户协议",
icon: "4.png",
},
{
name: "隐私政策",
icon: "5.png",
},
{
name: "退出登录",
icon: "3.png",
path: "",
},
]);
const hanldeClick = (item: any) => {
if (item.name === "退出登录") {
handleModal(true);
} else if (item.name === "用户协议") {
openDoc('爱梵达用户服务协议')
} else if (item.name === "隐私政策") {
openDoc(item.name)
}
};
const openDoc = (item: string) => {
//文件预览
uni.downloadFile({
url: `${url}/static/pages/login/${item}.docx`,
success: function (res) {
setTimeout(
() =>
uni.openDocument({
filePath: res.tempFilePath,
showMenu: false,
success: function () {
console.log("打开文档成功");
},
fail: function () {
uni.showToast({
title: "暂不支持此类型",
duration: 2000,
icon: "none",
});
},
}),
100
);
},
fail: function (res) {
console.log(res); //失败
},
});
};
</script>
<style lang="scss">
.profile {
.bg {
width: 100%;
position: absolute;
top: 0rpx;
z-index: -1;
}
.baseinfo {
padding: 25.64rpx;
.head {
display: flex;
align-items: center;
margin-left: 41rpx;
.user {
width: 110.9rpx;
height: 110.9rpx;
margin-right: 20.51rpx;
}
.name {
font-size: 27rpx;
font-family: Source Han Sans CN;
font-weight: 500;
color: #000000;
}
.company {
font-size: 21rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #000000;
}
}
.content {
background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(5, 68, 37, 0.12);
border-radius: 13rpx;
padding: 28.21rpx 21.15rpx;
margin-top: 24.36rpx;
image:nth-child(1) {
width: 100%;
}
}
}
}
</style>

2
src/uni.scss
View File

@ -22,7 +22,7 @@ $u-primary: #00D2E3 !important;
$uni-color-primary: #00D2E3; // #007aff
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
$uni-color-error: #302423;
/* 文字基本颜色 */
$uni-text-color: #333; // 基本色