'完善'

pages/collection/collection.js

@@ -11,19 +11,12 @@ Page({
    * 页面的初始数据
    */
   data: {
+    currentIndex:0,
     content: [
-      {
-        text: "我的收藏"
-      },
-      {
-        text: "我的已购"
-      },
-      {
-        text: "收听历史"
-      },
-      {
-        text: "我的礼包"
-      }
+      {text: "我的收藏"},
+      {text: "我的已购"},
+      {text: "收听历史"},
+      {text: "我的礼包"}
     ]
   },
 
@@ -74,4 +67,11 @@ Page({
       }
     })
   },
+  checkItem(e){
+    console.log(e)
+    var that = this;
+    that.setData({
+      currentIndex : e.target.dataset.index
+    })
+  }
 })

pages/collection/collection.wxml

@@ -24,7 +24,8 @@
         <input placeholder="搜索你想听的节目"></input>
     </view>
     <view class="titleBar">
-      <view class="itemTitle" wx:for="{{content}}" wx:key>
+      <view class="itemTitle {{index == currentIndex ? 'active' : ' '}}" 
+        data-index="{{index}}" bindtap="checkItem" wx:for="{{content}}" wx:key="index">
           {{item.text}}
       </view>
     </view>

pages/collection/collection.wxss

@@ -3,24 +3,40 @@
     width: 100%;
     height: 80rpx;
     /* 这个配色不对 */
-    border-bottom: 1rpx solid #aaaaaa;
+    border-bottom: 1rpx solid #f1f1f1;
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
     font-size: 28rpx;
     overflow: hidden;
 }
 .itemTitle{
-    width: auto;
-   
+    width: 200rpx;
+    height: 100%;
+    text-align: center;
+    line-height: 80rpx;
+    position: relative;
+    color: #aaaaaa;
 }
-.currtline {
+.active:after{
+  content: '';
+  width: 40rpx;
+  height: 8rpx;
+  position: absolute;
+  bottom: 0rpx;
+  left: 70rpx;
+  border-radius: 15rpx;
+  background: #ff520f;
+}
+/* .currtline {
     margin: -8rpx auto 0 auto;
     width: 100rpx;
     height: 1rpx;
     border-radius: 4rpx;
-  }
-  .currtline.active {
-    background: #ff520f;
-    transition: all .3s;
-  }
+} */
+.active {
+  font-size: 32rpx;
+  font-weight: 700;
+  transition: all .3s;
+  color: #333333;
+}

pages/index/bangdan/bangdan.js

@@ -7,6 +7,7 @@ Page({
    * 页面的初始数据
    */
   data: {
+    showCover:false,
     currentTab:0,
     navTitle:[
       {title:'经典必听'},
@@ -52,6 +53,15 @@ Page({
     })
   },
   pullDown:function(){
-    
+    var that = this;
+    that.setData({
+      showCover:true
+    })
+  },
+  closeCover:function(){
+    var that = this;
+    that.setData({
+      showCover:false
+    })
   }
 })

pages/index/bangdan/bangdan.wxml

@@ -1,21 +1,31 @@
-<view class="top-nav">
-  <scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" catchtouchmove="preventTouchMove" >
-    <view class="navigate-item" id="item{{index}}" wx:for="{{navTitle}}" wx:key="{{index}}" data-index="{{index}}" bindtap="handleClick">
-      <view class="names {{currentTab === index ? 'active' : ''}}">{{item.title}}</view>
-      <view class="currtline {{currentTab === index ? 'active' : ''}}"></view>
+<block wx:if="{{showCover}}">
+  <!-- 蒙板内容 要放在蒙板的外面-->
+  <view class="menu">
+    <view class="menuItem" wx:for="{{navTitle}}">{{item.title}}
+      <!-- <view class="currtline active"></view> -->
     </view>
-  </scroll-view>
-  <!-- 下拉按钮 -->
-  <view class="pull-down" bindtap="pullDown">
-    <view class="icon-right"></view>
+    
   </view>
-</view>
-<!-- 对应的内容区 -->
-<block wx:for="{{list}}" wx:key="{{index}}">
-  <view class="content">
+  <!-- 蒙板 -->
+  <view class="cover" bindtap="closeCover"></view>
+</block>
+<block>
+  <view class="top-nav">
+    <scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" catchtouchmove="preventTouchMove" >
+      <view class="navigate-item" id="item{{index}}" wx:for="{{navTitle}}" wx:key="{{index}}" data-index="{{index}}" bindtap="handleClick">
+        <view class="names {{currentTab === index ? 'active' : ''}}">{{item.title}}</view>
+        <view class="currtline {{currentTab === index ? 'active' : ''}}"></view>
+      </view>
+    </scroll-view>
+    <!-- 下拉按钮 -->
+    <view class="pull-down" bindtap="pullDown">
+      <view class="icon-right"></view>
+    </view>
+  </view>
+  <!-- 对应的内容区 -->
+  <view class="content"  wx:for="{{list}}" wx:key="{{index}}">
     <view class="indexNumber">
-    <!-- 此处写法不对，到了两位数的时候就不行了，并无好的方法，这里应该是后端给的数据 -->
-      <view>0{{index}}</view>
+      <view>{{index > 10 ? index : '0'+index}}</view>
     </view>
     <image src="{{item.albumCoverUrl290}}"></image>
     <view class="content-left">
@@ -35,12 +45,3 @@
     </view>
   </view>
 </block>
-
-<!-- 蒙布 -->
-<!-- <view class="cover">
-  <view class="">
-    <view class="">
-      撒大赛
-    </view>
-  </view>
-</view> -->

pages/index/bangdan/bangdan.wxss

@@ -127,8 +127,33 @@
 /* 蒙布 */
 
 .cover{
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
   height: 100%;
-  position: absolute;
+  z-index: 9000;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0.7;
+}
+.menu{ 
+  width: 100%;
+  height: 200rpx;
+  position: fixed;
+  top: 0rpx;
   z-index: 9999;
-}
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  background: #fff;
+}
+.menuItem{
+  color: #000;
+  width: auto;
+  font-size: 32rpx;
+  padding: 20rpx 10rpx;
+  margin: 0rpx 15rpx;
+}

pages/index/index.js

@@ -21,8 +21,8 @@ Page({
       {icon:'/image/nav-icon/diantai.png',events:'goToBangDan',text:'榜单'},
       {icon:'/image/nav-icon/diantai.png',events:'goToBangDan',text:'听小说'},
       {icon:'/image/nav-icon/diantai.png',events:'goToBangDan',text:'情感电台'},
-      {icon:'/image/nav-icon/diantai.png',events:'goToBangDan',text:'听相声'},
-      {icon:'/image/nav-icon/diantai.png',events:'goToBangDan',text:'儿童故事'},
+      {icon:'/image/nav-icon/diantai.png',events:'goToBangDan',text:'听知识'},
+      
     ],
     swiperCurrent: 0,
   },

pages/index/index.wxml

@@ -6,12 +6,17 @@
 </view>
 <!-- 轮播图 -->
 <view class="swiper-container">
-  <swiper class="swiper" autoplay="true" circular="true" interval="3000" easing-function="easeOutCubic" current="{{swiperCurren}}" bindchange="swiperChange">
+  <swiper class="swiper" autoplay="true" circular="true" 
+    interval="3000" easing-function="easeOutCubic" 
+    current="{{swiperCurren}}" 
+    bindchange="swiperChange">
+
     <!-- 轮播图图片 -->
     <swiper-item class="swiperItem" wx:for="{{imgList}}" wx:key>
       <!-- 加上widthFix可以使图片自适应 -->
-      <image src="{{item}}" ></image>
+      <image src="{{item}}"></image>
     </swiper-item>
+
   </swiper>
   <!-- 为了和喜马拉雅一致，自己需定制轮播图dots -->
   <view class="dots">
@@ -21,6 +26,7 @@
     </block>
   </view>
 </view>
+
 <!-- 宫格导航 -->
 <view class="nav">
   <block>  
@@ -31,6 +37,7 @@
     </view>
   </block>
 </view>
+
 <!-- 猜你喜欢 -->
 <view class="like">
   <view class="barTitle">
@@ -41,7 +48,7 @@
   <view class="likeItemBox">
     <view class="likeItem">
       <view class="likeimg">
-        <image class="likeItemIcon" src="/image/guess1.jpg" mode="widthFix" lazy-load="false"></image>
+        <image class="likeItemIcon" src="/image/guess1.jpg" mode="widthFix"></image>
         <view class="cover">
           <!-- text用来显示icon  暂无 -->
           <text class=""></text> 4.6亿
@@ -51,7 +58,7 @@
     </view>
     <view class="likeItem">
       <view class="likeimg">
-        <image class="likeItemIcon" src="/image/guess2.jpg" mode="widthFix" lazy-load="false"></image>
+        <image class="likeItemIcon" src="/image/guess2.jpg" mode="widthFix"></image>
         <view class="cover">
           <text class=""></text> 4.6亿
         </view>
@@ -60,7 +67,7 @@
     </view>
     <view class="likeItem">
       <view class="likeimg">
-        <image class="likeItemIcon" src="/image/guess3.jpg" mode="widthFix" lazy-load="false"></image>
+        <image class="likeItemIcon" src="/image/guess3.jpg" mode="widthFix"></image>
         <view class="cover">
           <text class=""></text> 4.6亿
         </view>
@@ -81,7 +88,7 @@
     <block wx:for="{{xiaoshuocontent}}" wx:key>
       <view class="content">
         <view class="contentImg">
-          <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
+          <image src="{{item.albumCoverUrl290}}" mode="widthFix"></image>
         </view>
         <view class="content-right">
           <view class="title">
@@ -108,7 +115,7 @@
     <block wx:for="{{xiangshengcontent}}" wx:key>
       <view class="content">
         <view class="contentImg">
-          <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
+          <image src="{{item.albumCoverUrl290}}" mode="widthFix"></image>
         </view>
         <view class="content-right">
           <view class="title">

pages/index/index.wxss

@@ -2,25 +2,28 @@
 
 /* 轮播图 */
 .swiper-container{
-  width: 95%;
+  width: 90%;
   height: 280rpx;
+  /* 居中作用 */
   margin: 0rpx auto;
   position: relative;
+  border-radius: 15rpx;
+  overflow: hidden;
 }
 
 .swiper{
   width: 100%;
   height: 100%;
+  /* background: orange; */
+  border-radius: 15rpx;
 }
 .swiperItem{
   width: 100%;
   height: 100%;
-  /* height: auto; */
-  margin: 0rpx 20rpx;
   border-radius: 15rpx;
 }
 .swiperItem>image{
-  width: 95%;
+  width: 100%;
   height: 100%;
   border-radius: 15rpx;
 }
@@ -87,17 +90,18 @@
 .likeItem{
   width: 210rpx;
   height: 310rpx;
+  border-radius: 15rpx;
 }
 .likeimg{
   width: 210rpx;
   height: 210rpx;
-  border-radius: 10rpx;
+  border-radius: 15rpx;
   position: relative;
 }
 .likeItemIcon{
   width: 100%;
   height: 100%;
-  border-radius: 10rpx;
+  border-radius: 15rpx;
 }
 .likeText{
   font-size: 28rpx;
@@ -120,10 +124,12 @@
   color: #fff;
   font-size: 25rpx;
   padding: 5rpx 10rpx;
+  border-bottom-left-radius: 15rpx;
+  border-bottom-right-radius: 15rpx;
 }
 /* 主要内容 */
 .contentList{
-  width:90%;
+  width: 90%;
   margin: 0rpx auto;
   margin-top: 10rpx;
 }
@@ -133,7 +139,7 @@
   padding: 20rpx 0rpx;
   display: flex;
   justify-content: space-between;
-  border-bottom: 1rpx solid #cdcdcd;
+  border-bottom: 1rpx solid #f1f1f1;
 }
 .contentImg{
   width: 232rpx;

pages/user/phoneLogin/phoneLogin.js

@@ -15,53 +15,4 @@ Page({
   onLoad: function (options) {
     
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-    
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-    
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-    
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-    
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-    
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-    
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-    
-  }
 })

pages/user/phoneLogin/phoneLogin.wxml

@@ -22,7 +22,7 @@
                 </view>
             </form>
         </view>
-
+        <!-- 其他登录方式 -->
         <view class="wechat" >
             <view class="tips" >其他账户登录</view>
             <view class="wecahtlogin" >

pages/user/user.js

@@ -55,12 +55,6 @@ Page({
     })
   },
   
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  },
   phoneLogin:function(){
     wx.navigateTo({
       url: './phoneLogin/phoneLogin',
@@ -70,5 +64,15 @@ Page({
       fail: ()=>{},
       complete: ()=>{}
     });
+  },
+  gotoLogin(){
+    wx.navigateTo({
+      url: './phoneLogin/phoneLogin',
+      success: (result)=>{
+        
+      },
+      fail: ()=>{},
+      complete: ()=>{}
+    });
   }
 })

pages/user/user.wxml

@@ -76,7 +76,7 @@
                 </view>
                 <text class="icon-right text-gray"></text>
             </view>
-            <view class="choiceItem">
+            <view class="choiceItem" bindtap="gotoLogin">
                 <view class="">
                     <text class="icon-order text-gray"></text>
                     切换账号

pages/user/user.wxss

@@ -1,6 +1,6 @@
 /* pages/user/user.wxss */
 .body{
-    background-color: #f3f0f0;
+    background-color: #f1f1f1;
 }
 .topBar{
     width: 100%;
@@ -40,6 +40,7 @@
     width: 90%;
     height: 70rpx;
     padding: 0rpx 30rpx;
+    font-size: 32rpx;
 }
 .qianText{
     float: left;
@@ -55,7 +56,7 @@
     outline: none;
     text-align: center;
     line-height: 50rpx;
-    background-color: bisque;
+    background-color: #f1f1f1;
 }
 
 /* 选项卡 */
@@ -63,7 +64,8 @@
     width: 100%;
     height: auto;
     background-color: #fff;
-    margin-top:15rpx; 
+    margin-top:10rpx;
+    font-size: 32rpx; 
 }
 .choiceItem{
     display: flex;

utils/utils.js

@@ -0,0 +1,18 @@
+let myRequest = function(url,methods,data = {}){
+    wx.request({
+        url: url,
+        data: data,
+        header: {'content-type':'application/json'},
+        method: methods,
+        dataType: 'json',
+        responseType: 'text',
+        success: (result)=>{
+          console.log(result);
+          if(result.statusCode == 200){
+              //
+          }else{
+            //
+          }
+        },
+    })
+}