From b1750ffe09a6e47353c96c39fb8b77a45837cd61 Mon Sep 17 00:00:00 2001
From: lsqy <lsqy93@gmail.com>
Date: Sun, 18 Aug 2019 22:28:11 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(search):=20=E6=90=9C=E7=B4=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.tsx                       |   3 +-
 src/base.scss                     |   9 +-
 src/pages/searchResult/index.scss |  62 +++++-
 src/pages/searchResult/index.tsx  | 350 +++++++++++++++++++++++++++---
 4 files changed, 388 insertions(+), 36 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 065af38..6088494 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -29,9 +29,10 @@ class App extends Component {
    */
   config: Config = {
     pages: [
+      'pages/searchResult/index',
       'pages/my/index',
       'pages/search/index',
-      'pages/searchResult/index',
+      
       // 'pages/search/index',
       'pages/index/index',
       'pages/songDetail/index',
diff --git a/src/base.scss b/src/base.scss
index 875fc9d..010ce46 100644
--- a/src/base.scss
+++ b/src/base.scss
@@ -1 +1,8 @@
-$primary-color: #d43c33;
\ No newline at end of file
+$primary-color: #d43c33;
+@mixin text-ellipsis {
+  overflow: hidden;
+  /*文本不会换行*/
+  white-space: nowrap;
+  /*当文本溢出包含元素时，以省略号表示超出的文本*/
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/src/pages/searchResult/index.scss b/src/pages/searchResult/index.scss
index 31f1d0c..e544b60 100644
--- a/src/pages/searchResult/index.scss
+++ b/src/pages/searchResult/index.scss
@@ -1,22 +1,41 @@
-.seaechResult_container {
+@import '../../base.scss';
+.searchResult_container {
   &.hasMusicBox {
     padding-bottom: 120px;
   }
-  .seaechResult__music {
-    padding: 10px 30px;
+  .search_content {
+    padding: 108px 36px 24px 36px;
+    height: 100%;
+    box-sizing: border-box;
+    .search_content__title {
+      font-size: 38px;
+      font-weight: 700;
+      padding: 20px 0;
+    }
+    .search_content__more {
+      text-align: center;
+      font-size: 24px;
+      line-height: 50px;
+      padding: 15px 0;
+      color: #888888;
+    }
+  }
+  .searchResult__music {
+    padding: 10px 30px 10px 0;
     display: flex;
     align-items: center;
     width: 100%;
     box-sizing: border-box;
-    .seaechResult__music__info {
+    border-bottom: 1px solid #eeeeee;
+    .searchResult__music__info {
       flex: 1;
       overflow: hidden;
-      .seaechResult__music__info__name {
+      .searchResult__music__info__name {
         font-size: 34px;
         overflow: hidden;
         text-overflow: ellipsis;
       }
-      .seaechResult__music__info__desc {
+      .searchResult__music__info__desc {
         font-size: 24px;
         color: #888888;
         margin-top: 10px;
@@ -24,10 +43,39 @@
         text-overflow: ellipsis;
       }
     }
-    .seaechResult__music__icon {
+    .searchResult__music__icon {
       font-size: 30px;
       color: #dddddd;
       padding: 40px 0 40px 80px;
     }
   }
+  .search_content__playList__item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    .search_content__playList__item__cover {
+      width: 150px;
+      height: 150px;
+      border-radius: 10px;
+      margin-right: 20px;
+      display: block;
+    }
+    .search_content__playList__item__info {
+      flex: 1;
+      .search_content__playList__item__info__title {
+        width: 95%;
+        @include text-ellipsis;
+        margin-bottom: 10px;
+        font-size: 30px;
+      }
+      .search_content__playList__item__info__desc {
+        font-size: 20px;
+        color: #bbbbbb;
+        display: flex;
+      }
+      .search_content__playList__item__info__desc__nickname {
+        margin: 0 10px;
+      }
+    }
+  }
 }
diff --git a/src/pages/searchResult/index.tsx b/src/pages/searchResult/index.tsx
index 9a2e51c..5a5ade6 100644
--- a/src/pages/searchResult/index.tsx
+++ b/src/pages/searchResult/index.tsx
@@ -1,6 +1,7 @@
 import { ComponentClass } from 'react'
 import Taro, { Component, Config } from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View, Image, Text } from '@tarojs/components'
+import { AtSearchBar, AtTabs, AtTabsPane, AtIcon } from 'taro-ui'
 import classnames from 'classnames'
 import CLoading from '../../components/CLoading'
 import { connect } from '@tarojs/redux'
@@ -25,6 +26,7 @@ type IProps = PageStateProps & PageDispatchProps
 
 type PageState = {
   keywords: string,
+  activeTab: number,
   songList: Array<{
     id: number,
     name: string,
@@ -35,6 +37,85 @@ type PageState = {
     artists: Array<{
       name: string
     }>
+  }>,
+  tabList: Array<{
+    title: string
+  }>,
+  albumInfo: { // 专辑
+    albums: Array<{
+      name: string,
+      id: number
+    }>,
+    more: boolean,
+    moreText: string
+  },
+  artistInfo: { // 歌手
+    artists: Array<{
+      name: string,
+      id: number,
+      picUrl: string
+    }>,
+    more: boolean,
+    moreText: string
+  },
+  djRadioInfo: { // 电台
+    djRadios: Array<{
+      name: string,
+      id: number,
+      picUrl: string
+    }>,
+    more: boolean,
+    moreText: string
+  },
+  playListInfo: { // 歌单
+    playLists: Array<{
+      name: string,
+      id: number,
+      coverImgUrl: string,
+      trackCount: number,
+      playCount: number,
+      creator: {
+        nickname: string
+      }
+    }>,
+    more: boolean,
+    moreText: string
+  },
+  videoInfo: { // 视频
+    videos: Array<{
+      name: string,
+      id: number,
+      picUrl: string
+    }>,
+    more: boolean,
+    moreText: string
+  },
+  userListInfo: { // 用户
+    users: Array<{
+      name: string,
+      id: number,
+      picUrl: string
+    }>,
+    more: boolean,
+    moreText: string
+  },
+  songInfo: { // 单曲
+    songs: Array<{
+      id: number,
+      name: string,
+      al: {
+        id: number,
+        name: string
+      },
+      ar: Array<{
+        name: string
+      }>
+    }>,
+    more: boolean,
+    moreText: string
+  },
+  sim_query: Array<{
+    keyword: string,
   }>
 }
 
@@ -71,8 +152,67 @@ class Page extends Component<IProps, PageState> {
     super(props)
     const { keywords } = this.$router.params
     this.state = {
-      keywords,
-      songList: []
+      keywords: '海阔天空',
+      songList: [],
+      activeTab: 0,
+      tabList: [
+        {
+          title: '综合'
+        },
+        {
+          title: '单曲'
+        },
+        {
+          title: '视频'
+        },{
+          title: '歌手'
+        },
+        {
+          title: '专辑'
+        },
+        {
+          title: '主播电台'
+        },
+        {
+          title: '用户'
+        }
+      ],
+      userListInfo: {
+        users: [],
+        more: false,
+        moreText: ''
+      },
+      videoInfo: {
+        videos: [],
+        more: false,
+        moreText: ''
+      },
+      playListInfo: {
+        playLists: [],
+        more: false,
+        moreText: ''
+      },
+      songInfo: {
+        songs: [],
+        more: false,
+        moreText: ''
+      },
+      albumInfo: {
+        albums: [],
+        more: false,
+        moreText: ''
+      },
+      djRadioInfo: {
+        djRadios: [],
+        more: false,
+        moreText: ''
+      },
+      artistInfo: {
+        artists: [],
+        more: false,
+        moreText: ''
+      },
+      sim_query: []
     }
   }
 
@@ -98,20 +238,55 @@ class Page extends Component<IProps, PageState> {
   getResult(keywords) {
     api.get('/search', {
       keywords,
-      type: 1
+      type: 1018
     }).then((res) => {
       console.log('res', res)
-      if (res.data && res.data.result) {
-        this.setState({
-          songList: res.data.result.songs
-        })
-        res.data.result.songs = res.data.result.songs.map((item) => {
-          item.ar = item.artists
-          return item
-        })
-        this.props.updateCanplayList({
-          canPlayList: res.data.result.songs
-        })
+      const result = res.data.result
+      if (result) {
+        if (result.album) {
+          this.setState({
+            albumInfo: result.album
+          })
+        }
+        if (result.artist) {
+          this.setState({
+            artistInfo: result.artist
+          })
+        }
+        if (result.djRadio) {
+          this.setState({
+            djRadioInfo: result.djRadio
+          })
+        }
+        if (result.playList) {
+          this.setState({
+            playListInfo: result.playList
+          })
+        }
+        if (result.song) {
+          this.setState({
+            songInfo: result.song
+          })
+        }
+        if (result.user) {
+          this.setState({
+            userListInfo: result.user
+          })
+        }
+        if (result.video) {
+          this.setState({
+            videoInfo: result.video
+          })
+        }
+        if (result.sim_query && result.sim_query.sim_querys) {
+          this.setState({
+            sim_query: result.sim_query.sim_querys
+          })
+        }
+
+        // this.props.updateCanplayList({
+        //   canPlayList: res.data.result.songs
+        // })
       }
     })
   }
@@ -133,6 +308,12 @@ class Page extends Component<IProps, PageState> {
     })
   }
 
+  goPlayListDetail(item) {
+    Taro.navigateTo({
+      url: `/pages/playListDetail/index?id=${item.id}&name=${item.name}`
+    })
+  }
+
   showMore() {
     Taro.showToast({
       title: '暂未实现，敬请期待',
@@ -140,37 +321,152 @@ class Page extends Component<IProps, PageState> {
     })
   }
 
+  searchTextChange(val) {
+    this.setState({
+      keywords: val
+    })
+  }
+
+  searchResult() {
+
+  }
+
+  switchTab(activeTab) {
+    if (activeTab !== 0) {
+      Taro.showToast({
+        title: '正在开发，敬请期待',
+        icon: 'none'
+      })
+      return
+    }
+    this.setState({
+      activeTab
+    })
+  }
+
 
   render () {
-    const { songList } = this.state
+    const { songList, keywords, activeTab, tabList, songInfo, playListInfo } = this.state
     return (
       <View className={
         classnames({
-          seaechResult_container: true,
+          searchResult_container: true,
           hasMusicBox: !!this.props.song.currentSongInfo.name
         })
       }>
         <CMusic songInfo={ this.props.song } onUpdatePlayStatus={this.props.updatePlayStatus.bind(this)} />
-        <View>
+        <AtSearchBar
+          actionName='搜一下'
+          value={keywords}
+          onChange={this.searchTextChange.bind(this)}
+          onActionClick={this.searchResult.bind(this)}
+          onConfirm={this.searchResult.bind(this)}
+          className='search__input'
+          fixed={true}
+        />
+        <View className='search_content'>
+          <AtTabs
+            current={activeTab}
+            scroll
+            tabList={tabList}
+            onClick={this.switchTab.bind(this)}>
+            <AtTabsPane current={activeTab} index={0}>
+              {
+                songInfo.songs.length === 0 ? <CLoading /> : 
+                <View>
+                  <View>
+                    <View className='search_content__title'>
+                      单曲
+                    </View>
+                    {
+                      songInfo.songs.map((item, index) => (
+                        <View key={index} className='searchResult__music'>
+                          <View className='searchResult__music__info' onClick={this.playSong.bind(this, item.id)}>
+                            <View className='searchResult__music__info__name'>
+                            {item.name}
+                            </View>
+                            <View className='searchResult__music__info__desc'>
+                              {`${item.ar[0] ? item.ar[0].name : ''} - ${item.al.name}`}
+                            </View>
+                          </View>
+                          <View className='fa fa-ellipsis-v searchResult__music__icon' onClick={this.showMore.bind(this)}></View>
+                        </View>
+                      ))
+                    }
+                    <View className='search_content__more'>
+                      {songInfo.moreText}<AtIcon value='chevron-right' size='16' color='#ccc'></AtIcon>
+                    </View>
+                  </View>
+                  <View>
+                    <View className='search_content__title'>
+                      歌单
+                    </View>
+                    <View>
+                      {
+                        playListInfo.playLists.map((item, index) => (
+                          <View className='search_content__playList__item' key={index} onClick={this.goPlayListDetail.bind(this, item)}>
+                            <View>
+                              <Image src={item.coverImgUrl} className='search_content__playList__item__cover'/>
+                            </View>
+                            <View className='search_content__playList__item__info'>
+                              <View className='search_content__playList__item__info__title'>
+                                {item.name}
+                              </View>
+                              <View className='search_content__playList__item__info__desc'>
+                                <Text>
+                                  {item.trackCount}首音乐
+                                </Text>
+                                <Text className='search_content__playList__item__info__desc__nickname'>
+                                  by {item.creator.nickname}
+                                </Text>
+                                <Text>
+                                  {item.playCount}次
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        ))
+                      }
+                    <View className='search_content__more'>
+                      {playListInfo.moreText}<AtIcon value='chevron-right' size='16' color='#ccc'></AtIcon>
+                    </View>  
+                    </View>
+                  </View>
+                </View>
+              }
+            </AtTabsPane>
+            <AtTabsPane current={activeTab} index={1}>
+              <View style='font-size:18px;text-align:center;height:100px;'>标签页二的内容</View>
+            </AtTabsPane>
+            <AtTabsPane current={activeTab} index={2}>
+              <View style='font-size:18px;text-align:center;height:100px;'>标签页三的内容</View>
+            </AtTabsPane>
+            <AtTabsPane current={activeTab} index={3}>
+              <View style='font-size:18px;text-align:center;height:100px;'>标签页四的内容</View>
+            </AtTabsPane>
+            <AtTabsPane current={activeTab} index={4}>
+              <View style='font-size:18px;text-align:center;height:100px;'>标签页五的内容</View>
+            </AtTabsPane>
+            <AtTabsPane current={activeTab} index={5}>
+              <View style='font-size:18px;text-align:center;height:100px;'>标签页六的内容</View>
+            </AtTabsPane>
+          </AtTabs>
           {
             songList.map((item, index) => (
-              <View key={index} className='seaechResult__music'>
-                <View className='seaechResult__music__info' onClick={this.playSong.bind(this, item.id)}>
-                  <View className='seaechResult__music__info__name'>
-                  {item.name}
+              <View key={index} className='searchResult__music'>
+                <View className='searchResult__music__info' onClick={this.playSong.bind(this, item.id)}>
+                  <View className='searchResult__music__info__name'>
+                    {item.name}
                   </View>
-                  <View className='seaechResult__music__info__desc'>
+                  <View className='searchResult__music__info__desc'>
                     {`${item.artists[0] ? item.artists[0].name : ''} - ${item.album.name}`}
                   </View>
                 </View>
-                <View className='fa fa-ellipsis-v seaechResult__music__icon' onClick={this.showMore.bind(this)}></View>
+                <View className='fa fa-ellipsis-v searchResult__music__icon' onClick={this.showMore.bind(this)}></View>
               </View>
             ))
           }
         </View>
-        {
-          songList.length === 0 ? <CLoading /> : ''
-        }
       </View>
     )
   }

From e6defcabeec3b6553ceae1e4b6a3d66020fba6fe Mon Sep 17 00:00:00 2001
From: lsqy <lsqy93@gmail.com>
Date: Sun, 18 Aug 2019 22:29:59 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(search):=20=E6=90=9C=E7=B4=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.tsx                      | 3 +--
 src/pages/searchResult/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 6088494..9caf5af 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -29,10 +29,9 @@ class App extends Component {
    */
   config: Config = {
     pages: [
-      'pages/searchResult/index',
       'pages/my/index',
+      'pages/searchResult/index',
       'pages/search/index',
-      
       // 'pages/search/index',
       'pages/index/index',
       'pages/songDetail/index',
diff --git a/src/pages/searchResult/index.tsx b/src/pages/searchResult/index.tsx
index 5a5ade6..a1c769f 100644
--- a/src/pages/searchResult/index.tsx
+++ b/src/pages/searchResult/index.tsx
@@ -152,7 +152,7 @@ class Page extends Component<IProps, PageState> {
     super(props)
     const { keywords } = this.$router.params
     this.state = {
-      keywords: '海阔天空',
+      keywords,
       songList: [],
       activeTab: 0,
       tabList: [