Merge pull request #2 from chinadelu/Himalayan-lite2.0

Himalayan lite2.0

Himalayan.code-workspace

@@ -0,0 +1,8 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {}
+}

app.js

@@ -1,4 +1,5 @@
 //app.js
+let height = 0;
 App({
   onLaunch: function () {
     // 展示本地存储能力
@@ -20,8 +21,9 @@ App({
           wx.getUserInfo({
             success: res => {
               // 可以将 res 发送给后台解码出 unionId
+              console.log("app.js:"+res.userInfo)
               this.globalData.userInfo = res.userInfo
-
+              this.globalData.login = false
               // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
               // 所以此处加入 callback 以防止这种情况
               if (this.userInfoReadyCallback) {
@@ -32,8 +34,17 @@ App({
         }
       }
     })
+    //获取设备信息
+    wx.getSystemInfo({
+      success (res) {
+        console.log(res.windowHeight);
+        height = res.windowHeight;
+      }
+    })
   },
   globalData: {
-    userInfo: null
+    userInfo: null,
+    login:true,
+    phoneHeight:height
   }
 })

app.json

@@ -3,7 +3,10 @@
     "pages/index/index",
     "pages/classification/classification",
     "pages/collection/collection",
-    "pages/user/user"
+    "pages/user/user",
+    "pages/index/bangdan/bangdan",
+    "pages/details/details",
+    "pages/user/phoneLogin/phoneLogin"
   ],
   "window": {
     "navigationBarTitleText": "喜马拉雅",
@@ -18,25 +21,25 @@
       "pagePath": "pages/index/index",
       "text": "首页",
       "iconPath": "image/icon/home-icon.png",
-      "selectedIconPath": "image/icon/home-selectIcon.png"
+      "selectedIconPath": "image/icon/home-selecticon.png"
     },
     {
       "pagePath": "pages/classification/classification",
       "text": "分类",
       "iconPath": "image/icon/fen-icon.png",
-      "selectedIconPath": "image/icon/fen-selectIcon.png"
+      "selectedIconPath": "image/icon/fen-selecticon.png"
     },
     {
       "pagePath": "pages/collection/collection",
       "text": "收藏",
       "iconPath": "image/icon/collection-icon.png",
-      "selectedIconPath": "image/icon/collection-selectIcon.png"
+      "selectedIconPath": "image/icon/collection-selecticon.png"
     },
     {
       "pagePath": "pages/user/user",
       "text": "我的",
       "iconPath": "image/icon/user-icon.png",
-      "selectedIconPath": "image/icon/user-selectIcon.png"
+      "selectedIconPath": "image/icon/user-selecticon.png"
     }]
   },
   "debug":true,

app.wxss

@@ -3,8 +3,6 @@
 /* 引入icon样式库 */
 @import 'icon.wxss';
 
-
-
 /* 登录样式 */
 .logo{
     width: 128rpx;
@@ -28,11 +26,14 @@
     width: 100%;
     height: 80rpx;
     border-radius: 50rpx;
+    border: 0rpx;
+    outline: none;
 }
 .wechatLogin button{
     background-color: #70E500;
     border-radius: 50rpx;
-    border: 1rpx solid #70E500;
+    /* border: 1rpx solid #70E500; */
+    border: none;
     color: #fff;
 }
 .phoneLogin{
@@ -93,11 +94,12 @@
   .Title-left{
     float: left;
     font-size: 37rpx;
-    font-weight: 470;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-weight: 800;
     color: #333;
   }
   .Title-right{
     float: right;
-    font-size: 28rpx;
+    font-size: 26rpx;
     color: #aaa;
   }

pages/classification/classification.js

@@ -157,92 +157,67 @@ Page({
           {text:"历史"}
         ]
       },
+      {
+        title:"广播剧",
+        content:[
+          {text:"言情"},
+          {text:"悬疑"},
+          {text:"都市"},
+          {text:"幻想"},
+          {text:"武侠"},
+          {text:"历史"}
+        ]
+      },
+      {
+        title:"戏曲",
+        content:[
+          {text:"言情"},
+          {text:"悬疑"},
+          {text:"都市"},
+          {text:"幻想"},
+          {text:"武侠"},
+          {text:"历史"}
+        ]
+      },
     ]
   },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
+
   onLoad: function (options) {
     var that = this;
+    //调用getSystemInfo APi获取到用户的手机屏幕高度，动态设置scroll-view的高度
+
+    // 还有缺陷，代改进
     wx.getSystemInfo({
       success (res) {
-        console.log(res.screenHeight);
-        var height = (res.screenHeight*2);
-        console.log(height);
+        
+        // var heightleft = (res.windowHeight*2);
+        var height = (res.windowHeight*2);
+       
         that.setData({
-          phoneHeight:height
+          phoneHeight:height,
         })
       }
     })
   },
 
+  //随着滚动动态设置左侧边栏的选中态
   showActive:function (e) {
-    console.log(e);
-    if(e.target.offsetTop=== parseInt(281.4*e.target.dataset.index)){
-      that.setData({
-        activeIndex: e.target.dataset.index,
-      })
-    }
-    // this.setData({
-    //   activeIndex: e.detail
-    //  })
+    //方法欠佳，还需改进
+    
+    var index = parseInt( e.detail.scrollTop/125);
+    this.setData({
+      activeIndex: index
+     })
   },
+  // 侧边栏的点击事件
   change:function (e){
     var that = this;
-    console.log(e)
+    
     that.setData({
       VerticalNavTop: (e.currentTarget.dataset.index - 1) * 50,
       activeIndex: e.currentTarget.dataset.index,
       TabCur: e.currentTarget.dataset.id,
     })
   },
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-
-  }
 })

pages/classification/classification.wxml

@@ -8,10 +8,9 @@
 <!-- 分类索引 -->
 <view class="ification">
     <!-- 左边部分 -->
-   
     <scroll-view class="scroll-left" scroll-y scroll-with-animation style="height:{{phoneHeight}}rpx" scroll-top="{{VerticalNavTop}}">
         <block wx:for="{{ificationTitle}}" wx:key="index">
-            <view class="leftTitle {{index === activeIndex ? 'active':''}}" data-index="{{index}}" data-id="{{index}}" bindtap="change">— {{item.title}}</view>
+            <view class="leftTitle {{index === activeIndex ? 'active':''}}" data-index="{{index}}" data-id="{{index}}" bindtap="change">{{item.title}}</view>
         </block>
     </scroll-view>
     
@@ -32,5 +31,4 @@
             </view>
         </view>
     </scroll-view>
-    
 </view>

pages/classification/classification.wxss

@@ -8,20 +8,25 @@
     justify-content: start;
 }
 .scroll-left{
-    width: 25%;
+    width: 22%;
     padding-top: 55rpx;
+    margin-right: 20rpx;
+    background-color: #fff;
     overflow: hidden;
 }
 .leftTitle{
+    text-align: center;
     font-size: 28rpx;
-    height: 130rpx;
+    height: 100rpx;
+    line-height: 100rpx;
 }
+
 .scroll-right{
     width: 75%;
-    
 }
 .active{
-    color: orange;
+    color: #ff520f;
+    background-color: rgb(243, 244, 246);
 }
 .contentScroll-item{
     width: auto;

pages/collection/collection.js

@@ -1,25 +1,49 @@
 // pages/collection/collection.js
+
+const app = getApp()
+
+let userInfo = app.globalData.userInfo;
+let login = app.globalData.login
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+    content: [
+      {
+        text: "我的收藏"
+      },
+      {
+        text: "我的已购"
+      },
+      {
+        text: "收听历史"
+      },
+      {
+        text: "我的礼包"
+      }
+    ]
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
+    var that = this;
+    // console.log(app)
+    // console.log("userInfo" +userInfo)
+    if (app.globalData.userInfo === null){
+      that.setData({
+        login:login
+      })
+    }else{
+      console.log("login:" + app.globalData.login)
+      that.setData({
+        login: app.globalData.login
+      })
+    }
   },
 
   /**
@@ -29,38 +53,25 @@ Page({
 
   },
 
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
   /**
    * 用户点击右上角分享
    */
   onShareAppMessage: function () {
 
-  }
+  },
+  
+  // 点击获取头像和昵称
+  bindGetUserInfo(e) {
+    var that = this;
+    wx.getUserInfo({
+      success: function (res) {
+        app.globalData.userInfo = e.detail.userInfo;
+        app.globalData.login = false;
+        console.log(e.detail.userInfo);
+        that.setData({
+          login: app.globalData.login,
+        })
+      }
+    })
+  },
 })

pages/collection/collection.wxml

@@ -1,12 +1,31 @@
-
-<!-- logo -->
-<view class="logo" hover-class="none" hover-stop-propagation="false">
-    <image class="logoImg" src="/image/logo.png" mode="widthFix" lazy-load="false" binderror="" bindload=""></image>
-</view>
-
-<!-- 登录按钮 -->
-
-<view class="loginButton" hover-class="none" hover-stop-propagation="false">
-    <view class="wechatLogin"><button><text class="icon-github"></text>微信登录</button></view>
-    <view class="phoneLogin"><button>手机号登录</button></view>
-</view>
+<!-- 若是没有登录就显示登录界面 -->
+<block wx:if="{{login}}">
+    <!-- logo -->
+    <view class="logo" hover-class="none" hover-stop-propagation="false">
+        <image class="logoImg" src="/image/logo.png" mode="widthFix" lazy-load="false" binderror="" bindload=""></image>
+    </view>
+    <!-- 登录按钮 -->
+    <view class="loginButton" hover-class="none" hover-stop-propagation="false">
+        <view class="wechatLogin">
+            <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
+                <text class="icon-github"></text>
+                微信登录
+            </button>
+        </view>
+        <view class="phoneLogin">
+            <button>手机号登录</button>
+        </view>
+    </view>
+</block>
+<block wx:else>
+    <!-- 搜索框 -->
+    <view class="search marginTopBottom">
+        <view class="icon-search"></view>
+        <input placeholder="搜索你想听的节目"></input>
+    </view>
+    <view class="titleBar">
+      <view class="itemTitle" wx:for="{{content}}" wx:key>
+          {{item.text}}
+      </view>
+    </view>
+</block>

pages/collection/collection.wxss

@@ -1 +1,26 @@
 /* pages/collection/collection.wxss */
+.titleBar{
+    width: 100%;
+    height: 80rpx;
+    /* 这个配色不对 */
+    border-bottom: 1rpx solid #aaaaaa;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 28rpx;
+    overflow: hidden;
+}
+.itemTitle{
+    width: auto;
+   
+}
+.currtline {
+    margin: -8rpx auto 0 auto;
+    width: 100rpx;
+    height: 1rpx;
+    border-radius: 4rpx;
+  }
+  .currtline.active {
+    background: #ff520f;
+    transition: all .3s;
+  }

pages/details/detail.wxss

@@ -0,0 +1,13 @@
+.top-title-bar{
+    width: 100%;
+    height: 300rpx;
+    background-color: black;
+}
+.Performance{
+    width: 100%;
+    height: 500rpx;
+    /* height: 100%; */
+    background-color: #fff;
+    border-top-left-radius: 25rpx;
+    border-top-right-radius: 25rpx;
+}

pages/details/details.js

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

pages/details/details.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/details/details.wxml

@@ -0,0 +1,33 @@
+<!-- title和背景 -->
+<view class="top-title-bar">
+    <view class="">
+        <view class="">
+            dsadsa
+        </view>
+        <view class="">
+            dsad
+        </view>
+    </view>
+    <view class="">
+        
+    </view>
+</view>
+<!-- 节目列表 -->
+<view class="Performance">
+    <view class="">
+        <view class="" wx:for="{{}}">
+            {{}}
+        </view>
+    </view>
+    <view class="">
+        
+    </view>
+    <view class="">
+        <view class="">
+            
+        </view>
+        <view class="">
+            
+        </view>
+    </view>
+</view>

pages/index/bangdan/bangdan.js

@@ -0,0 +1,57 @@
+const app = getApp();
+// 定义一个全局变量保存从接口获取到的数据，以免重复请求接口
+var resut; 
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    currentTab:0,
+    navTitle:[
+      {title:'经典必听'},
+      {title:'优质专辑'},
+      {title:'有声小说'},
+      {title:'儿童教育'},
+      {title:'人文历史'},
+      {title:'最潮外语'},
+      {title:'商业财经'},
+      {title:'热门新闻'}
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var that = this;
+    wx.request({
+      url: 'http://mobile.ximalaya.com/mobile/discovery/v3/recommend/hotAndGuess?code=43_310000_3100&device=android&version=5.4.45',
+      
+      header: {'content-type':'application/json'},
+      method: 'GET',
+      dataType: 'json',
+      responseType: 'text',
+      success: (res)=>{
+        resut = res;
+        console.log(res);
+        that.setData({
+          list: res.data.hotRecommends.list[0].list
+        })
+      },
+      fail: ()=>{},
+      complete: ()=>{}
+    });
+  },
+  handleClick(e) {
+    let currentTab = e.currentTarget.dataset.index;
+    // 实现每一个tabbar切换对应内容的原理，根据每一个tabbar的index对应数组中的数据
+    this.setData({
+      currentTab,
+      list: resut.data.hotRecommends.list[currentTab].list
+    })
+  },
+  pullDown:function(){
+    
+  }
+})

pages/index/bangdan/bangdan.json

@@ -0,0 +1,4 @@
+{  
+  "usingComponents": {},
+  "navigationBarTitleText": "榜单"
+}

pages/index/bangdan/bangdan.wxml

@@ -0,0 +1,46 @@
+<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>
+<!-- 对应的内容区 -->
+<block wx:for="{{list}}" wx:key="{{index}}">
+  <view class="content">
+    <view class="indexNumber">
+    <!-- 此处写法不对，到了两位数的时候就不行了，并无好的方法，这里应该是后端给的数据 -->
+      <view>0{{index}}</view>
+    </view>
+    <image src="{{item.albumCoverUrl290}}"></image>
+    <view class="content-left">
+      <view class="content-title">{{item.title}}</view>
+      <view class="content-text">{{item.trackTitle}}</view>
+      <view class="count">
+        <view style="margin-right:25rpx;">
+          <!-- 本例中33.2亿的单位是写死的，此处应该是后端返回数据吧 -->
+          <text class="icon"></text>
+          <text class="">33.2亿</text>
+        </view>
+        <view>
+          <text class="icon"></text>
+          <text class="">44集</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</block>
+
+<!-- 蒙布 -->
+<!-- <view class="cover">
+  <view class="">
+    <view class="">
+      撒大赛
+    </view>
+  </view>
+</view> -->

pages/index/bangdan/bangdan.wxss

@@ -0,0 +1,134 @@
+.top-nav{
+  width: 100%;
+  height: 80rpx;
+  display: flex;
+  justify-content: start;
+}
+
+.scroll-wrapper {
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  background: #FFF;
+  padding-left: 20rpx;
+  width: 90%;
+  height: 85rpx;
+  box-sizing: border-box;
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
+}
+
+.navigate-item {
+  display: inline-block;
+  text-align: center;
+  height: 90rpx;
+  line-height: 90rpx;
+  margin-right: 80rpx;
+}
+
+.names {
+  font-size: 28rpx;
+  color: #3c3c3c;
+}
+
+.names.active {
+  color: #ff520f;
+  font-weight: bold;
+  font-size: 34rpx;
+}
+
+.currtline {
+  margin: -8rpx auto 0 auto;
+  width: 100rpx;
+  height: 1rpx;
+  border-radius: 4rpx;
+}
+
+.currtline.active {
+  background: #ff520f;
+  transition: all .3s;
+}
+
+.pull-down{
+  width: 10%;
+  height: 25rpx;
+  padding: 30rpx 0rpx;
+  background-color: rgb(249, 249, 249);
+  text-align: center;
+  color: #ff520f;
+  line-height: 30rpx
+}
+/* 内容区的代码 */
+
+.content {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 10rpx;
+  padding-top: 30rpx;
+}
+
+.indexNumber {
+  width: 15%;
+  height: auto;
+  padding: 20rpx 20rpx;
+  text-align: center;
+  font-size: 50rpx;
+  color: #ff520f;
+}
+
+.content image {
+  width: 140rpx;
+  height: 140rpx;
+  margin-top: 10rpx;
+}
+
+.content-left {
+  padding: 10rpx 0rpx;
+  margin-left: 30rpx;
+  width: 60%;
+  height: auto;
+  border-bottom: 1rpx solid #ccc;
+}
+
+.content-title{
+  font-size: 35rpx;
+  height: 40rpx;
+  color: #000;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;/*行数n*/
+  -webkit-box-orient: vertical; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.content-text{
+  height: 40rpx;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;/*行数n*/
+  -webkit-box-orient: vertical; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 27rpx;
+  text-align: left;
+  color: #ccc;
+  margin-top: 15rpx;
+}
+.count{
+  font-size: 27rpx;
+  color: #ccc;
+  display: flex;
+  justify-content: start;
+  margin-top: 15rpx;
+}
+
+/* 蒙布 */
+
+.cover{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 9999;
+}

pages/index/index.js

@@ -18,11 +18,11 @@ Page({
       '/image/ad7.jpg'
     ],
     navList:[
-      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"榜单"},
-      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"听小说"},
-      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"情感电台"},
-      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"听相声"},
-      {"navIconImg":'/image/nav-icon/bangdan.png',navText:"儿童故事"},
+      {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,
   },
@@ -47,63 +47,25 @@ Page({
       responseType: 'text',
       success: (result)=>{
         console.log(result);
-        that.setData({
-          xiaoshuocontent:result.data.hotRecommends.list[0].list,
-          xiangshengcontent:result.data.hotRecommends.list[2].list,
-          tuokocontent:result.data.hotRecommends.list[4].list
-        })
+        if(result.statusCode == 200){
+          that.setData({
+            showitem:true,
+            // guess:result.data.guess.list[0].list,
+            xiaoshuocontent:result.data.hotRecommends.list[0].list,
+            xiangshengcontent:result.data.hotRecommends.list[2].list,
+            tuokocontent:result.data.hotRecommends.list[4].list
+          })
+        }else{
+          that.setData({
+            showitem:false
+          })
+        }
       },
-      fail: ()=>{},
-      complete: ()=>{}
     });
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-    
-  },
-
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
-    
-  },
-
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-    
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-    
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-    
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-    
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
-    
+  goToBangDan:function(){
+    wx.navigateTo({
+      url: '/pages/index/bangdan/bangdan',
+    })
   }
 })

pages/index/index.wxml

@@ -10,7 +10,7 @@
     <!-- 轮播图图片 -->
     <swiper-item class="swiperItem" wx:for="{{imgList}}" wx:key>
       <!-- 加上widthFix可以使图片自适应 -->
-      <image src="{{item}}" mode="widthFix"></image>
+      <image src="{{item}}" ></image>
     </swiper-item>
   </swiper>
   <!-- 为了和喜马拉雅一致，自己需定制轮播图dots -->
@@ -23,11 +23,11 @@
 </view>
 <!-- 宫格导航 -->
 <view class="nav">
-  <block wx:for="{{navList}}" wx:key>
-    <view class="navItem">
+  <block>  
+    <view class="navItem" bindtap="{{item.events}}" wx:for="{{navList}}"  wx:key="index">
       <!-- 因为没有合适的图，所以全部使用的一样的 -->
-      <image class="navIcon" src="{{item.navIconImg}}" mode="widthFix" lazy-load="false"></image>
-      <text class="navText">{{item.navText}}</text>
+      <image class="navIcon" src="{{item.icon}}" mode="widthFix" lazy-load="false"></image>
+      <text class="navText">{{item.text}}</text>
     </view>
   </block>
 </view>
@@ -69,92 +69,95 @@
     </view>
   </view>
 </view>
-<!-- 有声小说 -->
-<view class="contentList">
-  <view class="barTitle">
-    <view class="Title-left">有声小说</view>
-    <view class="Title-right">查看全部></view>
-  </view>
-  <block wx:for="{{xiaoshuocontent}}" wx:key>
-    <view class="content">
-      <view class="contentImg">
-        <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
-      </view>
-      <view class="content-right">
-        <view class="title">
-          <view class="titleText">{{item.title}}</view>
-          <view class="introduction">{{item.trackTitle}}</view>
+
+<!-- 有数据的时候显示 -->
+<block wx:if="{{showitem}}">
+  <!-- 有声小说 -->
+  <view class="contentList">
+    <view class="barTitle">
+      <view class="Title-left">有声小说</view>
+      <view class="Title-right">查看全部></view>
+    </view>
+    <block wx:for="{{xiaoshuocontent}}" wx:key>
+      <view class="content">
+        <view class="contentImg">
+          <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
         </view>
-        <view class="count">
-          <text class="playcount">
-            <!-- <text class="icon-"></text> -->
-            126亿
-          </text>
-          <text class="jicount">
-            {{item.tracks}}集
-          </text>
+        <view class="content-right">
+          <view class="title">
+            <view class="titleText">{{item.title}}</view>
+            <view class="introduction">{{item.trackTitle}}</view>
+          </view>
+          <view class="count">
+            <view class="playcount">
+              <!-- <text class="icon-"></text> -->
+              126亿
+            </view>
+            <view class="jicount">{{item.tracks}}集</view>
+          </view>
         </view>
       </view>
-    </view>
-  </block>
-</view>
-
-<!-- 相声评书 -->
-<view class="contentList">
-  <view class="barTitle">
-    <view class="Title-left">相声评书</view>
-    <view class="Title-right">查看全部></view>
+    </block>
   </view>
-  <block wx:for="{{xiangshengcontent}}" wx:key>
-    <view class="content">
-      <view class="contentImg">
-        <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
-      </view>
-      <view class="content-right">
-        <view class="title">
-          <view class="titleText">{{item.title}}</view>
-          <view class="introduction">{{item.trackTitle}}</view>
+  <!-- 相声评书 -->
+  <view class="contentList">
+    <view class="barTitle">
+      <view class="Title-left">相声评书</view>
+      <view class="Title-right">查看全部></view>
+    </view>
+    <block wx:for="{{xiangshengcontent}}" wx:key>
+      <view class="content">
+        <view class="contentImg">
+          <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
         </view>
-        <view class="count">
-          <text class="playcount">
-            <!-- <text class="icon-"></text> -->
-            126亿
-          </text>
-          <text class="jicount">
-            {{item.tracks}}集
-          </text>
+        <view class="content-right">
+          <view class="title">
+            <view class="titleText">{{item.title}}</view>
+            <view class="introduction">{{item.trackTitle}}</view>
+          </view>
+          <view class="count">
+            <view class="playcount">
+              <!-- <text class="icon-"></text> -->
+              126亿
+            </view>
+            <view class="jicount">{{item.tracks}}集</view>
+          </view>
         </view>
       </view>
-    </view>
-  </block>
-</view>
-
-<!-- 脱口秀 -->
-<view class="contentList">
-  <view class="barTitle">
-    <view class="Title-left">脱口秀</view>
-    <view class="Title-right">查看全部></view>
+    </block>
   </view>
-  <block wx:for="{{tuokocontent}}" wx:key>
-    <view class="content">
-      <view class="contentImg">
-        <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
-      </view>
-      <view class="content-right">
-        <view class="title">
-          <view class="titleText">{{item.title}}</view>
-          <view class="introduction">{{item.trackTitle}}</view>
+  <!-- 脱口秀 -->
+  <view class="contentList">
+    <view class="barTitle">
+      <view class="Title-left">脱口秀</view>
+      <view class="Title-right">查看全部></view>
+    </view>
+    <block wx:for="{{tuokocontent}}" wx:key>
+      <view class="content">
+        <view class="contentImg">
+          <image src="{{item.albumCoverUrl290}}" mode="widthFix" lazy-load="false"></image>
         </view>
-        <view class="count">
-          <text class="playcount">
-            <!-- <text class="icon-"></text> -->
-            126亿
-          </text>
-          <text class="jicount">
-            {{item.tracks}}集
-          </text>
+        <view class="content-right">
+          <view class="title">
+            <view class="titleText">{{item.title}}</view>
+            <view class="introduction">{{item.trackTitle}}</view>
+          </view>
+          <view class="count">
+            <view class="playcount">
+              <!-- <view class="icon-"></view> -->
+              126亿
+            </view>
+            <view class="jicount">{{item.tracks}}集</view>
+          </view>
         </view>
       </view>
-    </view>
-  </block>
-</view>
+    </block>
+  </view>
+</block>
+<block wx:else>
+  <view class="dataNotip">
+    <view class="tip">
+      网络暂时走丢了，请稍后再试
+    </view>  
+  </view>
+</block>

pages/index/index.wxss

@@ -2,20 +2,26 @@
 
 /* 轮播图 */
 .swiper-container{
-  width: 90%;
+  width: 95%;
+  height: 280rpx;
   margin: 0rpx auto;
   position: relative;
 }
+
 .swiper{
   width: 100%;
+  height: 100%;
 }
 .swiperItem{
   width: 100%;
+  height: 100%;
   /* height: auto; */
+  margin: 0rpx 20rpx;
   border-radius: 15rpx;
 }
 .swiperItem>image{
-  width: 100%;
+  width: 95%;
+  height: 100%;
   border-radius: 15rpx;
 }
 .dots{
@@ -175,6 +181,7 @@
   height: 50rpx;
   display: flex;
   justify-content: start;
+  align-items: center;
 }
 .playcount{
  font-size: 25rpx;
@@ -185,3 +192,17 @@
   font-size: 25rpx;
   color: #cdcdcd;
 }
+
+.dataNotip{
+  width: 100%;
+  height: 300rpx;
+  padding-top: 150rpx;
+}
+.tip{
+  width: auto;
+  height: 100rpx;
+  text-align: center;
+  margin: 0rpx auto;
+  color: red;
+  font-weight: 800;
+}

pages/user/phoneLogin/phoneLogin.js

@@ -0,0 +1,67 @@
+const app = getApp();
+let height = app.globalData.phoneheight
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    height:height
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+    
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+    
+  }
+})

pages/user/phoneLogin/phoneLogin.json

@@ -0,0 +1,3 @@
+{
+  
+}

pages/user/phoneLogin/phoneLogin.wxml

@@ -0,0 +1,33 @@
+<view class="main bg-white" style="min-height:{{height}}px">
+    <view class="content">
+        <!-- 提示标语 -->
+        <view class="slogn">
+            登录后即可收听你的收藏专辑哦
+        </view>
+        <!-- 表单输入部分 -->
+        <view class="login">
+            <form class="frombox" report-submit="false" bindsubmit="" bindreset="">
+                <!-- 输入手机号 -->
+                <view class="phoneNumber">
+                    <view class="code">+86</view>
+                    <input type="number" placeholder="请输入手机号" placeholder-class="place"></input>
+                </view>      
+                <!-- 验证码 -->
+                <view class="yzm">
+                    <input type="number" placeholder="输入验证码" placeholder-class="place"></input>
+                    <view class="getcode">获取验证码</view>
+                </view>
+                <view class="submit" >
+                    <button><text class="icon-wechat"></text> 立即登录</button>
+                </view>
+            </form>
+        </view>
+
+        <view class="wechat" >
+            <view class="tips" >其他账户登录</view>
+            <view class="wecahtlogin" >
+                <button><text class="icon-wechat"></text> 微信登陆</button>
+            </view>
+        </view>
+    </view>
+</view>

pages/user/phoneLogin/phoneLogin.wxss

@@ -0,0 +1,114 @@
+/*  
+    96D655 
+    CCCCCC
+*/
+.main{
+   width: 100%; 
+}
+
+.content{
+    width: 80%;
+    margin: 0rpx auto;
+    margin-top: 100rpx;
+}
+.slogn{
+    width: 100%;
+    height: auto;
+    font-size: 25rpx;
+    color: #c3c3c3;
+    text-align: center;
+    /* word-spacing: 20rpx; */
+}
+.login{
+    width: 100%;
+    height: auto;
+    margin-top: 50rpx;
+    overflow: hidden;
+}
+.phoneNumber{
+    width: 100%;
+    height: auto;
+    display: flex;
+    padding: 20rpx;
+    justify-content: flex-start;
+    align-items: center;
+    border-bottom: 0.5rpx solid #cccccc;
+}
+.code{
+    width: 60rpx;
+    font-size: 27rpx;
+    line-height: 60rpx;
+    text-align: center;
+    padding-right: 20rpx;
+    border-right: 1rpx solid #cccccc;
+    /* box-sizing: border-box; */
+    margin-right: 20rpx;
+    color: #cccccc;
+}
+.yzm{
+    width: 100%;
+    height: auto;
+    display: flex;
+    padding: 20rpx;
+    justify-content: flex-start;
+    align-items: center;
+    box-sizing: border-box;
+    border-bottom: 0.5rpx solid #cccccc;
+}
+.getcode{
+    width: 200rpx;
+    font-size: 35rpx;
+    line-height: 60rpx;
+    text-align: center;
+    padding-left: 20rpx;
+    border-left: 1rpx solid #cccccc;
+    /* box-sizing: border-box; */
+    /* margin-left: 20rpx; */
+    color: #cccccc;
+}
+.place{
+    font-size: 29rpx;
+}
+.submit{
+    width: 100%;
+    height: 100rpx;
+    margin-top: 50rpx;
+    border-radius: 50rpx;
+    border: 0rpx;
+}
+.submit button{
+    width: 100%;
+    height: 100rpx;
+    /* margin-top: 50rpx; */
+    border-radius: 50rpx;
+    border: 0rpx;
+    color: #ffffff;
+    background: #cccccc;
+    font-size: 38rpx;
+}
+.wechat{
+    width: 100%;
+    height: auto;
+    margin-top: 150rpx;
+    text-align: center;
+}
+.tips{
+    font-size: 32rpx;
+    color: #333333;
+}
+.wecahtlogin{
+    width: 100%;
+    height: 100rpx;
+    margin-top: 100rpx;
+    border-radius: 50rpx;
+    border: 0rpx;
+}
+.wecahtlogin button{
+    width: 100%;
+    height: 100rpx;
+    border-radius: 50rpx;
+    border: 0rpx;
+    background: #96D655;
+    color: #ffffff;
+    font-size: 38rpx;
+}

pages/user/user.js

@@ -1,4 +1,7 @@
 // pages/user/user.js
+const app = getApp()
+let userInfo = app.globalData.userInfo;
+let login = app.globalData.login;
 Page({
 
   /**
@@ -23,40 +26,49 @@ Page({
       }
     })
     // 查看是否授权
-    wx.getSetting({
-      success(res) {
-        if (res.authSetting['scope.userInfo']) {
-          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
-          wx.getUserInfo({
-            success: function (res) {
-              console.log(res.userInfo);
-              that.setData({
-                login:true,
-                avatarUrl:res.userInfo.avatarUrl,
-                nickName:res.userInfo.nickName
-              })
-            }
-          })
-        }
-      }
-    })
+    if (app.globalData.userInfo === null) {
+      that.setData({
+        login: login
+      })
+    } else {
+      that.setData({
+        login: app.globalData.login,
+        avatarUrl: app.globalData.userInfo.avatarUrl,
+        nickName: app.globalData.userInfo.nickName
+      })
+    }
   },
   // 获取用户的头像和昵称信息
   bindGetUserInfo(e) {
     var that = this;
-    console.log(e.detail.userInfo)
-    that.setData({
-      login:true,
-      avatarUrl:e.detail.userInfo.avatarUrl,
-      nickName:e.detail.userInfo.nickName
+    wx.getUserInfo({
+      success: function(res) {
+        console.log(e.detail.userInfo);
+        app.globalData.userInfo = e.detail.userInfo;
+        app.globalData.login = false;
+        that.setData({
+          login: app.globalData.login,
+          avatarUrl:e.detail.userInfo.avatarUrl,
+          nickName:e.detail.userInfo.nickName
+        })
+      }
     })
-    
   },
-
+  
   /**
    * 用户点击右上角分享
    */
   onShareAppMessage: function () {
 
+  },
+  phoneLogin:function(){
+    wx.navigateTo({
+      url: './phoneLogin/phoneLogin',
+      success: (result)=>{
+        
+      },
+      fail: ()=>{},
+      complete: ()=>{}
+    });
   }
 })

pages/user/user.wxml

@@ -1,5 +1,5 @@
 <!-- pages/user/user.wxml -->
-<block wx:if="{{!login}}">
+<block wx:if="{{login}}">
     <!-- logo -->
     <view class="logo">
         <image class="logoImg" src="/image/logo.png" mode="widthFix"></image>
@@ -13,7 +13,7 @@
                 微信登录
             </button>
         </view>
-        <view class="phoneLogin">
+        <view class="phoneLogin" bindtap="phoneLogin">
             <button>手机号登录</button>
         </view>
     </view>
@@ -65,6 +65,7 @@
                 <view class="">
                     <text class="icon-creative text-gray"></text>
                     夜间模式
+                    <!-- <button class="switch"></button> -->
                 </view>
                 <text class="icon-right text-gray"></text>
             </view>

pages/user/user.wxss

@@ -1,6 +1,6 @@
 /* pages/user/user.wxss */
 .body{
-    background-color: #ece6e6;
+    background-color: #f3f0f0;
 }
 .topBar{
     width: 100%;

project.config.json

@@ -47,8 +47,12 @@
 			"currentL": -1,
 			"list": []
 		},
+		"gamePlugin": {
+			"current": -1,
+			"list": []
+		},
 		"miniprogram": {
-			"current": 1,
+			"current": 4,
 			"list": [
 				{
 					"id": -1,
@@ -61,6 +65,34 @@
 					"id": -1,
 					"name": "分类页",
 					"pathName": "pages/classification/classification",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "榜单页",
+					"pathName": "pages/index/bangdan/bangdan",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "user",
+					"pathName": "pages/user/user",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "details",
+					"pathName": "pages/details/details",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "phoneLogin",
+					"pathName": "pages/user/phoneLogin/phoneLogin",
 					"scene": null
 				}
 			]