me页面优化

src/components/Indicator.vue

@@ -82,7 +82,7 @@ export default {
           e.x.distance / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px')
     },
     end(index) {
-      console.log(index)
+      // console.log(index)
       this.currentSlideItemIndex = index
       this.$setCss(this.indicatorRef, 'transition-duration', `300ms`)
       this.$setCss(this.indicatorRef, 'left',

src/components/Posters.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="posters">
-    <div class="poster-item" v-for="i in list" @click="$nav('/video-detail')">
+    <div class="poster-item" v-for="i in list" >
       <img class="poster" src="../assets/img/poster/2.jpg" alt="">
       <div class="num">
         <img class="love" src="../assets/img/icon/love.svg" alt="">
@@ -12,6 +12,7 @@
 
 <script>
 export default {
+  /*@click="$nav('/video-detail')"*/
   name: "Posters",
   props: {
     list: {

src/components/Search.vue

@@ -8,7 +8,7 @@
         <img v-if="value.length && (!$slots.default)" src="../assets/img/icon/close.svg" @click.stop="clear">
       </div>
     </div>
-    <div v-if="isShowText" class="notice" :style="{color : notice}" @click.stop="$emit('notice')">搜索</div>
+    <div v-if="isShowText" class="notice" :style="{color : notice}" @click.stop="$emit('notice')">{{ showText }}</div>
   </div>
 </template>
 
@@ -32,6 +32,10 @@ export default {
       type: Boolean,
       default: false
     },
+    showText:{
+      type:String,
+      default:'搜索'
+    }
   },
   methods: {
     clear() {

src/pages/login/countryChoose.vue

@@ -1,11 +1,10 @@
 <template>
   <div class='countryChoose'>
     <base-header>
-      <template v-slot:center>
+      <template v-slot:center>切换城市</template>
-        选择国家或地区
-      </template>
       <template v-slot:bottom>
         <Search :isShowText="isShowText"
+                showText="取消"
                 @click="isShowText = true"
                 @notice="isShowText = false;"
                 @clear="isShowText = false"
@@ -13,13 +12,41 @@
       </template>
     </base-header>
     <div ref="list" class="content" @scroll="scroll">
-      <div class="row no-active">
+      <div class="row no-active no-padding">默认位置</div>
-        默认位置
+      <div class="row no-active border no-padding">同城</div>
+      <div class="top">
+        <div class="row no-active no-padding">历史访问</div>
+        <div class="cities">
+          <span class="city">大连</span>
+          <span class="city">深圳</span>
+          <span class="city">北京</span>
+          <span class="city">上海</span>
+        </div>
       </div>
-      <div class="row no-active">
+      <div class="top">
-        同城
+        <div class="row no-active no-padding">抖单热门城市</div>
+        <div class="cities">
+          <span class="city">深圳</span>
+          <span class="city">北京</span>
+          <span class="city">上海</span>
+          <span class="city">成都</span>
+          <span class="city">广州</span>
+          <span class="city">重庆</span>
+          <span class="city">西安</span>
+          <span class="city">苏州</span>
+          <span class="city">武汉</span>
+          <span class="city">杭州</span>
+          <span class="city">郑州</span>
+          <span class="city">南京</span>
+          <span class="city">合肥</span>
+          <span class="city">长沙</span>
+          <span class="city">福州</span>
+        </div>
       </div>
       <div class="list">
+        <div v-if="currentFixedIndicator" class="row no-active no-padding border index fixed">
+          <span>{{ currentFixedIndicator }}</span>
+        </div>
         <div v-for="(value, name)  of countryOk">
           <div :class="name" class="row no-active no-padding border index">
             <span>{{ name }}</span>
@@ -2297,18 +2324,23 @@ export default {
           }
         ]
       },
+      history: [],
       isShowText: false,
       searchKey: '',
-      indexOffsetTop: {}
+      indexOffsetTop: {},
+      // currentFixedIndicator: null,
+      currentFixedIndicator: 'A',
     }
   },
   created() {
+    this.history = localStorage.getItem('locationSearchHistory')
   },
   mounted() {
     let indexs = document.querySelectorAll('.index')
     indexs.forEach(v => {
       this.indexOffsetTop[v.children[0].innerText] = v.offsetTop
     })
+    console.log(this.indexOffsetTop)
     let items = document.querySelectorAll('.item')
     let item = document.querySelector(`.item:nth-child(2)`)
     let itemHeight = item.clientHeight
@@ -2326,7 +2358,7 @@ export default {
       let pageY = e.touches[0].pageY - ulOffsetTop
       let currentIndex = pageY / itemHeight
       currentIndex = Math.floor(currentIndex)
-      if (currentIndex >= 0 && currentIndex < 26) {
+      if (currentIndex >= 0 && currentIndex < 27) {
         render(currentIndex)
       }
     })
@@ -2354,7 +2386,7 @@ export default {
             items[preIndex].style.color = `#ffffff${22 * i}`
           }
         }
-        if (nextIndex < 26) {
+        if (nextIndex < 27) {
           if (i === 4) {
             items[nextIndex].style.transform = `translate3d(0,0,0) ${resetScale}`
             items[nextIndex].style.color = resetColor
@@ -2375,15 +2407,26 @@ export default {
       }
       let py = el.innerText
       if (document.querySelector(`.${py}`)) {
-        list.scrollTop = document.querySelector(`.${py}`).offsetTop - 110
+        list.scrollTop = document.querySelector(`.${py}`).offsetTop - 100
       }
     },
     scroll(e) {
-      // console.log()
+      // let isFixed = document.querySelector(`.fixed`)
-      let listScrollTop = e.target.scrollTop + 100
+      // console.log(isFixed)
-      for (const item of this.indexOffsetTop) {
+      // let listScrollTop = e.target.scrollTop + (isFixed ? 110 : 110)
-
+      let listScrollTop = e.target.scrollTop + 110
+      // console.log('listScrollTop', listScrollTop)
+      let currentKey = null
+      for (const key in this.indexOffsetTop) {
+        // if (currentKey) break
+        let offsetTop = this.indexOffsetTop[key]
+        // console.log('offsetTop',offsetTop)
+        if (offsetTop < listScrollTop) {
+          currentKey = key
+        }
       }
+      this.currentFixedIndicator = currentKey
+      // console.log('currentKey', currentKey)
     }
   }
 }
@@ -2403,7 +2446,7 @@ export default {
   overflow: hidden;
 
   .indicator-ctn {
-    width: 2rem;
+    width: 2.5rem;
     height: 100vh;
     position: fixed;
     z-index: 3;
@@ -2414,7 +2457,7 @@ export default {
     justify-content: center;
 
     .indicator {
-      width: 2rem;
+      width: 2.5rem;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -2448,12 +2491,31 @@ export default {
   .content {
     height: calc(100% - 11rem);
     margin-top: 11rem;
+    padding: 0 2.5rem 0 2rem;
+    box-sizing: border-box;
     width: 100%;
     overflow-y: scroll;
 
+    .top {
+      padding-bottom: 1rem;
+      border-bottom: 1px solid $line-color;
+
+      .cities {
+        .city {
+          margin-right: .4rem;
+          margin-bottom: .4rem;
+          border-radius: .2rem;
+          height: 4rem;
+          line-height: 4rem;
+          background: $second-btn-color-tran;
+          display: inline-block;
+          width: 32%;
+          text-align: center;
+        }
+      }
+    }
+
     .list {
-      padding-left: 2rem;
-      padding-right: 2rem;
       //padding-right: 2.5rem;
 
       .row {

src/pages/me/Me2.vue

@@ -0,0 +1,352 @@
+<template>
+  <div class="Me">
+    <SlideRowList style="width: 100vw;" v-model:active-index="baseActiveIndex">
+      <SlideItem>
+        <div class="scroll"
+             ref="scroll"
+             @touchstart="touchStart($event)"
+             @touchmove="touchMove($event)"
+             @touchend="touchEnd($event)">
+          <div ref="desc" class="desc">
+            <div style="height: 380px;"></div>
+          </div>
+          <div ref="content" class="test " :class="isFixed?'fixed':''" style="margin-bottom: 60px;">
+            <Indicator
+                name="videoList"
+                :fixed="indicatorFixed"
+                tabStyleWidth="25%"
+                :tabTexts="['作品','私密','喜欢','收藏']"
+                v-model:active-index="contentIndex">
+            </Indicator>
+            <SlideRowList
+                name="videoList"
+                :indicator-fixed="indicatorFixed"
+                v-model:active-index="contentIndex">
+              <SlideItem style="overflow: auto;height: 100vh;">
+                <div ref="tab-content1">
+                  <Posters :list="25"></Posters>
+                  <div class="no-more">暂时没有更多了</div>
+                </div>
+              </SlideItem>
+              <SlideItem>
+                <div ref="tab-content2">
+                  <Posters :list="5"></Posters>
+                  <div class="no-more">暂时没有更多了</div>
+                </div>
+              </SlideItem>
+              <SlideItem>
+                <div ref="tab-content3">
+                  <Posters :list="5"></Posters>
+                  <div class="no-more">暂时没有更多了</div>
+                </div>
+              </SlideItem>
+              <SlideItem>
+                <div ref="tab-content3">
+                  <Posters :list="5"></Posters>
+                  <div class="no-more">暂时没有更多了</div>
+                </div>
+              </SlideItem>
+            </SlideRowList>
+          </div>
+        </div>
+        <Footer v-bind:init-tab="5"/>
+      </SlideItem>
+      <SlideItem style="min-width: 70vw; overflow:auto;">
+        <transition name="fade">
+          <div class="ul" v-if="!isMoreFunction">
+            <div class="li" @click="$nav('/my-card')">
+              <img src="../../assets/img/icon/newicon/left_menu/shopping.png" alt="">
+              <span>我的订单</span>
+            </div>
+            <div class="li" @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/newicon/left_menu/wallet.png" alt="">
+              <span>钱包</span>
+            </div>
+            <div class="line"></div>
+
+            <div class="li" @click="$nav('/me/right-menu/look-history')">
+              <img src="../../assets/img/icon/newicon/left_menu/clock.png" alt="">
+              <span>观看历史</span>
+            </div>
+            <div class="li" @click="$nav('/my-card')">
+              <img src="../../assets/img/icon/newicon/left_menu/qrcode.png" alt="">
+              <span>我的二维码</span>
+            </div>
+            <div class="li" @click="$nav('')">
+              <img src="../../assets/img/icon/newicon/left_menu/workbench.png" alt="">
+              <span>创作者服务中心</span>
+            </div>
+
+            <div class="line"></div>
+
+            <div class="li" @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/newicon/left_menu/bytedance-mini-app.png" alt="">
+              <span>小程序</span>
+            </div>
+            <div class="li" @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/newicon/left_menu/gongyi.png" alt="">
+              <span>抖音公益</span>
+            </div>
+            <div class="li" @click="$nav('/me/right-menu/minor-protection/index')">
+              <img src="../../assets/img/icon/newicon/left_menu/umbrella.png" alt="">
+              <span>未成年保护工具</span>
+            </div>
+            <div class="li" @click="$nav('MyCard')">
+              <img src="../../assets/img/icon/newicon/left_menu/headset.png" alt="">
+              <span>我的客服</span>
+            </div>
+            <div class="li" @click="$nav('/me/right-menu/setting')">
+              <img src="../../assets/img/icon/newicon/left_menu/setting-one.png" alt="">
+              <span>设置</span>
+            </div>
+          </div>
+          <div v-else class="more-function">
+            <div class="title">生活服务</div>
+            <div class="functions">
+              <div class="function">
+                <img src="../../assets/img/icon/newicon/left_menu/quan.png" alt="">
+                <span>卡券</span>
+              </div>
+              <div class="function">
+                <img src="../../assets/img/icon/newicon/left_menu/sd-card.png" alt="">
+                <span>免流量</span>
+              </div>
+              <div class="function" @click="$nav('MyCollect')">
+                <img src="../../assets/img/icon/newicon/left_menu/alarmmmmmmmmmmmm.png" alt="">
+                <span>视频彩铃</span>
+              </div>
+            </div>
+            <div class="title">拓展功能</div>
+            <div class="functions">
+              <div class="function" @click="$nav('MyCard')">
+                <img src="../../assets/img/icon/newicon/left_menu/sun-one.png" alt="">
+                <span>我的动态</span>
+              </div>
+              <div class="function">
+                <img src="../../assets/img/icon/newicon/left_menu/download.png" alt="">
+                <span>我的缓存</span>
+              </div>
+              <div class="function" @click="$nav('MyCard')">
+                <img src="../../assets/img/icon/newicon/left_menu/hot.png" alt="">
+                <span>上热门</span>
+              </div>
+              <div class="function" @click="$nav('MyCollect')">
+                <img src="../../assets/img/icon/newicon/left_menu/shop.png" alt="">
+                <span>小店随心推</span>
+              </div>
+              <div class="function" @click="$nav('MyCollect')">
+                <img src="../../assets/img/icon/newicon/left_menu/yuandi.png" alt="">
+                <span>投教园地</span>
+              </div>
+            </div>
+          </div>
+        </transition>
+        <div class="button-ctn">
+          <div class="button" v-if="!isMoreFunction" @click="isMoreFunction = true">
+            <img src="../../assets/img/icon/newicon/left_menu/more.png" alt="">
+            <span>更多功能</span>
+          </div>
+          <div class="button" v-if="isMoreFunction" @click="isMoreFunction = false">
+            <span>返回</span>
+          </div>
+        </div>
+      </SlideItem>
+    </SlideRowList>
+  </div>
+</template>
+<script>
+import Posters from '../../components/Posters'
+import Footer from "../../components/Footer";
+import Indicator from '../../components/Indicator'
+
+export default {
+  name: "Me",
+  components: {Posters, Footer, Indicator},
+  data() {
+    return {
+      isFixed: false,
+      serviceEl: {},
+      serviceHeight: 0,
+      contentIndex: 0,
+      baseActiveIndex: 0,
+      desc: null,
+      tabContents: [],
+      indicatorHeight: 42,
+      indicatorFixed: false,
+      refs: {
+        header: null,
+        headerHeight: 0,
+      },
+      isMoreFunction: false,
+      startLocationY: 0,
+      moveYDistance: 0,
+    }
+  },
+  computed: {
+    bodyHeight() {
+      return this.$store.state.bodyHeight
+    },
+  },
+  mounted() {
+  },
+  methods: {
+    touchStart(e) {
+      this.startLocationY = e.touches[0].pageY
+    },
+    touchMove(e) {
+      let distance = this.moveYDistance + e.touches[0].pageY - this.startLocationY
+      console.log(distance)
+      if (this.indicatorFixed && Math.abs(distance) > 380) {
+
+      } else {
+
+      }
+      this.indicatorFixed = Math.abs(distance) > 380
+      this.$refs.scroll.style.transform = `translate3d(0,${distance}px,0)`
+    },
+    touchEnd(e) {
+      this.moveYDistance = this.moveYDistance + e.changedTouches[0].pageY - this.startLocationY
+      console.log('end', this.moveYDistance)
+      this.indicatorFixed = Math.abs(this.moveYDistance) > 380
+    }
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+@import "../../assets/scss/index";
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  transform: translateY(10px);
+  opacity: 0;
+}
+
+.Me {
+  background: $main-bg;
+  height: 100%;
+  width: 100%;
+
+  .no-more {
+    font-size: 1.4rem;
+    padding: 10px;
+    color: gray;
+    text-align: center;
+  }
+
+  .ul {
+    font-size: 1.4rem;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    color: white;
+    background: $main-bg;
+
+    .line {
+      height: 1px;
+      background: #cccccc;
+      opacity: .1;
+      margin: 5px 20px;
+    }
+
+    .li {
+      box-sizing: border-box;
+      background: $main-bg;
+      width: 100%;
+      padding: 1rem 2rem;
+      list-style: none;
+      display: flex;
+      align-items: center;
+      line-height: 4rem;
+
+      &:nth-last-child(1) {
+        margin-bottom: 90px;
+      }
+
+      &:active {
+        background: #454b65;
+      }
+
+      img {
+        height: 20px;
+        width: 20px;
+        margin-right: 15px;
+      }
+    }
+  }
+
+  .more-function {
+    box-sizing: border-box;
+    font-size: 1.2rem;
+    width: 100%;
+    position: absolute;
+    background: $main-bg;
+
+    .title {
+      padding: 2rem 0 1rem 2rem;
+      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 {
+          border-radius: 50%;
+          background: $second-btn-color-tran;
+          padding: .6rem;
+          height: 1.6rem;
+          margin-bottom: 15px;
+        }
+      }
+    }
+  }
+
+  .button-ctn {
+    font-size: 1.4rem;
+    z-index: 99999;
+    width: 70vw;
+    position: absolute;
+    bottom: 0;
+    background: $main-bg;
+
+    .button {
+      box-sizing: border-box;
+      width: calc(100% - 4rem);
+      background: $second-btn-color;
+      margin: 2rem;
+      height: 4.5rem;
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+
+      img {
+        height: 25px;
+        width: 25px;
+        margin-right: 15px;
+      }
+    }
+  }
+
+}
+</style>

src/router/index.js

@@ -35,6 +35,7 @@ import MinorProtectionIndex from "../pages/me/rightMenu/MinorProtection/Index";
 import MinorProtectionDetailSetting from "../pages/me/rightMenu/MinorProtection/DetailSetting";
 import TriggerTime from "../pages/me/rightMenu/MinorProtection/TriggerTime";
 import Setting from "../pages/me/rightMenu/Setting";
+import Me2 from "../pages/me/Me2";
 
 const routes = [
   // {path: '', component: Music},
@@ -45,7 +46,8 @@ const routes = [
   {path: '/publish', component: Publish},
   {path: '/test', component: Test},
   {path: '/message', component: Message},
-  {path: '/me', component: Me},
+  // {path: '/me', component: Me},
+  {path: '/me', component: Me2},
   {path: '/edit-userinfo', component: EditUserInfo},
   {path: '/edit-userinfo-item', component: EditUserInfoItem},
   {path: '/music', component: Music},

src/utils/global-methods.js

@@ -134,7 +134,7 @@ export default {
     return parseFloat(val)
   },
   $setCss(el, key, value) {
-    console.log(value)
+    // console.log(value)
     if (key === 'transform') {
       //直接设置不生效
       el.style.webkitTransform = el.style.MsTransform = el.style.msTransform = el.style.MozTransform = el.style.OTransform = el.style.transform = value;