开发

pages/my/index.less

@@ -201,26 +201,34 @@
         width: 710rpx;
         height: 224rpx;
         border-radius: 20rpx;
-        background: url(http://reader-wx.ai160.com/images/reader/v3/learn/SVIPpop.png);
+        background: url(https://reader-wx.ai160.com/images/reader/v3/learn/longvip1.png);
         background-size: cover;
         -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
 
         .buyBtn {
             width: 254rpx;
+            padding: 6rpx 0rpx;
             text-align: center;
             position: absolute;
             left: 90rpx;
             top: 160rpx;
-            color: #39029B;
+            color: #000000;
             font-size: 26rpx;
             font-weight: bold;
             letter-spacing: 2rpx;
+            background-image: linear-gradient(-75deg, #DFF2EE 5%, #D8E9FD 42%, #BDE6F8 73%, #BAE7F7 100%);
+            ;
+            border-radius: 10rpx;
         }
     }
 
     .payBox2 {
-        background: url(http://reader-wx.ai160.com/images/reader/v3/learn/VIPpop.png);
+        background: url(https://reader-wx.ai160.com/images/reader/v3/learn/longvip2.png);
         background-size: cover;
+
+        .buyBtn {
+            background-image: linear-gradient(-75deg, #F5CBAC 5%, #F8D6B7 42%, #FADEBA 73%, #F8F2C4 100%);
+        }
     }
 
     .renewBox {

pages/my/index.wxss

@@ -169,25 +169,31 @@
   width: 710rpx;
   height: 224rpx;
   border-radius: 20rpx;
-  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/SVIPpop.png);
+  background: url(https://reader-wx.ai160.com/images/reader/v3/learn/longvip1.png);
   background-size: cover;
   -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
 }
 .container .payBox .buyBtn {
   width: 254rpx;
+  padding: 6rpx 0rpx;
   text-align: center;
   position: absolute;
   left: 90rpx;
   top: 160rpx;
-  color: #39029B;
+  color: #000000;
   font-size: 26rpx;
   font-weight: bold;
   letter-spacing: 2rpx;
+  background-image: linear-gradient(-75deg, #DFF2EE 5%, #D8E9FD 42%, #BDE6F8 73%, #BAE7F7 100%);
+  border-radius: 10rpx;
 }
 .container .payBox2 {
-  background: url(http://reader-wx.ai160.com/images/reader/v3/learn/VIPpop.png);
+  background: url(https://reader-wx.ai160.com/images/reader/v3/learn/longvip2.png);
   background-size: cover;
 }
+.container .payBox2 .buyBtn {
+  background-image: linear-gradient(-75deg, #F5CBAC 5%, #F8D6B7 42%, #FADEBA 73%, #F8F2C4 100%);
+}
 .container .renewBox {
   margin-top: 40rpx;
   padding: 0rpx 10rpx;

pages/reading/buyVip/index.less

@@ -43,17 +43,13 @@
             background-size: cover;
             -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
 
-            /*             .buyBtn {
-                width: 254rpx;
-                text-align: center;
+            .validity {
                 position: absolute;
-                left: 90rpx;
-                top: 156rpx;
-                color: #39029B;
                 font-size: 26rpx;
-                font-weight: bold;
-                letter-spacing: 2rpx;
-            } */
+                left: 24rpx;
+                bottom: 24rpx;
+                color: #F9ECC1;
+            }
         }
 
         .payBox2 {
@@ -67,6 +63,49 @@
             background-size: cover;
             -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
         }
+
+        .renewBox {
+            margin-top: 70rpx;
+            padding: 0rpx 20rpx;
+
+            .title {
+                text-align: left;
+                font-size: 40rpx;
+                font-weight: bold;
+                margin-bottom: 18rpx;
+            }
+
+            .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;
+                    }
+                }
+
+                .pay {
+                    padding: 6rpx 40rpx;
+                    border-radius: 50rpx;
+                    background-image: linear-gradient(129deg, #F9D9BF 0%, #F6D0B2 45%, #F3C0A3 70%, #F1B998 100%);
+                }
+            }
+        }
+
     }
 
     .close {

pages/reading/buyVip/index.wxml

@@ -1,3 +1,4 @@
+<wxs src="../../../utils/filter.wxs" module="filters" />
 <view class="buyVip" wx:if="{{show}}">
     <view class="modal">
         <view class="header" wx:if="{{!isPreferential}}">
@@ -20,12 +21,23 @@
             </view>
         </view>
         <view wx:else>
-            <view class="payBox payBox3" bindtap="triggerPay" data-goods="{{products[1]}}">
-                <!--    <view class="buyBtn" bindtap="toBuy" data-id="{{products[1].id}}" wx:if="{{!vipTime}}">立即开通
-                </view>
-                <view class="buyBtn" style="font-size: 22rpx;" wx:else>
+            <view class="payBox payBox3">
+                <view class="validity">
                     有效期：{{filters.formatDate(vipTime,5)}}
-                </view> -->
+                </view>
+            </view>
+            <view class="renewBox">
+                <view class="title">续费</view>
+                <view class="renew">
+                    <view class="left">升级成 SVIP会员-终身<view class="money">+{{products[0].price/100}}元</view>
+                    </view>
+                    <view class="pay" bindtap="triggerPay" data-goods="{{products[0]}}">开通</view>
+                </view>
+                <view class="renew">
+                    <view class="left">续费 VIP会员-12个月<view class="money">{{products[1].price/100}}元</view>
+                    </view>
+                    <view class="pay" bindtap="triggerPay" data-goods="{{products[1]}}">续费</view>
+                </view>
             </view>
         </view>
     </view>

pages/reading/buyVip/index.wxss

@@ -40,17 +40,13 @@
   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));
-  /*             .buyBtn {
-                width: 254rpx;
-                text-align: center;
-                position: absolute;
-                left: 90rpx;
-                top: 156rpx;
-                color: #39029B;
-                font-size: 26rpx;
-                font-weight: bold;
-                letter-spacing: 2rpx;
-            } */
+}
+.buyVip .modal .payBox .validity {
+  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);
@@ -62,6 +58,42 @@
   background-size: cover;
   -webkit-box-reflect: below 2rpx linear-gradient(to bottom, transparent 92%, rgba(0, 0, 0, 0.3));
 }
+.buyVip .modal .renewBox {
+  margin-top: 70rpx;
+  padding: 0rpx 20rpx;
+}
+.buyVip .modal .renewBox .title {
+  text-align: left;
+  font-size: 40rpx;
+  font-weight: bold;
+  margin-bottom: 18rpx;
+}
+.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 .renewBox .renew .left {
+  flex: 1;
+  margin-right: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #666666;
+}
+.buyVip .modal .renewBox .renew .left .money {
+  color: #FC614E;
+}
+.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 .close {
   display: block;
   margin: 0 auto;