开发多端支付组件样式

components/donutBuy/index.js

@@ -9,6 +9,19 @@ Component({
 
     },
     methods: {
+        open(
+            currentTarget
+        ) {
+           /*  if (currentTarget.dataset.isclick) {
+                return
+            } */
+            this.getTabBar().setData({
+                mask: true
+            })
+            // #if MP
+            // #elif ANDROID
+            // #endif
+        },
         showTranscript() {
             this.getTabBar().setData({
                 mask: true

components/donutBuy/index.json

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

components/donutBuy/index.less

@@ -1 +1,106 @@
-/* components/donutBuy/index.wxss */
+.gradeContainer {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    color: #000000;
+
+    .popBox {
+        position: relative;
+        width: 680rpx;
+        height: 678rpx;
+        box-sizing: border-box;
+        padding: 40rpx 46rpx 0rpx;
+        border-radius: 40rpx;
+        background-color: #F7F7F7;
+        overflow: hidden;
+
+        .title {
+            position: relative;
+            text-align: center;
+            font-size: 36rpx;
+            font-weight: 400;
+            color: #000000;
+
+            .close {
+                position: absolute;
+                padding: 20rpx;
+                width: 26rpx;
+                height: 26rpx;
+                right: 0rpx;
+                top: -30rpx;
+            }
+        }
+
+        .group {
+            margin-top: 20rpx;
+
+            .weui-cell {
+                padding: 60rpx 0 40rpx;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                .pay-row {
+                    display: flex;
+                    align-items: center;
+
+                    .wximg {
+                        width: 62rpx;
+                        height: 52rpx;
+                    }
+
+                    .img {
+                        height: 62rpx;
+                        width: 62rpx;
+                    }
+
+                    .name {
+                        margin-left: 34rpx;
+                        font-size: 36rpx;
+                    }
+                }
+            }
+        }
+
+        .paymentBox {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            padding: 60rpx 40rpx;
+            box-sizing: border-box;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background-color: white;
+
+            .payment {
+                display: flex;
+                align-items: center;
+                font-size: 36rpx;
+
+                .num {
+                    font-size: 36rpx;
+                    color: #FF6300;
+                }
+            }
+
+            .pay {
+                padding: 12rpx 52rpx;
+                background: #ff9108;
+                color: white;
+                font-weight: 500;
+                font-size: 40rpx;
+                border-radius: 45rpx;
+            }
+        }
+    }
+
+}

components/donutBuy/index.wxml

@@ -1,4 +1,29 @@
-<popUp id="popUp">
-    <view class="popBox">
+<view class="gradeContainer" catchtouchmove='true' bindtap="closeTranscript">
+    <view class="popBox zoomIn">
+        <view class="title">选择支付方式
+            <image src="/static/bclose.png" class="close" />
+        </view>
+        <radio-group bindchange="radioChange" class="group">
+            <label class="weui-cell" style="border-bottom: 2rpx solid white;">
+                <view class="pay-row">
+                    <image src="/static/wxpay.png" class="wximg" />
+                    <view class="name">微信支付</view>
+                </view>
+                <radio value="wxpay" checked="true" color='#FFAC00' />
+            </label>
+            <label class="weui-cell">
+                <view class="pay-row">
+                    <image src="/static/alipay.png" class="img" />
+                    <view class="name">支付宝支付</view>
+                </view>
+                <radio value="alipay" checked="true" color='#FFAC00' />
+            </label>
+        </radio-group>
+        <view class="paymentBox">
+            <view class="payment">应付款：<view class="num">¥299</view>
+            </view>
+            <view class="pay" bindtap="toBuy">立即支付</view>
+
+        </view>
     </view>
-</popUp>
+</view>

components/donutBuy/index.wxss

@@ -0,0 +1,92 @@
+.gradeContainer {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  color: #000000;
+}
+.gradeContainer .popBox {
+  position: relative;
+  width: 680rpx;
+  height: 678rpx;
+  box-sizing: border-box;
+  padding: 40rpx 46rpx 0rpx;
+  border-radius: 40rpx;
+  background-color: #F7F7F7;
+  overflow: hidden;
+}
+.gradeContainer .popBox .title {
+  position: relative;
+  text-align: center;
+  font-size: 36rpx;
+  font-weight: 400;
+  color: #000000;
+}
+.gradeContainer .popBox .title .close {
+  position: absolute;
+  padding: 20rpx;
+  width: 26rpx;
+  height: 26rpx;
+  right: 0rpx;
+  top: -30rpx;
+}
+.gradeContainer .popBox .group {
+  margin-top: 20rpx;
+}
+.gradeContainer .popBox .group .weui-cell {
+  padding: 60rpx 0 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.gradeContainer .popBox .group .weui-cell .pay-row {
+  display: flex;
+  align-items: center;
+}
+.gradeContainer .popBox .group .weui-cell .pay-row .wximg {
+  width: 62rpx;
+  height: 52rpx;
+}
+.gradeContainer .popBox .group .weui-cell .pay-row .img {
+  height: 62rpx;
+  width: 62rpx;
+}
+.gradeContainer .popBox .group .weui-cell .pay-row .name {
+  margin-left: 34rpx;
+  font-size: 36rpx;
+}
+.gradeContainer .popBox .paymentBox {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  padding: 60rpx 40rpx;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+}
+.gradeContainer .popBox .paymentBox .payment {
+  display: flex;
+  align-items: center;
+  font-size: 36rpx;
+}
+.gradeContainer .popBox .paymentBox .payment .num {
+  font-size: 36rpx;
+  color: #FF6300;
+}
+.gradeContainer .popBox .paymentBox .pay {
+  padding: 12rpx 52rpx;
+  background: #ff9108;
+  color: white;
+  font-weight: 500;
+  font-size: 40rpx;
+  border-radius: 45rpx;
+}

pages/my/index.js

@@ -45,6 +45,7 @@ Page({
                 qrCode: qrCode.ticketUrl
             })
         }
+        this.openDonutBuy({currentTarget:[]})
     },
     async onShow() {
         if (typeof this.getTabBar === 'function') {
@@ -134,6 +135,11 @@ Page({
     toGzh() {
         this.selectComponent('#gzh').open()
     },
+    openDonutBuy({
+        currentTarget
+    }) {
+        this.selectComponent('#donutBuy').open(currentTarget)
+    },
     async toBuy({
         currentTarget
     }) {
@@ -249,7 +255,7 @@ Page({
             })
         }
     },
-    
+
     // 分享配置
     onShareAppMessage(res) {
         // #if MP

pages/my/index.json

@@ -2,6 +2,7 @@
     "usingComponents": {
         "navigationBar": "/components/navigationBar/index",
         "gzhModal": "./gzh/index",
+        "donutBuy":"/components/donutBuy/index",
         "vipModal": "/components/vipModal/index"
     },
     "navigationStyle": "custom",

pages/my/index.wxml

@@ -29,7 +29,7 @@
     <view class="scrollViewBox" wx:if="{{vipTime!='1'&&!isIos}}">
         <scroll-view class="goodsList" scroll-x="true" enhanced show-scrollbar="{{false}}">
             <view wx:for="{{products}}" wx:key="id"
-                class="payBox {{item.payType=='LIFELONG'?'pbbg2':item.payType=='YEAR'?'pbbg1':'pbbg3'}}" bindtap="toBuy"
+                class="payBox {{item.payType=='LIFELONG'?'pbbg2':item.payType=='YEAR'?'pbbg1':'pbbg3'}}" bindtap="openDonutBuy"
                 data-id="{{item.id}}">
                 <view class="pay">
                     {{isPreferential?'立即续费':'立即开通'}}
@@ -102,6 +102,7 @@
             <image src="/static/lollipop.png" class="close" catchtap="closeModal" />
         </view>
     </view>
+    <donutBuy id="donutBuy"></donutBuy>
     <vipModal id="vipModal"></vipModal>
     <gzhModal id="gzh"></gzhModal>
     <canvas id='vip' type="2d"> </canvas>