开发vip购买弹窗

pages/my/index.less

@@ -50,16 +50,21 @@
 
                     .uRtopleft {
                         .nickName {
-                            margin: 10rpx 0rpx 18rpx;
                             max-width: 340rpx;
                             color: #333;
                             font-size: 32rpx;
                         }
 
                         .gradeText {
+                            margin: 14rpx 0;
                             font-size: 24rpx;
                             color: #989A9C;
                         }
+
+                        .validity {
+                            font-size: 24rpx;
+                            color: #FE9221;
+                        }
                     }
 
                     .uRtopRight {
@@ -222,6 +227,7 @@
                 border-radius: 50rpx;
             }
         }
+
         .payBox::after {
             content: '';
             position: absolute;
@@ -250,7 +256,7 @@
             }
         }
 
-   
+
         .pbbg3 {
             background-image: url(http://reader-wx.ai160.com/images/reader/v3/55152x.png);
 

pages/my/index.wxml

@@ -13,6 +13,12 @@
                     <view class="uRtopleft">
                         <view class="nickName textOver">{{userInfo.user.nickName||'请输入昵称' }}</view>
                         <view class="gradeText textOver" catchtap="clipboar">学号：{{userInfo.user.eid}}</view>
+                        <!-- <view class="validity" wx:if="{{vipTime}}">
+                            会员使用至：{{filters.formatDate(vipTime,5)}}
+                        </view> -->
+                        <view class="validity">
+                            会员使用至：2024-05-01
+                        </view>
                     </view>
                     <view class="uRtopRight">
                         <image class="edit" src="/static/edit_new.png" mode="" />
@@ -62,15 +68,21 @@
         <view class="tips">请输入会员卡激活码</view>
         <view class="subBtn">激活</view>
     </view>
-    <scroll-view class="goodsList" scroll-x="true" enhanced show-scrollbar="{{false}}">
+    <scroll-view class="goodsList" scroll-x="true" enhanced show-scrollbar="{{false}}" wx:if="{{vipTime!='1'}}">
         <view class="payBox pbbg2">
-            <view class="pay" bindtap="toBuy" data-id="{{products[0].id}}">立即开通</view>
+            <view class="pay" bindtap="toBuy" data-id="{{products[0].id}}">
+                {{isPreferential?'立即续费':'立即开通'}}
+            </view>
         </view>
         <view class="payBox pbbg1">
-            <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">立即开通</view>
+            <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">
+                {{isPreferential?'立即续费':'立即开通'}}
+            </view>
         </view>
         <view class="payBox pbbg3">
-            <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">立即开通</view>
+            <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">
+                {{isPreferential?'立即续费':'立即开通'}}
+            </view>
         </view>
     </scroll-view>
     <!--   <view class="payBox {{vipTime=='1'?'payBox3':''}}" wx:if="{{!isPreferential||vipTime=='1'}}" bindtap="toBuy"
@@ -85,20 +97,7 @@
             有效期至：{{filters.formatDate(vipTime,5)}}
         </view>
         <view class="buyBtn" wx:else>
-            {{!vipTime&&!isPreferential?'立即开通':'已到期 请续费使用'}}
-        </view>
-    </view> -->
-    <!--  <view class="renewBox" wx:if="{{isPreferential&&vipTime!='1'}}">
-        <view class="title">续费</view>
-        <view class="renew">
-            <view class="left">{{products[0].title}} <view class="money">+{{products[0].price/100}}元</view>
-            </view>
-            <view class="pay" bindtap="toBuy" data-id="{{products[0].id}}">开通</view>
-        </view>
-        <view class="renew">
-            <view class="left">{{products[1].title}} <view class="money">{{products[1].price/100}}元</view>
-            </view>
-            <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">续费</view>
+            {{!vipTime&&!isPreferential?'立即开通':'立即续费'}}
         </view>
     </view> -->
     <!-- 弹窗 -->

pages/my/index.wxss

@@ -46,15 +46,19 @@
   justify-content: space-between;
 }
 .container .userBox .above .userRight .uRtop .uRtopleft .nickName {
-  margin: 10rpx 0rpx 18rpx;
   max-width: 340rpx;
   color: #333;
   font-size: 32rpx;
 }
 .container .userBox .above .userRight .uRtop .uRtopleft .gradeText {
+  margin: 14rpx 0;
   font-size: 24rpx;
   color: #989A9C;
 }
+.container .userBox .above .userRight .uRtop .uRtopleft .validity {
+  font-size: 24rpx;
+  color: #FE9221;
+}
 .container .userBox .above .userRight .uRtop .uRtopRight {
   display: flex;
   align-items: center;

pages/reading/buyVip/index.less

@@ -10,8 +10,8 @@
     .modal {
         position: relative;
         width: 677rpx;
-        height: 860rpx;
-        margin: 120rpx auto 0rpx;
+        height: 650rpx;
+        margin: 140rpx auto 0rpx;
         border-radius: 20rpx;
         text-align: center;
         overflow: hidden;
@@ -33,77 +33,73 @@
             }
         }
 
-        .payBox {
-            position: relative;
-            margin: 46rpx auto 56rpx;
-            width: 480rpx;
-            height: 245rpx;
-            border-radius: 20rpx;
-            background: url(http://reader-wx.ai160.com/images/reader/v3/learn/SVIPpop.png);
-            background-size: cover;
-            -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
-
-            .validity {
+        .goodsList {
+            position: absolute;
+            margin-top: 70rpx;
+            width: 100%;
+            height: 310rpx;
+            padding: 0rpx 20rpx;
+            white-space: nowrap;
+
+            .payBox {
+                position: relative;
+                margin-right: 22rpx;
+                width: 268rpx;
+                height: 268rpx;
+                background-size: cover;
+                text-align: center;
+                display: inline-block;
+                border-radius: 20rpx;
+
+                .pay {
+                    position: absolute;
+                    bottom: 24rpx;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    padding: 6rpx 40rpx;
+                    font-size: 26rpx;
+                    font-weight: bold;
+                    border-radius: 50rpx;
+                }
+            }
+
+            .payBox::after {
+                content: '';
                 position: absolute;
-                font-size: 26rpx;
-                left: 24rpx;
-                bottom: 24rpx;
-                color: #F9ECC1;
+                width: 268rpx;
+                height: 45rpx;
+                left: 0;
+                bottom: -42rpx;
+                background: linear-gradient(180deg, #2A2116 0%, rgba(255, 255, 255, 0) 100%);
+                border-radius: 22rpx 22rpx 0rpx 0rpx;
+                opacity: 0.26;
             }
-        }
 
-        .payBox2 {
-            background: url(http://reader-wx.ai160.com/images/reader/v3/learn/VIPpop.png);
-            background-size: cover;
-            -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
-        }
+            .pbbg1 {
+                background-image: url(http://reader-wx.ai160.com/images/reader/v3/12992x.png);
 
-        .payBox3 {
-            background: url(http://reader-wx.ai160.com/images/reader/v3/learn/2-2.png);
-            background-size: cover;
-            -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
-        }
+                .pay {
+                    background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
+                }
+            }
 
-        .renewBox {
-            margin-top: 70rpx;
-            padding: 0rpx 20rpx;
+            .pbbg2 {
+                background-image: url(http://reader-wx.ai160.com/images/reader/v3/2992x.png);
 
-            .title {
-                text-align: left;
-                font-size: 40rpx;
-                font-weight: bold;
-                margin-bottom: 18rpx;
+                .pay {
+                    background: linear-gradient(285deg, #DFF2EE 0%, #D8E9FD 39%, #BDE6F8 72%, #BAE7F7 100%);
+                }
             }
 
-            .renew {
-                margin-bottom: 32rpx;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 14rpx 18rpx 14rpx 22rpx;
-                background-color: #F2F2F2;
-                border-radius: 50rpx;
-                font-size: 30rpx;
-
-                .left {
-                    flex: 1;
-                    margin-right: 40rpx;
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    color: #666666;
-
-                    .money {
-                        color: #FC614E;
-                    }
-                }
+
+            .pbbg3 {
+                background-image: url(http://reader-wx.ai160.com/images/reader/v3/55152x.png);
 
                 .pay {
-                    padding: 6rpx 40rpx;
-                    border-radius: 50rpx;
-                    background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%);
+                    background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
                 }
             }
+
         }
 
     }

pages/reading/buyVip/index.wxml

@@ -9,13 +9,30 @@
             <view class="h1">您的VIP会员已到期</view>
             <view>请续费后使用</view>
         </view>
-        <view wx:if="{{!isPreferential}}">
+        <scroll-view class="goodsList" scroll-x="true" enhanced show-scrollbar="{{false}}" wx:if="{{vipTime!='1'}}">
+            <view class="payBox pbbg2">
+                <view class="pay" bindtap="toBuy" data-id="{{products[0].id}}">
+                    {{isPreferential?'立即续费':'立即开通'}}
+                </view>
+            </view>
+            <view class="payBox pbbg1">
+                <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">
+                    {{isPreferential?'立即续费':'立即开通'}}
+                </view>
+            </view>
+            <view class="payBox pbbg3">
+                <view class="pay" bindtap="toBuy" data-id="{{products[1].id}}">
+                    {{isPreferential?'立即续费':'立即开通'}}
+                </view>
+            </view>
+        </scroll-view>
+        <!--    <view wx:if="{{!isPreferential}}">
             <view class="payBox" bindtap="triggerPay" data-goods="{{products[0]}}">
             </view>
             <view class="payBox payBox2" bindtap="triggerPay" data-goods="{{products[1]}}">
             </view>
-        </view>
-        <view wx:else>
+        </view> -->
+        <!--   <view wx:else>
             <view class="payBox payBox3">
                 <view class="validity">
                     已到期 请续费使用
@@ -34,7 +51,7 @@
                     <view class="pay" bindtap="triggerPay" data-goods="{{products[1]}}">续费</view>
                 </view>
             </view>
-        </view>
+        </view> -->
     </view>
     <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
 </view>

pages/reading/buyVip/index.wxss

@@ -10,8 +10,8 @@
 .buyVip .modal {
   position: relative;
   width: 677rpx;
-  height: 860rpx;
-  margin: 120rpx auto 0rpx;
+  height: 650rpx;
+  margin: 140rpx auto 0rpx;
   border-radius: 20rpx;
   text-align: center;
   overflow: hidden;
@@ -31,68 +31,62 @@
 .buyVip .modal .header .h1 {
   margin: 24rpx 0rpx;
 }
-.buyVip .modal .payBox {
+.buyVip .modal .goodsList {
+  position: absolute;
+  margin-top: 70rpx;
+  width: 100%;
+  height: 310rpx;
+  padding: 0rpx 20rpx;
+  white-space: nowrap;
+}
+.buyVip .modal .goodsList .payBox {
   position: relative;
-  margin: 46rpx auto 56rpx;
-  width: 480rpx;
-  height: 245rpx;
-  border-radius: 20rpx;
-  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/SVIPpop.png);
+  margin-right: 22rpx;
+  width: 268rpx;
+  height: 268rpx;
   background-size: cover;
-  -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
+  text-align: center;
+  display: inline-block;
+  border-radius: 20rpx;
 }
-.buyVip .modal .payBox .validity {
+.buyVip .modal .goodsList .payBox .pay {
   position: absolute;
-  font-size: 26rpx;
-  left: 24rpx;
   bottom: 24rpx;
-  color: #F9ECC1;
-}
-.buyVip .modal .payBox2 {
-  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/VIPpop.png);
-  background-size: cover;
-  -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 6rpx 40rpx;
+  font-size: 26rpx;
+  font-weight: bold;
+  border-radius: 50rpx;
 }
-.buyVip .modal .payBox3 {
-  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/2-2.png);
-  background-size: cover;
-  -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
+.buyVip .modal .goodsList .payBox::after {
+  content: '';
+  position: absolute;
+  width: 268rpx;
+  height: 45rpx;
+  left: 0;
+  bottom: -42rpx;
+  background: linear-gradient(180deg, #2A2116 0%, rgba(255, 255, 255, 0) 100%);
+  border-radius: 22rpx 22rpx 0rpx 0rpx;
+  opacity: 0.26;
 }
-.buyVip .modal .renewBox {
-  margin-top: 70rpx;
-  padding: 0rpx 20rpx;
+.buyVip .modal .goodsList .pbbg1 {
+  background-image: url(http://reader-wx.ai160.com/images/reader/v3/12992x.png);
 }
-.buyVip .modal .renewBox .title {
-  text-align: left;
-  font-size: 40rpx;
-  font-weight: bold;
-  margin-bottom: 18rpx;
+.buyVip .modal .goodsList .pbbg1 .pay {
+  background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
 }
-.buyVip .modal .renewBox .renew {
-  margin-bottom: 32rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 14rpx 18rpx 14rpx 22rpx;
-  background-color: #F2F2F2;
-  border-radius: 50rpx;
-  font-size: 30rpx;
+.buyVip .modal .goodsList .pbbg2 {
+  background-image: url(http://reader-wx.ai160.com/images/reader/v3/2992x.png);
 }
-.buyVip .modal .renewBox .renew .left {
-  flex: 1;
-  margin-right: 40rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #666666;
+.buyVip .modal .goodsList .pbbg2 .pay {
+  background: linear-gradient(285deg, #DFF2EE 0%, #D8E9FD 39%, #BDE6F8 72%, #BAE7F7 100%);
 }
-.buyVip .modal .renewBox .renew .left .money {
-  color: #FC614E;
+.buyVip .modal .goodsList .pbbg3 {
+  background-image: url(http://reader-wx.ai160.com/images/reader/v3/55152x.png);
 }
-.buyVip .modal .renewBox .renew .pay {
-  padding: 6rpx 40rpx;
-  border-radius: 50rpx;
-  background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%);
+.buyVip .modal .goodsList .pbbg3 .pay {
+  background: linear-gradient(325deg, #FFBD96 0%, #FFF1E7 100%);
 }
 .buyVip .close {
   display: block;

pages/reading/index.js

@@ -195,6 +195,9 @@ Page({
     },
     onShow() {
         this.getVipInfo()
+        this.selectComponent('#buyVip').open({
+            isVip: this.data.isVip
+        })
     },
     // 获取是否vip
     async getVipInfo() {