Fix some bug

app.js

@@ -1,5 +1,4 @@
 //app.js
-let height = 0;
 App({
   onLaunch: function () {
     // 获取用户信息
@@ -27,12 +26,11 @@ App({
     wx.getSystemInfo({
       success (res) {
         console.log(res.windowHeight);
-        height = res.windowHeight;
+        this.globalData.height = res.windowHeight;
       }
     })
   },
   globalData: {
-    userInfo: null,
-    phoneHeight:height
+    userInfo: null
   }
 })

app.wxss

@@ -1,3 +1,4 @@
 /* 引入icon样式库 */
 @import '/style/icon.wxss';
-@import '/style/common.wxss';
+@import '/style/common.wxss';
+@import '/style/color.wxss';

pages/classification/classification.js

@@ -204,8 +204,7 @@ Page({
   //随着滚动动态设置左侧边栏的选中态
   showActive:function (e) {
     //方法欠佳，还需改进
-    
-    var index = parseInt( e.detail.scrollTop/125);
+    var index = parseInt( e.detail.scrollTop/116);
     this.setData({
       activeIndex: index
      })
@@ -213,7 +212,6 @@ Page({
   // 侧边栏的点击事件
   change:function (e){
     var that = this;
-    
     that.setData({
       VerticalNavTop: (e.currentTarget.dataset.index - 1) * 50,
       activeIndex: e.currentTarget.dataset.index,

pages/collection/collection.js

@@ -1,7 +1,7 @@
 // pages/collection/collection.js
 const app = getApp()
 let userInfo = app.globalData.userInfo;
-
+let height = app.globalData.phoneHeight
 Page({
 
   /**
@@ -9,6 +9,7 @@ Page({
    */
   data: {
     currentIndex:0,
+    height:height,
     content: [
       {text: "我的收藏"},
       {text: "我的已购"},
@@ -22,13 +23,21 @@ Page({
    */
   onLoad: function (options) {
     var that = this;
+    var height;
+    wx.getSystemInfo({
+      success (res) {
+        console.log(res.windowHeight);
+        height = res.windowHeight
+      }
+    })
     if (app.globalData.userInfo === null){
       that.setData({
         login:true
       })
     }else{
       that.setData({
-        login: false
+        login: false,
+        height:height
       })
     }
   },
@@ -55,10 +64,22 @@ Page({
     })
   },
   checkItem(e){
-    console.log(e)
     var that = this;
+    if (this.data.currentIndex === e.target.dataset.current) {
+      return false;
+    } else {
+      that.setData({
+        currentIndex: e.target.dataset.index
+      })
+    }
+  },
+  // 滑动切换tab
+
+  changeTab:function(e){
+    var that = this;
+    console.log(e.detail.current)
     that.setData({
-      currentIndex : e.target.dataset.index
+      currentIndex:e.detail.current
     })
   }
 })

pages/collection/collection.wxml

@@ -26,7 +26,50 @@
           {{item.text}}
       </view>
     </view>
-    <view class="collectionContent">
-      暂无内容
-    </view>
+    <swiper class="swiperbox" style="min-height:{{height}}px" duration="300" current="{{currentIndex}}" bindchange="changeTab">
+        <swiper-item class="swiper-box-item" >
+            <block>
+                <view class="NoContent">
+                    <image src="/image/noContent.png"></image>
+                    <view class="but-box">
+                        <text style="font-size:30rpx" class="text-gray">没有内容</text>
+                        <button class="but">看看推荐</button>
+                    </view>
+                </view>
+            </block>
+        </swiper-item>
+        <swiper-item>
+            <block>
+                <view class="NoContent">
+                    <image src="/image/noContent.png"></image>
+                    <view class="but-box">
+                        <text style="font-size:30rpx" class="text-gray">没有内容</text>
+                        <button class="but">看看推荐</button>
+                    </view>
+                </view>
+            </block>
+        </swiper-item>
+        <swiper-item>
+            <block>
+                <view class="NoContent">
+                    <image src="/image/noContent.png"></image>
+                    <view class="but-box">
+                        <text style="font-size:30rpx" class="text-gray">没有内容</text>
+                        <button class="but">看看推荐</button>
+                    </view>
+                </view>
+            </block>
+        </swiper-item>
+        <swiper-item>
+            <block>
+                <view class="NoContent">
+                    <image src="/image/noContent.png"></image>
+                    <view class="but-box">
+                        <text style="font-size:30rpx" class="text-gray">没有内容</text>
+                        <button class="but">更多礼包</button>
+                    </view>
+                </view>
+            </block>
+        </swiper-item>
+    </swiper>
 </block>

pages/collection/collection.wxss

@@ -41,4 +41,37 @@
   position: absolute;
   top: 300rpx;
   color: #aaaaaa
+}
+swiper{
+  display: block;
+  width: 100%;
+}
+.swiper-box-item{
+  height: 400rpx;
+}
+.NoContent{
+  width: 90%;
+  height: auto;
+  margin: 0rpx auto;
+  margin-top: 100rpx;
+  display: flex;
+  flex-direction: column;
+}
+.NoContent image{
+  width: 400rpx;
+  height: 300rpx;
+  align-self: center;
+}
+.but-box{
+  width: 80%;
+  margin: 0rpx auto;
+  margin-top: 40rpx;
+  text-align: center;
+}
+.but{
+  width: 300rpx;
+  height: 80rpx;
+  font-size: 40rpx;
+  line-height: 80rpx;
+  margin-top: 10rpx;
 }

pages/index/index.wxml

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

pages/index/index.wxss

@@ -4,11 +4,12 @@
 .swiper-container{
   width: 90%;
   height: 280rpx;
-  /* 居中作用 */
   margin: 0rpx auto;
   position: relative;
   border-radius: 15rpx;
   overflow: hidden;
+  display: flex;
+  justify-content: center;
 }
 
 .swiper{
@@ -32,11 +33,10 @@
   position: absolute;
   bottom: 20rpx;
   border-radius: 50rpx;
-  left: 240rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 3rpx 10rpx;
+  padding: 0rpx 10rpx;
 }
 .dotsItem{
   width: 8rpx;

pages/search/search.wxml

@@ -4,23 +4,21 @@
 		<text class="icon-search"></text>
 		<input placeholder="搜索你想听的节目"></input>
 	</view>
-	<view class="search-right">
-		取消
-	</view>
+	<view class="search-right">取消</view>
 </view>
 <!-- 搜索历史 -->
 <view class="history">
 	<!-- 提示标题 -->
 	<view class="title">
 		<view class="title-text">搜索历史</view>
-		<text class="icon-delete"></text>
+		<text class="icon-delete text-gray"></text>
 	</view>
 	<!-- 内容 -->
 	<view class="history-content">
-		<view class="content-item">庆余年</view>
-		<view class="content-item">德云社</view>
-		<view class="content-item">评书</view>
-		<view class="content-item">英语</view>
+		<view class="content-item bg-gray text-black">庆余年</view>
+		<view class="content-item bg-gray text-black">德云社</view>
+		<view class="content-item bg-gray text-black">评书</view>
+		<view class="content-item bg-gray text-black">英语</view>
 	</view>
 </view>
 <!-- 热门搜索 -->
@@ -33,7 +31,7 @@
 		<view class="hot-items" wx:for="{{hotData}}" wx:key="index">
 			<view class="item-left">
 				<view class="{{index < 3 ? 'text-red' : ''}}">{{index + 1}}</view>
-				<view class="itemTitle">{{item.title}}</view>
+				<view class="itemTitle text-black">{{item.title}}</view>
 			</view>
 			<text class="{{item.icon}} itemIcon {{item.color}}"></text>
 		</view>

pages/search/search.wxss

@@ -62,8 +62,6 @@
   padding: 10rpx 20rpx;
   margin-bottom: 20rpx;
   border-radius: 25rpx;
-  color: #333;
-  background-color: rgb(240, 240, 240);
 }
 
 .hot{

pages/user/user.js

@@ -7,7 +7,17 @@ Page({
    * 页面的初始数据
    */
   data: {
-    
+    timeout:[
+      {text:"不开启"},
+      {text:"播放当前声音关闭"},
+      {text:"播放2首声音关闭"},
+      {text:"播放3首声音关闭"},
+      {text:"播放4首声音关闭"},
+      {text:"10分钟后"},
+      {text:"20分钟后"},
+      {text:"30分钟后"},
+    ],
+    activeIndex:0,
   },
 
   onLoad: function (options) {
@@ -70,5 +80,12 @@ Page({
     that.setData({
       show:false
     })
+  },
+  chooseTimeOut:function(e){
+    var that = this;
+    console.log(e)
+    that.setData({
+      activeIndex:e.currentTarget.dataset.activeindex
+    })
   }
 })

pages/user/user.wxml

@@ -38,7 +38,7 @@
 			</view>
 			<!-- 签到 -->
 			<view class="qiandao">
-			<!-- 签到涉及canvas所以暂时搁置 -->
+				<!-- 签到涉及canvas所以暂时搁置 -->
 				<view class="qianText">
 					<text class="icon-calendar text-gray"></text>
 					<text style="margin-left:20rpx">签到</text>
@@ -72,7 +72,7 @@
 				<switch></switch>
 			</view>
 			<view class="choiceItem">
-			<!-- 意见反馈需要使用button的open-type属性 此处没有设置-->
+				<!-- 意见反馈需要使用button的open-type属性 此处没有设置-->
 				<view class="">
 					<text class="icon-post text-gray"></text>
 					<text style="margin-left:20rpx">意见反馈</text>
@@ -93,15 +93,11 @@
 <!-- 定时关闭部分 -->
 <block wx:if="{{show}}">
 	<view class="switch">
-		<scroll-view class="scroll-wrapper" scroll-y scroll-with-animation="true"  catchtouchmove="preventTouchMove">
-			<view class="switch-item">不开启</view>
-			<view class="switch-item">播放当前声音关闭</view>
-			<view class="switch-item">播放2首声音关闭</view>
-			<view class="switch-item">播放3首声音关闭</view>
-            <view class="switch-item">播放3首声音关闭</view>
-            <view class="switch-item">10分钟后</view>
-			<view class="switch-item">20分钟后</view>
-            <view class="switch-item">30分钟后</view>
+		<scroll-view class="scroll-wrapper" scroll-y scroll-with-animation="true" catchtouchmove="preventTouchMove">
+			<view class="switch-item" wx:for="{{timeout}}" wx:key="{{index}}" bindtap="chooseTimeOut" data-activeIndex="{{index}}">
+				<view>{{item.text}}</view>
+				<view class="active" wx:if="{{index == activeIndex}}"></view>
+			</view>
 		</scroll-view>
 		<view class="close" bindtap="close">关闭</view>
 	</view>

pages/user/user.wxss

@@ -1,54 +1,64 @@
 /* pages/user/user.wxss */
-.body{
+.body {
     background-color: #f1f1f1;
 }
-.topBar{
+
+.topBar {
     width: 100%;
     height: 270rpx;
     background-color: #fff;
 }
-.userImg{
+
+.userImg {
     width: 95%;
     height: 200rpx;
     margin: 0rpx auto;
     display: flex;
     justify-content: space-around;
     align-items: center;
-    
+
 }
-.avatar_nickname{
+
+.avatar_nickname {
     width: 70%;
     height: 100%;
     display: flex;
     justify-content: start;
     align-items: center;
 }
-.avatar{
+
+.avatar {
     width: 120rpx;
     height: 120rpx;
     border-radius: 50%;
 }
-.avatarImg{
+
+.avatarImg {
     width: 120rpx;
     height: 120rpx;
     border-radius: 50%;
 }
-.nickname{
+
+.nickname {
     margin-left: 20rpx;
 }
-.qiandao{
+
+.qiandao {
     width: 90%;
     height: 70rpx;
     padding: 0rpx 30rpx;
     font-size: 32rpx;
 }
-.qianText{
+
+.qianText {
     float: left;
 }
-.icon_{
+
+.icon_ {
     float: right;
 }
-.kefu{
+
+.kefu {
     width: 160rpx;
     height: 50rpx;
     font-size: 25rpx;
@@ -60,14 +70,15 @@
 }
 
 /* 选项卡 */
-.chioce{
+.chioce {
     width: 100%;
     height: auto;
     background-color: #fff;
-    margin-top:10rpx;
-    font-size: 32rpx; 
+    margin-top: 10rpx;
+    font-size: 32rpx;
 }
-.choiceItem{
+
+.choiceItem {
     display: flex;
     width: 90%;
     height: 60rpx;
@@ -77,7 +88,7 @@
 }
 
 /* 定时关闭 */
-.switch{
+.switch {
     width: 100%;
     height: 500rpx;
     position: fixed;
@@ -92,18 +103,25 @@
     border-top-right-radius: 15rpx;
     padding-top: 20rpx;
 }
-.switch-item{
+
+.switch-item {
     width: 100%;
-    height: 100rpx;
+    height: 120rpx;
+    line-height: 120rpx;
     border-bottom: 1rpx solid #f1f1f1;
-    line-height: 100rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    /* padding: 0rpx 30rpx; */
 }
-.close{
+
+.close {
     width: 100%;
     height: 100rpx;
     text-align: center;
     line-height: 100rpx;
 }
+
 .scroll-wrapper {
     white-space: nowrap;
     -webkit-overflow-scrolling: touch;
@@ -112,10 +130,17 @@
     width: 100%;
     height: 400rpx;
     box-sizing: border-box;
-  }
-  
-  ::-webkit-scrollbar {
+}
+
+::-webkit-scrollbar {
     width: 0;
     height: 0;
     color: transparent;
-  }
+}
+.active{
+    width: 30rpx;
+    height: 30rpx;
+    background-color: red;
+    border-radius: 50%;
+    margin-right: 40rpx;
+}

style/color.wxss

@@ -0,0 +1,23 @@
+
+/**
+*  color.wxss主要包含本程序主要的文本颜色，背景颜色
+*/
+
+/* 背景颜色 */
+.bg-gray{
+  background-color: #eeeeee;
+}
+
+/* 字体颜色 */
+.text-black{
+  color: #181818;
+}
+.text-red{
+  color: #f00;
+}
+.text-orange{
+  color: orange;
+}
+.text-gray{
+  color: #aaaaaa;
+}

style/common.wxss

@@ -88,7 +88,6 @@
 .title{
   width: 100%;
   height: 50rpx;
-  /* padding-right: 20rpx; */
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -115,19 +114,3 @@
   background: rgba(0, 0, 0, 0.6);
   opacity: 0.7;
 }
-
-/*
-==========
-  颜色类
-==========
-*/
-
-.text-red{
-  color: #f00;
-}
-.text-orange{
-  color: orange;
-}
-.text-gray{
-  color: #aaaaaa;
-}