修改购买产品和购买vip的页面

project.config.json

@@ -29,7 +29,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 0,
+			"current": 1,
 			"list": [
 				{
 					"id": 0,
@@ -39,10 +39,10 @@
 					"scene": null
 				},
 				{
-					"id": -1,
+					"id": 1,
 					"name": "vip_page",
 					"pathName": "pages/buyvip",
-					"query": "",
+					"query": "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVjNmUxYjk3NDA5MGY5NTYxM2M3YjgxOSIsImFjY291bnRfaWQiOiI2MDAxXzgwMDNfb0pZYXA1WlZSV0RGRm9Qd09GcGllQmVNRkVocyIsInNlc3Npb25faWQiOiIxNTUwNzU0Njg5XzE1NTA3MTc1OTRfYjA5YTVmOWYxODM0NDFmOWUxMDk1MGJmOTUyZTRjMjFfNTcyOWRkOWYyMzQ5NzdlM2IwMGNjOGFjYWRjMjFiOTQiLCJpYXQiOjE1NTA3NTQ2ODl9.GkUGGb2vwTE1xgZ-UKwl6Tfs3NFawE2V3ZAH91_syY4",
 					"scene": null
 				}
 			]

src/pages/buyvip.wpy

@@ -1,69 +1,69 @@
 <style lang="less">
-  .msg-box{
-    width: 750rpx;
-    height: 300rpx;
-    border-radius:5px;
-    background-color: #fff;
+  .one-product{
     display: flex;
-    flex-flow: column;
-  }
-  .msg-title {
-    height: 200rpx;
-    widht: 600rpx;
-    align-items: center;
-    padding: 10px;
-    font-size:18px;
-    color:#777;
-
-  }
-  .msg-action-bar {
-    height: 80rpx;
-    overflow: hidden;
-    display: flex;
-    border-top: 1rpx solid #e5e5e5;
-  }
-  .msg-action-bar .msg-action-btn {
-    width: 50%;
-    height: 80rpx;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    font-size: 20px;
-  }
-  .msg-action-bar .msg-action-btn:first-child {
-    border-right: 1rpx solid #e5e5e5 ;
-  }
-  .msg-action-bar .msg-action-btn:last-child {
-    color: #3283fa;
-  }
-  .row{
-    width: 750rpx;
+    border: 1rpx solid #e5e5e5;
+    border-radius: 5rpx;
+    margin-left: 40rpx;
+    margin-right: 40rpx;
+    width: 670rpx;
     text-align: center;
+    height: 100rpx;
+    justify-items: center;
+    align-items: center;
+    margin-top: 20rpx;
   }
+  .price {
+    width: 70%;
+    border-right: 1rpx solid #e5e5e5;
+    height: 100%;
+    position:relative;
+  }
+  .price-txt {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .product-name {
+    width: 30%;
+  }
+  .selected {
+    border: 4rpx solid #f85;
+  }
+  .product_img {
+    width: 750rpx;
+  }
+
 </style>
 <template>
   <view class="container">
-    <view class="msg-box">
-      <view class="msg-title">
-        <view class="row">5元购买一个月</view>
-        <view class="row">30元购买终身卡</view>
-      </view>
-      <view class="msg-action-bar">
-        <view class="msg-action-btn" @tap="buyMonth"><text>购买一个月</text></view>
-        <view class="msg-action-btn" @tap="buyAll">购买终身VIP</view>
-      </view>
+    <image class="product_img" mode="widthFix" src="https://resource.kingsome.cn/voodoo/5c789e6e486f49165aa057b8.jpeg"/>
+    <view class="one-product {{currentType === 'vip'? 'selected' : ''}}" @tap="selectType('vip')">
+      <view class="price"><view class="price-txt">30元</view></view>
+      <view class="product-name">终身</view>
     </view>
+    <view class="one-product {{currentType === 'vip_month'? 'selected' : ''}}" @tap="selectType('vip_month')">
+      <view class="price"><view class="price-txt">10元</view></view>
+      <view class="product-name">一个月</view>
+    </view>
+
   </view>
+  <gameBottomBar :config.sync="bottomActionCfg" @bottomMainTap.user="bottomMainTap"
+                 @bottomSecondTap.user="bottomSecondTap"/>
 </template>
 <script>
   import wepy from 'wepy';
   import http from '../utils/http';
   import jcEvent from '../common/jc-event';
+  import gameBottomBar from '../components/game-bottom-bar';
 
   export default class BuyVipPage extends wepy.page {
     config = {
       navigationBarTitleText: '购买VIP'
     };
+    components = {
+      gameBottomBar: gameBottomBar
+    };
     data = {
       gid: '',
       bottomActionCfg: {
@@ -73,14 +73,24 @@
         secondBtnIconClass: 'icon-forbid',
         secondBtnTitle: '取消'
       },
-      tid: ''
+      tid: '',
+      currentType: 'vip'
     };
     methods = {
-      buyMonth(){
-        this.buy('vip_month');
+      selectType(type) {
+        this.currentType = type;
       },
-      buyAll() {
-        this.buy('vip');
+      bottomMainTap(e) {
+        console.log('bottomMainTap');
+        this.buy(this.currentType)
+      },
+      bottomSecondTap(e) {
+        console.log('bottomSecondTap');
+        wepy.navigateBackMiniProgram({
+          extraData: {
+            success: false
+          }
+        })
       }
     };
 

src/pages/product.wpy

@@ -1,8 +1,11 @@
 <style lang="less">
+  .product_img {
+    width: 750rpx;
+  }
 </style>
 <template>
   <view class="container">
-
+    <image class="product_img" mode="widthFix" src="https://resource.kingsome.cn/voodoo/5c788d47486f49165aa057b6.jpeg"/>
   </view>
   <gameBottomBar :config.sync="bottomActionCfg" @bottomMainTap.user="bottomMainTap"
                  @bottomSecondTap.user="bottomSecondTap"/>
@@ -82,7 +85,7 @@
         console.log('bottomSecondTap');
         wepy.navigateBackMiniProgram({
           extraData: {
-            foo: 'bar'
+            success: false
           }
         })
       }
@@ -102,7 +105,11 @@
             icon: 'none',
             duration: 2000
           })
-          jcEvent.emit(jcEvent.events.BUY_GAME_SUCCESS, {});
+          wepy.navigateBackMiniProgram({
+            extraData: {
+              success: true
+            }
+          })
         }
       } catch (err) {
         console.log(err);