新增可变tabbar

src/App.vue

@@ -1,3 +1,4 @@
+
 <script>
 export default {
   onLaunch: function (option) {
@@ -65,6 +66,7 @@ export default {
   },
   onLoad() {},
   onShow(option) {
+    uni.hideTabBar()
     uni.setStorageSync("cold_startup_option", option);
     console.log(option);
   },

src/api/modules/open.js

@@ -66,6 +66,13 @@ const open = {
             url: "open-api/system/dict/data/type/" + dictType
         })
 
+    },
+    //根据参数键名查询参数值
+    systemDictDataConfigKey(configKey) {
+        return request({
+            url: "open-api/system/dict/data/configKey/" + configKey
+        })
+
     },
     //八字结果
     openApiGanZhiGet8ziByDate(params) {

src/custom-tab-bar/index.js

@@ -0,0 +1,112 @@
+
+Component({
+	data: {
+		active: 0,
+		isBazi:false,
+		list2: [
+			{
+				"pagePath": "/pages/carVideo/index",
+				"iconPath": "/static/imgs/car.png",
+				"selectedIconPath": "/static/imgs/car-active.png",
+				"text": "驾考"
+			},
+			{
+				"pagePath": "/pages/teacherVideo/index",
+				"iconPath": "/static/imgs/video.png",
+				"selectedIconPath": "/static/imgs/video-active.png",
+				"text": "教学视频"
+			},
+
+			{
+				"pagePath": "/pages/user/index",
+				"iconPath": "/static/imgs/user.png",
+				"selectedIconPath": "/static/imgs/user-active.png",
+				"text": "我的"
+			}
+		],
+		list: [{
+			"pagePath": "/pages/carVideo/index",
+			"iconPath": "/static/imgs/car.png",
+			"selectedIconPath": "/static/imgs/car-active.png",
+			"text": "驾考"
+		},
+		{
+			"pagePath": "/pages/teacherVideo/index",
+			"iconPath": "/static/imgs/video.png",
+			"selectedIconPath": "/static/imgs/video-active.png",
+			"text": "教学视频"
+		},
+		{
+			"pagePath": "/pages/fortune/index",
+			"iconPath": "/static/imgs/fortune.png",
+			"selectedIconPath": "/static/imgs/fortune-active.png",
+			"text": "运势"
+		},
+		{
+			"pagePath": "/pages/user/index",
+			"iconPath": "/static/imgs/user.png",
+			"selectedIconPath": "/static/imgs/user-active.png",
+			"text": "我的"
+		}]
+	},
+	attached(){
+		let that =this
+		const baseUrl = wx.getSystemInfoSync().platform === 'devtools' ? 'https://nbjk1.zzxcx.net/nbjk-admin/' : 'https://nbjk.zzxcx.net/nbjk-admin/'
+
+		wx.request({
+			url:baseUrl+"open-api/system/dict/data/configKey/IS_BAZI",
+			method:'GET',
+			success(res){
+				console.log('八字是否开启',res.data.data)
+				if(res.data.data=='1'){
+				
+					that.setData({
+						isBazi:true
+					})
+				}
+				else{
+					that.setData({
+						isBazi:false
+					})
+				}
+			
+
+			}
+		})
+	},
+
+	methods: {
+		switchTab(e) {
+			const data = e.currentTarget.dataset
+			const url = data.path
+
+			wx.switchTab({ url })
+			// this.setData({
+			// 	active: data.index
+			// })
+
+		},
+		onChange(event) {
+			console.log('触发切换tabbar')
+			this.setData({ active: event.detail });
+			const list = Object.assign([], this.data.list)
+			list[event.detail].icon =
+				this.setData({
+					list
+				})
+			wx.switchTab({
+				url: this.data.list[event.detail].url
+			});
+		},
+
+		init() {
+			const page = getCurrentPages().pop();
+			console.log(this.data.list)
+			const active = this.data.list.findIndex(item => item.pagePath === `/${page.route}`)
+			console.log(active, page.route)
+			this.setData({
+				active: active
+			});
+		}
+	}
+});

src/custom-tab-bar/index.json

@@ -0,0 +1,6 @@
+{
+	"component": true,
+	"usingComponents": {
+
+	}
+}

src/custom-tab-bar/index.wxml

@@ -0,0 +1,12 @@
+<!--miniprogram/custom-tab-bar/index.wxml-->
+<view class="tab-bar">
+  <view class="tab-bar-border"></view>
+  <view wx:for="{{list}}" wx:key="index" hidden="{{!isBazi&&index==2}}" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
+  <view>
+      <image src="{{active === index ? item.selectedIconPath : item.iconPath}}"></image>
+    <view style="color: {{active === index ? selectedColor : color}}">{{item.text}}</view>
+  </view>
+ 
+
+  </view>
+</view>

src/custom-tab-bar/index.wxss

@@ -0,0 +1,38 @@
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 48px;
+  background: white;
+  display: flex;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tab-bar-border {
+  background-color: rgba(0, 0, 0, 0.33);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  transform: scaleY(0.5);
+}
+
+.tab-bar-item {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tab-bar-item image {
+  width: 27px;
+  height: 27px;
+}
+
+.tab-bar-item view {
+  font-size: 10px;
+}

src/custom-tab-bar1/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <van-tabbar :active="active" @change="onChange">
+        <van-tabbar-item v-for="(item, index) in list" :key="index" :icon="item.icon">{{ item.text }}</van-tabbar-item>
+    </van-tabbar>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            active: 0,
+            list: [
+                {
+                    icon: 'home-o',
+                    text: '示例1',
+                    url: '/index/index'
+                },
+                {
+                    icon: 'search',
+                    text: '示例2',
+                    url: '/index/index2'
+                }
+            ]
+        }
+    },
+    methods: {
+        onChange(event) {
+            this.active = event.detail
+            uni.switchTab({
+                url: this.data.list[event.detail].url
+            });
+        },
+
+        init() {
+            const page = getCurrentPages().pop();
+            this.active = this.data.list.findIndex(item => item.url === `/${page.route}`)
+        }
+    },
+}
+</script>
+  

src/pages.json

@@ -476,6 +476,7 @@
     }
   ],
   "tabBar": {
+    "custom":true,
     "color": "#7A7E83",
     "selectedColor": "#498EF5",
     "borderStyle": "white",

src/pages/carVideo/index.vue

@@ -531,7 +531,11 @@ export default {
       return this.$store.state.user.userInfo || {};
     },
   },
-  onReady() {
+  onShow() {
+    if (typeof this.$mp.page.getTabBar === 'function' &&
+      this.$mp.page.getTabBar()) {
+      this.$mp.page.getTabBar().init()
+    }
     // const query = tt.createSelectorQuery();
     // // 选择 ttml 中的示例按钮，并添加一个对它布局信息的查询
     // query.select("#btn").boundingClientRect();

src/pages/forecast/index.vue

@@ -10,8 +10,8 @@
                                 userData.riYuan.qr }}</text>
                         <text style="position: absolute;left: 112rpx;font-size: 44rpx;color: #CB2C00;font-weight: bold;">{{
                             userData.riYuan.score }}</text>
-                        <image class="score-inner-ring" mode="widthFix" src="/static/icon/ring@2x.png"></image>
-                        <image mode="widthFix" class="score-inner-seal" src="/static/icon/seal@2x.png"></image>
+                        <image class="score-inner-ring" mode="widthFix" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/ring@2x.png"></image>
+                        <image mode="widthFix" class="score-inner-seal" src="https://ndata.zzxcx.net/xpgx-xcx/forecast/seal@2x.png"></image>
                     </view>
                     <text class="score-inner-text1">身强身弱,不代表好坏,具体请看详解</text>
                     <image mode="widthFix" class="score-inner-icon1"

src/pages/fortune/index.vue

@@ -31,20 +31,20 @@
 						<view style="display: flex;flex-wrap: wrap;justify-content: space-between;" class="">
 							<picker @change="changeFormBirthDay" :value="form.birthday" fields="day" mode="date">
 								<view class="content-inputs-row-menu">
-									{{ form.birthday.split('-')[0] }}年 <image style="height: 15rpx;width: 22rpx;margin-left: 8rpx;"
-										:src="downArrowImg"></image>
+									{{ form.birthday.split('-')[0] }}年 <image
+										style="height: 15rpx;width: 22rpx;margin-left: 8rpx;" :src="downArrowImg"></image>
 								</view>
 							</picker>
 							<picker @change="changeFormBirthDay" fields="day" mode="date">
 								<view class="content-inputs-row-menu">
-									{{ form.birthday.split('-')[1] }}月 <image style="height: 15rpx;width: 22rpx;margin-left: 8rpx;"
-										:src="downArrowImg"></image>
+									{{ form.birthday.split('-')[1] }}月 <image
+										style="height: 15rpx;width: 22rpx;margin-left: 8rpx;" :src="downArrowImg"></image>
 								</view>
 							</picker>
 							<picker @change="changeFormBirthDay" fields="day" mode="date">
 								<view class="content-inputs-row-menu">
-									{{ form.birthday.split('-')[2] }}日 <image style="height: 15rpx;width: 22rpx;margin-left: 8rpx;"
-										:src="downArrowImg"></image>
+									{{ form.birthday.split('-')[2] }}日 <image
+										style="height: 15rpx;width: 22rpx;margin-left: 8rpx;" :src="downArrowImg"></image>
 								</view>
 							</picker>
 							<picker :range="chinaHours" @change="changeFormBirthChinaHour" mode="selector">
@@ -162,6 +162,12 @@ export default {
 		})
 
 	},
+	onShow() {
+		if (typeof this.$mp.page.getTabBar === 'function' &&
+			this.$mp.page.getTabBar()) {
+			this.$mp.page.getTabBar().init()
+		}
+	},
 	methods: {
 		submitForm() {
 			let that = this

src/pages/teacherVideo/index.vue

@@ -1,12 +1,11 @@
 <template>
   <view class="">
     <view class="road">
-      <view class="nav"
-        ><view class="left">科目三真实考场</view>
+      <view class="nav">
+        <view class="left">科目三真实考场</view>
         <navigator url="/otherPages/myExamRoadVideo/index">
           <view class="right">
-            查找我的考场<van-icon color="#498EF5" name="arrow"
-          /></view>
+            查找我的考场<van-icon color="#498EF5" name="arrow" /></view>
         </navigator>
       </view>
       <view class="mark">
@@ -16,36 +15,25 @@
         <image mode="widthFix" class="play" :src="bottom_arrrow"></image>
       </view>
       <view class="nav2">
-        <image
-          mode="widthFix"
-          class="left"
-          src="https://ndata.zzxcx.net/ctjk/mp-wx/teacherVideo/kemu3.png"
-        ></image>
+        <image mode="widthFix" class="left" src="https://ndata.zzxcx.net/ctjk/mp-wx/teacherVideo/kemu3.png"></image>
         <view class="right">
           <view>熟记考场</view>
           <view>考试不用慌</view>
           <navigator url="/otherPages/examRoadVideo/index">
-            <view class="look">去看考场</view></navigator
-          >
+            <view class="look">去看考场</view>
+          </navigator>
         </view>
       </view>
     </view>
     <view class="subject">
       <view v-for="(item, index) in kemu" :key="index" class="list">
-        <view
-          @click="
-            goPath('/otherPages/videoSubjectList/index?subject=' + (index + 1))
-          "
-        >
-          <image
-            mode="widthFix"
-            class="subject-bg"
-            :src="
-              'https://ndata.zzxcx.net/ctjk/mp-wx/teacherVideo/kemubg' +
-              (index + 1) +
-              '.png'
-            "
-          ></image>
+        <view @click="
+          goPath('/otherPages/videoSubjectList/index?subject=' + (index + 1))
+          ">
+          <image mode="widthFix" class="subject-bg" :src="'https://ndata.zzxcx.net/ctjk/mp-wx/teacherVideo/kemubg' +
+            (index + 1) +
+            '.png'
+            "></image>
 
           <view class="text1"> 科目{{ item }} </view>
           <view class="text2"> 《视频讲解》 </view>
@@ -56,25 +44,16 @@
       <view class="dialog">
         <view class="title">请先关注公众号</view>
         <official-account></official-account>
-        <view
-          @click="
-            () => {
-              careVisible = false;
-            }
-          "
-          class="confirm"
-        >
-          关闭</view
-        >
+        <view @click="() => {
+            careVisible = false;
+          }
+          " class="confirm">
+          关闭</view>
       </view>
     </view>
 
     <view class="wxad">
-      <ad
-        ad-type="video"
-        :ad-intervals="100"
-        unit-id="adunit-8eb44bbd7e3147d4"
-      ></ad>
+      <ad ad-type="video" :ad-intervals="100" unit-id="adunit-8eb44bbd7e3147d4"></ad>
     </view>
   </view>
 </template>
@@ -139,6 +118,11 @@ export default {
     },
   },
   onShow() {
+    if (typeof this.$mp.page.getTabBar === 'function' &&
+      this.$mp.page.getTabBar()) {
+      this.$mp.page.getTabBar().init()
+    }
+
     api.user.getInfo().then((res) => {
       uni.setStorageSync("userInfo", res.data);
       this.$store.commit("SET_USERINFO", res.data);
@@ -167,6 +151,7 @@ export default {
     background: #fff;
     border-radius: 16rpx;
     overflow: hidden;
+
     .title {
       width: 100%;
       height: 72rpx;
@@ -175,9 +160,10 @@ export default {
       line-height: 72rpx;
       color: #333;
       background: #fff;
-   
+
       font-weight: bold;
     }
+
     .confirm {
       width: 100%;
       height: 72rpx;
@@ -190,17 +176,17 @@ export default {
     }
   }
 }
+
 .road {
   width: 690rpx;
   margin: 0 auto;
   height: 478rpx;
-  background: linear-gradient(
-    188deg,
-    #edf4ff 0%,
-    rgba(237, 244, 255, 0.43) 100%
-  );
+  background: linear-gradient(188deg,
+      #edf4ff 0%,
+      rgba(237, 244, 255, 0.43) 100%);
   border-radius: 20rpx 20rpx 20rpx 20rpx;
   opacity: 1;
+
   .nav {
     display: flex;
     width: 100%;
@@ -210,14 +196,17 @@ export default {
     padding-left: 30rpx;
     padding-right: 30rpx;
     padding-top: 36rpx;
+
     .left {
       font-size: 36rpx;
       font-weight: bold;
     }
+
     .right {
       color: #498ef5;
     }
   }
+
   .mark {
     position: relative;
     padding-left: 30rpx;
@@ -226,6 +215,7 @@ export default {
     width: 328rpx;
     text-align: center;
     font-size: 0;
+
     .button1 {
       width: 268rpx;
       line-height: 64rpx;
@@ -236,11 +226,13 @@ export default {
       font-size: 26rpx;
       text-align: center;
     }
+
     .play {
       width: 36rpx;
       margin-top: 4rpx;
     }
   }
+
   .nav2 {
     display: flex;
     width: 100%;
@@ -248,15 +240,18 @@ export default {
     padding-right: 30rpx;
     justify-content: space-between;
     margin-top: 20rpx;
+
     .left {
       width: 408rpx;
     }
+
     .right {
       width: 200rpx;
       color: #498ef5;
       font-size: 30rpx;
       text-align: center;
       line-height: 1.5;
+
       .look {
         width: 200rpx;
         line-height: 92rpx;
@@ -270,6 +265,7 @@ export default {
     }
   }
 }
+
 .subject {
   padding: 0 30rpx;
   display: flex;
@@ -280,9 +276,11 @@ export default {
   .list {
     position: relative;
     margin-bottom: 15rpx;
+
     .subject-bg {
       width: 334rpx;
     }
+
     .text1 {
       font-size: 42rpx;
       color: #fff;
@@ -290,6 +288,7 @@ export default {
       top: 30rpx;
       left: 60rpx;
     }
+
     .text2 {
       font-size: 42rpx;
       color: #fff;
@@ -299,6 +298,7 @@ export default {
     }
   }
 }
+
 .wxad {
   border: none;
   padding: 0 30rpx;

src/pages/user/index.vue

@@ -3,87 +3,41 @@
     <scroll-view scroll-y class="bg">
       <div class="user">
         <van-cell custom-class="head-cell" is-link label-class="" center>
-          <view
-            @click="
-              () => {
-                userFormShow = true;
-                nickName = userInfo.nickName || '新用户';
-              }
-            "
-            class="userButton"
-            slot="title"
-          >
-            <image
-              class="user-headImg"
-              v-if="userInfo.headImage"
-              :src="userInfo.headImage"
-            ></image>
+          <view @click="() => {
+              userFormShow = true;
+              nickName = userInfo.nickName || '新用户';
+            }
+            " class="userButton" slot="title">
+            <image class="user-headImg" v-if="userInfo.headImage" :src="userInfo.headImage"></image>
             <image class="user-headImg" v-else :src="unLoginHead"></image>
-            <view
-              class="flex"
-              style="width: 60%; padding-left: 24rpx; text-align: left"
-            >
+            <view class="flex" style="width: 60%; padding-left: 24rpx; text-align: left">
               <view style="font-size: 38rpx; color: #0a1a33; width: 100%">{{
                 userInfo.nickName || "新用户"
               }}</view>
               <view style="font-size: 26rpx; color: #8a9099; width: 100%">
-                {{ userInfo.phone || "点击绑定手机号" }}</view
-              >
+                {{ userInfo.phone || "点击绑定手机号" }}</view>
             </view>
           </view>
         </van-cell>
-        <van-cell
-          title-class="uni-app-fontsize-paragraph"
-          title="三力测试"
-          is-link
-          center
-          url="/otherPages/beforeThreeExam/index"
-        >
+        <van-cell title-class="uni-app-fontsize-paragraph" title="三力测试" is-link center
+          url="/otherPages/beforeThreeExam/index">
         </van-cell>
 
-        <van-cell
-          title-class="uni-app-fontsize-paragraph"
-          title="关注公众号"
-          is-link
-          center
-          url="/otherPages/careGzh/index"
-        >
+        <van-cell title-class="uni-app-fontsize-paragraph" title="关注公众号" is-link center url="/otherPages/careGzh/index">
         </van-cell>
-        <van-cell
-          title-class="uni-app-fontsize-paragraph"
-          title="电子资料"
-          is-link
-          @click="
-            goPath(
-              '/pages/extraWeb/index?src=https://nbjk-h5.zzxcx.net/pdfImages'
-            )
-          "
-          center
-        >
+        <van-cell title-class="uni-app-fontsize-paragraph" title="电子资料" is-link @click="
+          goPath(
+            '/pages/extraWeb/index?src=https://nbjk-h5.zzxcx.net/pdfImages'
+          )
+          " center>
         </van-cell>
-         <van-cell
-          title-class="uni-app-fontsize-paragraph"
-          title="每日驾考资讯"
-          is-link
-          center
-          url="/otherPages/careEveryDay/index"
-        >
+        <van-cell title-class="uni-app-fontsize-paragraph" title="每日驾考资讯" is-link center
+          url="/otherPages/careEveryDay/index">
         </van-cell>
-          <van-cell
-          title-class="uni-app-fontsize-paragraph"
-          title="生成分享二维码"
-          is-link
-          center
-          url="/otherPages/createReferCode/index"
-        >
+        <van-cell title-class="uni-app-fontsize-paragraph" title="生成分享二维码" is-link center
+          url="/otherPages/createReferCode/index">
         </van-cell>
-            <van-cell
-          title-class="uni-app-fontsize-paragraph"
-          title="用户反馈"
-          is-link
-          center
-          url="/otherPages/userAdvise/index"
-        >
+        <van-cell title-class="uni-app-fontsize-paragraph" title="用户反馈" is-link center url="/otherPages/userAdvise/index">
         </van-cell>
         <!-- <van-cell title="我要提现" value="" is-link center @click="goCashOut">
         </van-cell> -->
@@ -112,29 +66,11 @@
 
         <!-- #endif -->
         <!-- #ifdef MP-TOUTIAO -->
-        <van-cell
-          v-if="!isVip"
-          title="会员有效期"
-          :value="'开通会员'"
-          is-link
-          center
-          url="/otherPages/buyVip/index"
-        >
+        <van-cell v-if="!isVip" title="会员有效期" :value="'开通会员'" is-link center url="/otherPages/buyVip/index">
         </van-cell>
-        <van-cell
-          v-if="isVip"
-          title="会员有效期"
-          :value="'已开通'"
-          is-link
-          center
-        >
+        <van-cell v-if="isVip" title="会员有效期" :value="'已开通'" is-link center>
         </van-cell>
-        <van-cell
-          title="资料下载"
-          is-link
-          @click="goVipPath('/otherPages/pdfList/index')"
-          left
-        >
+        <van-cell title="资料下载" is-link @click="goVipPath('/otherPages/pdfList/index')" left>
           <template #icon>
             <m-icon type="fkbz" class="cell-icon" />
           </template>
@@ -153,54 +89,25 @@
       </div>
       <view class="list"> </view>
       <view class="wxad">
-        <ad
-          ad-type="video"
-          :ad-intervals="100"
-          unit-id="adunit-8eb44bbd7e3147d4"
-        ></ad>
+        <ad ad-type="video" :ad-intervals="100" unit-id="adunit-8eb44bbd7e3147d4"></ad>
       </view>
-      <van-popup :z-index="9999" :close-on-click-overlay="true" position="bottom"  :show="userFormShow">
+      <van-popup :z-index="9999" :close-on-click-overlay="true" position="bottom" :show="userFormShow">
         <view class="userform">
           <view class="userform-close">
-            <van-icon
-              @click="
-                () => {
-                  userFormShow = false;
-                }
-              "
-              color="#a8a8a8"
-              size="18"
-              name="cross"
-            />
+            <van-icon @click="() => {
+                userFormShow = false;
+              }
+              " color="#a8a8a8" size="18" name="cross" />
           </view>
           <view>
-            <van-field
-              :value="userInfo.nickName"
-              required
-              clearable
-              label="用户名"
-              @change="changeUserName"
-              placeholder="请输入用户名"
-            />
-            <van-field
-            
-              :value="userInfo.phone"
-              clearable
-              label="手机号"
-              placeholder="请绑定手机号"
-              @change="changeUserPhone"
-            >
-         
+            <van-field :value="userInfo.nickName" required clearable label="用户名" @change="changeUserName"
+              placeholder="请输入用户名" />
+            <van-field :value="userInfo.phone" clearable label="手机号" placeholder="请绑定手机号" @change="changeUserPhone">
+
             </van-field>
           </view>
           <view class="userform-bind">
-            <van-button
-              @click="sendUserInfo"
-              custom-style="width:690rpx;"
-              round
-              type="primary"
-              >修改用户信息</van-button
-            >
+            <van-button @click="sendUserInfo" custom-style="width:690rpx;" round type="primary">修改用户信息</van-button>
           </view>
         </view>
       </van-popup>
@@ -308,6 +215,12 @@ export default {
       // }
     },
   },
+  onShow() {
+    if (typeof this.$mp.page.getTabBar === 'function' &&
+      this.$mp.page.getTabBar()) {
+      this.$mp.page.getTabBar().init()
+    }
+  }
 };
 </script>
 <style>
@@ -326,6 +239,7 @@ export default {
     padding-right: 15rpx;
     padding-top: 15rpx;
   }
+
   .userform-bind {
     width: 100%;
     padding: 30rpx 30rpx;
@@ -333,14 +247,17 @@ export default {
     justify-content: center;
   }
 }
+
 .flex {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
 }
+
 .userButton::after {
   border: 0;
 }
+
 .userButton {
   border: 0;
   display: flex;