feat: diy tabbar

uniapp/pages.json

@@ -190,11 +190,6 @@
 				"iconPath": "/static/images/tab_cal.png",
 				"selectedIconPath": "/static/images/tab_cal_s.png",
 				"text": "计算器"
-			},{
-				"pagePath": "pages/kanban/kanban",
-				"iconPath": "/static/images/tab_kanban.png",
-				"selectedIconPath": "/static/images/tab_kanban_s.png",
-				"text": "看板"
 			},
             {
 				"pagePath": "pages/policy/search",

uniapp/pages/index/index.vue

@@ -19,7 +19,8 @@
         <view v-else>
             <u-empty mode="permission" margin-top="180" icon-size="600" text="请使用企业身份登录"
                 src="/static/images/permission.png">
-                <router-link to="/pages/login/login" slot="bottom" class="flex row-center user-login white m-t-16 p-t-16 p-b-16 p-l-50 p-r-50">
+                <router-link to="/pages/login/login" slot="bottom"
+                    class="flex row-center user-login white m-t-16 p-t-16 p-b-16 p-l-50 p-r-50">
                     点击登录
                 </router-link>
             </u-empty>
@@ -30,6 +31,10 @@
             style="width: 200rpx; height: 200rpx; position: fixed; right: 0; bottom: 100rpx; display: none;">
             <image src="/static/images/icon_feedback.png" style="width: 100%; height: 100%;"></image>
         </router-link>
+
+
+        <u-tabbar :list="tabarList"></u-tabbar>
+
     </view>
 
 </template>
@@ -37,7 +42,8 @@
 <script>
     import {
         mapGetters,
-        mapActions
+        mapActions,
+        mapMutations
     } from 'vuex'
     import {
         pxToRpx
@@ -53,6 +59,12 @@
                 top: 172
             }
         },
+        onLoad() {
+            uni.setStorageSync('TABBAR_TYPE', 'map');
+            this.setTabarList({
+                type: 'map'
+            })
+        },
         onShow() {
             // this.getHomeFun();
             this.getUser();
@@ -64,6 +76,7 @@
             })
         },
         methods: {
+            ...mapMutations(["setTabarList"]),
             ...mapActions(['getUser']),
             topImageLoad(e) {
                 setTimeout(() => {
@@ -89,7 +102,7 @@
             }
         },
         computed: {
-            ...mapGetters(['userInfo', 'appConfig']),
+            ...mapGetters(['userInfo', 'appConfig', 'tabarList']),
         }
     }
 </script>

uniapp/pages/launch/launch.vue

@@ -1,104 +1,119 @@
 <template>
-	<view class="launch-bg" :style="[background]" @tap="launchApp()">
-		<image class="launch-img" mode="widthFix" :src="appConfig.mobile_start_page"></image>
-		<view class="img-datu">
+    <view class="launch-bg" :style="[background]" >
+        <image class="launch-img" mode="widthFix" :src="appConfig.mobile_start_page"></image>
+        <view class="flex-col col-center fixed w-full">
+            <image src="/static/images/map_bg.png" mode="widthFix" @tap="launchApp('/pages/index/index', 'map')"></image>
+            <image src="/static/images/policy_bg.png" mode="widthFix" style="margin-top: 150rpx;" @tap="launchApp('/pages/policy/index', 'policy')"></image>
+        </view>
+
+        <!-- <view class="img-datu">
 			<view class="jishi" :style="{ top: (sysInfo.statusBarHeight + 60) + 'px' }">
 				<text>跳过</text>
 				<text>{{countDownNum}}秒</text>
 			</view>
-		</view>
-	</view>
+		</view> -->
+
+    </view>
 
 </template>
 
 <script>
-	import {
-		mapGetters
-	} from 'vuex'
+    import {
+        mapGetters
+    } from 'vuex'
+
+    const app = getApp()
+    const homeItem = {
+        name: '启动页'
+    }
+    export default {
+        data() {
+            return {
+                countDownNum: 5,
+                timer: null,
+            }
+        },
+        onLoad(options) {
+            //          console.log('token' + this.appConfig.token)
+            // this.timer = setInterval(() => {
+            // 	if (this.countDownNum == 0) {
+            // 		clearInterval(this.timer)
+            // 		this.launchApp()
+            // 	} else {
+            // 		this.countDownNum = this.countDownNum - 1;
+            // 	}
+            // }, 1000)
+        },
+        onUnload() {},
+        onShow() {},
+        onHide() {},
+        methods: {
+            launchApp(url, type) {
 
-	const app = getApp()
-	const homeItem = {
-		name: '启动页'
-	}
-	export default {
-		data() {
-			return {
-				countDownNum: 5,
-				timer: null,
-			}
-		},
-		onLoad(options) {
-            console.log('token' + this.appConfig.token)
-			this.timer = setInterval(() => {
-				if (this.countDownNum == 0) {
-					clearInterval(this.timer)
-					this.launchApp()
-				} else {
-					this.countDownNum = this.countDownNum - 1;
-				}
-			}, 1000)
-		},
-		onUnload() {},
-		onShow() {
-		},
-		onHide() {},
-		methods: {
-			launchApp() {
-                
-				if (this.timer) {
-					clearInterval(this.timer)
-				}
-				uni.switchTab({
-					url: '/pages/index/index'
-				})
-			},
-		},
-		computed: {
-			...mapGetters(['sysInfo', 'inviteCode', 'appConfig']),
-			background() {
-				const {
-					mobile_start_bg
-				} = this.appConfig
-				return mobile_start_bg ? {
-					'background-image': `url(${mobile_start_bg})`,
-					'background-size': 'cover'
-				} : {}
-			},
-		}
-	}
+                // if (this.timer) {
+                // 	clearInterval(this.timer)
+                // }
+                uni.setStorageSync('TABBAR_TYPE', type);
+                uni.switchTab({
+                    url: url
+                })
+            },
+        },
+        computed: {
+            ...mapGetters(['sysInfo', 'inviteCode', 'appConfig']),
+            background() {
+                const {
+                    mobile_start_bg
+                } = this.appConfig
+                return mobile_start_bg ? {
+                    'background-image': `url(${mobile_start_bg})`,
+                    'background-size': 'cover'
+                } : {}
+            },
+        }
+    }
 </script>
 
 <style lang="scss">
-	page {
-		padding: 0;
-		height: 100%;
-	}
+    page {
+        padding: 0;
+        height: 100%;
+    }
+
+    .fixed {
+        position: fixed;
+        top: 660rpx;
+
+        image {
+            border-radius: 10px 10px 10px 10px;
+        }
+    }
 
-	.launch-bg {
+    .launch-bg {
 
-		height: 100%;
-	}
+        height: 100%;
+    }
 
-	.launch-img {
-		width: 100%;
-	}
+    .launch-img {
+        width: 100%;
+    }
 
-	.img-datu .jishi {
-		background-color: rgba(0, 0, 0, 0.4);
-		position: fixed;
-		top: 200rpx;
-		right: 50rpx;
-		border-radius: 50%;
-		width: 100rpx;
-		height: 100rpx;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
+    .img-datu .jishi {
+        background-color: rgba(0, 0, 0, 0.4);
+        position: fixed;
+        top: 200rpx;
+        right: 50rpx;
+        border-radius: 50%;
+        width: 100rpx;
+        height: 100rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
 
-	.img-datu .jishi text {
-		color: #fff;
-		font-size: 24rpx;
-	}
+    .img-datu .jishi text {
+        color: #fff;
+        font-size: 24rpx;
+    }
 </style>

uniapp/pages/policy/index.vue

@@ -274,6 +274,8 @@
                 </view>
             </view>
         </view>
+        
+         <u-tabbar :list="tabarList"></u-tabbar>
     </view>
 
 </template>
@@ -281,8 +283,9 @@
 <script>
     import cusSelects from '@/components/cus-selects-fan/cus-selects-fan.vue'
     import {
-        mapGetters,
-        mapActions
+     mapGetters,
+     mapActions,
+     mapMutations
     } from 'vuex'
     import {
         submitSurveyEnterprise,
@@ -437,6 +440,10 @@
             this.info.isStandard = this.isStandard.value
 
             this.captchaImg = getCaptcha()
+            uni.setStorageSync('TABBAR_TYPE', 'policy');
+            this.setTabarList({
+                type: 'policy'
+            })
         },
         onShow() {
             // this.getHomeFun();
@@ -450,6 +457,7 @@
             // })
         },
         methods: {
+             ...mapMutations(["setTabarList"]),
             refreshCaptcha() {
                 this.captchaImg = getCaptcha()
                 this.$forceUpdate();
@@ -589,7 +597,7 @@
             },
         },
         computed: {
-            ...mapGetters(['appConfig']),
+             ...mapGetters(['appConfig', 'tabarList']),
         }
     }
 </script>

uniapp/pages/policy/search.vue

@@ -73,7 +73,7 @@
 				<loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
 			</mescroll-uni>
 		</view>
-
+     <u-tabbar :list="tabarList"></u-tabbar>
 	</view>
 
 </template>
@@ -83,7 +83,8 @@
 	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
 	import {
 		mapGetters,
-		mapActions
+		mapActions,
+		mapMutations
 	} from 'vuex'
 	import {
 		policyCategory,
@@ -150,10 +151,15 @@
 		},
 		onLoad() {
 			this.getCategoryFun()
+            let type = uni.getStorageSync('TABBAR_TYPE')
+            this.setTabarList({
+                type: type
+            })
 		},
 		onHide() {},
 		onPullDownRefresh() {},
 		methods: {
+                 ...mapMutations(["setTabarList"]),
 			refresh() {
 				this.show = false
 				this.mescroll.resetUpScroll()
@@ -241,7 +247,7 @@
 			},
 		},
 		computed: {
-			...mapGetters(['appConfig']),
+               ...mapGetters(['appConfig', 'tabarList']),
 			positionTop() {
 				return this.top
 			},

uniapp/pages/user/user.vue

@@ -66,12 +66,13 @@
         <view v-else>
             <u-empty mode="permission" margin-top="180" icon-size="600" text="请使用企业身份登录"
                 src="/static/images/permission.png">
-                <router-link to="/pages/login/login" slot="bottom" class="flex row-center user-login white m-t-16 p-t-16 p-b-16 p-l-50 p-r-50">
+                <router-link to="/pages/login/login" slot="bottom"
+                    class="flex row-center user-login white m-t-16 p-t-16 p-b-16 p-l-50 p-r-50">
                     点击登录
                 </router-link>
             </u-empty>
         </view>
-
+        <u-tabbar :list="tabarList"></u-tabbar>
     </view>
 </template>
 
@@ -79,7 +80,8 @@
     import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
     import {
         mapGetters,
-        mapActions
+        mapActions,
+        mapMutations
     } from 'vuex'
     import {
         authLogout
@@ -104,7 +106,9 @@
             oMeta.name = "referrer";
             oMeta.content = "no-referrer"
             document.getElementsByTagName('head')[0].appendChild(oMeta);
-
+            this.setTabarList({
+                type: 'map'
+            })
         },
 
         onShow() {
@@ -126,6 +130,7 @@
             this.navBg = percent
         },
         methods: {
+            ...mapMutations(["setTabarList"]),
             ...mapActions(['getConfig', 'getUser']),
             logout() {
                 authLogout().then(res => {
@@ -145,7 +150,7 @@
             },
         },
         computed: {
-            ...mapGetters(['userInfo', 'appConfig']),
+            ...mapGetters(['userInfo', 'appConfig', 'tabarList']),
             background() {
                 const {
                     mobile_user_bg
@@ -229,6 +234,7 @@
             border: 2rpx solid #DD4250;
         }
     }
+
     .user-login {
         background: #DD4250;
         box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(243, 113, 113, 0.39);

uniapp/store/getters.js

@@ -5,5 +5,6 @@ export default {
   isLogin: state => !!state.app.token,
   inviteCode: state => state.app.userInfo.distribution_code || "",
   appConfig: state => state.app.config,
-  sysInfo: state => state.app.sysInfo
+  sysInfo: state => state.app.sysInfo,
+  tabarList: state => state.app.tabarList
 };

uniapp/store/modules/app.js

@@ -14,7 +14,7 @@ import {
     baseURL,
     basePath
 } from '@/config/app'
-
+import tabBar from '@/utils/tabBar.js'
 
 const state = {
     config: Cache.get(CONFIG) || {
@@ -27,9 +27,13 @@ const state = {
     userInfo: Cache.get('USERINFO') || {},
     token: Cache.get(TOKEN) || null,
     sysInfo: {},
+    tabarList: tabBar['map'], // 动态底部导航栏
 };
 
 const mutations = {
+    setTabarList(state, opt) {
+        state.tabarList = tabBar[opt.type] // 动态底部导航栏
+    },
     login(state, opt) {
         console.log('登录成功')
         console.log(opt)

uniapp/utils/tabBar.js

@@ -0,0 +1,41 @@
+// 人才图谱
+const map = [{
+        "pagePath": "pages/index/index",
+        "iconPath": "/static/images/tab_home.png",
+        "selectedIconPath": "/static/images/tab_home_s.png",
+        "text": "图谱"
+    },
+    {
+        "pagePath": "pages/policy/search",
+        "iconPath": "/static/images/tab_policy.png",
+        "selectedIconPath": "/static/images/tab_policy_s.png",
+        "text": "政策"
+    },
+    {
+        "pagePath": "pages/user/user",
+        "iconPath": "/static/images/tab_user.png",
+        "selectedIconPath": "/static/images/tab_user_s.png",
+        "text": "我的"
+    }
+]
+// 人才政策计算器
+
+
+const policy = [{
+        "pagePath": "pages/policy/index",
+        "iconPath": "/static/images/tab_cal.png",
+        "selectedIconPath": "/static/images/tab_cal_s.png",
+        "text": "计算器"
+    },
+    {
+        "pagePath": "pages/policy/search",
+        "iconPath": "/static/images/tab_policy.png",
+        "selectedIconPath": "/static/images/tab_policy_s.png",
+        "text": "政策"
+    }
+]
+
+export default {
+    map,
+    policy
+}