Refactor(首页):改版重构-界面完成

components/xdd-tabbar/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <view
+    :style="{
+      'background-image': 'url(' + webUrl + '/home/tabbar-bg.png);'
+    }"
+    class="xdd-tabbar-wrap"
+  >
+    <view class="center-img" @click="switchTabFn('/pages/cloud/haveFun')">
+      <image
+        :src="webUrl + '/home/tabbar-center.png'"
+        class="img"
+      />
+    </view>
+    <view class="tabbar-list">
+      <view
+        v-for="(tabbarItem, tabbarIndex) in tabbar"
+        :key="tabbarIndex"
+        class="tabbar-item"
+      >
+        <view
+          v-for="(item, index) in tabbarItem"
+          :key="index"
+          :class="currIndex === item.index ? 'curr' : ''"
+          class="item"
+          @click="gotoPage(item.url, item.type, item.index)"
+        >
+          <view class="img-wrap">
+            <image
+              :src="currIndex === item.index ? item.onIcon : item.offIcon"
+              class="img"
+            />
+          </view>
+          <view class="name">{{ item.name }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'XddTabbar',
+  props: {
+    currIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      tabbar: [[
+        {
+          name: '首页',
+          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-01-on.png',
+          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-01-off.png',
+          url: '/pages/home/index',
+          type: 1,
+          index: 0
+        },
+        {
+          name: '消息',
+          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-02-on.png',
+          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-02-off.png',
+          url: '/pkg_common/views/roomLogs',
+          type: 2,
+          index: 1
+        }
+      ],[
+        {
+          name: '购物车',
+          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-03-on.png',
+          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-03-off.png',
+          url: '/pages/cart',
+          type: 1,
+          index: 2
+        },
+        {
+          name: '我的',
+          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-04-on.png',
+          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-04-off.png',
+          url: '/pages/user/User/index',
+          type: 1,
+          index: 3
+        }
+      ]]
+    }
+  },
+  methods: {
+    /**
+     * 跳转至目标页面
+     * type: 1-tabbar页面，2-非tabbar页面
+    */
+    gotoPage(url, type = 1, index) {
+      if (this.currIndex === index) return
+      if (type === 1) {
+        this.switchTabFn(url)
+      }
+      if (type === 2) {
+        uni.navigateTo({ url })
+      }
+    },
+    switchTabFn(url) {
+      uni.switchTab({ url })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.xdd-tabbar-wrap {
+  position: fixed;
+  bottom: 21rpx;
+  left: 21rpx;
+  right: 21rpx;
+  z-index: 99;
+  height: 164rpx;
+  background-size: 708rpx 164rpx;
+  background-repeat: no-repeat;
+  .center-img {
+    position: absolute;
+    top: -16rpx;
+    left: 50%;
+    z-index: 5;
+    transform: translateX(-50%);
+    .img {
+      width: 136rpx;
+      height: 136rpx;
+    }
+  }
+  .tabbar-list {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    padding: 70rpx 0 0 0;
+    .tabbar-item {
+      display: flex;
+      align-items: center;
+      width: calc(50% - 78rpx);
+      .img-wrap {
+        .img {
+          display: block;
+          width: 44rpx;
+          height: 44rpx;
+          margin: 0 auto;
+        }
+      }
+      .name {
+        padding: 10rpx 0 0 0;
+        text-align: center;
+        font-size: 24rpx;
+        color: #9a9a9a;
+      }
+      .item {
+        width: 140rpx;
+        &.curr {
+          .name {
+            color: #C52733;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

pages.json

@@ -814,10 +814,10 @@
         "text": "首页"
       },
       {
-        "pagePath": "pages/home/landMark",
+        "pagePath": "pages/cloud/haveFun",
         "iconPath": "static/tabbar/icon-land.png",
         "selectedIconPath": "static/tabbar/icon-land-hot.png",
-        "text": "地标好物"
+        "text": "寻趣味"
       },
       {
         "pagePath": "pages/cart",

pages/cart.vue

@@ -3,7 +3,7 @@
     :style="{
       'padding-top': (statusBarHeight + 54) + 'px'
     }"
-    class="pages-cart"
+    class="pages-cart tabbar-page"
   >
     <u-navbar
       :left-icon="selectCount > 0 ? 'trash' : ''"
@@ -213,9 +213,11 @@
       v-else
       :show-avatar="false"
     />
+    <xdd-tabbar :curr-index="2" />
   </view>
 </template>
 <script>
+import XddTabbar from '@/components/xdd-tabbar'
 import {
   changeCartNum,
   getCartGroup,
@@ -227,7 +229,8 @@ import CheckboxIcon from '@/components/CheckboxIcon.vue'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 export default {
   components: {
-    CheckboxIcon
+    CheckboxIcon,
+    XddTabbar
   },
   mixins: [pageListenMixins],
   data() {
@@ -633,7 +636,7 @@ view {
 .footer-fixed {
   position: fixed;
   left: 0;
-  bottom: 0;
+  bottom: 180rpx;
   width: 100vw;
   height: 100rpx;
   box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
@@ -770,4 +773,7 @@ view {
     }
   }
 }
+.tabbar-page {
+  padding: 0 0 180rpx 0;
+}
 </style>

pages/cloud/haveFun.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="have-fun">
+  <view class="have-fun tabbar-page">
     <view class="top-box">
       <view class="search-box flex jc-between ai-center">
         <input
@@ -73,6 +73,7 @@
         :show-avatar="false"
       />
     </view>
+    <xdd-tabbar :curr-index="4" />
   </view>
 </template>
 <script>
@@ -80,9 +81,11 @@ import { getHotelList, getHotelTypeList } from "@/api/inn.js"
 import { getCurAddress, getLocation } from "@/utils/common"
 import FunHotelItem from './components/HotelItem'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
+import XddTabbar from '@/components/xdd-tabbar'
 export default {
   components: {
-    FunHotelItem
+    FunHotelItem,
+    XddTabbar
   },
   mixins: [pageListenMixins],
   data() {
@@ -291,4 +294,7 @@ export default {
     }
   }
 }
+.tabbar-page {
+  padding: 0 0 180rpx 0;
+}
 </style>

pages/user/User/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="user user-page">
+  <view class="user user-page tabbar-page">
     <view
       v-if="$store.getters.token || userInfo.uid"
       class="acea-row row-column"
@@ -239,10 +239,12 @@
         </view>
       </view>
     </uni-popup>
+    <xdd-tabbar :curr-index="3" />
   </view>
 </template>
 
 <script>
+import XddTabbar from '@/components/xdd-tabbar'
 import {mapGetters, mapMutations} from "vuex"
 import {
   getSpreadImg,
@@ -256,6 +258,9 @@ import cookie from "@/utils/store/cookie"
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 export default {
   name: 'UserPage',
+  components: {
+    XddTabbar
+  },
   mixins: [pageListenMixins],
   data() {
     return {
@@ -735,4 +740,7 @@ export default {
     height: 52rpx;
   }
 }
+.tabbar-page {
+  padding: 0 0 180rpx 0;
+}
 </style>