'增加usr界面的定时关闭功能'

README.md

@@ -26,7 +26,7 @@
   - [x] 实现搜索页
   - [ ] 实现节目详情页面的一些小功能
   - [x] 实现榜单页面的下拉选项点击选择功能
-  - [ ] 页面传参
+  - [x] 页面传参
   
 > 当然还有很多的bug......未完待续
 

pages/details/details.js

@@ -19,8 +19,46 @@ Page({
   /**
    * 生命周期函数--监听页面加载
    */
+
+  
   onLoad: function (options) {
-    
+    console.log(options.value)
+    if(options.value == 1){
+      this.setData({
+        performanceInfo:[{
+          imgurl:"../../image/guess1.jpg",
+          title:"米小圈上学记:一二三年级",
+          author:"米小圈",
+          num1: "767.6万",
+          num2:"257"
+        }],
+        imgurl:"../../image/guess1.jpg",
+      });
+    }
+    if(options.value == 2){
+      this.setData({
+        performanceInfo:[{
+          imgurl:"../../image/guess2.jpg",
+          title:"段子来了",
+          author:"段子来了",
+          num1: "767.6万",
+          num2:"257"
+        }],
+        imgurl:"../../image/guess2.jpg",
+      });
+    }
+    if(options.value == 3){
+      this.setData({
+        performanceInfo:[{
+          imgurl:"../../image/guess3.jpg",
+          title:"读者",
+          author:"读者",
+          num1: "767.6万",
+          num2:"257"
+        }],
+        imgurl:"../../image/guess3.jpg",
+      });
+    }
   },
 
   /**

pages/details/details.wxml

@@ -2,20 +2,20 @@
   title和背景 
   注：这部分的背景色还没有处理好
 -->
-<view class="toptitlebar" style="background:url(../../image/guess1.jpg) no-repeat;background-size:100% 100%">
-    <view class="baritem">
+<view class="toptitlebar" style="background:url({{imgurl}}) no-repeat;background-size:100% 100%">
+    <view class="baritem" wx:for="{{performanceInfo}}" wx:key="index">
       <view class="baritemtop">
-        <view class="themebgimg" style="background:url(../../image/guess1.jpg)"></view>
+        <view class="themebgimg" style="background:url({{item.imgurl}}) background-size:100% 100%"></view>
         <view class="themeinfo">
-          <view class="themetitle">完 | 米小圈上学记：一二三年级</view>
+          <view class="themetitle">{{item.title}}</view>
           <view class="themeauthor">
             <!-- <image class="" src="" mode="widthFix"></image> -->
-            米小圈 <text class="icon-right"></text>
+            {{item.author}} <text class="icon-right"></text>
           </view>
           <view class="viewinfo">
-            <view class="viewinfoleft">167.6万人收藏</view>
+            <view class="viewinfoleft">{{item.num1}}人收藏</view>
             <text class="viewinfomid">|</text>
-            <view class="viewinforight">已更新257期</view>
+            <view class="viewinforight">已更新{{item.num2}}期</view>
           </view>
         </view>
       </view>

pages/index/bangdan/bangdan.wxss

@@ -124,20 +124,6 @@
   margin-top: 15rpx;
 }
 
-/* 蒙布 */
-
-.cover{
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 9000;
-  background: rgba(0, 0, 0, 0.6);
-  opacity: 0.7;
-}
 .menu{ 
   width: 100%;
   height: 200rpx;

pages/index/index.js

@@ -68,9 +68,10 @@ Page({
       url: '/pages/index/bangdan/bangdan',
     })
   },
-  gotoDetails(){
+  gotoDetails(e){
+    var id = e.currentTarget.dataset.id;
     wx.navigateTo({
-      url: '/pages/details/details',
+      url: '/pages/details/details?value='+id,
     })
   }
 })

pages/index/index.wxml

@@ -41,29 +41,29 @@
   </view>
   <!-- 这没有没有使用数据绑定，因为是练手而且数据比较少 -->
   <view class="likeItemBox">
-    <view class="likeItem" bindtap="gotoDetails">
+    <view class="likeItem" bindtap="gotoDetails" data-id="1">
       <view class="likeimg">
         <image class="likeItemIcon" src="/image/guess1.jpg" mode="widthFix"></image>
-        <view class="cover">
+        <view class="likecover">
           <!-- text用来显示icon  暂无 -->
           <text class=""></text> 4.6亿
         </view>
       </view>
       <view class="likeText">米小圈上学记:一二三年级</view>
     </view>
-    <view class="likeItem" bindtap="gotoDetails">
+    <view class="likeItem" bindtap="gotoDetails" data-id="2">
       <view class="likeimg">
         <image class="likeItemIcon" src="/image/guess2.jpg" mode="widthFix"></image>
-        <view class="cover">
+        <view class="likecover">
           <text class=""></text> 4.6亿
         </view>
       </view>
       <view class="likeText">段子来了</view>
     </view>
-    <view class="likeItem" bindtap="gotoDetails">
+    <view class="likeItem" bindtap="gotoDetails" data-id="3">
       <view class="likeimg">
         <image class="likeItemIcon" src="/image/guess3.jpg" mode="widthFix"></image>
-        <view class="cover">
+        <view class="likecover">
           <text class=""></text> 4.6亿
         </view>
       </view>

pages/index/index.wxss

@@ -111,7 +111,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.cover{
+.likecover{
   width: 190rpx;
   height: 40rpx;
   /* 透明背景层 */

pages/user/user.js

@@ -60,5 +60,17 @@ Page({
     wx.navigateTo({
       url: './phoneLogin/phoneLogin',
     });
+  },
+  openSwitch:function(){
+    var that = this;
+    that.setData({
+      show:true
+    })
+  },
+  close:function(){
+    var that = this;
+    that.setData({
+      show:false
+    })
   }
 })

pages/user/user.wxml

@@ -1,83 +1,101 @@
 <!-- pages/user/user.wxml -->
 <block wx:if="{{login}}">
-    <!-- logo -->
-    <view class="logo">
-        <image class="logoImg" src="/image/logo.png" mode="widthFix"></image>
-    </view>
-    <!-- 登录按钮 -->
-    <view class="loginButton">
-        <!-- 在本小程序中只实现了微信登录 -->
-        <view class="wechatLogin">
-            <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
-                <text class="icon-message"></text>  微信登录
-            </button>
-        </view>
-        <view class="phoneLogin" bindtap="phoneLogin">
-            <button>手机号登录</button>
-        </view>
-    </view>
+	<!-- logo -->
+	<view class="logo">
+		<image class="logoImg" src="/image/logo.png" mode="widthFix"></image>
+	</view>
+	<!-- 登录按钮 -->
+	<view class="loginButton">
+		<!-- 在本小程序中只实现了微信登录 -->
+		<view class="wechatLogin">
+			<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
+				<text class="icon-message"></text> 微信登录
+			</button>
+		</view>
+		<view class="phoneLogin" bindtap="phoneLogin">
+			<button>手机号登录</button>
+		</view>
+	</view>
 </block>
 <!-- 已经登录显示界面 -->
 <block wx:else>
-    <view class="body" style="height:{{phoneHeight}}px">
-        <!-- 头像昵称签到部分 -->
-        <view class="topBar">
-            <!-- 头像昵称 -->
-            <view class="userImg">
-                <view class="avatar_nickname">
-                    <view class="avatar">
-                        <image class="avatarImg" src="{{avatarUrl}}"></image>
-                    </view>
-                    <view class="nickname">
-                        <text class="#">{{nickName}}</text>
-                        <!-- vip勋章 -->
-                        <text class="icon-vip" style="margin-left:30rpx"></text>
-                    </view>
-                </view>
-                <view class="kefu"><text class="icon-service"></text>客服服务</view>
-            </view>
-            <!-- 签到 -->
-            <view class="qiandao">
-                <view class="qianText">
-                    <text class="icon-calendar text-gray"></text>
-                    <text style="margin-left:20rpx">签到</text>
-                </view>
-                <view class="icon_">
-                    <text class="icon-right text-gray"></text>
-                </view>
-            </view>
-        </view>
-        <!-- 选项卡部分 -->
-        <view class="chioce">
-            <!-- 选项卡item -->
-            <view class="choiceItem">
-                <view class="">
-                    <text class="icon-time text-gray"></text>
-                    <text style="margin-left:20rpx">定时关闭</text>
-                </view>
-                <text class="icon-right text-gray"></text>
-            </view>
-            <view class="choiceItem">
-                <view class="">
-                    <text class="icon-creative text-gray"></text>
-                    <text style="margin-left:20rpx">夜间模式</text>
-                </view>
-                <switch></switch>
-            </view>
-            <view class="choiceItem">
-                <view class="">
-                    <text class="icon-post 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 style="margin-left:20rpx">切换账号</text>
-                </view>
-                <text class="icon-right text-gray"></text>
-            </view>
-        </view>
-    </view>
+	<view class="body" style="height:{{phoneHeight}}px">
+		<!-- 头像昵称签到部分 -->
+		<view class="topBar">
+			<!-- 头像昵称 -->
+			<view class="userImg">
+				<view class="avatar_nickname">
+					<view class="avatar">
+						<image class="avatarImg" src="{{avatarUrl}}"></image>
+					</view>
+					<view class="nickname">
+						<text class="#">{{nickName}}</text>
+						<!-- vip勋章 -->
+						<text class="icon-vip" style="margin-left:30rpx"></text>
+					</view>
+				</view>
+				<view class="kefu"><text class="icon-service"></text>客服服务</view>
+			</view>
+			<!-- 签到 -->
+			<view class="qiandao">
+				<view class="qianText">
+					<text class="icon-calendar text-gray"></text>
+					<text style="margin-left:20rpx">签到</text>
+				</view>
+				<view class="icon_">
+					<text class="icon-right text-gray"></text>
+				</view>
+			</view>
+		</view>
+		<!-- 选项卡部分 -->
+		<view class="chioce">
+			<!-- 选项卡item -->
+			<view class="choiceItem" bindtap="openSwitch">
+				<view class="">
+					<text class="icon-time text-gray"></text>
+					<text style="margin-left:20rpx">定时关闭</text>
+				</view>
+				<text class="icon-right text-gray"></text>
+			</view>
+			<view class="choiceItem">
+				<view class="">
+					<text class="icon-creative text-gray"></text>
+					<text style="margin-left:20rpx">夜间模式</text>
+				</view>
+				<switch></switch>
+			</view>
+			<view class="choiceItem">
+				<view class="">
+					<text class="icon-post 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 style="margin-left:20rpx">切换账号</text>
+				</view>
+				<text class="icon-right text-gray"></text>
+			</view>
+		</view>
+	</view>
+</block>
+
+<!-- 定时关闭部分 -->
+<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>
+		<view class="close" bindtap="close">关闭</view>
+	</view>
+	<view class="cover"></view>
 </block>

pages/user/user.wxss

@@ -74,4 +74,48 @@
     padding: 20rpx 30rpx;
     justify-content: space-between;
     align-items: center;
-}
+}
+
+/* 定时关闭 */
+.switch{
+    width: 100%;
+    height: 500rpx;
+    position: fixed;
+    bottom: 0rpx;
+    z-index: 9999;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    background: #fff;
+    border-top-left-radius: 15rpx;
+    border-top-right-radius: 15rpx;
+    padding-top: 20rpx;
+}
+.switch-item{
+    width: 100%;
+    height: 100rpx;
+    border-bottom: 1rpx solid #f1f1f1;
+    line-height: 100rpx;
+}
+.close{
+    width: 100%;
+    height: 100rpx;
+    text-align: center;
+    line-height: 100rpx;
+}
+.scroll-wrapper {
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+    background: #FFF;
+    padding-left: 20rpx;
+    width: 100%;
+    height: 400rpx;
+    box-sizing: border-box;
+  }
+  
+  ::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    color: transparent;
+  }

style/common.wxss

@@ -99,11 +99,22 @@
   font-weight: 700;
 }
 /* 
-====================
-  tarbar选中后的样式
-====================
+==========
+  蒙板
+==========
 */
-
+.cover{
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9000;
+  background: rgba(0, 0, 0, 0.6);
+  opacity: 0.7;
+}
 
 /*
 ==========