完善me页面

src/App.vue

@@ -57,4 +57,5 @@ export default {
 }
 
 
+
 </style>

src/main.js

@@ -1,129 +1,19 @@
 import * as Vue from 'vue'
-import * as VueRouter from 'vue-router'
-import * as Vuex from 'vuex'
 import App from './App.vue'
 import mitt from 'mitt'
 
 import './assets/scss/index.scss'
-import Index from './pages/home/Index.vue'
-import Attention from './pages/home/Attention.vue'
-import Message from './pages/home/Message.vue'
-import Me from './pages/home/Me.vue'
-import Music from './components/common/Music.vue'
-import countryChoose from "./pages/login/countryChoose.vue"
-import MyCard from "./pages/me/MyCard.vue"
-
 
 import BaseHeader from "./components/BaseHeader.vue"
-import MyCollect from "./pages/me/MyCollect.vue";
 import BaseSlideList from "./components/BaseSlideList.vue";
 import BaseSlideItem from "./components/BaseSlideItem.vue";
-import Me2 from "./pages/home/Me2";
+import router from "./router";
+import store from "./store";
+import globalMethods from './utils/global-methods'
 
-// 我们后面再讨论嵌套路由。
-const routes = [
-  // {path: '', component: Music},
-  {path: '/', component: Index},
-  {path: '/home', component: Index},
-  {path: '/attention', component: Attention},
-  {path: '/message', component: Message},
-  {path: '/me', component: Me},
-  {path: '/me2', component: Me2},
-  {path: '/music', component: Music},
-  {path: '/countryChoose', component: countryChoose},
-  {path: '/MyCard', component: MyCard},
-  {path: '/MyCollect', component: MyCollect},]
-
-const router = VueRouter.createRouter({
-  history: VueRouter.createWebHashHistory(),
-  routes, // `routes: routes` 的缩写
-})
-
-const store = Vuex.createStore({
-  state: {
-    pageAnim: 'none',
-    playDuration: 60,
-    currentVideoId: null,
-    bodyHeight: document.body.clientHeight,
-    bodyWidth: document.body.clientWidth
-  },
-  mutations: {
-    setPageAnim(state, states) {
-      state.pageAnim = states
-    },
-    setPlayDuration(state, v) {
-      state.playDuration = v
-    },
-    setCurrentVideoId(state, v) {
-      state.currentVideoId = v
-    },
-  }
-})
-
-const myMixin = {
+const mixin = {
   methods: {
-    $stopPropagation(e) {
-      e.stopImmediatePropagation()
-      e.stopPropagation()
-      e.preventDefault()
-    },
-    $getCss(curEle, attr) {
-      let val = null, reg = null
-      if ("getComputedStyle" in window) {
-        val = window.getComputedStyle(curEle, null)[attr]
-      } else {   //ie6~8不支持上面属性
-        //不兼容
-        if (attr === "opacity") {
-          val = curEle.currentStyle["filter"]   //'alpha(opacity=12,345)'
-          reg = /^alphaopacity=(\d+(?:\.\d+)?)opacity=(\d+(?:\.\d+)?)$/i
-          val = reg.test(val) ? reg.exec(val)[1] / 100 : 1
-        } else {
-          val = curEle.currentStyle[attr]
-        }
-      }
-      // reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
-      // return reg.test(val) ? parseFloat(val) : val
-      return parseFloat(val)
-    },
-    $setCss(el, key, value) {
-      if (key === 'transform') {
-        //直接设置不生效
-        el.style.webkitTransform = el.style.MsTransform = el.style.msTransform = el.style.MozTransform = el.style.OTransform = el.style.transform = value;
-      } else {
-        el.style[key] = value
-      }
-    },
-    $nav(path, query = {}) {
-      this.$router.push({path, query})
-    },
-    $clone(v) {
-      return JSON.parse(JSON.stringify(v))
-    },
-    $console(v) {
-      return console.log(JSON.stringify(v, null, 4))
-    },
-    $duration(v) {
-      let m = Math.floor(v / 60)
-      // let s = v % 60
-      let s = Math.round(v % 60)
-      let str = ''
-      if (m === 0) {
-        str = '00'
-      } else if (m > 0 && m < 10) {
-        str = '0' + m
-      } else {
-        str = m
-      }
-      str += ':'
-      if (s === 0) {
-        str += '00'
-      } else if (s > 0 && s < 10) {
-        str += '0' + s
-      } else {
-        str += s
-      }
-      return str
-    }
+    ...globalMethods
   }
 }
 const app = Vue.createApp(App)
@@ -132,7 +22,7 @@ app.provide('mitt', mitt())
 app.component('BaseHeader', BaseHeader)
 app.component('BaseSlideList', BaseSlideList)
 app.component('BaseSlideItem', BaseSlideItem)
-app.mixin(myMixin)
+app.mixin(mixin)
 app.use(router)
 app.use(store)
 app.mount('#app')

src/pages/home/Me.vue

@@ -3,9 +3,10 @@
     <SlideList style="width: 100vw;"
                @first="first"
                @end="end"
+               @move="move"
                v-model:active-index="baseActiveIndex"
     >
-      <SlideItem style="overflow:auto;" @scroll="scroll">
+      <SlideItem style="overflow:auto;" :style="contentStyle" @scroll="scroll" @click="click">
         <div ref="desc" class="desc">
           <header ref="header">
             <img src="../../assets/img/icon/next.svg" alt="" @click="$emit('back')">
@@ -73,6 +74,7 @@
               :show-indicator="true"
               :indicator-fixed="indicatorFixed"
               indicator-type="me"
+              @end="end"
               v-model:active-index="contentIndex">
             <SlideItem>
               <div ref="tab-content1">
@@ -98,80 +100,111 @@
         </div>
         <Footer v-bind:init-tab="5"/>
       </SlideItem>
-      <SlideItem style="min-width: 60vw;line-height: 50px; overflow:auto;">
-        <ul>
-          <li @click="$nav('MyCard')">
-            <img src="../../assets/img/icon/card-gray.png" alt="">
-            <span>个人名片</span>
-          </li>
-          <li @click="$nav('MyCollect')">
-            <img src="../../assets/img/icon/collect-gray.png" alt="">
-            <span>我的收藏</span>
-          </li>
-          <div class="line"></div>
-          <li>
-            <img src="../../assets/img/icon/wallet-gray.png" alt="">
-            <span>钱包</span>
-          </li>
-          <li>
-            <img src="../../assets/img/icon/order-gray.png" alt="">
-            <span>订单</span>
-          </li>
-          <li class="exception" @click="toggleService()">
-            <div class="d-flex align-items-center">
-              <img src="../../assets/img/icon/category-gray.png" alt="">
-              <span>服务</span>
+      <SlideItem style="min-width: 70vw; overflow:auto;">
+        <transition name="fade">
+          <ul v-if="!isMoreFunction">
+            <li @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/card-gray.png" alt="">
+              <span>我的订单</span>
+            </li>
+            <li @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/wallet-gray.png" alt="">
+              <span>钱包</span>
+            </li>
+            <div class="line"></div>
+
+            <li @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/card-gray.png" alt="">
+              <span>我的收藏</span>
+            </li>
+            <li @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/card-gray.png" alt="">
+              <span>观看历史</span>
+            </li>
+            <li @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/card-gray.png" alt="">
+              <span>我的动态</span>
+            </li>
+            <li @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/card-gray.png" alt="">
+              <span>创作者服务中心</span>
+            </li>
+
+            <div class="line"></div>
+
+            <li @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/link-gray.png" alt="">
+              <span>小程序</span>
+            </li>
+            <li @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/card-gray.png" alt="">
+              <span>抖音公益</span>
+            </li>
+            <li @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/umbrella-gray.png" alt="">
+              <span>未成年保护工具</span>
+            </li>
+            <li @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/card-gray.png" alt="">
+              <span>我的客服</span>
+            </li>
+            <li @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/setting-gray.png" alt="">
+              <span>设置</span>
+            </li>
+          </ul>
+          <div v-else class="more-function">
+            <div class="title">生活服务</div>
+            <div class="functions">
+              <div class="function">
+                <img src="../../assets/img/icon/juan-gray.png" alt="">
+                <span>卡券</span>
+              </div>
+              <div class="function">
+                <img src="../../assets/img/icon/order-gray.png" alt="">
+                <span>免流量</span>
+              </div>
+
+              <div class="function" @click="$nav('MyCollect')">
+                <img src="../../assets/img/icon/collect-gray.png" alt="">
+                <span>我的收藏</span>
+              </div>
+            </div>
+            <div class="title">拓展功能</div>
+            <div class="functions">
+              <div class="function" @click="$nav('MyCard')">
+                <img src="../../assets/img/icon/card-gray.png" alt="">
+                <span>我的二维码</span>
+              </div>
+              <div class="function">
+                <img src="../../assets/img/icon/order-gray.png" alt="">
+                <span>我的缓存</span>
+              </div>
+              <div class="function" @click="$nav('MyCard')">
+                <img src="../../assets/img/icon/card-gray.png" alt="">
+                <span>上热门</span>
+              </div>
+              <div class="function" @click="$nav('MyCollect')">
+                <img src="../../assets/img/icon/collect-gray.png" alt="">
+                <span>小店随心推</span>
+              </div>
+              <div class="function" @click="$nav('MyCollect')">
+                <img src="../../assets/img/icon/collect-gray.png" alt="">
+                <span>投教园地</span>
+              </div>
             </div>
-            <div class="triangle"></div>
-          </li>
-          <div class="service">
-            <li>
-              <img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
-              <span>购物助手</span>
-            </li>
-            <li>
-              <img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
-              <span>生活服务订单</span>
-            </li>
-            <li>
-              <img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
-              <span>DOU+ 上热门</span>
-            </li>
-            <li>
-              <img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
-              <span>彩铃服务</span>
-            </li>
-            <li>
-              <img src="../../assets/img/icon/order-gray.png" alt="" class="op0">
-              <span>免流量看抖音</span>
-            </li>
           </div>
+        </transition>
 
-          <div class="line"></div>
-
-          <li>
-            <img src="../../assets/img/icon/link-gray.png" alt="">
-            <span>小程序</span>
-          </li>
-          <li>
-            <img src="../../assets/img/icon/juan-gray.png" alt="">
-            <span>卡卷</span>
-          </li>
-
-          <div class="line"></div>
-
-          <li>
-            <img src="../../assets/img/icon/umbrella-gray.png" alt="">
-            <span>未成年保护工具</span>
-          </li>
-
-          <div class="line"></div>
-
-          <li>
-            <img src="../../assets/img/icon/setting-gray.png" alt="">
-            <span>设置</span>
-          </li>
-        </ul>
+        <div class="button-ctn">
+          <div class="button" v-if="!isMoreFunction" @click="isMoreFunction = true">
+            <img src="../../assets/img/icon/card-gray.png" alt="">
+            <span>更多功能</span>
+          </div>
+          <div class="button" v-if="isMoreFunction" @click="isMoreFunction = false">
+            <span>返回</span>
+          </div>
+        </div>
       </SlideItem>
     </SlideList>
   </div>
@@ -184,7 +217,7 @@ import Footer from "../../components/Footer";
 
 export default {
   name: "Me",
-  components: {SlideList, SlideItem, Posters,Footer},
+  components: {SlideList, SlideItem, Posters, Footer},
   data() {
     return {
       serviceEl: {},
@@ -198,17 +231,29 @@ export default {
       refs: {
         header: null,
         headerHeight: 0,
-      }
+      },
+      isMoreFunction: false,
+
     }
   },
   watch: {
     contentIndex(newVal, oldVal) {
       this.changeIndex(newVal, oldVal)
+    },
+    baseActiveIndex(newVal, oldVal) {
+      if (newVal === 1) {
+        console.log('right')
+      }
     }
   },
   computed: {
     bodyHeight() {
       return this.$store.state.bodyHeight
+    },
+    contentStyle(){
+      return{
+        opacity:1
+      }
     }
   },
   mounted() {
@@ -219,6 +264,18 @@ export default {
     })
   },
   methods: {
+    click(e) {
+      if (this.baseActiveIndex === 0) return
+      if (this.baseActiveIndex === 1) {
+        this.baseActiveIndex = 0
+        this.$stopPropagation(e)
+      }
+    },
+    move(e) {
+      if (e.x.isDrawRight) {
+        console.log('isDrawRight')
+      }
+    },
     scroll() {
       let top = this.tabContents[this.contentIndex].getBoundingClientRect().top
       this.indicatorFixed = top < this.indicatorHeight;
@@ -259,6 +316,7 @@ export default {
     },
     first(e) {
       if (this.baseActiveIndex !== 0) return
+      if (this.refs.header.getBoundingClientRect().top !== 0) return
       this.refs.header.style.transition = 'all 0s'
       this.refs.header.style.height = this.refs.headerHeight + (e / 3) + 'px'
     },
@@ -274,6 +332,18 @@ export default {
 <style scoped lang='scss'>
 $left-bg-color: #333;
 $right-bg-color: #2e3244;
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  transform: translateY(10px);
+  opacity: 0;
+}
+
 .Me {
   font-size: 1.6rem;
   height: 100%;
@@ -416,6 +486,10 @@ $right-bg-color: #2e3244;
     height: 100%;
     overflow: auto;
     padding: 0;
+    margin: 0;
+    position: absolute;
+    color: white;
+    background: $right-bg-color;
 
     .line {
       height: 1px;
@@ -424,42 +498,92 @@ $right-bg-color: #2e3244;
       margin: 5px 20px;
     }
 
-    .service {
-      transition: all .3s;
-      overflow: hidden;
-    }
-
     li {
       background: $right-bg-color;
-      padding: 20px;
+      padding: 10px 20px;
       list-style: none;
       display: flex;
       align-items: center;
+      line-height: 40px;
+
+      &:nth-last-child(1) {
+        margin-bottom: 90px;
+      }
 
       &:active {
         background: #454b65;
       }
 
       img {
-        height: 30px;
-        width: 30px;
-        margin-right: 20px;
-      }
-
-      &.exception {
-        justify-content: space-between;
-
-        .triangle {
-          transform: translateY(3px);
-          width: 0;
-          height: 0;
-          border-top: 7px solid #cccccc;
-          border-right: 7px solid transparent;
-          border-bottom: 7px solid transparent;
-          border-left: 7px solid transparent;
-        }
+        height: 20px;
+        width: 20px;
+        margin-right: 15px;
       }
     }
   }
+
+  .more-function {
+    box-sizing: border-box;
+    font-size: 1.2rem;
+    width: 100%;
+    position: absolute;
+    background: $right-bg-color;
+
+    .title {
+      padding: 20px;
+      color: gray;
+    }
+
+    .functions {
+      display: grid;
+      grid-template-columns: 33.33% 33.33%  33.33%;
+
+      color: white;
+
+      .function {
+        margin: 15px 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          height: 25px;
+          width: 25px;
+          margin-bottom: 15px;
+        }
+
+      }
+    }
+
+  }
+
+  .button-ctn {
+    z-index: 99999;
+    width: 70vw;
+    position: absolute;
+    bottom: 0;
+    background: $right-bg-color;
+
+    .button {
+      box-sizing: border-box;
+      width: calc(70vw - 40px);
+      background: #686464;
+      margin: 20px;
+      height: 50px;
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+
+      img {
+        height: 25px;
+        width: 25px;
+        margin-right: 15px;
+      }
+    }
+  }
+
 }
 </style>

src/pages/home/SlideList.vue

@@ -231,10 +231,17 @@ export default {
         this.homeLoadingMoveYDistance = this.moveYDistance
       }
 
+      //me页面，需要获取向下滑动的时候
       if (!this.isDrawDown) {
         this.$attrs['onFirst'] && this.$emit('first', this.moveYDistance)
       }
 
+      this.$attrs['onMove'] && this.$emit('move', {
+        x: {distance: this.moveXDistance, isDrawRight: this.isDrawRight},
+        y: {distance: this.moveYDistance, isDrawDown: this.isDrawDown},
+      })
+
+
       if (this.direction === 'row') {
         if (this.isCanRightWiping) {
           // //禁止在index=0页面的时候，向左划
@@ -250,7 +257,7 @@ export default {
         }
       } else {
         if (this.isCanDownWiping) {
-          if (this.currentSlideItemIndex === 0 && !this.isDrawDown)return; //在第一个item，并且想往下划。
+          if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return; //在第一个item，并且想往下划。
 
           if (this.virtual) {
             if (this.currentSlideItemIndex === this.total - 1 && this.isDrawDown) return

src/router/index.js

@@ -0,0 +1,30 @@
+import * as VueRouter from "vue-router";
+
+import Index from "../pages/home/Index";
+import Attention from "../pages/home/Attention";
+import Message from "../pages/home/Message";
+import Me from "../pages/home/Me";
+import Me2 from "../pages/home/Me2";
+import Music from "../components/common/Music";
+import countryChoose from "../pages/login/countryChoose";
+import MyCard from "../pages/me/MyCard";
+import MyCollect from "../pages/me/MyCollect";
+
+const routes = [
+  // {path: '', component: Music},
+  {path: '/', component: Index},
+  {path: '/home', component: Index},
+  {path: '/attention', component: Attention},
+  {path: '/message', component: Message},
+  {path: '/me', component: Me},
+  {path: '/me2', component: Me2},
+  {path: '/music', component: Music},
+  {path: '/countryChoose', component: countryChoose},
+  {path: '/MyCard', component: MyCard},
+  {path: '/MyCollect', component: MyCollect},
+]
+
+export default VueRouter.createRouter({
+  history: VueRouter.createWebHashHistory(),
+  routes, // `routes: routes` 的缩写
+})

src/store/index.js

@@ -0,0 +1,24 @@
+import * as Vuex from "vuex";
+
+const store = Vuex.createStore({
+  state: {
+    pageAnim: 'none',
+    playDuration: 60,
+    currentVideoId: null,
+    bodyHeight: document.body.clientHeight,
+    bodyWidth: document.body.clientWidth
+  },
+  mutations: {
+    setPageAnim(state, states) {
+      state.pageAnim = states
+    },
+    setPlayDuration(state, v) {
+      state.playDuration = v
+    },
+    setCurrentVideoId(state, v) {
+      state.currentVideoId = v
+    },
+  }
+})
+
+export default store

src/utils/global-methods.js

@@ -0,0 +1,64 @@
+export default {
+  $stopPropagation(e) {
+    e.stopImmediatePropagation()
+    e.stopPropagation()
+    e.preventDefault()
+  },
+  $getCss(curEle, attr) {
+    let val = null, reg = null
+    if ("getComputedStyle" in window) {
+      val = window.getComputedStyle(curEle, null)[attr]
+    } else {   //ie6~8不支持上面属性
+      //不兼容
+      if (attr === "opacity") {
+        val = curEle.currentStyle["filter"]   //'alpha(opacity=12,345)'
+        reg = /^alphaopacity=(\d+(?:\.\d+)?)opacity=(\d+(?:\.\d+)?)$/i
+        val = reg.test(val) ? reg.exec(val)[1] / 100 : 1
+      } else {
+        val = curEle.currentStyle[attr]
+      }
+    }
+    // reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i
+    // return reg.test(val) ? parseFloat(val) : val
+    return parseFloat(val)
+  },
+  $setCss(el, key, value) {
+    if (key === 'transform') {
+      //直接设置不生效
+      el.style.webkitTransform = el.style.MsTransform = el.style.msTransform = el.style.MozTransform = el.style.OTransform = el.style.transform = value;
+    } else {
+      el.style[key] = value
+    }
+  },
+  $nav(path, query = {}) {
+    this.$router.push({path, query})
+  },
+  $clone(v) {
+    return JSON.parse(JSON.stringify(v))
+  },
+  $console(v) {
+    return console.log(JSON.stringify(v, null, 4))
+  },
+  $duration(v) {
+    let m = Math.floor(v / 60)
+    // let s = v % 60
+    let s = Math.round(v % 60)
+    let str = ''
+    if (m === 0) {
+      str = '00'
+    } else if (m > 0 && m < 10) {
+      str = '0' + m
+    } else {
+      str = m
+    }
+    str += ':'
+    if (s === 0) {
+      str += '00'
+    } else if (s > 0 && s < 10) {
+      str += '0' + s
+    } else {
+      str += s
+    }
+    return str
+  }
+}