delete colorui icon

README.md

@@ -12,9 +12,6 @@
 </p>
 
 <br/><br/>
-
-> 在此项目中部分icon资源使用了小程序库 [colorUI](https://github.com/weilanwl/ColorUI)
-
 ### 完成度
 
 在实际的`喜马拉雅lite`小程序中存着很多的功能，比如播放，签到，以及页面之间的跳转都很多。因为这个项目的定位是一个0基础的学习项目所以并没有完全达到和实际小程序一样的功能体验，有些界面可能只是一个静态界面。目前该项目还在继续完善中，谢谢所有给了start的小伙伴的支持。
@@ -36,6 +33,7 @@
   - [ ] 实现节目详情页面的一些小功能
   - [x] 实现榜单页面的下拉选项点击选择功能
   - [x] 页面传参
+  - [x] 移除其他的`icon`资源
   
 > 当然还有很多的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/icons.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,27 +26,50 @@
           {{item.text}}
       </view>
     </view>
-    <!-- 这里就放一些静态数据 -->
-    <view class="collectionContent">
-      <block>
-        <view class="content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}" data-title="{{item.title}}">
-          <view class="contentImg">
-            <image src="http://imagev2.xmcdn.com/group71/M04/4C/11/wKgOz14Esw2SM9gQAAGQsBR1YeE034.jpg!op_type=5&upload_type=album&device_type=ios&name=medium&magick=png" mode="widthFix"></image>
-          </view>
-          <view class="content-right">
-            <view class="content-title">
-              <view class="titleText">郭德纲相声专场</view>
-              <view class="introduction">每天听个郭德纲，快乐永驻你身旁。相声专场在银川，喜马来把笑声传。 著名相声演...</view>
-            </view>
-            <view class="count">
-              <view class="playcount">
-                <!-- <text class="icon-"></text> -->
-                126亿
-              </view>
-              <view class="jicount">70集</view>
-            </view>
-          </view>
-        </view>
-      </block>
-    </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

@@ -44,3 +44,43 @@
   margin: 0rpx auto;
   margin-top: 10rpx;
 }
+.collectionContent{
+  width: 100%;
+  text-align: center;
+  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/details/details.wxml

@@ -41,8 +41,8 @@
       <text class="icon-video"></text> 播放全部
     </view>
     <view class="playselect">
-      <view style="margin-right:20rpx"><text class="icon-all"></text> 正序</view>
-      <view><text class="icon-all"></text> 选集</view>
+      <view style="margin-right:20rpx"><text class="icon-order"></text> 正序</view>
+      <view><text class="icon-list"></text> 选集</view>
     </view>
   </view>
   <!-- 节目列表 -->

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>
@@ -43,7 +42,7 @@
 <view class="like">
   <view class="barTitle">
     <view class="Title-left">猜你喜欢</view>
-    <view class="Title-right">查看全部></view>
+    <view class="Title-right">查看全部 <text class="icon-right"></text> </view>
   </view>
   <!-- 这没有没有使用数据绑定，因为是练手而且数据比较少 -->
   <view class="likeItemBox">
@@ -66,7 +65,7 @@
   <view class="contentList">
     <view class="barTitle">
       <view class="Title-left">有声小说</view>
-      <view class="Title-right">查看全部></view>
+      <view class="Title-right">查看全部<text class="icon-right"></text></view>
     </view>
     <block wx:for="{{xiaoshuocontent}}" wx:key="index">
       <view class="content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}" data-title="{{item.title}}">
@@ -93,7 +92,7 @@
   <view class="contentList">
     <view class="barTitle">
       <view class="Title-left">相声评书</view>
-      <view class="Title-right">查看全部></view>
+      <view class="Title-right">查看全部<text class="icon-right"></text></view>
     </view>
     <block wx:for="{{xiangshengcontent}}" wx:key="index">
       <view class="content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}" data-title="{{item.title}}">
@@ -120,7 +119,7 @@
   <view class="contentList">
     <view class="barTitle">
       <view class="Title-left">脱口秀</view>
-      <view class="Title-right">查看全部></view>
+      <view class="Title-right">查看全部<text class="icon-right"></text></view>
     </view>
     <block wx:for="{{tuokocontent}}" wx:key="index">
       <view class="content" bindtap="gotoDetails" data-coverImg="{{item.albumCoverUrl290}}" data-title="{{item.title}}">

pages/index/index.wxss

@@ -4,7 +4,6 @@
 .swiper-container{
   width: 90%;
   height: 280rpx;
-  /* 居中作用 */
   margin: 0rpx auto;
   position: relative;
   border-radius: 15rpx;

pages/search/search.js

@@ -6,12 +6,12 @@ Page({
    */
   data: {
     hotData:[
-      {title:"宝宝巴士",icon:"icon-top",color:"text-orange"},
-      {title:"孟鹤堂",icon:"icon-refresharrow",color:"text-red"},
-      {title:"三体",icon:"icon-top",color:"text-red"},
-      {title:"龙王殿",icon:"icon-refresharrow",color:"text-red"},
-      {title:"儿童恐龙故事",icon:"icon-top",color:"text-red"},
-      {title:"儿童版三国演义",icon:"icon-refresharrow",color:"text-red"},
+      {title:"宝宝巴士",icon:"icon-jiantouUp",color:"text-orange"},
+      {title:"孟鹤堂",icon:"icon-jiantouUp",color:"text-red"},
+      {title:"三体",icon:"icon-jiantouDown",color:"text-green"},
+      {title:"龙王殿",icon:"icon-jiantouUp",color:"text-red"},
+      {title:"儿童恐龙故事",icon:"icon-jiantouDown",color:"text-red"},
+      {title:"儿童版三国演义",icon:"icon-jiantouUp",color:"text-red"},
     ]
   },
 

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,9 +38,9 @@
 			</view>
 			<!-- 签到 -->
 			<view class="qiandao">
-			<!-- 签到涉及canvas所以暂时搁置 -->
+				<!-- 签到涉及canvas所以暂时搁置 -->
 				<view class="qianText">
-					<text class="icon-calendar text-gray"></text>
+					<text class="icon-dateTable text-gray"></text>
 					<text style="margin-left:20rpx">签到</text>
 				</view>
 				<view class="icon_">
@@ -66,22 +66,22 @@
 	
 				-->
 				<view class="">
-					<text class="icon-creative text-gray"></text>
+					<text class="icon-tip text-gray"></text>
 					<text style="margin-left:20rpx">夜间模式</text>
 				</view>
 				<switch></switch>
 			</view>
 			<view class="choiceItem">
-			<!-- 意见反馈需要使用button的open-type属性 此处没有设置-->
+				<!-- 意见反馈需要使用button的open-type属性 此处没有设置-->
 				<view class="">
-					<text class="icon-post text-gray"></text>
+					<text class="icon-write text-gray"></text>
 					<text style="margin-left:20rpx">意见反馈</text>
 				</view>
 				<text class="icon-right text-gray"></text>
 			</view>
 			<view class="choiceItem" bindtap="gotoLogin">
 				<view class="">
-					<text class="icon-order text-gray"></text>
+					<text class="icon-changeCount text-gray"></text>
 					<text style="margin-left:20rpx">切换账号</text>
 				</view>
 				<text class="icon-right text-gray"></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

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