设置自定义的tabbar

mallApp/src/App.vue

@@ -6,7 +6,7 @@ export default {
   // 全端，数据共享，还可以解决页面初始化模板访问不到值得问题
   // 有坑 分包里的页面访问不到
   globalData: {},
-  onLaunch() {
+  onLaunch () {
     // this.getAllOptions()
     // 删除缓存
     if (process.env.NODE_ENV == "production") {
@@ -30,15 +30,16 @@ export default {
     }
     // #endif
   },
-  onShow() {
+  onShow () {
     // this.isLogin()
+    uni.hideTabBar()
   },
-  onHide() {},
-  onError(err) {
+  onHide () { },
+  onError (err) {
     console.error(err, "错误捕获");
   },
   methods: {
-    isLogin() {
+    isLogin () {
       let token = uni.getStorageSync("token");
       if (!token) {
         uni.reLaunch({

mallApp/src/components/app-tabbar.vue

@@ -0,0 +1,104 @@
+<template>
+  <view class="tabbar_box">
+    <view
+      class="tabBarItem"
+      v-for="(item, index) in tabList"
+      :key="index"
+      @click="switchTab(index, item)"
+    >
+      <image
+        :src="currentTabIndex == index ? item.selectedIconPath : item.iconPath"
+        class="icon_tab"
+      ></image>
+      <view
+        class="title"
+        :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]"
+      >{{item.text}}</view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      tabList: [
+        {
+          "pagePath": "pages/home/index",
+          "iconPath": "../static/images/common/home-no.png",
+          "selectedIconPath": "../static/images/common/home-is.png",
+          "text": "首页"
+        },
+        {
+          "pagePath": "pages/home/category",
+          "iconPath": "../static/images/common/category-no.png",
+          "selectedIconPath": "../static/images/common/category-is.png",
+          "text": "分类"
+        },
+        {
+          "pagePath": "pages/home/shop",
+          "iconPath": "../static/images/common/shop-no.png",
+          "selectedIconPath": "../static/images/common/shop-is.png",
+          "text": "门店"
+        },
+        {
+          "pagePath": "pages/home/user",
+          "iconPath": "../static/images/common/user-no.png",
+          "selectedIconPath": "../static/images/common/user-is.png",
+          "text": "我的"
+        }
+      ],
+      currentTabIndex: this.current
+    }
+  },
+  props: {
+    current: { type: [Number, String], default: 0 },
+    backgroundColor: { type: String, default: '#fff' },
+    color: { type: String, default: '#c0c4cc' },
+    tintColor: { type: String, default: '#fa436a' }
+  },
+  methods: {
+    switchTab (index, item) {
+      console.log('/' + item.pagePath)
+      console.log(index)
+      this.currentTabIndex = index
+      uni.switchTab({
+        url: '/' + item.pagePath
+      })
+      this.$emit('click', index)
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.tabbar_box {
+  height: 95upx;
+  width: 100vw;
+  background-color: #fff;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  border-top: 1px solid #c0c4cc;
+  & > .tabBarItem {
+    flex: 1;
+    padding-top: 14upx;
+    height: 100%;
+    text-align: center;
+    // background: green;
+    & > .icon_tab {
+      width: 46upx !important;
+      height: 46upx !important;
+      // background-color: #eee;
+      margin: 0 auto;
+    }
+    & > .title {
+      text-align: center;
+      margin-top: 5upx;
+      font-size: 24upx;
+      color: #c0c4cc;
+    }
+  }
+}
+</style>

mallApp/src/main.js

@@ -12,6 +12,10 @@ Vue.prototype.$util = util
 import globalMixins from './mixins/globalMixins'
 Vue.mixin(globalMixins)
 
+
+import tabBar from './components/app-tabbar.vue'
+Vue.component('tab-bar', tabBar)
+
 import store from './store'
 Vue.prototype.$store = store
 

mallApp/src/pages/home/category.vue

@@ -1,45 +1,76 @@
 <template>
-	<div class="app-main app-content">
-		<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop" :style="{height:height+'px'}">
-			<div v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']" :data-current="index" @tap.stop="swichNav($event ,item)">
-				<text>{{item.categoryName}}</text>
-			</div>
-		</scroll-view>
-		<block v-for="(item,index) in tabbar" :key="index">
-			<scroll-view 
-				scroll-y 
-				class="right-box" 
-				:style="{height:height+'px'}"
-				@scrolltolower="onReachBottoms"
-				v-if="currentTab==index">
-				<!--内容部分 start -->
-				<div 
-					class="page-view" 
-					v-if="!$util.isEmpty(list.data)">
-					<div 
-						class="goods-list" 
-						v-for="(items, subIndex) in list.data" 
-						:key="items.id" 
-						@click="pageTo(`/pages/goods/detail?id=${items.id}`)">
-						<div class="img-blo">
-							<app-img :src="items.smallImgList[0]" alt="商品图" mode="aspectFit" :height="200" />
-						</div>
-						<div class="goods-det">
-							<div class="goods-det-top">
-								<div class="goods-name">{{ items.goodsName }}</div>
-								<div class="goods-sales">已售{{ items.sold }}</div>
-							</div>
-							<div class="goods-price">￥{{ items.price }}</div>
-						</div>
-					</div>
-				</div>
-				<block v-else>
-					<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
-				</block>
-				<!--内容部分 end -->
-			</scroll-view>
-		</block>
-	</div>
+  <div class="app-main app-content">
+    <scroll-view
+      scroll-y
+      scroll-with-animation
+      class="tab-view"
+      :scroll-top="scrollTop"
+      :style="{height:height+'px'}"
+    >
+      <div
+        v-for="(item,index) in tabbar"
+        :key="index"
+        class="tab-bar-item"
+        :class="[currentTab==index ? 'active' : '']"
+        :data-current="index"
+        @tap.stop="swichNav($event ,item)"
+      >
+        <text>{{item.categoryName}}</text>
+      </div>
+    </scroll-view>
+    <block
+      v-for="(item,index) in tabbar"
+      :key="index"
+    >
+      <scroll-view
+        scroll-y
+        class="right-box"
+        :style="{height:height+'px'}"
+        @scrolltolower="onReachBottoms"
+        v-if="currentTab==index"
+      >
+        <!--内容部分 start -->
+        <div
+          class="page-view"
+          v-if="!$util.isEmpty(list.data)"
+        >
+          <div
+            class="goods-list"
+            v-for="(items, subIndex) in list.data"
+            :key="items.id"
+            @click="pageTo(`/pages/goods/detail?id=${items.id}`)"
+          >
+            <div class="img-blo">
+              <app-img
+                :src="items.smallImgList[0]"
+                alt="商品图"
+                mode="aspectFit"
+                :height="200"
+              />
+            </div>
+            <div class="goods-det">
+              <div class="goods-det-top">
+                <div class="goods-name">{{ items.goodsName }}</div>
+                <div class="goods-sales">已售{{ items.sold }}</div>
+              </div>
+              <div class="goods-price">￥{{ items.price }}</div>
+            </div>
+          </div>
+        </div>
+        <block v-else>
+          <app-wrapper-empty
+            title="暂无数据"
+            :is-empty="$util.isEmpty(list.data)"
+          />
+        </block>
+        <!--内容部分 end -->
+      </scroll-view>
+    </block>
+    <tab-bar
+      :current="currentTabIndex"
+      @click="tabClick"
+    ></tab-bar>
+  </div>
 </template>
 
 <script>
@@ -48,217 +79,221 @@ import AppWrapperEmpty from '@/components/app-wrapper-empty'
 import { getClass, getList } from '@/api/category'
 import { list } from '@/mixins'
 export default {
-	name: 'category',
-	components: {
-		AppWrapperEmpty,
-		AppImg
-	},
-	mixins: [list],
-	data() {
-		return {
-			tabbar: [],
-			height: 0, // scroll-view高度
-			currentTab: 0, // 预设当前项的值
-			scrollTop: 0, // tab标题的滚动条位置
-			form: {
-				categoryId: ''
-			}
-		}
-	},
-	ceshi(){
-			console.log(1232)
-		},
-// 	onPullDownRefresh() {
-//     this.resetList();
-//     this._list().then(res => {
-//       uni.stopPullDownRefresh();
-//     });
-//   },
-//   // 加载更多
-//   onReachBottom() {
-// 	  console.log(1212)
-//     if (this.list.moreData == 1) {
-//       this._list().then(res => {
-//         uni.stopPullDownRefresh();
-//       });
-//     } else {
-//       uni.stopPullDownRefresh();
-//     }
-//   },
-		onLoad: function() {
-			if (this.$util.isLogin()) {
-				setTimeout(() => {
-					uni.getSystemInfo({
-						success: res => {
-							this.height = res.windowHeight
-							this.sInit()
-						}
-					})
-				}, 50)
-			}
-		},
-	
-	methods: {
-		onReachBottoms(){
-		if (!this.list.finished) {
-			this._list().then(res => {
-				uni.stopPullDownRefresh();
-			});
-		} else {
-		uni.stopPullDownRefresh();
-		}
-		},
-		async sInit() {
-			this._getClass()
-				.then(res => {
-				this._list()
-			})
-		},
-		// 分类
-		_getClass() {
-			return getClass().then(res => {
-				if (this.$util.isEmpty(res.data)) return false
-				this.form.categoryId = res.data[0].id
-				this.tabbar = res.data
-			})
-		},
-		// 列表
-		_list() {
-			return getList({
-				...this.form,
-				page:this.list.page
-			})
-				.then(res => {
-				this.completes(res)
-			})
-		},
-		// 点击标题切换当前页时改变样式
-		swichNav(e, item) {
-			let cur = e.currentTarget.dataset.current
-			if (this.currentTab == cur) {
-				return false
-			} else {
-				this.currentTab = cur
-				this.form.categoryId = item.id
-				this.resetList()
-				this._list()
-				// this.checkCor()
-			}
-		},
-		// 判断当前滚动超过一屏时，设置tab标题滚动条。
-		checkCor() {
-			let that = this
-			// 这里计算按照实际情况进行修改，动态数据要进行动态分析
-			// 思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算
-			// 数据很多可以多次if判断然后进行滚动距离计算即可
-			if (that.currentTab > 7) {
-				that.scrollTop = 500
-			} else {
-				that.scrollTop = 0
-			}
-		}
-	}
+  name: 'category',
+  components: {
+    AppWrapperEmpty,
+    AppImg
+  },
+  mixins: [list],
+  data () {
+    return {
+      tabbar: [],
+      height: 0, // scroll-view高度
+      currentTab: 0, // 预设当前项的值
+      scrollTop: 0, // tab标题的滚动条位置
+      form: {
+        categoryId: ''
+      },
+      currentTabIndex: 1
+    }
+  },
+  ceshi () {
+    console.log(1232)
+  },
+  // 	onPullDownRefresh() {
+  //     this.resetList();
+  //     this._list().then(res => {
+  //       uni.stopPullDownRefresh();
+  //     });
+  //   },
+  //   // 加载更多
+  //   onReachBottom() {
+  // 	  console.log(1212)
+  //     if (this.list.moreData == 1) {
+  //       this._list().then(res => {
+  //         uni.stopPullDownRefresh();
+  //       });
+  //     } else {
+  //       uni.stopPullDownRefresh();
+  //     }
+  //   },
+  onLoad: function () {
+    if (this.$util.isLogin()) {
+      setTimeout(() => {
+        uni.getSystemInfo({
+          success: res => {
+            this.height = res.windowHeight
+            this.sInit()
+          }
+        })
+      }, 50)
+    }
+  },
+
+  methods: {
+    onReachBottoms () {
+      if (!this.list.finished) {
+        this._list().then(res => {
+          uni.stopPullDownRefresh();
+        });
+      } else {
+        uni.stopPullDownRefresh();
+      }
+    },
+    async sInit () {
+      this._getClass()
+        .then(res => {
+          this._list()
+        })
+    },
+    // 分类
+    _getClass () {
+      return getClass().then(res => {
+        if (this.$util.isEmpty(res.data)) return false
+        this.form.categoryId = res.data[0].id
+        this.tabbar = res.data
+      })
+    },
+    // 列表
+    _list () {
+      return getList({
+        ...this.form,
+        page: this.list.page
+      })
+        .then(res => {
+          this.completes(res)
+        })
+    },
+    // 点击标题切换当前页时改变样式
+    swichNav (e, item) {
+      let cur = e.currentTarget.dataset.current
+      if (this.currentTab == cur) {
+        return false
+      } else {
+        this.currentTab = cur
+        this.form.categoryId = item.id
+        this.resetList()
+        this._list()
+        // this.checkCor()
+      }
+    },
+    // 判断当前滚动超过一屏时，设置tab标题滚动条。
+    checkCor () {
+      let that = this
+      // 这里计算按照实际情况进行修改，动态数据要进行动态分析
+      // 思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算
+      // 数据很多可以多次if判断然后进行滚动距离计算即可
+      if (that.currentTab > 7) {
+        that.scrollTop = 500
+      } else {
+        that.scrollTop = 0
+      }
+    },
+    tabClick (index) {
+      this.currentTabIndex = index
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-	.app-content {
-		background-color: #fff;
-	}
+.app-content {
+  background-color: #fff;
+}
 
-	page {
-		background: #fff;
-	}
+page {
+  background: #fff;
+}
 
-	/* 左侧导航布局 start*/
+/* 左侧导航布局 start*/
 
-	/* 隐藏scroll-view滚动条*/
+/* 隐藏scroll-view滚动条*/
 
-	::-webkit-scrollbar {
-		width: 0;
-		height: 0;
-		color: transparent;
-	}
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
 
-	.tab-view {
-		/* height: 100%; */
-		width: 200upx;
-		position: fixed;
-		left: 0;
-		z-index: 10;
-		background-color: #f0f2f6;
+.tab-view {
+  /* height: 100%; */
+  width: 200upx;
+  position: fixed;
+  left: 0;
+  z-index: 10;
+  background-color: #f0f2f6;
 
-		.tab-bar-item {
-			width: 200upx;
-			height: 110upx;
-			box-sizing: border-box;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			font-size: 26upx;
-			color: #444;
-			font-weight: 400;
-		}
+  .tab-bar-item {
+    width: 200upx;
+    height: 110upx;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 26upx;
+    color: #444;
+    font-weight: 400;
+  }
 
-		.active {
-			position: relative;
-			color: $mainColor;
-			font-size: 26px;
-			background: #fff;
-		}
+  .active {
+    position: relative;
+    color: $mainColor;
+    font-size: 26px;
+    background: #fff;
+  }
 
-		.active::before {
-			content: '';
-			position: absolute;
-			border-left: 8upx solid $mainColor;
-			height: 100%;
-			left: 0;
-		}
-	}
+  .active::before {
+    content: "";
+    position: absolute;
+    border-left: 8upx solid $mainColor;
+    height: 100%;
+    left: 0;
+  }
+}
 
-	/* 左侧导航布局 end*/
+/* 左侧导航布局 end*/
 
-	.right-box {
-		width: 100%;
-		position: fixed;
-		padding-left: 220upx;
-		box-sizing: border-box;
-		left: 0;
-		.page-view {
-			width: 100%;
-			overflow: hidden;
-			box-sizing: border-box;
-			padding-bottom: env(safe-area-inset-bottom);
-			.goods-list {
-				@include disFlex(flex-start, flex-start);
-				margin: 40px 0;
-				.img-blo {
-					width: 200px;
-					height: 200px;
-					margin-right: 20px;
-				}
-				.goods-det {
-					padding-top: 18px;
-					font-size: 28px;
-					.goods-name {
-						margin-bottom: 10px;
-					}
-					.goods-sales {
-						color: $fontColor3;
-						font-size: 24px;
-					}
-					.goods-price {
-						margin-top: 50px;
-						color: $mainColor;
-						font-weight: bold;
-					}
-				}
-			}
-		}
-	}
-	// img {
-	// 	width: 100%;
-	// 	height: 100%;
-	// 	display: inline-block;
-	// }
+.right-box {
+  width: 100%;
+  position: fixed;
+  padding-left: 220upx;
+  box-sizing: border-box;
+  left: 0;
+  .page-view {
+    width: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    padding-bottom: env(safe-area-inset-bottom);
+    .goods-list {
+      @include disFlex(flex-start, flex-start);
+      margin: 40px 0;
+      .img-blo {
+        width: 200px;
+        height: 200px;
+        margin-right: 20px;
+      }
+      .goods-det {
+        padding-top: 18px;
+        font-size: 28px;
+        .goods-name {
+          margin-bottom: 10px;
+        }
+        .goods-sales {
+          color: $fontColor3;
+          font-size: 24px;
+        }
+        .goods-price {
+          margin-top: 50px;
+          color: $mainColor;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}
+// img {
+// 	width: 100%;
+// 	height: 100%;
+// 	display: inline-block;
+// }
 </style>

mallApp/src/pages/home/index.vue

@@ -1,13 +1,31 @@
 <template>
   <div class="app-main app-content">
-    <app-swiper v-if="!$util.isEmpty(ad)" :list="ad" @detail="adDetailFn" />
+    <app-swiper
+      v-if="!$util.isEmpty(ad)"
+      :list="ad"
+      @detail="adDetailFn"
+    />
     <block v-if="!$util.isEmpty(category)">
-      <div class="goods-module" v-for="(item, index) in category" :key="index">
-        <goods-list-big v-if="item.showRow == 1" :info="item" />
-        <goods-list-small v-if="item.showRow == 2" :info="item" />
+      <div
+        class="goods-module"
+        v-for="(item, index) in category"
+        :key="index"
+      >
+        <goods-list-big
+          v-if="item.showRow == 1"
+          :info="item"
+        />
+        <goods-list-small
+          v-if="item.showRow == 2"
+          :info="item"
+        />
       </div>
     </block>
     <app-trademark />
+    <tab-bar
+      :current="currentTabIndex"
+      @click="tabClick"
+    ></tab-bar>
   </div>
 </template>
 <script>
@@ -31,25 +49,26 @@ export default {
     goodsListSmall
   },
   mixins: [share],
-  data() {
+  data () {
     return {
       data: {},
       ad: [],
       category: [],
-      columnStyle: null
+      columnStyle: null,
+      currentTabIndex: 0
     };
   },
   computed: {
     ...mapGetters({ orderShop: "getOrderShop" })
   },
-  onLoad(option) {},
-  mounted() {},
+  onLoad (option) { },
+  mounted () { },
   methods: {
-    init() {
+    init () {
       getOrderShop().then(res => {
-        uni.setNavigationBarTitle({
-          title: `${res.merchant.name}`
-        });
+        // uni.setNavigationBarTitle({
+        //   title: `${res.merchant.name}`
+        // });
       });
       this._detail();
 
@@ -70,7 +89,7 @@ export default {
       });
 
     },
-    _detail() {
+    _detail () {
       getMainIndex().then(res => {
         this.data = res.data;
         if (this.$util.isEmpty(res.data)) return false;
@@ -82,10 +101,13 @@ export default {
         this.columnStyle = res.data.columnStyle;
       });
     },
-    adDetailFn(item) {
+    adDetailFn (item) {
       // #ifdef H5
       location.href = item.url;
       // #endif
+    },
+    tabClick (index) {
+      this.currentTabIndex = index
     }
   }
 };

mallApp/src/pages/home/shop.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="app-main app-content">
-    <app-swiper :list="ad" @detail="adDetailFn" />
+    <app-swiper
+      :list="ad"
+      @detail="adDetailFn"
+    />
     <div class="shop-wrap">
       <div class="shop-tit">{{ shop.name }}</div>
       <div>{{ shop.introduction }}</div>
@@ -30,7 +33,10 @@
             <div class="list-val">{{ shop.telephone || '暂无' }}</div>
           </div>
           <div class="list-icon">
-            <i class="iconfont iconditu" style="font-size:36rpx;"></i>
+            <i
+              class="iconfont iconditu"
+              style="font-size:36rpx;"
+            ></i>
           </div>
         </tui-list-cell>
         <tui-list-cell
@@ -45,7 +51,10 @@
             <div class="list-val">{{ shop.fullAddress || '暂无' }}</div>
           </div>
           <div class="list-icon">
-            <i class="iconfont icondianhua" style="font-size:36rpx;"></i>
+            <i
+              class="iconfont icondianhua"
+              style="font-size:36rpx;"
+            ></i>
           </div>
         </tui-list-cell>
       </tui-list-view>
@@ -56,6 +65,10 @@
       :info="newUserGift"
       :introUserId="option.introUserId"
     />
+    <tab-bar
+      :current="currentTabIndex"
+      @click="tabClick"
+    ></tab-bar>
   </div>
 </template>
 
@@ -78,30 +91,30 @@ export default {
     AppActivilyCoupon
   },
   mixins: [share],
-  data() {
+  data () {
     return {
       data: {},
       ad: [],
       shop: {},
       // 新人领券
       newUserGift: {},
-      activeCoupon: false
+      activeCoupon: false,
+      currentTabIndex: 2
     };
   },
-  onLoad(option) {
+  onLoad (option) {
     // this.init()
   },
   methods: {
-    init() {
+    init () {
       this._detail();
 
       // #ifdef H5
       // 微信二次分享
       let href = window.location.href;
       if (href.indexOf("from=singlemessage") > 0) {
-        location.href = `${
-          this.$constant.formal
-        }/#/pages/home/shop${this.$util.parse(this.option)}`;
+        location.href = `${this.$constant.formal
+          }/#/pages/home/shop${this.$util.parse(this.option)}`;
         return false;
       }
       // #endif
@@ -122,7 +135,7 @@ export default {
         this.jweixinFn(shareParams);
       });
     },
-    _detail() {
+    _detail () {
       let form = {};
       if (this.option.introUserId) {
         form.introUserId = this.option.introUserId;
@@ -142,19 +155,19 @@ export default {
       });
     },
     // operate
-    adDetailFn(item) {
+    adDetailFn (item) {
       // #ifdef H5
       location.href = item.url;
       // #endif
       // #ifndef H5
       // #endif
     },
-    phoneCall() {
+    phoneCall () {
       uni.makePhoneCall({
         phoneNumber: this.shop.telephone
       });
     },
-    goNavBtn() {
+    goNavBtn () {
       if (!this.shop.shopLat || !this.shop.shopLong) {
         this.$msg("即将开通...");
         return false;
@@ -165,6 +178,9 @@ export default {
         name: this.shop.shopCity || "",
         address: this.shop.shopFullAddress || ""
       });
+    },
+    tabClick (index) {
+      this.currentTabIndex = index
     }
   }
 };

mallApp/src/pages/home/user.vue

@@ -39,7 +39,11 @@
               </div>
             </div>
             <div class="user-blo-right login-attr-wrap">
-              <img :src="smallAvatarUrl | default_avatar" alt="头像" mode="widthFix" />
+              <img
+                :src="smallAvatarUrl | default_avatar"
+                alt="头像"
+                mode="widthFix"
+              />
             </div>
           </div>
           <div class="user-wrap-bottom">
@@ -78,29 +82,49 @@
     </template>
     <div class="list-content">
       <tui-list-view class="tui-list-view">
-        <tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/order/list')">
+        <tui-list-cell
+          class="tui-list"
+          :arrow="true"
+          @click="pageToFn('/pages/order/list')"
+        >
           <div class="list-wrap">
             <div class="list-label">我的订单</div>
             <!-- <div class="list-text">{{ shopUser.userAsset.totalBuyNum }}</div> -->
           </div>
         </tui-list-cell>
-        <tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/interest/invite')">
+        <tui-list-cell
+          class="tui-list"
+          :arrow="true"
+          @click="pageToFn('/pages/interest/invite')"
+        >
           <div class="list-wrap">
             <div class="list-label">我的邀请</div>
             <div class="list-text">领取奖励</div>
           </div>
         </tui-list-cell>
-        <tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/coupon/list')">
+        <tui-list-cell
+          class="tui-list"
+          :arrow="true"
+          @click="pageToFn('/pages/coupon/list')"
+        >
           <div class="list-wrap">
             <div class="list-label">我的优惠券</div>
           </div>
         </tui-list-cell>
-        <tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/interest/level')">
+        <tui-list-cell
+          class="tui-list"
+          :arrow="true"
+          @click="pageToFn('/pages/interest/level')"
+        >
           <div class="list-wrap">
             <div class="list-label">会员权益</div>
           </div>
         </tui-list-cell>
-        <tui-list-cell class="tui-list" :arrow="true" @click="pageToFn('/pages/user/password')">
+        <tui-list-cell
+          class="tui-list"
+          :arrow="true"
+          @click="pageToFn('/pages/user/password')"
+        >
           <div class="list-wrap">
             <div class="list-label">支付密码</div>
           </div>
@@ -119,6 +143,10 @@
     />
     <app-trademark />
     <go-login :show.sync="loginShow" />
+    <tab-bar
+      :current="currentTabIndex"
+      @click="tabClick"
+    ></tab-bar>
   </div>
 </template>
 
@@ -143,7 +171,7 @@ export default {
     GoLogin,
     AppVipModule
   },
-  data() {
+  data () {
     return {
       constant: this.$constant,
       popupShow: false,
@@ -153,36 +181,37 @@ export default {
       loginShow: false,
       merchantInfo: {},
       mobile: "",
-      subscribe: 0
+      subscribe: 0,
+      currentTabIndex: 3
     };
   },
   watch: {
-    mobile(newVal, oldVal) {}
+    mobile (newVal, oldVal) { }
   },
   computed: {
     ...mapGetters({ shopUser: "getShopUser" }),
     // #ifdef MP-WEIXIN
     ...mapGetters({ loginInfo: "getLoginInfo" }),
     // #endif
-    smallAvatarUrl() {
+    smallAvatarUrl () {
       return this.shopUser.smallAvatarUrl || "";
     },
-    percentNum() {
+    percentNum () {
       if (this.$util.isEmpty(this.shopUser)) {
         return 0;
       }
       return Math.round(
         (this.shopUser.userAsset.growth /
           this.shopUser.userAsset.nextLevelGrowth) *
-          100
+        100
       );
     }
   },
-  onLoad(option) {
+  onLoad (option) {
     // this.init()
   },
   methods: {
-    init() {
+    init () {
       getShopUser().then(res => {
         this.mobile = res.mobile;
         this.subscribe = parseInt(res.subscribe);
@@ -198,14 +227,14 @@ export default {
         this.merchantInfo = res.data;
       });
     },
-    pageToFn(item) {
+    pageToFn (item) {
       if (this.$util.isLogin()) {
         this.$util.pageTo(item);
       } else {
         this.loginShow = true;
       }
     },
-    showPopup() {
+    showPopup () {
       // #ifdef H5
       this.pageTo("/pages/user/register");
       // #endif
@@ -213,10 +242,10 @@ export default {
       this.popupShow = true;
       // #endif
     },
-    hidePopup() {
+    hidePopup () {
       this.popupShow = false;
     },
-    logoutFn() {
+    logoutFn () {
       return false;
       uni.clearStorageSync();
       // #ifdef H5
@@ -231,6 +260,9 @@ export default {
         type: 4
       });
       // #endif
+    },
+    tabClick (index) {
+      this.currentTabIndex = index
     }
   }
 };