添加search搜索页面,页面需要再优化

src/api/index.js

@@ -89,6 +89,29 @@ const API = {
  MUSIC_DETAIL: '/song/detail',
  // 检查音乐是否可以播放
  CHECK_MUSIC: '/check/music'
+ },
+
+ /**
+ * ====================
+ * 搜索相关接口
+ * ====================
+ */
+ search: {
+ /**
+ * 必选参数 : keywords : 关键词
+ * 可选参数 :
+ * limit : 返回数量 , 默认为 30
+ * offset : 偏移数量，用于分页 , 如 : 如 :( 页数 -1)*30, 其中 30 为 limit 的值 , 默认为 0
+ * type: 搜索类型；默认为 1 即单曲 , 取值意义 : 1: 单曲 10: 专辑 100: 歌手 1000: 歌单 1002: 用户 1004: MV 1006: 歌词 1009: 电台
+ */
+ // 调用此接口 , 传入搜索关键词可获得搜索建议 , 搜索结果同时包含单曲 , 歌手 , 歌单 ,mv 信息
+ SEARCH_SUGGEST: '/search/suggest',
+
+ // 说明 : 调用此接口,可获取热门搜索列表
+ SEARCH_HOT: '/search/hot',
+
+ // 说明 : 调用此接口 , 传入搜索关键词可以搜索该音乐 / 专辑 / 歌手 / 歌单 / 用户 , 关键词可以多个 , 以空格隔开 , 如 " 周杰伦 搁浅 "( 不需要登录 ), 搜索获取的 mp3url 不能直接用 , 可通过 /song/url 接口传入歌曲 id 获取具体的播放链接
+ SEARCH_MAIN: '/search'
  }
 }
 export default API

src/router.js

@@ -24,6 +24,7 @@ const Sheet = () => import('./views/find/sheet')
 const SheetDetail = () => import('./views/find/sheet/sheet-detail')
 const Play = () => import('./views/find/play')
 const Rank = () => import('./views/find/rank')
+const Search = () => import('./views/find/search')
 
 Vue.use(Router)
 
@@ -57,6 +58,7 @@ export default new Router({
  meta: {
  keepAlive: true
  },
+ // 推荐
  children: [
  {
  path: '/main/find/recommend',
@@ -73,21 +75,25 @@ export default new Router({
  }
  ]
  },
+ // 个人中心
  {
  path: '/main/account',
  name: 'account',
  component: Account
  },
+ // 视频
  {
  path: '/main/video',
  name: 'video',
  component: Video
  },
+ // 我的
  {
  path: '/main/mine',
  name: 'mine',
  component: Mine
  },
+ // 朋友
  {
  path: '/main/firends',
  name: 'firends',
@@ -144,6 +150,16 @@ export default new Router({
  meta: {
  transition: 'fade-left'
  }
+ },
+ // 搜索页面
+ {
+ path: '/main/search',
+ name: 'search',
+ component: Search,
+ meta: {
+ transition: 'fade-top',
+ activeRouter: ['/main/find']
+ }
  }
  ]
  },

src/style/variables.scss

@@ -6,9 +6,9 @@ $text_active: #fff;
 
 $text_noactive: #e1e1e1;
 
-$primary_color: #333;
+// $primary_color: #333;
 
-// $primary_color: rgb(203, 40, 41);
+$primary_color: rgb(203, 40, 41);
 
 // 浅色主色
 $primary_color_s: #e75e4e;
@@ -68,7 +68,7 @@ $f_small_l: p2r(0.28rem);
 $NAV_H: p2r(0.9rem);
 
 // 头部内容高度
-$HEADER_H: p2r(1.45rem);
+$HEADER_H: p2r(1.55rem);
 
 // 仅仅搜索头部的高度
 $HEADER_H_S: p2r(0.86rem);

src/views/find/index.vue

@@ -6,7 +6,9 @@
  .serch-area
  i.left.icon-pencil.easy-click
  // 控制区域
- input(type="text" class="serach-input" value="", placeholder="搜索")
+ .input(@click="openSearch")
+ i.icon-menu
+ span 搜索
  .nav-bar
  router-link(to="/main/find/recommend" class="nav-bar-router") 个性推荐
  router-link(to="/main/find/station" class="nav-bar-router") 主播电台
@@ -18,6 +20,11 @@
 export default {
  created () {
  // alert(1)
+ },
+ methods: {
+ openSearch () {
+ this.$router.push('/main/search')
+ }
  }
 }
 </script>
@@ -33,7 +40,7 @@ export default {
  width: 100%;
  background: $primary-color;
  .serch-area{
- height: $HEADER_H_S;
+ height: $auto_h;
  width: 100%;
  background: $primary-color;
  display: flex;
@@ -44,27 +51,40 @@ export default {
  color: $icon-f;
  font-size: $f_auto_l;
  }
- .serach-input{
+ .input{
  flex:1 1 auto;
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
  margin-right: p2r(0.9rem);
  height: p2r(0.52rem);
  border-radius: p2r(0.26rem);
  border: none;
  outline: none;
  background: rgba(255,255,255,0.1);
+ z-index: 1;
  color: rgba(255,255,255,0.8);
  text-indent: p2r(0.1rem);
  font-size: $f_small_l;
+ padding: 0 p2r(0.04rem);
+ box-sizing: border-box;
+ i{
+ margin: p2r(0.04rem);
+ font-size: $f_small_s;
+ }
+ span{
+ font-size: $f_small_l;
+ }
  }
  }
  .nav-bar{
- height: $HEADER_H - $HEADER_H_S;
+ height: $HEADER_H - $auto_h;
  display: flex;
  align-items: center;
  justify-content: center;
  .nav-bar-router{
  color: #fff;
- height: $HEADER_H - $HEADER_H_S - p2r(0.15rem);
+ height: $HEADER_H - $auto_h - p2r(0.1rem);
  font-size: $f_small_m;
  text-align: center;
  width: p2r(1.5rem);