setup a pop up window in detail page

for showing the total payout
Cha0s0000 · Apr 6, 2018 · 53e7021 · 53e7021
1 parent b8adb18
commit 53e7021
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 1 deletion.
diff --git a/pages/detail/detail.wxml b/pages/detail/detail.wxml
@@ -30,7 +30,7 @@
           <!-- <icon type="success_circle" size="18"/> -->
           <image mode="aspectFill" class="icon" src="../../images/icon/good.png"></image>
           <!-- <icon type="success" size="18"/> -->
-          <text class="post-like-font"> {{detail.pending_payout_value}}</text>
+          <text class="post-like-font" bindtap="showPayout" data-statu="open" data-detail="{{detail}}"> {{detail.pending_payout_value}}</text>
         </view>
         <view class="like-num">
           <image mode="aspectFill" class="icon" src="../../images/icon/selected.png"></image>
@@ -140,6 +140,39 @@
       </view>
     </view>
   </view>
+  <!--mask-->  
+  <view class="drawer_screen" bindtap="showPayout" data-statu="close" wx:if="{{showModalStatus}}"></view>  
+  <!--content-->  
+  <!--Use the animation attribute to specify the animation that needs to be executed.-->  
+  <view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}">  
+
+    <!--drawer content-->  
+    <view class="drawer_title">Total payout</view>  
+    <view class="drawer_content">  
+
+      <view class="top grid">  
+        <text class="payout-type">Potential Payout</text>
+        <text class="payout-text">{{PotentialPayout}}</text>
+      </view>  
+      <view class="top grid">  
+        <text class="payout-type">Promoted</text>
+        <text class="payout-text">{{PromotedPayout}}</text>
+      </view>  
+      <view class="top grid">  
+        <text class="payout-type">Author Payout</text>
+        <text class="payout-text">{{AuthorPayout}}</text> 
+      </view>  
+      <view class="top grid">  
+        <text class="payout-type">Curation Payout</text>
+        <text class="payout-text">{{CurationPayout}}</text>
+      </view>  
+      <view class="top bottom grid">  
+        <text class="payout-type">Payout</text>
+        <text class="payout-text">{{Payout}}</text>
+      </view>  
+    </view>  
+    <view class="btn_ok" bindtap="showPayout" data-statu="close">OK</view>  
+  </view> 
 </view>
 <loading hidden="{{hidden}}">
   Loading...

diff --git a/pages/detail/detail.wxss b/pages/detail/detail.wxss
@@ -398,4 +398,110 @@
 .child{
   display: flex;
   flex-direction: row;
+}
+.drawer_box {  
+  width: 650rpx;  
+  overflow: hidden;  
+  position: fixed;  
+  top: 50%;  
+  left: 0;  
+  z-index: 1001;  
+  background: #FAFAFA;  
+  margin: -150px 50rpx 0 50rpx;  
+  border-radius: 3px;  
+}  
+
+.drawer_title{  
+  padding:15px;  
+  font: 20px "microsoft yahei";  
+  text-align: center;  
+}  
+.drawer_content {  
+  height: 210px;  
+  overflow-y: scroll; /*The height above the parent box can be scrolled.*/  
+}  
+
+.btn_ok{  
+  padding: 10px;  
+  font: 20px "microsoft yahei";  
+  text-align: center;  
+  border-top: 1px solid #E8E8EA;  
+  color: #3CC51F;  
+}  
+
+.top{  
+    padding-top:8px;  
+    margin-top:15rpx;
+}  
+.bottom {  
+    padding-bottom:8px;  
+}  
+.title {  
+    height: 30px;  
+    line-height: 30px;  
+    width: 160rpx;  
+    text-align: center;  
+    display: inline-block;  
+    font: 300 28rpx/30px "microsoft yahei";  
+}  
+
+.input_base {  
+    border: 2rpx solid #ccc;  
+    padding-left: 10rpx;  
+    margin-right: 50rpx;  
+}  
+.input_h30{  
+    height: 30px;  
+    line-height: 30px;  
+}  
+.input_h60{  
+    height: 60px;  
+}  
+.input_view{  
+    font: 12px "microsoft yahei";  
+    background: #fff;  
+    color:#000;  
+    line-height: 30px;  
+}  
+
+input {  
+    font: 12px "microsoft yahei";  
+    background: #fff;  
+    color:#000 ;  
+}  
+radio{  
+    margin-right: 20px;  
+}  
+.grid { display: -webkit-box; display: box; }  
+.col-0 {-webkit-box-flex:0;box-flex:0;}  
+.col-1 {-webkit-box-flex:1;box-flex:1;}  
+.fl { float: left;}  
+.fr { float: right;}  
+.drawer_screen {  
+  width: 100%;  
+  height: 100%;  
+  position: fixed;  
+  top: 0;  
+  left: 0;  
+  z-index: 1000;  
+  background: #000;  
+  opacity: 0.5;  
+  overflow: hidden;  
+}  
+.payout-type{
+  position:relative;
+  left:50rpx;
+  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  font-style:inherit;
+  font-weight: 20;
+  font-size:1.7ch;
+
+}
+.payout-text{
+  position:absolute;
+  right:100rpx;
+  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-style:inherit;
+  font-weight: 20;
+
 }