update seach Component

README.md

@@ -26,7 +26,7 @@
 * 项目中使用的api数据在开发者工具上可以正常显示，但是在真机上无法显示，问题应该是API的问题（若需要请换api） 
 
 ### TODO
-  - [ ] 修复与喜马拉雅Lite的颜色差距
+  - [x] 修复与喜马拉雅Lite的颜色差距(目前基本差不多了......)
   - [ ] 修复分类页的侧边栏选择项的滑动计算逻辑
   - [x] 实现详情页的背景色虚化
   - [x] 实现搜索页
@@ -34,6 +34,8 @@
   - [x] 实现榜单页面的下拉选项点击选择功能
   - [x] 页面传参
   - [x] 移除其他的`icon`资源
+  - [ ] 实现播放界面 🐛🐛🐛
+  - [ ] 不断完善..go
   
 > 当然还有很多的bug......未完待续
 
@@ -41,6 +43,5 @@
 
 欢迎您的建议或者是提出Bug
 
-
   * 提[issue](https://github.com/Notobey/Himalayan-lite/issues)
   * [我的博客](http://www.zhiq.online) 你可以在这里联系我

component/search/search.js

@@ -8,7 +8,8 @@ Component({
         },
     },
     data: {
-
+        disabled:true,
+        isshow:false,
     },
     methods: {
         goToSearch(){
@@ -17,19 +18,4 @@ Component({
             })
         }
     },
-    created: function(){
-
-    },
-    attached: function(){
-
-    },
-    ready: function(){
-
-    },
-    moved: function(){
-
-    },
-    detached: function(){
-
-    },
 });

component/search/search.wxml

@@ -2,8 +2,14 @@
   这是一个简单的组件结构，没有使用插槽等复杂组件使用的属性
   可以通过一个简单的组件入门组件化
  -->
-
 <view class="search marginTopBottom" bindtap="goToSearch">
+	<view class="search-left">
+		<text class="icon-search"></text>
+		<input placeholder="搜索你想听的节目" disabled="{{disabled}}"></input>
+	</view>
+	<view class="search-right" wx:if="{{isshow}}">取消</view>
+</view>
+<!-- <view class="search marginTopBottom" bindtap="goToSearch">
   <text class="icon-search"></text>
   <view class="search-item">搜索你想听的节目</view>
-</view>
+</view> -->

component/search/search.wxss

@@ -1,20 +1,33 @@
 /* 搜索框 */
 .search{
-    width: 90%;
-    height: 50rpx;
-    margin: 0rpx auto;
-    padding: 10rpx;
-    border-radius: 10rpx;
-    font-size: 25rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgb(240, 240, 240);
-    margin-bottom: 20rpx;
-  }
-  .search-item{
-    width: 95%;
-    height: 100%;
-    color: #aaa;
-    line-height: 50rpx;
-  }
+  width: 90%;
+  height: auto;
+  display: flex;
+  align-items: center;
+  margin: 0rpx auto;
+  margin-bottom: 15rpx;
+}
+
+.search-left{
+  flex: 4;
+  background-color: rgb(240, 240, 240);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 10rpx 20rpx;
+  border-radius: 15rpx;
+}
+
+.search input{
+  width: 90%;
+  height: 100%;
+  font-size: 29rpx;
+  margin-left: 20rpx;
+}
+.search-right{
+  flex: 0.5;
+  font-size:30rpx;
+  color: #aaa;
+  text-align: center;
+  margin-left: 30rpx;
+}

pages/index/index.js

@@ -29,7 +29,6 @@ Page({
   },
   //轮播图改变事件
   swiperChange: function(e){
-    //console.log(e.detail.current);
     this.setData({
      swiperCurrent: e.detail.current
     })
@@ -46,7 +45,6 @@ Page({
       url:url,
       methods:'GET',
       success:function(result){
-        console.log("我被执行了")
         that.setData({
           showitem:true,
           guess:result.data.paidArea.list,
@@ -68,7 +66,6 @@ Page({
     })
   },
   gotoDetails(e){
-    // console.log(e)
     var url = e.currentTarget.dataset.coverimg;
     var title = e.currentTarget.dataset.title;
     wx.navigateTo({

pages/index/index.wxml

@@ -16,7 +16,7 @@
   <!-- 为了和喜马拉雅一致，自己需定制轮播图dots -->
   <view class="dots">
     <block wx:for="{{imgList.length}}" wx:key="index">
-      <view class="dotsItem{{index == swiperCurrent ? ' active' : ''}}"></view>
+      <view class="dotsItem{{index == swiperCurrent ? ' dotActive' : ''}}"></view>
     </block>
   </view>
 </view>

pages/index/index.wxss

@@ -1,55 +1,3 @@
-/**index.wxss**/
-
-/* 轮播图 */
-.swiper-container{
-  width: 90%;
-  height: 280rpx;
-  margin: 0rpx auto;
-  position: relative;
-  border-radius: 15rpx;
-  overflow: hidden;
-}
-
-.swiper{
-  width: 100%;
-  height: 100%;
-  border-radius: 15rpx;
-}
-.swiperItem{
-  width: 100%;
-  height: 100%;
-  border-radius: 15rpx;
-}
-.swiperItem>image{
-  width: 100%;
-  height: 100%;
-  border-radius: 15rpx;
-}
-.dots{
-  width: auto;
-  height: 10rpx;
-  position: absolute;
-  bottom: 20rpx;
-  border-radius: 50rpx;
-  left: 240rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 3rpx 10rpx;
-}
-.dotsItem{
-  width: 8rpx;
-  height: 8rpx;
-  margin: 0rpx 8rpx;
-  border-radius: 50%;
-  background-color: #cdcdcd;
-  transition: all .3s;
-}
-.active{
-  width: 10rpx;
-  height: 10rpx;
-  background-color: #fff;
-}
 /* 宫格导航 */
 .nav{
   width: 90%;
@@ -124,8 +72,6 @@
   border-bottom-left-radius: 15rpx;
   border-bottom-right-radius: 15rpx;
 }
-
-
 .dataNotip{
   width: 100%;
   height: 300rpx;

pages/search/search.wxss

@@ -39,7 +39,18 @@
   搜索历史和热门搜索部分css 
   ========
 */
-
+.title{
+  width: 100%;
+  height: 50rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+}
+.title-text{
+  color: #000;
+  font-weight: 700;
+}
 .history{
   width: 90%;
   height: auto;

pages/user/phoneLogin/phoneLogin.wxml

@@ -1,5 +1,5 @@
 <view class="main bg-white" style="min-height:{{height}}px">
-    <view class="content">
+    <view class="content_">
         <!-- 提示标语 -->
         <view class="slogn">
             <!-- <view class="left-line" style="width:20rpx"></view> -->

pages/user/phoneLogin/phoneLogin.wxss

@@ -6,7 +6,7 @@
    width: 100%; 
 }
 
-.content{
+.content_{
     width: 80%;
     margin: 0rpx auto;
     margin-top: 100rpx;

style/common.wxss

@@ -1,6 +1,57 @@
 /* 公共样式 */
 
-/* 首页主要内容样式 */
+/* 轮播图 */
+
+.swiper-container{
+  width: 90%;
+  height: 280rpx;
+  margin: 0rpx auto;
+  position: relative;
+  border-radius: 15rpx;
+  overflow: hidden;
+}
+.swiper{
+  width: 100%;
+  height: 100%;
+  border-radius: 15rpx;
+}
+.swiperItem{
+  width: 100%;
+  height: 100%;
+  border-radius: 15rpx;
+}
+.swiperItem>image{
+  width: 100%;
+  height: 100%;
+  border-radius: 15rpx;
+}
+.dots{
+  width: auto;
+  height: 10rpx;
+  position: absolute;
+  bottom: 20rpx;
+  border-radius: 50rpx;
+  left: 240rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 3rpx 10rpx;
+}
+.dotsItem{
+  width: 8rpx;
+  height: 8rpx;
+  margin: 0rpx 8rpx;
+  border-radius: 50%;
+  background-color: #cdcdcd;
+  transition: all .3s;
+}
+.dotActive{
+  width: 10rpx;
+  height: 10rpx;
+  background-color: #fff;
+}
+
+/* 主要内容列表样式 */
 .contentList{
   width: 90%;
   margin: 0rpx auto;
@@ -77,41 +128,8 @@
   font-size: 25rpx;
   color: #cdcdcd;
 }
-/* 
-==========
-  bar相关 
-==========
-*/
-.marginTopBottom {
-  margin-top: 20rpx;
-  margin-bottom: 30rpx;
-}
-
-.barTitle {
-  width: 100%;
-  height: 56rpx;
-  padding: 20rpx 0rpx;
-  text-align: center;
-}
-
-.Title-left {
-  float: left;
-  font-size: 37rpx;
-  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-  font-weight: 800;
-  color: #333;
-}
 
-.Title-right {
-  float: right;
-  font-size: 26rpx;
-  color: #aaa;
-}
-/* 
-===========
-  登录样式 
-===========
-*/
+/* 登录样式 */
 .logo {
   width: 128rpx;
   height: 128rpx;
@@ -157,28 +175,8 @@
   background-color: #fff;
   color: #70e500;
 }
-/* 
-===========
-  搜索部分
-===========
-*/
-.title{
-  width: 100%;
-  height: 50rpx;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-}
-.title-text{
-  color: #000;
-  font-weight: 700;
-}
-/* 
-==========
-  蒙板
-==========
-*/
+
+/*蒙板*/
 .cover{
   position: fixed;
   top: 0;
@@ -191,3 +189,31 @@
   background: rgba(0, 0, 0, 0.6);
   opacity: 0.7;
 }
+
+
+/* bar相关 */
+.marginTopBottom {
+  margin-top: 20rpx;
+  margin-bottom: 30rpx;
+}
+
+.barTitle {
+  width: 100%;
+  height: 56rpx;
+  padding: 20rpx 0rpx;
+  text-align: center;
+}
+
+.Title-left {
+  float: left;
+  font-size: 37rpx;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  font-weight: 800;
+  color: #333;
+}
+
+.Title-right {
+  float: right;
+  font-size: 26rpx;
+  color: #aaa;
+}