From 3c738f4fe2762bba8087e5a22fc0dc06560eab0e Mon Sep 17 00:00:00 2001
From: linwe <872216996@qq.com>
Date: Thu, 08 Aug 2024 10:01:17 +0800
Subject: [PATCH] 三色任务与自查任务
---
components/tabBar/tabBar.vue | 139 +++++++++++-----------------------------------
1 files changed, 34 insertions(+), 105 deletions(-)
diff --git a/components/tabBar/tabBar.vue b/components/tabBar/tabBar.vue
index 1c20505..d8e8d2e 100644
--- a/components/tabBar/tabBar.vue
+++ b/components/tabBar/tabBar.vue
@@ -1,22 +1,11 @@
<template>
<view>
- <u-tabbar class="custom-tabbar" zIndex="100" :value="current" :fixed="true" :active-color="activeColor"
+ <u-tabbar class="custom-tabbar" zIndex="9999" :value="current" :fixed="true" :active-color="activeColor"
:inactive-color="inactiveColor">
- <u-tabbar-item text="首页" @click="changeTabbar('/pages/home/index')">
- <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-01-selected.png"></image>
- <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-01.png"></image>
- </u-tabbar-item>
- <!-- <u-tabbar-item text="圈子">
- <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-02-selected.png"></image>
- <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-02.png"></image>
- </u-tabbar-item> -->
- <u-tabbar-item text="驾驶舱" v-if="roleType == 2" @click="changeTabbar('/pages/statistics/index')">
- <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-02-selected.png"></image>
- <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-02.png"></image>
- </u-tabbar-item>
- <u-tabbar-item text="个人中心" @click="changeTabbar('/pages/user/center')">
- <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-03-selected.png"></image>
- <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-03.png"></image>
+ <u-tabbar-item :text="item.name" @click="changeTabbar(item.url,index,item.name)"
+ v-for="(item,index) in tabbarList" :key="index">
+ <image class="tabbar-icon" slot="active-icon" :src="item.iconPathSelected"></image>
+ <image class="tabbar-icon" slot="inactive-icon" :src="item.iconPath"></image>
</u-tabbar-item>
</u-tabbar>
</view>
@@ -26,117 +15,57 @@
export default {
props: {
current: Number,
- isShowTabbarItem: false
+ list: {
+ type: Array,
+ default: () => []
+ }
},
data() {
return {
-
- roleType: "",
- curRole: {},
- inactiveColor: '#909399',
- activeColor: '#328CFA',
-
- curTabList: [{
- name: '首页',
- iconPathSelected: '/static/img/tabbar-01-selected.png',
- iconPath: '/static/img/tabbar-01.png',
- // icon: "home",
- url: '/pages/home/index'
- },
-
- {
- name: '圈子',
- iconPathSelected: '/static/img/tabbar-02-selected.png',
- iconPath: '/static/img/tabbar-02.png',
- // icon: "home",
- url: '/pages/home/index'
- },
- {
- name: '驾驶舱',
- iconPathSelected: '/static/img/tabbar-02-selected.png',
- iconPath: '/static/img/tabbar-02.png',
- // icon: "home",
- url: '/pages/statistics/index'
- },
-
-
- {
- name: '个人中心',
- iconPathSelected: '/static/img/tabbar-03-selected.png',
- iconPath: '/static/img/tabbar-03.png',
- // icon: "account-fill",
- url: '/pages/user/center'
- }
- ]
+ tabbarList: [],
+ inactiveColor: '#C7CED7',
+ activeColor: '#017BFC',
+ // activeColor: '#003399'
}
},
watch: {
- 'curRole.roleName': {
- handler(newVal) {
- if (newVal == "民警") {
- this.roleType = 2
- }
- },
- deep: true,
- immediate: true
- },
-
-
- tabList: {
+ list: {
handler(newVal) {
if (newVal && newVal.length > 0) {
- this.tabList = newVal
+ this.tabbarList = newVal;
+ if (uni.getStorageSync("activeRole").roleName == "民警") {
+ this.inactiveColor = "#AFB8C3";
+ this.activeColor = "#003399";
+ } else {
+ this.inactiveColor = "#C7CED7"
+ this.activeColor = "#017BFC";
+ }
}
},
deep: true,
immediate: true
- },
- currentTab: {
- handler(newVal) {
- this.currentTab = newVal
- },
- deep: true,
- immediate: true
- },
-
+ }
},
- mounted() {
- this.curRole = uni.getStorageSync("activeRole");
-
- // this.getMessage()
- },
- destroyed() {
-
- },
methods: {
-
-
- changeTabbar(url) {
- uni.reLaunch({
+ changeTabbar(url, index) {
+ if (this.current == index) return
+ uni.switchTab({
url
})
- },
-
-
- change(e) {
- console.log(e);
- uni.reLaunch({
- url: this.curTabList[e].url,
- complete: (res) => {
- console.log("===>", res);
- }
- })
- // this.$emit("change", this.curTabList[e].url)
- },
-
+ this.$emit("change", index)
+ }
}
}
</script>
<style lang="scss" scoped>
.tabbar-icon {
- width: 45rpx;
- height: 45rpx;
+ width: 56rpx;
+ height: 56rpx;
+ }
+
+ /deep/.u-tabbar {
+ box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(107, 134, 159, 0.2);
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3