|
|
@@ -5,7 +5,7 @@
|
|
|
<view class="title">选择充值金额</view>
|
|
|
<p>当前余额{{detail.balance}}</p>
|
|
|
<view class="rechargeMain">
|
|
|
- <view class="recharge-item" :class="otherNum&&moneyActiveClass == item.id ? 'active' : ''"
|
|
|
+ <view class="recharge-item" :class="!otherNum&&moneyActiveClass == item.id ? 'active' : ''"
|
|
|
v-for="(item,index) in moneyList" :key="item.id" @click="moneyClick(item.id,item)">
|
|
|
{{item.rechargeAmount}}
|
|
|
<view class="amount">赠20元</view>
|
|
|
@@ -15,8 +15,7 @@
|
|
|
<p>其他充值金额</p>
|
|
|
<view
|
|
|
|
|
|
- @click="moneyClick(-1)"
|
|
|
- :class="!otherNum&&moneyActiveClass == -1? 'active' : ''"
|
|
|
+ :class="otherNum? 'active' : ''"
|
|
|
class="recharge-input self-stop">
|
|
|
<u-input v-model="otherNum" @input="ckInput" type="text" :border="true" />
|
|
|
</view>
|
|
|
@@ -24,7 +23,7 @@
|
|
|
<view class="recharge-radio">
|
|
|
<u-radio-group v-model="value2" @change="radioGroupChange" :wrap="true" width="100%">
|
|
|
<u-radio active-color="#00B962" @change="radioChange" v-for="(item, index) in list" :key="index"
|
|
|
- :name="item.name" :disabled="item.disabled" width="100%">
|
|
|
+ :name="item.id" :disabled="item.disabled" width="100%">
|
|
|
<view class="recharge-radio-item">
|
|
|
<u-icon :name="item.icon" custom-prefix="custom-icon" :color="item.color" size="48">
|
|
|
</u-icon>
|
|
|
@@ -35,6 +34,23 @@
|
|
|
</u-radio>
|
|
|
</u-radio-group>
|
|
|
</view>
|
|
|
+ <u-modal v-model="showModel"
|
|
|
+ :show-cancel-button="true"
|
|
|
+ @confirm="confirm"
|
|
|
+ confirm-text="支付成功？"
|
|
|
+ title="扫码支付" >
|
|
|
+ <view style="
|
|
|
+ text-align: center;
|
|
|
+ ">
|
|
|
+ <img id="qrcode2" :src="qrCodeImg" >
|
|
|
+ </view>
|
|
|
+ <view style="
|
|
|
+ text-align: center;
|
|
|
+ ">请使用支付宝扫码</view>
|
|
|
+
|
|
|
+ </u-modal>
|
|
|
+ <img id="qrcode" style="display: none;" >
|
|
|
+
|
|
|
<view class="recharge-btn">
|
|
|
<u-checkbox-group>
|
|
|
<u-checkbox v-model="checked" shape="circle" @change="checkboxChange()">我已阅读并同意《充值协议》</u-checkbox>
|
|
|
@@ -49,6 +65,10 @@
|
|
|
|
|
|
<script>
|
|
|
import * as Pay from '@/apis/weixin.js'
|
|
|
+ import QRCode from 'qrcodejs2'
|
|
|
+ import {
|
|
|
+ convertCanvasToImage,
|
|
|
+ } from '@/utils'
|
|
|
import {
|
|
|
wxPayJs
|
|
|
} from '@/utils/wxpay'
|
|
|
@@ -56,26 +76,31 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ showModel:false,
|
|
|
selectItem:{},
|
|
|
userId: '',
|
|
|
detail: {},
|
|
|
moneyActiveClass: 1,
|
|
|
+ submitForm:{},
|
|
|
+ qrCodeImg:"",
|
|
|
moneyList: [
|
|
|
|
|
|
],
|
|
|
list: [{
|
|
|
+ id:'0',
|
|
|
name: '微信支付',
|
|
|
icon: 'wechat-pay-fill',
|
|
|
color: '#22ac38',
|
|
|
},
|
|
|
{
|
|
|
+ id:'1',
|
|
|
name: '支付宝支付',
|
|
|
icon: 'alipay-fill',
|
|
|
color: '#1677ff',
|
|
|
},
|
|
|
],
|
|
|
// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
|
|
|
- value2: '微信支付',
|
|
|
+ value2: '0',
|
|
|
otherNum:"",
|
|
|
value1: '',
|
|
|
checked: true,
|
|
|
@@ -89,6 +114,9 @@
|
|
|
this.init();
|
|
|
},
|
|
|
methods: {
|
|
|
+ confirm(){
|
|
|
+
|
|
|
+ },
|
|
|
ckInput(text){
|
|
|
if(text.indexOf('.')>0){
|
|
|
|
|
|
@@ -114,32 +142,7 @@
|
|
|
}
|
|
|
|
|
|
},
|
|
|
- submit() {
|
|
|
- uni.showLoading({
|
|
|
- title: "加载中",
|
|
|
- mask: true,
|
|
|
- })
|
|
|
- Pay.wxpay({
|
|
|
- chargingMarketingId: this.chargingMarketingId,
|
|
|
- type:2
|
|
|
- }).then((response) => {
|
|
|
- if (!response.result) {
|
|
|
- uni.showToast({
|
|
|
- title: response.message
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- var data = response.data
|
|
|
-
|
|
|
- uni.hideLoading()
|
|
|
- console.log("Pay+" + new Date().getTime())
|
|
|
- wxPayJs(data);
|
|
|
-
|
|
|
- }).catch(error => {
|
|
|
- this.$refs.common.showLoading(false, error);
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
+
|
|
|
init1() {
|
|
|
uni.showLoading({
|
|
|
title: "加载中",
|
|
|
@@ -189,8 +192,9 @@
|
|
|
},
|
|
|
moneyClick(index,item) {
|
|
|
this.moneyActiveClass = index;
|
|
|
- this.selectItem=item;
|
|
|
-
|
|
|
+ if(item){
|
|
|
+ this.selectItem=item;
|
|
|
+ }
|
|
|
},
|
|
|
// 选中某个单选框时，由radio时触发
|
|
|
radioChange(e) {
|
|
|
@@ -203,19 +207,73 @@
|
|
|
checkboxChange() {
|
|
|
this.checked = !this.checked;
|
|
|
},
|
|
|
+ alpy(){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ Pay.alpay(this.submitForm).then((response) => {
|
|
|
+
|
|
|
+ let qrcode = new QRCode('qrcode', {
|
|
|
+ width: 200,
|
|
|
+ height: 200,
|
|
|
+ text: response.data,
|
|
|
+ correctLevel: QRCode.CorrectLevel.M,
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ var canvas = document.getElementsByTagName('canvas')[0];
|
|
|
+ this.qrCodeImg = convertCanvasToImage(canvas);
|
|
|
+ uni.hideLoading()
|
|
|
+ this.showModel=true
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ wxpy(){
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ Pay.wxpay(this.submitForm).then((response) => {
|
|
|
+
|
|
|
+ if(!response.result){
|
|
|
+ uni.showToast({
|
|
|
+ title: response.message
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var data = response.data
|
|
|
+ uni.hideLoading()
|
|
|
+ console.log("Pay+"+new Date().getTime())
|
|
|
+ wxPayJs(data);
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
rechargeNow() {
|
|
|
- if(this.moneyActiveClass==-1&&!this.otherNum){
|
|
|
- this.submitForm.chargeStrategy=0;
|
|
|
- this.submitForm.amount=0
|
|
|
+ this.submitForm={};
|
|
|
+ if(!this.otherNum){
|
|
|
+ this.submitForm.chargingMarketingId=this.selectItem.id;
|
|
|
}else{
|
|
|
- this.submitForm.chargeStrategy=2;
|
|
|
- if(this.otherNum){
|
|
|
- this.submitForm.amount=this.otherNum
|
|
|
- }else{
|
|
|
- this.submitForm.amount=this.moneyActiveClass
|
|
|
- }
|
|
|
+ this.submitForm.amount=this.otherNum
|
|
|
}
|
|
|
console.log(this.submitForm)
|
|
|
+ if(this.value2=="0"){
|
|
|
+ this.wxpy()
|
|
|
+ }else{
|
|
|
+ this.alpy()
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
|
@@ -257,7 +315,7 @@
|
|
|
margin-top: 4px;
|
|
|
}
|
|
|
.self-stop.active{
|
|
|
-
|
|
|
+ border: 1px solid;
|
|
|
background-color: #EFFFF7;
|
|
|
border-color: #00B962;
|
|
|
color: #00B962;
|
zhengkaixin