|
|
@@ -28,9 +28,21 @@
|
|
|
></tki-qrcodes>
|
|
|
<!-- <view class="setMoney" @click="openApp">
|
|
|
设置金额
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="setType flex" v-if="actionInd == 0" @click="showChooseType">
|
|
|
+ <image src="../../static/icon/jf.png" mode="" class="type-logo"></image>
|
|
|
+ <view class="type-wrapper">
|
|
|
+ <view class="type-tit">积分</view>
|
|
|
+ <view class="type-info">使用积分支付</view>
|
|
|
+ </view>
|
|
|
+ <view class="sele-wrap">
|
|
|
+ <image src="../../static/img/back.png" mode="" class="selecte-ic"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
<view class="bottomTab flex">
|
|
|
<view class="item1" @click="clickItem(0)" :class="{ action: actionInd == 0 }">
|
|
|
@@ -63,6 +75,42 @@
|
|
|
></uni-popup-dialog>
|
|
|
</uniPopup>
|
|
|
<uniPopup ref="popup2" type="message"><uni-popup-message type="success" message="支付成功" :duration="2000"></uni-popup-message></uniPopup>
|
|
|
+ <uniPopup ref="popupPay" type="bottom">
|
|
|
+ <view class="popup-box">
|
|
|
+ <view class="popup-pay">
|
|
|
+ <view class="paybox-top flex">
|
|
|
+ <view class="type">选择支付方式</view>
|
|
|
+ <view class="image" @click="close"><image src="../../static/img/x.png" mode="aspectFill"></image></view>
|
|
|
+ </view>
|
|
|
+ <view class="paybox-main flex">
|
|
|
+ <view class="zftype flex">
|
|
|
+ <image src="../../static/img/yue.png" mode="aspectFill"></image>
|
|
|
+ <view class="zf">余额支付</view>
|
|
|
+ </view>
|
|
|
+ <label class="radio" @click="changePayType(1)">
|
|
|
+ <radio style="transform:scale(0.7)" class="rad" value="" :checked="payType == 1" color="#5dbc7c"></radio>
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ <view class="paybox-main flex">
|
|
|
+ <view class="zftype flex">
|
|
|
+ <image src="../../static/icon/jf.png" mode="aspectFill"></image>
|
|
|
+ <view class="zf">积分支付</view>
|
|
|
+ </view>
|
|
|
+ <label class="radio1" @click="changePayType(2)"><radio style="transform:scale(0.7)" value="" :checked="payType == 2" color="#5dbc7c"></radio></label>
|
|
|
+ </view>
|
|
|
+ <view class="paybox-main flex">
|
|
|
+ <view class="zftype flex">
|
|
|
+ <image src="../../static/icon/xfq.png" mode="aspectFill"></image>
|
|
|
+ <view class="zf">消费券支付</view>
|
|
|
+ </view>
|
|
|
+ <label class="radio1" @click="changePayType(3)"><radio style="transform:scale(0.7)" value="" :checked="payType == 3" color="#5dbc7c"></radio></label>
|
|
|
+ </view>
|
|
|
+ <view class="paybtn">
|
|
|
+ 确定切换
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </uniPopup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -118,7 +166,8 @@ export default {
|
|
|
getMoneyList: null, //收款记录倒计时倒计时
|
|
|
showSqr: true,
|
|
|
code: '', //保存扫码code
|
|
|
- indexNum: 0 //默认没有商品
|
|
|
+ indexNum: 0, //默认没有商品
|
|
|
+ payType: 0,
|
|
|
};
|
|
|
},
|
|
|
|
|
|
@@ -420,6 +469,12 @@ export default {
|
|
|
},
|
|
|
openApp() {
|
|
|
let weixinObj = require('jweixin-module');
|
|
|
+ },
|
|
|
+ showChooseType() {
|
|
|
+ this.$refs.popupPay.open()
|
|
|
+ },
|
|
|
+ changePayType(index) {
|
|
|
+ this.payType = index
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -476,13 +531,42 @@ $btHeight: 100rpx;
|
|
|
}
|
|
|
.erwema {
|
|
|
width: 686rpx;
|
|
|
- height: 817rpx;
|
|
|
+ // height: 817rpx;
|
|
|
+ height: 900rpx;
|
|
|
background-color: #ffffff;
|
|
|
padding-top: 100rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- margin: 0rpx auto;
|
|
|
+ margin: 0rpx auto;
|
|
|
+ .setType {
|
|
|
+ height: 130rpx;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .type-wrapper {
|
|
|
+ text-align: left;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ .type-logo {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 54rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .sele-wrap {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 100%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .selecte-ic {
|
|
|
+
|
|
|
+ justify-items: flex-end;
|
|
|
+ width: 13rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.qrbox {
|
|
|
width: 500rpx;
|
|
|
text-align: center;
|
|
|
@@ -497,7 +581,8 @@ $btHeight: 100rpx;
|
|
|
font-size: $font-base;
|
|
|
color: $base-color;
|
|
|
margin-top: 20rpx;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
/deep/ .qrbox .img {
|
|
|
@@ -533,5 +618,105 @@ $btHeight: 100rpx;
|
|
|
opacity: 1;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
+.popup-box {
|
|
|
+ position: relative;
|
|
|
+ z-index: 100;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ background: #ffffff;
|
|
|
+ .popup-pay {
|
|
|
+ position: relative;
|
|
|
+ justify-content: space-between;
|
|
|
+ // padding: 0rpx 25rpx 32rpx 25rpx;
|
|
|
+ .paybox-top {
|
|
|
+ padding-top: 38rpx;
|
|
|
+ padding-left: 32rpx;
|
|
|
+ width: 100%;
|
|
|
+ .type {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .image {
|
|
|
+ padding-right: 24rpx;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ image {
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .paybox-main {
|
|
|
+ padding-left: 40rpx;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 54rpx;
|
|
|
+ margin-bottom: 54rpx;
|
|
|
+ .zftype {
|
|
|
+ padding-left: 5rpx;
|
|
|
+ image {
|
|
|
+ width: 38rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ .zf {
|
|
|
+ padding-left: 18rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #3f454b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .paybtn {
|
|
|
+ width: 750rpx;
|
|
|
+ line-height: 93rpx;
|
|
|
+ background: #75BA82;
|
|
|
+
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .buttom {
|
|
|
+ position: relative;
|
|
|
+ z-index: 100;
|
|
|
+ width: 100%;
|
|
|
+ height: 113rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ align-items: center;
|
|
|
+ .heji {
|
|
|
+ height: 100%;
|
|
|
+ width: 50%;
|
|
|
+ padding-left: 23rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #3f454b;
|
|
|
+ text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ff0000;
|
|
|
+ .money {
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zhifu {
|
|
|
+ width: 50%;
|
|
|
+ height: 92rpx;
|
|
|
+ background: #5dbc7c;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 92rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
