feat: 优化前端

mini/components/NavBar/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <view class="nav-bar main-center cross-center">
+    <view
+      v-for="(item,index) in navItem"
+      :key="index"
+      class="item dir-top-wrap cross-center"
+      @click="handleRedirect(item)"
+    >
+      <view class="icon">
+        <image :src="item.icon" />
+      </view>
+      <text>{{ item.name }}</text>
+    </view>
+    <!--充值-->
+    <recharge :show.sync="recharge.show" />
+  </view>
+</template>
+
+<script>
+
+import Recharge from '../Recharge/index'
+export default {
+  name: 'NavBar',
+  components: { Recharge },
+  data() {
+    return {
+      navItem: [
+        { icon: '', name: '排行榜', href: '/pages/' },
+        { icon: '', name: '最新', href: '/pages/' },
+        { icon: '', name: '会员', href: '/pages/member/index' },
+        { icon: '', name: '签到', href: '/pages/sign/index' },
+        { icon: '', name: '充值', type: 'recharge' }
+      ],
+      recharge: { show: false }
+    }
+  },
+  computed: {},
+  methods: {
+    handleRedirect(item) {
+      if (item.type === 'recharge') {
+        this.recharge.show = true
+      } else if (item.href) {
+        this.$u.route(item.href)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .nav-bar {
+    .item{
+      flex: 1;
+      font-size: 32rpx;
+      .icon{
+        image{
+          width: 100rpx;
+          height: 100rpx;
+        }
+      }
+      text{
+        color: #fff;
+      }
+    }
+  }
+</style>

mini/components/Recharge/index.vue

@@ -4,10 +4,14 @@
       :show="show"
       :mode="mode"
       round="20rpx"
+      :close-on-click-overlay="false"
       @close="close"
     >
       <view class="container">
-        <view class="static-text">充值金币</view>
+        <view class="static-text main-between cross-center">
+          <text>充值金币</text>
+          <u-icon name="close-circle" size="52rpx" color="#BEBDBB" @click="close" />
+        </view>
         <view class="overage">账户余额：<text>3金币</text></view>
 
         <view class="recharge-group dir-left-wrap">

mini/components/TabBar/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <view class="tab-bar">
+    <view class="content main-between cross-center">
+      <view
+        v-for="(item,index) in list"
+        :key="index"
+        class="tab-item dir-top-wrap cross-center main-center"
+        :class="{active: active === index}"
+        @click="handleSwitch(index)"
+      >
+        <view class="icon">
+          <image :src="active === index ? item.selectedIconPath : item.iconPath" mode="aspectFit" />
+        </view>
+        <text>{{ item.text }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'TabBar',
+  data() {
+    return {
+      color: '#8a8a8a',
+      selectedColor: '#6EEBE8',
+      list: [
+        {
+          'pagePath': '/pages/index/index',
+          'iconPath': '/static/image/tab/home.png',
+          'selectedIconPath': '/static/image/tab/home-HL.png',
+          'text': '首页'
+        },
+        {
+          'pagePath': '/pages/trace/index',
+          'iconPath': '/static/image/tab/trace.png',
+          'selectedIconPath': '/static/image/tab/trace-HL.png',
+          'text': '追剧'
+        },
+        {
+          'pagePath': '/pages/my/index',
+          'iconPath': '/static/image/tab/my.png',
+          'selectedIconPath': '/static/image/tab/my-HL.png',
+          'text': '我的'
+        }
+      ]
+    }
+  },
+  computed: {
+    ...mapState({
+      active: seate => seate.tab.index
+    })
+  },
+  created() {
+    this.calc()
+    uni.hideTabBar()
+  },
+  methods: {
+    handleSwitch(index) {
+      if (index === this.active) {
+        return
+      }
+      this.$store.dispatch('tab/index', index)
+      const item = this.list[index]
+      uni.switchTab({
+        url: item.pagePath
+      })
+    },
+    calc() {
+      let active = 1
+      const page = uni.$u.page()
+      this.list.forEach((obj, index) => {
+        if (obj.pagePath === page) {
+          active = index
+        }
+      })
+      if (active !== this.active) {
+        this.$store.dispatch('tab/index', active)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .tab-bar{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    .content{
+      background: $bg-color;
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 120rpx;
+      background-size: 110% 100%;
+
+      .tab-item{
+        flex: 1;
+        color: #8a8a8a;
+        transition: .3s;
+        font-size: 24rpx;
+        position: relative;
+        &.active{
+          color: #6EEBE8;
+        }
+        .icon{
+          width: 42rpx;
+          height: 42rpx;
+          image{
+            height: 100%;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+</style>

mini/pages/index/index.vue

@@ -26,45 +26,26 @@
     <!--swpier-->
     <swiper-box />
     <!--栏目分类-->
-    <view class="category-box main-center cross-center">
-      <view
-        v-for="(item,index) in category"
-        :key="index"
-        class="category-item dir-top-wrap cross-center"
-        @click="handleRedirect(item)"
-      >
-        <view class="icon">
-          <image :src="item.icon" />
-        </view>
-        <text>{{ item.name }}</text>
-      </view>
-    </view>
+    <nav-bar />
     <!--分类-->
     <episode-box title="短剧推荐" />
     <episode-box title="最新热剧" />
     <episode-box title="排行榜" />
-    <!--充值-->
-    <recharge :show.sync="recharge.show" />
+    <!--tab bar-->
+    <tab-bar />
   </view>
 </template>
 
 <script>
 import SwiperBox from '../../components/SwiperBox/index'
 import EpisodeBox from './components/EpisodeBox'
-import Recharge from '../../components/Recharge/index'
+import TabBar from '../../components/TabBar/index'
+import NavBar from '../../components/NavBar/index'
 export default {
-  components: { Recharge, EpisodeBox, SwiperBox },
+  components: { NavBar, TabBar, EpisodeBox, SwiperBox },
   data() {
     return {
-      keywords: '',
-      category: [
-        { icon: '', name: '排行榜', href: '/pages/' },
-        { icon: '', name: '最新', href: '/pages/' },
-        { icon: '', name: '会员', href: '/pages/member/index' },
-        { icon: '', name: '签到', href: '/pages/sign/index' },
-        { icon: '', name: '充值', type: 'recharge' }
-      ],
-      recharge: { show: false }
+      keywords: ''
     }
   },
   computed: {
@@ -72,13 +53,7 @@ export default {
   onLoad(options) {
   },
   methods: {
-    handleRedirect(item) {
-      if (item.type === 'recharge') {
-        this.recharge.show = true
-      } else if (item.href) {
-        this.$u.route(item.href)
-      }
-    }
+
   }
 }
 </script>

mini/pages/my/index.vue

@@ -56,12 +56,16 @@
         <u-icon name="arrow-right" :color="$colors.infoColor" bold />
       </button>
     </view>
+    <!--tab bar-->
+    <tab-bar />
   </view>
 </template>
 
 <script>
+import TabBar from '../../components/TabBar/index'
 export default {
   name: 'My',
+  components: { TabBar },
   data() {
     return {
       history: [1, 2, 3, 4],

mini/pages/trace/index.vue

@@ -47,14 +47,17 @@
         />
       </view>
     </view>
+    <!--tab bar-->
+    <tab-bar />
   </view>
 </template>
 
 <script>
 import Episode from '../../components/Episode/index'
+import TabBar from '../../components/TabBar/index'
 export default {
   name: 'Trace',
-  components: { Episode },
+  components: { TabBar, Episode },
   data() {
     return {
       collect: [