续费卡页面修改

后端开发-许程
1 parent 0f421fa1
Showing 7 changed files with 235 additions and 16 deletions
components/nav_box_card/nav_box.js
components/nav_box_card/nav_box.json
components/nav_box_card/nav_box.wxml
components/nav_box_card/nav_box.wxss
pages/user/cardinfo/cardinfo.json
pages/user/cardinfo/cardinfo.wxml
pages/user/cardinfo/cardinfo.wxss
+var t = getApp(),os =t.globalData.setting;
+Component({
+  properties: {
+  },
+  data: {
+    isopen:0,
+    iurl:os.imghost,
+  },
+
+  ready: function() {
+  },
+  methods: {
+    //--点击打开事件--
+    open_box:function () {
+       this.setData({isopen:1});
+    },
+    //--关闭事件--
+    close_box:function(){
+      this.setData({isopen:0});
+    },
+    //--跳转--
+    goto:function (e) {
+       var url=e.currentTarget.dataset.url;
+       getApp().goto(url);
+    }
+
+  }
+
+})
 \ No newline at end of file
+{
+  "component": true,
+  "usingComponents": {}
+}
 \ No newline at end of file
+
+<view class="box_main {{isopen==1?'box_isopen':''}}"  >
+    <view class="dian" bindtap="open_box">
+        <image src="{{iurl}}/miniapp/images/sheng_lue.png" ></image>
+    </view>
+    <view class="cl_list">
+        <view class="item" data-url="/pages/index/index/index" bindtap="goto">首页</view>
+        <view class="item" data-url="/pages/goods/categoryList/categoryList" bindtap="goto">分类</view>
+        <view class="item" data-url="/pages/user/index/index" bindtap="goto">我的</view>
+        <view class="item big" bindtap="close_box">×</view>
+    </view>
+</view>
+
+.box_main{
+    width:80rpx;
+    height:80rpx;
+    background:#272636;
+    transition:width 0.8s;
+    -moz-transition:width 0.8s; /* Firefox 4 */
+    -webkit-transition:width 0.8s; /* Safari and Chrome */
+    -o-transition:width 0.8s; /* Opera */
+    border-radius:50rpx ;
+    position: fixed;
+    right: 10rpx;
+    bottom:300rpx;
+    overflow: hidden;
+    z-index: 999999
+
+}
+
+.box_isopen{
+    width: 420rpx;
+}
+
+.box_main .dian{
+  text-align: center;
+width: 50rpx;
+height: 50rpx;
+color: #ffff;
+font-size: 50rpx;
+background: none;
+
+}
+
+.box_main .dian image{
+  width: 60rpx;
+height: 20rpx;
+margin: 0rpx 0 0 10rpx;
+margin-bottom: 7rpx;
+
+}
+
+.box_main.box_isopen  .dian{
+    display: none;
+}
+
+.box_main .cl_list{
+    display: none;
+}
+
+.box_main.box_isopen  .cl_list{
+    display: block;
+    margin-left: 20rpx;
+}
+
+.box_main .cl_list .item{
+    display: inline-block;
+    width:100rpx;
+    height:80rpx;
+    text-align: center;
+    line-height: 80rpx;
+    color: #fff;
+    vertical-align: top;
+    font-size: 32rpx;
+
+}
+
+.box_main .cl_list .item.big{
+  font-size: 70rpx;
+line-height: 70rpx;
+
+}
+
@@ -2,7 +2,8 @@
   "usingComponents": {
     "pop_txt": "/components/userqy_pop_up/userqy_pop_up",
     "goods_recommend": "/components/goods_list/goods_list",
-	 "warn": "/components/long_warn/long_warn"
+	 "warn": "/components/long_warn/long_warn",
+    "nav_box": "/components/nav_box_card/nav_box"
   },
     "navigationBarTitleText": "plus会员"
 } 
 \ No newline at end of file
@@ -2,7 +2,7 @@
 <import src="../../../utils/filter.wxs"></import>
 <wxs module="filters" src="../../../utils/filter.wxs"></wxs>
-   <view>
+   <view> 
   <image class="Member_bk" src="{{url}}/miniapp/images/plus/page_bk.png"></image>
 </view>
@@ -28,12 +28,10 @@
                <view wx:else style="color:{{user_card.CardColor}}">享受更低价格，请续费哦</view>
             </view>
             <view wx:if="{{!is_guoqi}}" class="flex-vertical" bindtap="Share_pictures">
-              <view style="color:{{user_card.CardColor}}">邀请新朋友</view>
-              <!-- <image class="share" src="{{url}}/miniapp/images/plus/Forward.png"></image> -->
+              <view style="color:{{user_card.CardColor}};border-bottom:{{user_card.CardColor}}">邀请新朋友</view>
+           
 			  <view style="overflow: hidden; margin-left: 10rpx;">
-				  <view class="Member"
-					style="background-image:url('{{url}}/miniapp/images/plus/Forward.png'); filter: drop-shadow(40px 0 0 {{user_card.CardColor}});">
-				  </view>
+			
 			  </view>
             </view>
           </view>
@@ -55,7 +53,8 @@
           <view class="Invitation_Cash" bindtap="to_user_money">转到余额</view>
         </view>
   </view>
-
+   <!--  制作一个圆球导航  -->
+  <nav_box></nav_box>
   <!-- 会员礼遇 -->
   <view class="Courtesy">
@@ -70,16 +69,17 @@
         <view class="flex-center">
           <image class="Courtesy_image" src="{{url}}/miniapp/images/plus/Courtesy.png"></image>
-          <view wx:if="{{false}}" class="Courtesy_can fs24">PLUS会员可享以下特权
-          </view>
-          <view wx:else class="Courtesy_can fs24">解锁新权益 精彩享不停
+          <view  class="Courtesy_can fs24">PLUS会员可享以下特权
           </view>
+          
           <image class="Courtesy_image" src="{{url}}/miniapp/images/plus/Courtesy.png"></image>
         </view>
       </view>
     </view>
+ 
+
     <!-- 会员权益内容 -->
     <view class="Courtesy_comment" style="padding:0 20rpx">
      <view class="wxParse">
@@ -119,13 +119,46 @@
       </view>
     </view>
-    <!-- 商品列表组件 -->
-    <goods_recommend id="goods_list"></goods_recommend>
-    <!-- 商品列表 -->
+  </view>
+  
+
+<view class="xc-pop-up"  wx:if="{{q_show}}">
+
+  <view class="xc-obscuration" bindtap='close' catchtouchmove="ture"></view>
+  <view>
+   
+  <view class="xc-qr-frame">
+   <view class="shut" bindtap="close">ⅹ</view>
+    <view class="fs36 xc-black3 flex jc-center ai-center" style="width:100%;height:200rpx;">确定把所有奖励金转入余额</view> 
+    <view class="flex jc-center ai_center" style="width: 100%;height: 75rpx;">
+  <view class="fs36 white flex jc-center ai-center"style="width:40%;height:60rpx;line-height:60rpx;background:#f35e73;border-radius:10rpx;margin-right: 20rpx;">是的</view>
+    <view class="fs36 xc-ash flex jc-center ai-center"style="width:40%;height:60rpx;line-height:60rpx;border-radius:10rpx;background:#ececea;">再看看</view>
+  </view>
   </view>
+  
+
+</view>
+
+</view>
+
+
+
+
+
+
+
+
+
+
+
+
+
+  <!-- 商品列表组件 -->
+    <goods_recommend id="goods_list"></goods_recommend>
+    <!-- 商品列表 -->
   <!-- 画布 -->
 <canvas canvas-id='myCanvas' style="width:750rpx;height:1260rpx;"wx:if='{{!canvasHidden}}'></canvas>
@@ -5,6 +5,12 @@
   width: 100%;
   height: 100%;
 }
+.box--box_main .box--dian wx-image {
+  margin: 0px 0 0 4px;
+
+  margin-bottom: 4px;
+
+}
 .MemberPlus {
   width: 618rpx;
   height: 285rpx;
@@ -69,7 +75,7 @@
 }
 .swiper, .Courtesy, .title {
   position: relative;
-  z-index: 3;
+  z-index:-3;
 }
 .Courtesy_title {
   color: rgb(173, 137, 79);
@@ -151,4 +157,67 @@
 }
 .h36{ height:36rpx; line-height: 36rpx;}
-.h22{ height:22rpx; line-height: 22rpx;}
 \ No newline at end of file
+.h22{ height:22rpx; line-height: 22rpx;}
+
+
+
+
+/* 弹窗样式 */
+.xc-pop-up{
+	width: 100%;
+	height: 100%;
+  position:fixed;
+	z-index:5;
+  display:flex;
+justify-content:center;
+align-items:center;
+
+}
+.xc-obscuration{
+  position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 11;
+    background: rgba(0,0,0,0.4);
+    width: 100%;
+    height: 100%;
+
+}
+
+.shut{
+    display: block;
+    width: 54rpx;
+    height: 54rpx;
+
+    font-size: 50rpx;
+
+    line-height:47rpx;
+    border-radius: 50%;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    color: #fff;
+    text-align: center;
+    position: fixed;
+margin-top: -23rpx;
+z-index: 66666;
+   right: 20rpx;
+ background: #c8162c;
+}
+.xc-qr-frame{ 
+	width:90%;
+height: 260rpx;
+	background: #fff;
+	z-index: 55;
+  position: fixed;
+  top:40%;
+  
+  padding-bottom:20rpx;
+  right: 4.5%;
+ overflow: hidden;
+
+}
+.fs36{
+  font-size: 36rpx; 
+}
 \ No newline at end of file