'增加详情页面'

pages/collection/collection.wxml

@@ -2,7 +2,7 @@
 <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>
+        <image class="logoImg" src="/image/logo.png" mode="widthFix" lazy-load="false"></image>
     </view>
     <!-- 登录按钮 -->
     <view class="loginButton" hover-class="none" hover-stop-propagation="false">

pages/details/detail.wxss

@@ -1,13 +0,0 @@
-.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.wxml

@@ -1,33 +1,117 @@
 <!-- title和背景 -->
-<view class="top-title-bar">
-    <view class="">
-        <view class="">
-            dsadsa
+<view class="toptitlebar">
+    <view class="baritem">
+      <view class="baritemtop">
+        <view class="themebgimg" style="background:url(../../image/guess1.jpg)"></view>
+        <view class="themeinfo">
+          <view class="themetitle">完 | 米小圈上学记：一二三年级</view>
+          <view class="themeauthor">
+            <!-- <image class="" src="" mode="widthFix"></image> -->
+            米小圈 <text class="icon-right"></text>
+          </view>
+          <view class="viewinfo">
+            <view class="viewinfoleft">167.6万人收藏</view>
+            <text class="viewinfomid">|</text>
+            <view class="viewinforight">已更新257期</view>
+          </view>
         </view>
-        <view class="">
-            dsad
-        </view>
-    </view>
-    <view class="">
-        
+      </view>
+      <view class="baritembottom">
+        <button class="sharebut"><text class="icon-share"></text> 分享</button>
+        <button class="collection"><text class="icon-add"></text> 收藏</button>
+      </view>
     </view>
 </view>
 <!-- 节目列表 -->
 <view class="Performance">
-    <view class="">
-        <view class="" wx:for="{{}}">
-            {{}}
-        </view>
+  <view class="selectbar">
+    <view class="detail">详情</view>
+    <view class="list">
+      节目 <text class="">152</text>
     </view>
-    <view class="">
-        
+  </view>
+  <view class="play">
+    <view class="playall">
+      <text class="icon-video"></text> 播放全部
     </view>
-    <view class="">
-        <view class="">
-            
-        </view>
-        <view class="">
-            
-        </view>
+    <view class="playselect">
+      <view style="margin-right:20rpx"><text class="icon-all"></text> 正序</view>
+      <view><text class="icon-all"></text> 选集</view>
+    </view>
+  </view>
+  <view class="performanceContent">
+    <!-- 序号 -->
+    <view class="performanceIndex">1</view>
+    <!-- 节目标题 -->
+    <view class="performanceInfo">
+      <view class="performanceInfoTop">
+        <view style="font-size:33rpx">《人在江湖》郭德纲 于谦</view>
+        <view style="color:#aaaaaa">2年前</view>
+      </view>
+      <view class="performanceInfoBottom">
+        <view><text class="icon-video"></text> 5601.9万</view>
+        <view style="margin-left:20rpx"><text class="icon-time"></text> 34:36</view>
+      </view>
+    </view>
+  </view>
+  <view class="performanceContent">
+    <!-- 序号 -->
+    <view class="performanceIndex">1</view>
+    <!-- 节目标题 -->
+    <view class="performanceInfo">
+      <view class="performanceInfoTop">
+        <view style="font-size:33rpx">《人在江湖》郭德纲 于谦</view>
+        <view style="color:#aaaaaa">2年前</view>
+      </view>
+      <view class="performanceInfoBottom">
+        <view><text class="icon-video"></text> 5601.9万</view>
+        <view style="margin-left:20rpx"><text class="icon-time"></text> 34:36</view>
+      </view>
+    </view>
+  </view>
+  <view class="performanceContent">
+    <!-- 序号 -->
+    <view class="performanceIndex">1</view>
+    <!-- 节目标题 -->
+    <view class="performanceInfo">
+      <view class="performanceInfoTop">
+        <view style="font-size:33rpx">《人在江湖》郭德纲 于谦</view>
+        <view style="color:#aaaaaa">2年前</view>
+      </view>
+      <view class="performanceInfoBottom">
+        <view><text class="icon-video"></text> 5601.9万</view>
+        <view style="margin-left:20rpx"><text class="icon-time"></text> 34:36</view>
+      </view>
+    </view>
+  </view>
+  <view class="performanceContent">
+    <!-- 序号 -->
+    <view class="performanceIndex">1</view>
+    <!-- 节目标题 -->
+    <view class="performanceInfo">
+      <view class="performanceInfoTop">
+        <view style="font-size:33rpx">《人在江湖》郭德纲 于谦</view>
+        <view style="color:#aaaaaa">2年前</view>
+      </view>
+      <view class="performanceInfoBottom">
+        <view><text class="icon-video"></text> 5601.9万</view>
+        <view style="margin-left:20rpx"><text class="icon-time"></text> 34:36</view>
+      </view>
+    </view>
+  </view>
+  <view class="performanceContent">
+    <!-- 序号 -->
+    <view class="performanceIndex">1</view>
+    <!-- 节目标题 -->
+    <view class="performanceInfo">
+      <view class="performanceInfoTop">
+        <view style="font-size:33rpx">《人在江湖》郭德纲 于谦</view>
+        <view style="color:#aaaaaa">2年前</view>
+      </view>
+      <view class="performanceInfoBottom">
+        <view><text class="icon-video"></text> 5601.9万</view>
+        <view style="margin-left:20rpx"><text class="icon-time"></text> 34:36</view>
+      </view>
     </view>
+  </view>
 </view>

pages/details/details.wxss

@@ -0,0 +1,164 @@
+.toptitlebar{
+  width: 100%;
+  height: 410rpx;
+  background: rgba(27, 123, 136, .5);
+  overflow: hidden;
+}
+.Performance{
+  width: 100%;
+  height: 500rpx;
+  border-top-left-radius: 20rpx;
+  border-top-right-radius: 20rpx;
+  position: relative;
+  top: -10rpx;
+}
+.baritem{
+  width: 100%;
+  height: 400rpx;
+  margin-top: 50rpx;
+  padding: 20rpx 0rpx;
+}
+.baritemtop{
+  width: 100%;
+  height: 200rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.themebgimg{
+  width: 200rpx;
+  height: 200rpx;
+  margin-right: 30rpx;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.themeinfo{
+  width: 60%;
+  height: 200rpx;
+}
+.themetitle{
+  color: #fff;
+  font-size: 40rpx;
+}
+.themeauthor{
+  font-size: 25rpx;
+  color: #fff;
+  margin-top: 5rpx;
+}
+.viewinfo{
+  color: #fff;
+  font-size: 30rpx;
+  margin-top: 5rpx;
+  display: flex;
+  justify-content: flex-start;
+}
+.viewinfoleft{
+  margin-right: 5rpx;
+}
+.viewinforight{
+  margin-left: 5rpx;
+}
+.baritembottom{
+  width: 70%;
+  height: 100rpx;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  border-radius: 20rpx;
+  float: right;
+  margin-top: 15rpx;
+}
+.baritembottom button{
+  width: 210rpx;
+  height: 75rpx;
+  text-align: center;
+  font-size: 30rpx;
+  color: #fff;
+  border-radius: 20rpx;
+}
+.sharebut{
+  background: orangered;
+  border: 1rpx solid #fff;
+  margin-left: 70rpx;
+}
+.collection{
+  background: orangered;
+}
+.selectbar{
+  width: 100%;
+  height: 100rpx;
+  padding: 20rpx 0rpx;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  background: #fff;
+  box-sizing: border-box;
+  color: #aaaaaa;
+  border-radius: 15rpx;
+  border-bottom: 1rpx solid #f1f1f1;
+}
+.detail{
+  width: 50%;
+}
+.list{
+  width: 50%;
+}
+.play{
+  width: 100%;
+  height: 100rpx;
+  padding: 0rpx 40rpx;
+  box-sizing: border-box;
+  border-bottom: 1rpx solid #f1f1f1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.playall{
+  width: auto;
+  text-align: center;
+  font-size: 30rpx;
+}
+.playselect{
+  width: auto;
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+  font-size: 30rpx;
+}
+.performanceContent{
+  width: 100%;
+  height: 150rpx;
+  display: flex;
+  box-sizing: border-box;
+  justify-content: flex-start;
+  align-items: center;
+  border-bottom: 1rpx solid #f1f1f1;
+  padding: 20rpx 20rpx;
+}
+.performanceIndex{
+  width: 15%;
+  height: 80rpx;
+  text-align: center;
+  line-height: 80rpx;
+  color:#aaaaaa;
+}
+.performanceInfo{
+  width: 85%;
+  height: 100%;
+}
+.performanceInfoTop{
+  width: 100%;
+  height: 50%;
+  display: flex;
+  justify-content: space-between;
+  font-size: 30rpx;
+}
+.performanceInfoBottom{
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-start;
+  color: #aaaaaa;
+  font-size: 25rpx;
+  margin-top: 20rpx;
+}

pages/index/bangdan/bangdan.wxml

@@ -4,7 +4,6 @@
     <view class="menuItem" wx:for="{{navTitle}}">{{item.title}}
       <!-- <view class="currtline active"></view> -->
     </view>
-    
   </view>
   <!-- 蒙板 -->
   <view class="cover" bindtap="closeCover"></view>

pages/index/index.js

@@ -67,5 +67,10 @@ Page({
     wx.navigateTo({
       url: '/pages/index/bangdan/bangdan',
     })
+  },
+  gotoDetails(){
+    wx.navigateTo({
+      url: '/pages/details/details',
+    })
   }
 })

pages/index/index.wxml

@@ -10,13 +10,11 @@
     interval="3000" easing-function="easeOutCubic" 
     current="{{swiperCurren}}" 
     bindchange="swiperChange">
-
     <!-- 轮播图图片 -->
     <swiper-item class="swiperItem" wx:for="{{imgList}}" wx:key>
       <!-- 加上widthFix可以使图片自适应 -->
       <image src="{{item}}"></image>
     </swiper-item>
-
   </swiper>
   <!-- 为了和喜马拉雅一致，自己需定制轮播图dots -->
   <view class="dots">
@@ -46,7 +44,7 @@
   </view>
   <!-- 这没有没有使用数据绑定，因为是练手而且数据比较少 -->
   <view class="likeItemBox">
-    <view class="likeItem">
+    <view class="likeItem" bindtap="gotoDetails">
       <view class="likeimg">
         <image class="likeItemIcon" src="/image/guess1.jpg" mode="widthFix"></image>
         <view class="cover">
@@ -56,7 +54,7 @@
       </view>
       <view class="likeText">米小圈上学记:一二三年级</view>
     </view>
-    <view class="likeItem">
+    <view class="likeItem" bindtap="gotoDetails">
       <view class="likeimg">
         <image class="likeItemIcon" src="/image/guess2.jpg" mode="widthFix"></image>
         <view class="cover">
@@ -65,7 +63,7 @@
       </view>
       <view class="likeText">段子来了</view>
     </view>
-    <view class="likeItem">
+    <view class="likeItem" bindtap="gotoDetails">
       <view class="likeimg">
         <image class="likeItemIcon" src="/image/guess3.jpg" mode="widthFix"></image>
         <view class="cover">

pages/user/user.js

@@ -11,9 +11,6 @@ Page({
     
   },
 
-  /**
-   * 生命周期函数--监听页面加载
-   */
   onLoad: function (options) {
     var that = this;
     //获得设备信息
@@ -21,7 +18,7 @@ Page({
       success (res) {
         console.log(res.windowHeight);
         that.setData({
-          phoneHeight:res.windowHeight,
+          phoneHeight: res.windowHeight,
         })
       }
     })
@@ -48,31 +45,20 @@ Page({
         app.globalData.login = false;
         that.setData({
           login: app.globalData.login,
-          avatarUrl:e.detail.userInfo.avatarUrl,
-          nickName:e.detail.userInfo.nickName
+          avatarUrl: e.detail.userInfo.avatarUrl,
+          nickName: e.detail.userInfo.nickName
         })
       }
     })
   },
-  
   phoneLogin:function(){
     wx.navigateTo({
       url: './phoneLogin/phoneLogin',
-      success: (result)=>{
-        
-      },
-      fail: ()=>{},
-      complete: ()=>{}
     });
   },
   gotoLogin(){
     wx.navigateTo({
       url: './phoneLogin/phoneLogin',
-      success: (result)=>{
-        
-      },
-      fail: ()=>{},
-      complete: ()=>{}
     });
   }
 })

pages/user/user.wxml

@@ -65,7 +65,6 @@
                 <view class="">
                     <text class="icon-creative text-gray"></text>
                     夜间模式
-                    <!-- <button class="switch"></button> -->
                 </view>
                 <text class="icon-right text-gray"></text>
             </view>