添加搜索页面

src/assets/scss/custom.less

@@ -1,4 +1,5 @@
 @import "color";
+@import "variables";
 
 .op0 {
   opacity: 0;
@@ -18,7 +19,7 @@
 }
 
 .row {
-  padding: 0 1.5rem;
+  padding: 0 @padding-page;
   display: flex;
   justify-content: space-between;
   align-items: center;

src/assets/scss/variables.less

@@ -1,2 +1,4 @@
 @footer-height: 6rem;
-@header-height: 6rem;
+@header-height: 6rem;
+
+@padding-page: 1.5rem;

src/components/Search.vue

@@ -92,7 +92,7 @@ export default {
   }
 
   .notice {
-    margin-left: 2rem;
+    margin-left: 1.5rem;
     font-size: 1.6rem;
   }
 
@@ -107,9 +107,9 @@ export default {
     align-items: center;
 
     .search-icon {
-      height: 2rem;
+      height: 2.2rem;
-      width: 2rem;
+      width: 2.2rem;
-      margin-left: 1rem;
+      margin-left: .7rem;
     }
 
     input {
@@ -119,7 +119,7 @@ export default {
       width: 100%;
       outline: none;
       border: none;
-      padding: 0 0 0 1rem;
+      padding: 0 0 0 .7rem;
       background: transparent;
 
       &::-webkit-input-placeholder {

src/components/dialog/FromBottomDialog.vue

@@ -25,7 +25,6 @@
       <slot></slot>
     </div>
   </transition>
-
 </template>
 <script>
 import Dom from "../../utils/dom";

src/components/dialog/SimpleConfirmDialog.vue

@@ -3,8 +3,8 @@
     <div class="content" @click.stop="stop">
       <div class="item">{{ title }}</div>
       <div class="footer">
-        <div class="cancel" @click.stop="$emit('cancel')">放弃</div>
+        <div class="cancel" @click.stop="$emit('cancel')">{{ cancelText }}</div>
-        <div class="ok" @click.stop="$emit('ok')">保存</div>
+        <div class="ok" @click.stop="$emit('ok')">{{ okText }}</div>
       </div>
     </div>
   </div>
@@ -22,13 +22,26 @@ export default {
       default() {
         return ''
       }
-    }
+    },
+    okText: {
+      type: String,
+      default() {
+        return '保存'
+      }
+    },
+    cancelText: {
+      type: String,
+      default() {
+        return '放弃'
+      }
+    },
   },
   data() {
     return {}
   },
-  methods:{
+  methods: {
-    stop(){}
+    stop() {
+    }
   }
 }
 </script>

src/components/slide/SlideRowList.vue

@@ -18,6 +18,7 @@
         </div>
         <img src="../../assets/img/icon/search-gray.png" alt=""
              :style="{opacity:loading ? 0 : 1}"
+             @click="$nav('/home/search')"
              style="margin-top: .5rem;">
       </div>
       <Loading class="loading" style="width: 4rem;" :style="loadingStyle" :is-full-screen="false"/>

src/config/index.js

@@ -1,8 +1,8 @@
 export default {
-  baseUrl: 'http://192.168.0.103/index.php/v1',
+  // baseUrl: 'http://192.168.0.103/index.php/v1',
-  filePreview:'http://192.168.0.103/static/uploads/',
+  // filePreview:'http://192.168.0.103/static/uploads/',
-  // baseUrl: 'http://192.168.10.164/index.php/v1',
+  baseUrl: 'http://192.168.10.164/index.php/v1',
-  // filePreview:'http://192.168.10.164/static/uploads/'
+  filePreview:'http://192.168.10.164/static/uploads/'
   // baseUrl: 'http://localhost/index.php/v1',
   // filePreview:'http://localhost/static/uploads/'
 }

src/pages/home/Attention.vue

@@ -62,7 +62,7 @@
             <div class="item" v-for="item in left" @click="scrollToTop">
               <template v-if="item.type === 0">
                 <div class="wrapper">
-                  <img class="poster" :src="item.src"/>
+                  <img class="poster" v-lazy="$imgPreview(item.src)"/>
                   <img :src="item.author" alt="" class="author">
                 </div>
                 <div class="location" v-if="item.address">
@@ -120,7 +120,7 @@
             <div class="item" v-for="item in right">
               <template v-if="item.type === 0">
                 <div class="wrapper">
-                  <img class="poster" :src="item.src"/>
+                  <img class="poster" v-lazy="$imgPreview(item.src)"/>
                   <img :src="item.author" alt="" class="author">
                 </div>
                 <div class="location" v-if="item.address">

src/pages/home/Index2.vue

@@ -127,7 +127,8 @@
            :videoId="videos[videoActiveIndex]?.id"
            :canDownload="videos[videoActiveIndex]?.canDownload"
            @play-feedback="showPlayFeedback = true"
-           @showShareDuoshan="showShareDuoshan = true"
+           @showShareDuoshan="delayShowDialog(e => this.showShareDuoshan = true)"
+           @shareToFriend="delayShowDialog(e => this.shareToFriend = true)"
            @showDouyinCode="showDouyinCode = true"
            @showShare2WeChatZone="shareType = 2"
            @share2WeChat="shareType = 3"
@@ -167,6 +168,9 @@
     >
       <Search mode="light" v-model="test" :isShowSearchIcon="false"/>
     </ConfirmDialog>
+
+    <ShareToFriend v-model="shareToFriend"/>
+
   </div>
 </template>
 <script>
@@ -198,6 +202,7 @@ import Search from "../../components/Search";
 import ConfirmDialog from "../../components/dialog/ConfirmDialog";
 import FollowSetting2 from "./components/FollowSetting2";
 import Dom from "../../utils/dom";
+import ShareToFriend from "./components/ShareToFriend";
 
 export default {
   name: "HomeIndex",
@@ -217,7 +222,8 @@ export default {
     FollowSetting2,
     BlockDialog,
     Search,
-    ConfirmDialog
+    ConfirmDialog,
+    ShareToFriend
   },
   data() {
     return {
@@ -1167,6 +1173,7 @@ export default {
       showFollowSetting2: false,
       showBlockDialog: false,
       showChangeNote: false,
+      shareToFriend: false,
 
       test: '',
 
@@ -1220,7 +1227,7 @@ export default {
     delayShowDialog(cb) {
       setTimeout(() => {
         cb()
-      }, 500)
+      }, 400)
     },
     dislike() {
       this.$notice('操作成功，将减少此类视频的推荐')

src/pages/home/Music.vue

@@ -1,5 +1,5 @@
 <template>
-  <div  id="Music">
+  <div id="Music">
     <div class="header">
       <back mode="light" @click="$back"/>
       <transition name="fade">
@@ -65,7 +65,7 @@
            @share2QQZone="shareType = 4"
            @share2QQ="shareType = 5"
            @share2Webo="shareType = 8"
-           @ShareToFriend="shareToFriend = true"
+           @ShareToFriend="delayShowDialog( e => this.shareToFriend = true)"
     />
 
     <DouyinCode v-model="showDouyinCode"/>
@@ -120,6 +120,7 @@ export default {
       shareType: -1,
 
       showDouyinCode: false,
+      audio: new Audio(),
 
       videos: [
         {
@@ -2510,10 +2511,34 @@ export default {
       this.loading = false
     },
     togglePlay() {
+      let src = 'https://m3.8js.net:99/2014/211204142150965.mp3'
       this.isPlay = !this.isPlay
+      if (this.isPlay) {
+        this.audio.pause()
+        this.audio.src = src
+        this.audio.currentTime = 0
+        this.audio.play();
+        this.audio.addEventListener('ended', () => this.isPlay = false)
+      } else {
+        this.stopPlay()
+      }
+    },
+    delayShowDialog(cb) {
+      setTimeout(() => {
+        cb()
+      }, 100)
+    },
+    stopPlay() {
+      this.audio.pause()
+      this.audio.currentTime = 0
+      this.audio.removeEventListener('ended', null)
     }
   },
-  mounted() {
+  unmounted() {
+    this.stopPlay()
+  },
+  deactivated() {
+    this.stopPlay()
   }
 }
 </script>

src/pages/home/Search.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="Search">
+    <div class="header">
+      <back mode="light" @click="$back" class="mr1r"></back>
+      <BSearch placeholder="搜索用户名字/抖音号"
+               :isShowText="true"
+               notice="gray"
+      >
+        <img class="scan" src="../../assets/img/icon/scan-gray.png" @click.stop="$nav('/scan')">
+      </BSearch>
+    </div>
+    <div class="content">
+      <div class="history">
+        <div class="row" v-for="(item,index) in lHistory">
+          <div class="left">
+            <img src="../../assets/img/icon/home/time-white.png" alt="">
+            <span> {{ item }}</span>
+          </div>
+          <back img="close" mode="gray" @click="history.splice(index,1)" scale=".7"></back>
+        </div>
+        <div v-if="history.length>2" class="history-expand" @click="toggle">
+          {{ isExpand ? '清除全部搜索记录' : '展开全部' }}
+        </div>
+      </div>
+      <div class="guess">
+        <div class="title">
+          <div class="left">猜你想搜</div>
+          <div class="right">
+            <img class="scan" src="../../assets/img/icon/home/refresh-gray.png" @click.stop="refresh">
+            <span>换一换</span>
+          </div>
+        </div>
+        <div class="keys">
+          <div class="key" v-for="(item,index ) in randomGuess">{{ item }}</div>
+        </div>
+      </div>
+      <div class="rank-list">
+        <div class="indicator">
+          <div class="tab" :class="{active:slideIndex === 0}">抖音热榜</div>
+          <div class="tab" :class="{active:slideIndex === 1}">直播榜</div>
+          <div class="tab" :class="{active:slideIndex === 2}">音乐榜</div>
+          <div class="tab" :class="{active:slideIndex === 3}">品牌榜</div>
+        </div>
+        <SlideRowList v-model:active-index="slideIndex">
+          <SlideItem>
+            <div class="slide1">
+              <div class="l-row" v-for="(item,index) in 50">
+                <div class="rank-wrapper">
+                  <img v-if="index === 0" src="../../assets/img/icon/rank1.webp" alt="" class="rank">
+                  <img v-else-if="index === 1" src="../../assets/img/icon/rank2.webp" alt="" class="rank">
+                  <img v-else-if="index === 2" src="../../assets/img/icon/rank3.webp" alt="" class="rank">
+                  <div v-else class="rank">{{ index + 1 }}</div>
+                </div>
+                <div class="right">
+                  <div class="center">
+                    <div class="desc">下撒打发手动阀手动阀压下撒打发手动阀手动阀压顶发撒打发打法顶发撒打发打法</div>
+                    <div class="type">热</div>
+                  </div>
+                  <div class="hot-count">999w</div>
+                </div>
+              </div>
+              <div class="more">查看完整热点榜 ></div>
+            </div>
+          </SlideItem>
+          <SlideItem>
+            <div class="slide1">
+              <div class="l-row" v-for="(item,index) in 15">
+                <div class="rank-wrapper">
+                  <img v-if="index === 0" src="../../assets/img/icon/rank1.webp" alt="" class="rank">
+                  <img v-else-if="index === 1" src="../../assets/img/icon/rank2.webp" alt="" class="rank">
+                  <img v-else-if="index === 2" src="../../assets/img/icon/rank3.webp" alt="" class="rank">
+                  <div v-else class="rank">{{ index + 1 }}</div>
+                </div>
+                <div class="center">
+                  <span>下撒打发手动阀手动阀压顶发撒打发打法</span>
+                  <div class="type">热</div>
+                </div>
+                <div class="hot-count">999w</div>
+              </div>
+            </div>
+          </SlideItem>
+        </SlideRowList>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Search from "../../components/Search";
+import _ from 'lodash'
+
+export default {
+  name: "SearchPage",
+  components: {
+    'BSearch': Search
+  },
+  data() {
+    return {
+      isShowText: false,
+      isExpand: false,
+      history: [
+        '历史记录1',
+        '历史记录2',
+        '历史记录3',
+        '历史记录4',
+        '历史记录5',
+        '历史记录6',
+        '历史记录7',
+        '历史记录8',
+        '历史记录9',
+        '历史记录10',
+      ],
+      guess: [
+        '少年透明人',
+        '花呗分批次接入征信',
+        '新娘婚礼上跪求悔婚',
+        '当你想换iPhone13时',
+        'Ling OS灵犀系统',
+        '桑塔纳2022款',
+        '透明人',
+        '恒大集团凌晨发公告',
+        '2022款日产GT-R',
+        '四川双一流大学名单',
+        '一公司放假通知走红',
+        '成都新全优教育倒闭',
+        '当代女生社交现状',
+        '恒大集团凌晨发公告',
+      ],
+      randomGuess: [],
+      slideIndex: 0,
+      list1: [],
+      list2: [],
+    }
+  },
+  computed: {
+    lHistory() {
+      if (this.isExpand) {
+        if (this.history.length > 10) return this.history.slice(0, 10)
+        return this.history
+      } else {
+        if (this.history.length > 2) return this.history.slice(0, 2)
+        return this.history
+      }
+    }
+  },
+  created() {
+    this.history = this.history.reverse()
+    this.refresh()
+  },
+  methods: {
+    refresh() {
+      this.randomGuess = _.sampleSize(this.guess, 6)
+    },
+    toggle() {
+      if (this.isExpand) {
+        this.$showSimpleConfirmDialog('是否清空历史记录？', () => {
+          this.history = []
+        }, null, '确定', '取消')
+      } else {
+        this.isExpand = true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "../../assets/scss/index";
+
+.Search {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .header {
+    height: 6rem;
+    font-size: 1.4rem;
+    padding: 0 @padding-page;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid @line-color;
+    position: fixed;
+    width: 100vw;
+    box-sizing: border-box;
+    top: 0;
+
+    .search-ctn {
+      flex: 1;
+    }
+
+    .scan {
+      transform: scale(2);
+      height: 1rem;
+      width: 1rem;
+    }
+  }
+
+  .content {
+    padding-top: 6rem;
+
+    .history {
+      .history-expand {
+        text-align: center;
+        padding: 1rem;
+        color: @second-text-color;
+      }
+    }
+
+    .guess {
+      padding: 0 @padding-page;
+
+      .title {
+        font-size: 1.4rem;
+        padding: 1rem 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .right {
+          color: @second-text-color;
+          display: flex;
+          align-items: center;
+
+          img {
+            margin-right: .5rem;
+            width: 1.3rem;
+            height: 1.3rem;
+          }
+        }
+      }
+
+      .keys {
+        font-size: 1.6rem;
+        display: flex;
+        flex-wrap: wrap;
+
+        .key {
+          box-sizing: border-box;
+          padding: .8rem 0;
+          width: 49%;
+        }
+      }
+    }
+
+    .rank-list {
+      .indicator {
+        padding: 1.5rem;
+        display: flex;
+        align-items: center;
+        font-size: 1.4rem;
+
+        .tab {
+          color: @second-text-color;
+          margin-right: 2rem;
+
+          &.active {
+            transform: scale(1.2);
+            color: white;
+          }
+
+          &:nth-child(1) {
+            &.active {
+              font-weight: bold;
+              background: linear-gradient(to right, rgb(255, 165, 71), rgb(218, 77, 115));
+              -webkit-background-clip: text;
+              color: transparent;
+            }
+          }
+        }
+      }
+
+      .slide1 {
+        margin: 0 @padding-page 5rem @padding-page;
+        background: linear-gradient(to right, rgb(32, 29, 36), rgb(50, 29, 38));
+        padding: @padding-page;
+        border-radius: 1rem;
+
+        .l-row {
+          font-size: 1.4rem;
+          display: flex;
+          margin-bottom: 1.5rem;
+          align-items: center;
+          color: @second-text-color;
+
+          .rank-wrapper {
+            .rank {
+              width: 1.8rem;
+              height: 1.8rem;
+              line-height: 1.8rem;
+              text-align: center;
+              margin-right: 1.5rem;
+            }
+          }
+
+          .right {
+            flex: 1;
+            display: flex;
+            justify-content: space-between;
+
+            .center {
+              width: calc(100vw - 13rem);
+              box-sizing: border-box;
+              //padding: 0 1rem;
+              //flex: 1;
+              display: flex;
+              font-size: 1.2rem;
+
+
+              .desc {
+                color: white;
+                font-size: 1.4rem;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+              }
+              .type{
+                border-radius: .2rem;
+                padding: .2rem;
+                background: red;
+              }
+            }
+
+            .hot-count {
+              font-size: 1.2rem;
+            }
+          }
+        }
+
+        .more {
+          font-size: 1.2rem;
+          padding: 1rem 1rem 0 1rem;
+          text-align: center;
+          color: yellow;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/home/components/ShareToFriend.vue

@@ -1,6 +1,5 @@
 <template>
   <from-bottom-dialog
-      page-id="Music"
       v-model="modelValue"
       @cancel="cancel"
       maskMode="light"
@@ -168,7 +167,7 @@ export default {
 
 .button {
   width: 6.4rem;
-  height: 2.6rem;
+  height: 2.6rem!important;
 }
 
 @avatar-width: 3.8rem;
@@ -215,6 +214,7 @@ export default {
 }
 
 .content {
+  color: white;
 
   .create-chat {
     padding-bottom: 4rem;

src/pages/me/Uploader.vue

@@ -36,7 +36,7 @@
         <div class="detail">
           <div class="detail-wrapper">
             <div class="head">
-              <img :src="localAuthor.avatar" class="head-image"
+              <img v-lazy="$imgPreview(localAuthor.avatar)" class="head-image"
                    @click="previewImg = localAuthor.avatar">
               <div class="heat">
                 <div class="text">
@@ -52,7 +52,6 @@
                   <span class="num">{{ localAuthor.following_count }}</span>
                 </div>
               </div>
-
             </div>
             <div class="description">
               <p class="name f22 mt1r mb1r">{{ localAuthor.nickname }}</p>
@@ -382,7 +381,7 @@ export default {
     bus.on('baseSlide-end', () => this.canScroll = true)
   },
   methods: {
-    cancelFollow(){
+    cancelFollow() {
       this.localAuthor.is_follow = false
     },
     changeIndicatorIndex(index) {

src/router/index.js

@@ -50,6 +50,7 @@ import Report from "../pages/home/Report";
 import SubmitReport from "../pages/home/SubmitReport";
 import RequestUpdate from "../pages/me/RequestUpdate";
 import Test4 from "../pages/Test4";
+import Search from "../pages/home/Search";
 
 const routes = [
   // {path: '', component: Music},
@@ -64,6 +65,7 @@ const routes = [
   {path: '/home/music', component: Music},
   {path: '/home/music-rank-list', component: MusicRankList},
   {path: '/home/report', component: Report},
+  {path: '/home/search', component: Search},
 
 
   {path: '/attention', component: Attention},

src/utils/global-methods.js

@@ -45,7 +45,11 @@ export default {
     document.body.append(parent)
     app.mount(parent)
   },
-  $showSimpleConfirmDialog(title, okCb, cancelCb) {
+  $showSimpleConfirmDialog(title, okCb, cancelCb, okText, cancelText,) {
+    if (!cancelCb) {
+      cancelCb = () => {
+      }
+    }
     let remove = () => {
       let parent = document.querySelector('.dialog-ctn')
       parent.classList.replace('fade-in', 'fade-out')
@@ -63,7 +67,13 @@ export default {
     }
     const app = Vue.createApp({
       render() {
-        return <SimpleConfirmDialog onCancel={tempCancelCb} onDismiss={remove} title={title} onOk={tempOkCb}/>
+        return <SimpleConfirmDialog
+          onCancel={tempCancelCb}
+          onDismiss={remove}
+          title={title}
+          okText={okText}
+          cancelText={cancelText}
+          onOk={tempOkCb}/>
       },
     })
     let parent = document.createElement('div')
@@ -254,7 +264,7 @@ export default {
     // console.log(url)
     if (!url) return
     //本地图片
-    if (url.includes('img') ||url.includes('data:image')) {
+    if (url.includes('img') || url.includes('data:image')) {
       return url
     }
     //网络，全路径图片
@@ -303,7 +313,7 @@ export default {
     if (!val) return
     if (typeof val === 'number') {
 
-    }else {
+    } else {
       if (val.length === 10) {
         val += '000'
       }