渠道支付

components/donutBuy/index.js

@@ -1,23 +1,49 @@
+import {
+    createAndroidOrder,
+    payQrCode
+} from '~/api/global'
 Component({
-
-    /**
-     * 组件的属性列表
-     */
     properties: {
 
     },
-
-    /**
-     * 组件的初始数据
-     */
     data: {
-
+        show: true,
+        qrCode: '',
+        product: {}
+    },
+    lifetimes: {
+        attached() {
+         /*    this.selectComponent("#popUp").showModal()
+            this.getTabBar().setData({
+                show: false
+            }) */
+        },
     },
-
-    /**
-     * 组件的方法列表
-     */
     methods: {
-
+        async open(product) {
+            let orderId = await createAndroidOrder({
+                productId: product.id
+            })
+            let qrCode = await payQrCode({
+                orderId,
+                productId: product.id,
+                channel: wx.getStorageSync('channelCode')
+            })
+            this.getTabBar().setData({
+                show: false
+            })
+            this.setData({
+                show: true,
+                product,
+                qrCode
+            })
+            this.selectComponent("#popUp").showModal()
+        },
+        close() {
+            this.setData({
+                show: false,
+            })
+            this.selectComponent("#popUp").hideModal()
+        }
     }
 })

components/donutBuy/index.json

@@ -1,4 +1,6 @@
 {
     "component": true,
-    "usingComponents": {}
+    "usingComponents": {
+        "popUp": "/components/popUp/index"
+    }
 }

components/donutBuy/index.less

@@ -1,8 +1,63 @@
-.donutBuy {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.7);
+.box {
+    width: 750rpx;
+    height: 652rpx;
+    padding: 28rpx 0 0;
+    background: #FFFFFF;
+    border-radius: 30rpx 30rpx 0rpx 0rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .header {
+        width: 100%;
+        position: relative;
+        font-size: 28rpx;
+        color: #000000;
+        text-align: center;
+
+        .close {
+            position: absolute;
+            right: 24rpx;
+            top: -30rpx;
+            line-height: 60rpx;
+            font-size: 50rpx;
+        }
+    }
+
+    .qrCodeBox {
+        margin: 34rpx auto;
+        padding: 40rpx;
+        background: url('http://reader-wx.ai160.com/images/reader/v3/bgl.webp') no-repeat;
+        background-size: contain;
+
+        .qrCode {
+            width: 322rpx;
+            height: 322rpx;
+            background: #D8D8D8;
+            border-radius: 40rpx;
+        }
+    }
+
+    .footer {
+        .row {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 20rpx;
+            .icon {
+                margin: 0 12rpx;
+                font-size: 30rpx;
+                width: 46rpx;
+                height: 46rpx;
+            }
+            text{
+                padding: 0 10rpx;
+            }
+            .price{
+                font-size: 40rpx;
+                color: #FF0707;
+                font-weight: bold;
+            }
+        }
+    }
 }

components/donutBuy/index.wxml

@@ -1,3 +1,21 @@
-<view class="donutBuy">
-    232323
-</view>
+<popUp id="popUp" wx:if="{{show}}">
+    <view class="box">
+        <view class="header">
+            扫码支付
+            <view class="close" bindtap="close">
+                ×
+            </view>
+        </view>
+        <view class="qrCodeBox">
+            <image src="{{qrCode}}" class="qrCode" />
+        </view>
+        <view class="footer">
+            <view class="row">
+                <image src="/static/wx.png" class="icon" /><text>微信</text>或
+                <image src="/static/alipay.png" class="icon" /><text>支付宝</text>扫码支付
+            </view>
+            <view class="row">支付价格：<view class="price">￥{{product.price/100}}</view>
+            </view>
+        </view>
+    </view>
+</popUp>

components/donutBuy/index.wxss

@@ -1,8 +1,56 @@
-.donutBuy {
-  position: fixed;
-  top: 0;
-  left: 0;
+.box {
+  width: 750rpx;
+  height: 652rpx;
+  padding: 28rpx 0 0;
+  background: #FFFFFF;
+  border-radius: 30rpx 30rpx 0rpx 0rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.box .header {
   width: 100%;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.7);
+  position: relative;
+  font-size: 28rpx;
+  color: #000000;
+  text-align: center;
+}
+.box .header .close {
+  position: absolute;
+  right: 24rpx;
+  top: -30rpx;
+  line-height: 60rpx;
+  font-size: 50rpx;
+}
+.box .qrCodeBox {
+  margin: 34rpx auto;
+  padding: 40rpx;
+  background: url('http://reader-wx.ai160.com/images/reader/v3/bgl.webp') no-repeat;
+  background-size: contain;
+}
+.box .qrCodeBox .qrCode {
+  width: 322rpx;
+  height: 322rpx;
+  background: #D8D8D8;
+  border-radius: 40rpx;
+}
+.box .footer .row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20rpx;
+}
+.box .footer .row .icon {
+  margin: 0 12rpx;
+  font-size: 30rpx;
+  width: 46rpx;
+  height: 46rpx;
+}
+.box .footer .row text {
+  padding: 0 10rpx;
+}
+.box .footer .row .price {
+  font-size: 40rpx;
+  color: #FF0707;
+  font-weight: bold;
 }

components/popUp/index.js

@@ -19,6 +19,7 @@ Component({
     methods: {
         //底部弹出框
         showModal() {
+            console.log(111);
             // 背景遮罩层
             var animation = wx.createAnimation({
                 duration: 200,

custom-tab-bar/index.js

@@ -25,6 +25,7 @@ Component({
         color: "#999999",
         selectedColor: "#32CA69",
         mask: false,
+        show:true,
         listTab: [{
             "pagePath": "/pages/activity/index",
             "text": "排行榜",

custom-tab-bar/index.less

@@ -53,18 +53,6 @@
         background: rgba(0, 0, 0, 0.7);
     }
 }
-
-/* #if ANDROID */
-.androidMask {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 9999;
-}
-
-/* #endif */
 .bounce {
     animation: elasticity 1.2s linear;
 }

custom-tab-bar/index.wxml

@@ -1,4 +1,4 @@
-<view class="tab-bar">
+<view class="tab-bar" wx:if="{{show}}">
     <view class="mask" wx:if="{{mask}}"></view>
     <view wx:for="{{listTab}}" wx:key="index" class="tab-bar-item {{selected === index?'bounce':''}}"
         data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
@@ -7,7 +7,4 @@
         <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
         <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
     </view>
-    <!-- #if ANDROID  -->
-    <!--   <view class="androidMask" wx:if="{{androidMask}}" bind:tap="toAndroidLogin"></view> -->
-    <!-- #endif -->
 </view>

custom-tab-bar/index.wxss

@@ -48,16 +48,6 @@
   z-index: 9;
   background: rgba(0, 0, 0, 0.7);
 }
-/* #if ANDROID */
-.androidMask {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-}
-/* #endif */
 .bounce {
   animation: elasticity 1.2s linear;
 }