Commit e063257cbc42cc653a5affada16d117610769d48
1 parent
0f421fa1
续费卡页面修改
Showing
7 changed files
with
235 additions
and
16 deletions
components/nav_box_card/nav_box.js
0 → 100644
| 1 | +var t = getApp(),os =t.globalData.setting; | |
| 2 | +Component({ | |
| 3 | + properties: { | |
| 4 | + }, | |
| 5 | + data: { | |
| 6 | + isopen:0, | |
| 7 | + iurl:os.imghost, | |
| 8 | + }, | |
| 9 | + | |
| 10 | + ready: function() { | |
| 11 | + }, | |
| 12 | + methods: { | |
| 13 | + //--点击打开事件-- | |
| 14 | + open_box:function () { | |
| 15 | + this.setData({isopen:1}); | |
| 16 | + }, | |
| 17 | + //--关闭事件-- | |
| 18 | + close_box:function(){ | |
| 19 | + this.setData({isopen:0}); | |
| 20 | + }, | |
| 21 | + //--跳转-- | |
| 22 | + goto:function (e) { | |
| 23 | + var url=e.currentTarget.dataset.url; | |
| 24 | + getApp().goto(url); | |
| 25 | + } | |
| 26 | + | |
| 27 | + } | |
| 28 | + | |
| 29 | +}) | |
| 0 | 30 | \ No newline at end of file | ... | ... |
components/nav_box_card/nav_box.json
0 → 100644
components/nav_box_card/nav_box.wxml
0 → 100644
| 1 | + | |
| 2 | +<view class="box_main {{isopen==1?'box_isopen':''}}" > | |
| 3 | + <view class="dian" bindtap="open_box"> | |
| 4 | + <image src="{{iurl}}/miniapp/images/sheng_lue.png" ></image> | |
| 5 | + </view> | |
| 6 | + <view class="cl_list"> | |
| 7 | + <view class="item" data-url="/pages/index/index/index" bindtap="goto">首页</view> | |
| 8 | + <view class="item" data-url="/pages/goods/categoryList/categoryList" bindtap="goto">分类</view> | |
| 9 | + <view class="item" data-url="/pages/user/index/index" bindtap="goto">我的</view> | |
| 10 | + <view class="item big" bindtap="close_box">×</view> | |
| 11 | + </view> | |
| 12 | +</view> | |
| 13 | + | ... | ... |
components/nav_box_card/nav_box.wxss
0 → 100644
| 1 | +.box_main{ | |
| 2 | + width:80rpx; | |
| 3 | + height:80rpx; | |
| 4 | + background:#272636; | |
| 5 | + transition:width 0.8s; | |
| 6 | + -moz-transition:width 0.8s; /* Firefox 4 */ | |
| 7 | + -webkit-transition:width 0.8s; /* Safari and Chrome */ | |
| 8 | + -o-transition:width 0.8s; /* Opera */ | |
| 9 | + border-radius:50rpx ; | |
| 10 | + position: fixed; | |
| 11 | + right: 10rpx; | |
| 12 | + bottom:300rpx; | |
| 13 | + overflow: hidden; | |
| 14 | + z-index: 999999 | |
| 15 | + | |
| 16 | +} | |
| 17 | + | |
| 18 | +.box_isopen{ | |
| 19 | + width: 420rpx; | |
| 20 | +} | |
| 21 | + | |
| 22 | +.box_main .dian{ | |
| 23 | + text-align: center; | |
| 24 | +width: 50rpx; | |
| 25 | +height: 50rpx; | |
| 26 | +color: #ffff; | |
| 27 | +font-size: 50rpx; | |
| 28 | +background: none; | |
| 29 | + | |
| 30 | +} | |
| 31 | + | |
| 32 | +.box_main .dian image{ | |
| 33 | + width: 60rpx; | |
| 34 | +height: 20rpx; | |
| 35 | +margin: 0rpx 0 0 10rpx; | |
| 36 | +margin-bottom: 7rpx; | |
| 37 | + | |
| 38 | +} | |
| 39 | + | |
| 40 | +.box_main.box_isopen .dian{ | |
| 41 | + display: none; | |
| 42 | +} | |
| 43 | + | |
| 44 | +.box_main .cl_list{ | |
| 45 | + display: none; | |
| 46 | +} | |
| 47 | + | |
| 48 | +.box_main.box_isopen .cl_list{ | |
| 49 | + display: block; | |
| 50 | + margin-left: 20rpx; | |
| 51 | +} | |
| 52 | + | |
| 53 | +.box_main .cl_list .item{ | |
| 54 | + display: inline-block; | |
| 55 | + width:100rpx; | |
| 56 | + height:80rpx; | |
| 57 | + text-align: center; | |
| 58 | + line-height: 80rpx; | |
| 59 | + color: #fff; | |
| 60 | + vertical-align: top; | |
| 61 | + font-size: 32rpx; | |
| 62 | + | |
| 63 | +} | |
| 64 | + | |
| 65 | +.box_main .cl_list .item.big{ | |
| 66 | + font-size: 70rpx; | |
| 67 | +line-height: 70rpx; | |
| 68 | + | |
| 69 | +} | |
| 70 | + | ... | ... |
pages/user/cardinfo/cardinfo.json
| ... | ... | @@ -2,7 +2,8 @@ |
| 2 | 2 | "usingComponents": { |
| 3 | 3 | "pop_txt": "/components/userqy_pop_up/userqy_pop_up", |
| 4 | 4 | "goods_recommend": "/components/goods_list/goods_list", |
| 5 | - "warn": "/components/long_warn/long_warn" | |
| 5 | + "warn": "/components/long_warn/long_warn", | |
| 6 | + "nav_box": "/components/nav_box_card/nav_box" | |
| 6 | 7 | }, |
| 7 | 8 | "navigationBarTitleText": "plus会员" |
| 8 | 9 | } |
| 9 | 10 | \ No newline at end of file | ... | ... |
pages/user/cardinfo/cardinfo.wxml
| ... | ... | @@ -2,7 +2,7 @@ |
| 2 | 2 | <import src="../../../utils/filter.wxs"></import> |
| 3 | 3 | <wxs module="filters" src="../../../utils/filter.wxs"></wxs> |
| 4 | 4 | |
| 5 | - <view> | |
| 5 | + <view> | |
| 6 | 6 | <image class="Member_bk" src="{{url}}/miniapp/images/plus/page_bk.png"></image> |
| 7 | 7 | </view> |
| 8 | 8 | |
| ... | ... | @@ -28,12 +28,10 @@ |
| 28 | 28 | <view wx:else style="color:{{user_card.CardColor}}">享受更低价格，请续费哦</view> |
| 29 | 29 | </view> |
| 30 | 30 | <view wx:if="{{!is_guoqi}}" class="flex-vertical" bindtap="Share_pictures"> |
| 31 | - <view style="color:{{user_card.CardColor}}">邀请新朋友</view> | |
| 32 | - <!-- <image class="share" src="{{url}}/miniapp/images/plus/Forward.png"></image> --> | |
| 31 | + <view style="color:{{user_card.CardColor}};border-bottom:{{user_card.CardColor}}">邀请新朋友</view> | |
| 32 | + | |
| 33 | 33 | <view style="overflow: hidden; margin-left: 10rpx;"> |
| 34 | - <view class="Member" | |
| 35 | - style="background-image:url('{{url}}/miniapp/images/plus/Forward.png'); filter: drop-shadow(40px 0 0 {{user_card.CardColor}});"> | |
| 36 | - </view> | |
| 34 | + | |
| 37 | 35 | </view> |
| 38 | 36 | </view> |
| 39 | 37 | </view> |
| ... | ... | @@ -55,7 +53,8 @@ |
| 55 | 53 | <view class="Invitation_Cash" bindtap="to_user_money">转到余额</view> |
| 56 | 54 | </view> |
| 57 | 55 | </view> |
| 58 | - | |
| 56 | + <!-- 制作一个圆球导航 --> | |
| 57 | + <nav_box></nav_box> | |
| 59 | 58 | <!-- 会员礼遇 --> |
| 60 | 59 | <view class="Courtesy"> |
| 61 | 60 | |
| ... | ... | @@ -70,16 +69,17 @@ |
| 70 | 69 | <view class="flex-center"> |
| 71 | 70 | <image class="Courtesy_image" src="{{url}}/miniapp/images/plus/Courtesy.png"></image> |
| 72 | 71 | |
| 73 | - <view wx:if="{{false}}" class="Courtesy_can fs24">PLUS会员可享以下特权 | |
| 74 | - </view> | |
| 75 | - <view wx:else class="Courtesy_can fs24">解锁新权益 精彩享不停 | |
| 72 | + <view class="Courtesy_can fs24">PLUS会员可享以下特权 | |
| 76 | 73 | </view> |
| 74 | + | |
| 77 | 75 | |
| 78 | 76 | <image class="Courtesy_image" src="{{url}}/miniapp/images/plus/Courtesy.png"></image> |
| 79 | 77 | </view> |
| 80 | 78 | </view> |
| 81 | 79 | </view> |
| 82 | 80 | |
| 81 | + | |
| 82 | + | |
| 83 | 83 | <!-- 会员权益内容 --> |
| 84 | 84 | <view class="Courtesy_comment" style="padding:0 20rpx"> |
| 85 | 85 | <view class="wxParse"> |
| ... | ... | @@ -119,13 +119,46 @@ |
| 119 | 119 | </view> |
| 120 | 120 | |
| 121 | 121 | </view> |
| 122 | - <!-- 商品列表组件 --> | |
| 123 | - <goods_recommend id="goods_list"></goods_recommend> | |
| 124 | - <!-- 商品列表 --> | |
| 122 | + </view> | |
| 123 | + | |
| 124 | + | |
| 125 | 125 | |
| 126 | +<view class="xc-pop-up" wx:if="{{q_show}}"> | |
| 127 | + | |
| 128 | + <view class="xc-obscuration" bindtap='close' catchtouchmove="ture"></view> | |
| 129 | + <view> | |
| 130 | + | |
| 131 | + <view class="xc-qr-frame"> | |
| 132 | + <view class="shut" bindtap="close">ⅹ</view> | |
| 133 | + <view class="fs36 xc-black3 flex jc-center ai-center" style="width:100%;height:200rpx;">确定把所有奖励金转入余额</view> | |
| 134 | + <view class="flex jc-center ai_center" style="width: 100%;height: 75rpx;"> | |
| 135 | + <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> | |
| 136 | + <view class="fs36 xc-ash flex jc-center ai-center"style="width:40%;height:60rpx;line-height:60rpx;border-radius:10rpx;background:#ececea;">再看看</view> | |
| 137 | + </view> | |
| 126 | 138 | </view> |
| 139 | + | |
| 140 | + | |
| 141 | +</view> | |
| 142 | + | |
| 143 | +</view> | |
| 144 | + | |
| 127 | 145 | |
| 128 | 146 | |
| 147 | + | |
| 148 | + | |
| 149 | + | |
| 150 | + | |
| 151 | + | |
| 152 | + | |
| 153 | + | |
| 154 | + | |
| 155 | + | |
| 156 | + | |
| 157 | + | |
| 158 | + | |
| 159 | + <!-- 商品列表组件 --> | |
| 160 | + <goods_recommend id="goods_list"></goods_recommend> | |
| 161 | + <!-- 商品列表 --> | |
| 129 | 162 | <!-- 画布 --> |
| 130 | 163 | <canvas canvas-id='myCanvas' style="width:750rpx;height:1260rpx;"wx:if='{{!canvasHidden}}'></canvas> |
| 131 | 164 | ... | ... |
pages/user/cardinfo/cardinfo.wxss
| ... | ... | @@ -5,6 +5,12 @@ |
| 5 | 5 | width: 100%; |
| 6 | 6 | height: 100%; |
| 7 | 7 | } |
| 8 | +.box--box_main .box--dian wx-image { | |
| 9 | + margin: 0px 0 0 4px; | |
| 10 | + | |
| 11 | + margin-bottom: 4px; | |
| 12 | + | |
| 13 | +} | |
| 8 | 14 | .MemberPlus { |
| 9 | 15 | width: 618rpx; |
| 10 | 16 | height: 285rpx; |
| ... | ... | @@ -69,7 +75,7 @@ |
| 69 | 75 | } |
| 70 | 76 | .swiper, .Courtesy, .title { |
| 71 | 77 | position: relative; |
| 72 | - z-index: 3; | |
| 78 | + z-index:-3; | |
| 73 | 79 | } |
| 74 | 80 | .Courtesy_title { |
| 75 | 81 | color: rgb(173, 137, 79); |
| ... | ... | @@ -151,4 +157,67 @@ |
| 151 | 157 | } |
| 152 | 158 | |
| 153 | 159 | .h36{ height:36rpx; line-height: 36rpx;} |
| 154 | -.h22{ height:22rpx; line-height: 22rpx;} | |
| 155 | 160 | \ No newline at end of file |
| 161 | +.h22{ height:22rpx; line-height: 22rpx;} | |
| 162 | + | |
| 163 | + | |
| 164 | + | |
| 165 | + | |
| 166 | +/* 弹窗样式 */ | |
| 167 | +.xc-pop-up{ | |
| 168 | + width: 100%; | |
| 169 | + height: 100%; | |
| 170 | + position:fixed; | |
| 171 | + z-index:5; | |
| 172 | + display:flex; | |
| 173 | +justify-content:center; | |
| 174 | +align-items:center; | |
| 175 | + | |
| 176 | +} | |
| 177 | +.xc-obscuration{ | |
| 178 | + position: fixed; | |
| 179 | + left: 0; | |
| 180 | + top: 0; | |
| 181 | + right: 0; | |
| 182 | + bottom: 0; | |
| 183 | + z-index: 11; | |
| 184 | + background: rgba(0,0,0,0.4); | |
| 185 | + width: 100%; | |
| 186 | + height: 100%; | |
| 187 | + | |
| 188 | +} | |
| 189 | + | |
| 190 | +.shut{ | |
| 191 | + display: block; | |
| 192 | + width: 54rpx; | |
| 193 | + height: 54rpx; | |
| 194 | + | |
| 195 | + font-size: 50rpx; | |
| 196 | + | |
| 197 | + line-height:47rpx; | |
| 198 | + border-radius: 50%; | |
| 199 | + -moz-border-radius: 50%; | |
| 200 | + -webkit-border-radius: 50%; | |
| 201 | + color: #fff; | |
| 202 | + text-align: center; | |
| 203 | + position: fixed; | |
| 204 | +margin-top: -23rpx; | |
| 205 | +z-index: 66666; | |
| 206 | + right: 20rpx; | |
| 207 | + background: #c8162c; | |
| 208 | +} | |
| 209 | +.xc-qr-frame{ | |
| 210 | + width:90%; | |
| 211 | +height: 260rpx; | |
| 212 | + background: #fff; | |
| 213 | + z-index: 55; | |
| 214 | + position: fixed; | |
| 215 | + top:40%; | |
| 216 | + | |
| 217 | + padding-bottom:20rpx; | |
| 218 | + right: 4.5%; | |
| 219 | + overflow: hidden; | |
| 220 | + | |
| 221 | +} | |
| 222 | +.fs36{ | |
| 223 | + font-size: 36rpx; | |
| 224 | +} | |
| 156 | 225 | \ No newline at end of file | ... | ... |