|
|
@@ -13,30 +13,45 @@
|
|
|
</div>
|
|
|
<div class="border border_radius_8 mt10">
|
|
|
<div class="flex-between order_table padding16">
|
|
|
- <div class="flex_2 flex-center font_size18">订单信息</div>
|
|
|
- <div class="flex_1 flex-center font_size18">米币</div>
|
|
|
- <div class="flex_1 flex-center font_size18">有效期</div>
|
|
|
- <div class="flex_1 flex-center font_size18">价格</div>
|
|
|
+ <div class="flex_1 font_size18">订单信息</div>
|
|
|
+ <div class="flex_1 font_size18">金额（元）</div>
|
|
|
+ <div class="flex_1 font_size18">
|
|
|
+ 数量
|
|
|
+ ({{orderInfo.orderType === 'bm_recharge' ? $t('common.baomibi') : $t('common.mibi')}})
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="flex-between padding16">
|
|
|
- <div class="flex_2 flex-center font_size18">
|
|
|
- <div class="flex-between">
|
|
|
+ <div class="flex_1 font_size18">
|
|
|
+ <!-- <div class="flex-between">
|
|
|
<img src="" alt="" style="width: 160px; height: 90px;" class="bg_color_f5">
|
|
|
<div class="ml10">
|
|
|
<div class="font_size16 bold">UI界面设计教程</div>
|
|
|
<el-button type="primary" size="mini" plain class="mt5">技能标签</el-button>
|
|
|
</div>
|
|
|
+ </div> -->
|
|
|
+ <div class="flex-column">
|
|
|
+ <div class="gap10 cursor-pointer" @click="orderInfo.orderType = 'bm_recharge';handleOrderAmtChange()">
|
|
|
+ <div class="checkType" :class="{'active': orderInfo.orderType === 'bm_recharge'}"></div>
|
|
|
+ <div class="font_size16">充值{{$t('common.baomibi')}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="gap10 cursor-pointer mt20" @click="orderInfo.orderType = 'm_recharge';handleOrderAmtChange()">
|
|
|
+ <div class="checkType" :class="{'active': orderInfo.orderType === 'm_recharge'}"></div>
|
|
|
+ <div class="font_size16">充值{{$t('common.mibi')}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
- <div class="flex_1 flex-center font_size18">
|
|
|
- 2999
|
|
|
- </div>
|
|
|
- <div class="flex_1 flex-center font_size18">
|
|
|
- 永久
|
|
|
+ <div class="flex_1 font_size18">
|
|
|
+ <div>
|
|
|
+ <el-input-number v-model="orderInfo.orderAmt" :min="0" :max="1000" :step="1" class="w100"
|
|
|
+ @change="handleOrderAmtChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="font_size16 color_price" v-if="message_recharge">{{message_recharge}}</div>
|
|
|
</div>
|
|
|
- <div class="flex_1 flex-center font_size18 color_price">
|
|
|
- ￥23
|
|
|
+ <div class="flex_1 font_size18 color_price">
|
|
|
+ {{orderInfo.orderNum}}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -48,11 +63,11 @@
|
|
|
<div class="font_size20 bold">{{$t('common.payWay')}}</div>
|
|
|
</div>
|
|
|
<div class="gap10 mt20">
|
|
|
- <div class="gap10 cursor-pointer" @click="payType = 1">
|
|
|
+ <div class="gap10 cursor-pointer" @click="payType = 1;pageRedirectionData='';orderInfo.payMethod = 'alipay'">
|
|
|
<div class="checkType" :class="{'active': payType === 1}"></div>
|
|
|
<div class="font_size16">个人支付</div>
|
|
|
</div>
|
|
|
- <div class="gap10 cursor-pointer" @click="payType = 2">
|
|
|
+ <div class="gap10 cursor-pointer" @click="payType = 2;orderInfo.payMethod = 'bank_transfer';pageRedirectionData='';payConfigDearchFn();">
|
|
|
<div class="checkType" :class="{'active': payType === 2}"></div>
|
|
|
<div class="font_size16">对公支付</div>
|
|
|
</div>
|
|
|
@@ -60,42 +75,49 @@
|
|
|
<!-- 个人支付 -->
|
|
|
<div class="mt20" v-if="payType === 1">
|
|
|
<div class="gap10">
|
|
|
- <div class="payway flex_1 gap5" :class="{'active': payWay === 1}" @click="payWay = 1">
|
|
|
+ <div class="payway flex_1 gap5"
|
|
|
+ :class="{'active': orderInfo.payMethod === 'alipay'}"
|
|
|
+ @click="orderInfo.payMethod = 'alipay';pageRedirectionData=''">
|
|
|
<div class="checkType"></div>
|
|
|
<img :src="zhifubaoIcon" alt="" style="width: 40px; height: 40px;">
|
|
|
<div class="font_size16">支付宝支付</div>
|
|
|
</div>
|
|
|
- <div class="payway flex_1 gap5" @click="payWay = 2">
|
|
|
- <div class="checkType" :class="{'active': payWay === 2}"></div>
|
|
|
+ <div class="payway flex_1 gap5"
|
|
|
+ :class="{'active': orderInfo.payMethod === 'wechat_pay'}"
|
|
|
+ @click="orderInfo.payMethod = 'wechat_pay';pageRedirectionData=''">
|
|
|
+ <div class="checkType"></div>
|
|
|
<img :src="weixinIcon" alt="" style="width: 40px; height: 40px;">
|
|
|
<div class="font_size16">微信支付</div>
|
|
|
</div>
|
|
|
- <div class="payway flex_1 gap5" @click="payWay = 3">
|
|
|
- <div class="checkType" :class="{'active': payWay === 3}"></div>
|
|
|
+ <div class="payway flex_1 gap5"
|
|
|
+ :class="{'active': orderInfo.payMethod === 'union_pay'}"
|
|
|
+ @click="orderInfo.payMethod = 'union_pay';pageRedirectionData=''">
|
|
|
+ <div class="checkType"></div>
|
|
|
<img :src="yinlianIcon" alt="" style="width: 40px; height: 40px;">
|
|
|
<div class="font_size16">银联支付</div>
|
|
|
</div>
|
|
|
- <div class="payway flex_1 gap5" @click="payWay = 4">
|
|
|
- <div class="checkType" :class="{'active': payWay === 4}"></div>
|
|
|
+ <div class="payway flex_1 gap5"
|
|
|
+ :class="{'active': orderInfo.payMethod === 'paypal'}"
|
|
|
+ @click="orderInfo.payMethod = 'paypal';pageRedirectionData=''">
|
|
|
+ <div class="checkType"></div>
|
|
|
<img :src="paypalIcon" alt="" style="width: 40px; height: 40px;">
|
|
|
<div class="font_size16">PayPal支付</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="mt20">
|
|
|
+ <!-- <div class="mt20">
|
|
|
<div class="bold font_size18">米币</div>
|
|
|
<div class="gap10 mt10">
|
|
|
<div class="checkType"></div>
|
|
|
<div class="font_size16">可用米币 <span class="color_price bold">2999</span></div>
|
|
|
<div class="font_size16 color_price">(抵扣￥1.00)</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
<!-- 对公支付 -->
|
|
|
<div class="mt20" v-if="payType === 2">
|
|
|
<div class="flex-between order_table padding16">
|
|
|
- <div class="flex_1 font_size16">收款方：XXXX有限公司</div>
|
|
|
- <div class="flex_1 font_size16">收款方银行账号：************ 1234</div>
|
|
|
- <div class="flex_1 font_size16">收款方开户银行：****支行</div>
|
|
|
+ <div class="flex_1 font_size16" v-for="item in BusinessAccount" :key="item.id">
|
|
|
+ {{item.configName}}：{{item.configValue}}</div>
|
|
|
</div>
|
|
|
<div class="mt20">
|
|
|
<div class="bold font_size18">付款凭证</div>
|
|
|
@@ -116,18 +138,52 @@
|
|
|
</div>
|
|
|
<div class="mt20 flex-center-between" style="width: 300px;">
|
|
|
<div class="font_size18">总价：</div>
|
|
|
- <div class="font_size16 bold">￥239.2</div>
|
|
|
+ <div class="font_size16 bold">￥{{orderInfo.orderAmt}}</div>
|
|
|
</div>
|
|
|
<div class="mt20 flex-center-between" style="width: 300px;">
|
|
|
<div class="font_size18">需付金额：</div>
|
|
|
- <div class="font_size24 bold color_price">￥239.2</div>
|
|
|
+ <div class="font_size24 bold color_price">￥{{orderInfo.orderAmt}}</div>
|
|
|
</div>
|
|
|
- <div style="display: inline-block;" class="mt20" @click="payNowFn">
|
|
|
+ <div style="display: inline-block;" class="mt20" @click="payNowFn" v-loading="loading">
|
|
|
<div class="gap5 gradient border_radius_4 cursor-pointer zhifu">
|
|
|
<img :src="qianbaoIcon" alt="" style="width:13px;height:15px">
|
|
|
<div>{{$t('common.payNow')}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 支付二维码 -->
|
|
|
+ <div class="payment-qrcode mt20">
|
|
|
+ <img
|
|
|
+ :src="pageRedirectionData"
|
|
|
+ v-if="pageRedirectionData && orderInfo.payMethod == 'wechat_pay'"
|
|
|
+ class="qrcode-image"
|
|
|
+ />
|
|
|
+ <iframe style="width:100%;"
|
|
|
+ v-if="pageRedirectionData && orderInfo.payMethod == 'alipay'"
|
|
|
+ :srcdoc="pageRedirectionData"
|
|
|
+ frameborder="no"
|
|
|
+ border="0"
|
|
|
+ marginwidth="0"
|
|
|
+ marginheight="0"
|
|
|
+ scrolling="no"
|
|
|
+ width="200"
|
|
|
+ height="200"
|
|
|
+ class="qrcode-iframe"
|
|
|
+ ></iframe>
|
|
|
+ <iframe style="width:100%;height:100vh"
|
|
|
+ v-if="pageRedirectionData && orderInfo.payMethod == 'union_pay'"
|
|
|
+ :srcdoc="pageRedirectionData"
|
|
|
+ frameborder="no"
|
|
|
+ border="0"
|
|
|
+ marginwidth="0"
|
|
|
+ marginheight="0"
|
|
|
+ scrolling="no"
|
|
|
+ width="200"
|
|
|
+ height="200"
|
|
|
+ class="qrcode-iframe"
|
|
|
+ ></iframe>
|
|
|
+ <!-- PayPal 支付按钮挂载容器（必须唯一ID） -->
|
|
|
+ <div id="paypal-button-container" v-if="pageRedirectionData && orderInfo.payMethod == 'paypal'"></div>
|
|
|
+ </div>
|
|
|
<div class="mt20 font_size14">录播和体验课课程属于虚拟商品，购买后无特殊原因，不支持退款</div>
|
|
|
<div class="mt20 gap10 cursor-pointer" @click="agreement = !agreement">
|
|
|
<div class="checkType" :class="{'active': agreement}"></div>
|
|
|
@@ -145,10 +201,12 @@ import qianbaoIcon from '@/assets/imgs/pay/qianbao.png'
|
|
|
|
|
|
|
|
|
import FileUploader from '@/components/FileUploader.vue'
|
|
|
+import { calRate, createOrder,payResult,payConfigDearch } from '@/api/order.js'
|
|
|
+import qrcode from 'qrcode'
|
|
|
|
|
|
|
|
|
|
|
|
-import { ref } from 'vue'
|
|
|
+import { reactive, ref, onBeforeUnmount, nextTick } from 'vue'
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
import DGTMessage from '@/utils/message'
|
|
|
//获取参数
|
|
|
@@ -160,11 +218,31 @@ const id = ref(query.id || '');
|
|
|
//
|
|
|
// 支付方式
|
|
|
const payType = ref(1);//支付类型 1：个人支付 2：对公支付
|
|
|
-const payWay = ref(1);//支付方式 1：支付宝支付 2：对公支付
|
|
|
// 协议
|
|
|
const agreement = ref(false);//是否同意协议
|
|
|
// 付款凭证
|
|
|
const images = ref([]);//付款凭证
|
|
|
+// 加载状态
|
|
|
+const loading = ref(false);//是否加载中
|
|
|
+
|
|
|
+//支付信息
|
|
|
+const orderId = ref('');//订单id
|
|
|
+const message_recharge = ref('');//充值提示信息
|
|
|
+const orderInfo = reactive({
|
|
|
+ payMethod: 'alipay',////alipay,wechat_pay,union_pay,paypal,bank_transfer,MI,BMI
|
|
|
+ orderType: 'bm_recharge',////m_recharge,bm_recharge,workflow_purchase,course_purchase,member_recharge,mi_mall,exchange_mi,exchange_bmi
|
|
|
+ productId:'',
|
|
|
+ orderNum:0,
|
|
|
+ orderAmt:0,//输入的金额
|
|
|
+})
|
|
|
+const pageRedirectionData = ref('');//支付二维码
|
|
|
+
|
|
|
+
|
|
|
+//关闭页面时清除定时器
|
|
|
+// 关闭页面时清除定时器
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ stopPolling();
|
|
|
+});
|
|
|
|
|
|
|
|
|
|
|
|
@@ -174,13 +252,134 @@ const payNowFn = () => {
|
|
|
DGTMessage.warning('请先同意协议')
|
|
|
return
|
|
|
}
|
|
|
- // 调用支付接口
|
|
|
- DGTMessage.success('支付成功')
|
|
|
+ loading.value = true;
|
|
|
+ createOrder(orderInfo).then(res => {
|
|
|
+ if(res.code === 200){
|
|
|
+ orderId.value = res.data?.orderId || '';
|
|
|
+ const payData = res.data?.payData || {};
|
|
|
+ // DGTMessage.success('支付成功')
|
|
|
+ //回退
|
|
|
+ // router.back()
|
|
|
+ switch(orderInfo.payMethod){
|
|
|
+ case 'alipay':
|
|
|
+ pageRedirectionData.value = payData.pageRedirectionData || '';
|
|
|
+ setTimeout
|
|
|
+ (() => {
|
|
|
+ loading.value = false;
|
|
|
+ }, 1000);
|
|
|
+ break;
|
|
|
+ case 'wechat_pay':
|
|
|
+ qrcode.toDataURL(payData.codeUrl, (err, url) => {
|
|
|
+ if (err) {
|
|
|
+ console.error(err)
|
|
|
+ } else {
|
|
|
+ pageRedirectionData.value = url
|
|
|
+ }
|
|
|
+ })
|
|
|
+ loading.value = false;
|
|
|
+ break;
|
|
|
+ case 'union_pay':
|
|
|
+ pageRedirectionData.value = payData || '';
|
|
|
+ loading.value = false;
|
|
|
+ break;
|
|
|
+ case 'paypal':
|
|
|
+ pageRedirectionData.value = payData.body || '';
|
|
|
+ nextTick(() => {
|
|
|
+ pay_paypal();
|
|
|
+ })
|
|
|
+ break;
|
|
|
+ case 'bank_transfer':
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ startPolling();
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ loading.value = false;
|
|
|
+ })
|
|
|
//回退
|
|
|
- router.back()
|
|
|
+ // router.back()
|
|
|
};
|
|
|
|
|
|
|
|
|
+// 支付状态轮询相关
|
|
|
+const pollingTimer = ref(null)
|
|
|
+const isPolling = ref(false)
|
|
|
+const maxPollingAttempts = 30 // 最大轮询次数
|
|
|
+const pollingAttempts = ref(0)
|
|
|
+const pollingInterval = 3000
|
|
|
+
|
|
|
+// 启动轮询
|
|
|
+const startPolling = () => {
|
|
|
+ if (isPolling.value) return
|
|
|
+ console.log('启动轮询', orderId.value)
|
|
|
+ isPolling.value = true
|
|
|
+ pollingAttempts.value = 0
|
|
|
+ pollingTimer.value = setInterval(() => {
|
|
|
+ payResult({id:orderId.value}).then((res) => {
|
|
|
+ if (res.code == 200 && res.data) {
|
|
|
+ DGTMessage.success('支付成功！')
|
|
|
+ stopPolling()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, pollingInterval)
|
|
|
+}
|
|
|
+
|
|
|
+// 停止轮询
|
|
|
+const stopPolling = () => {
|
|
|
+ if (pollingTimer.value) {
|
|
|
+ clearInterval(pollingTimer.value)
|
|
|
+ pollingTimer.value = null
|
|
|
+ }
|
|
|
+ isPolling.value = false
|
|
|
+}
|
|
|
+
|
|
|
+const pay_paypal = () => {
|
|
|
+ //清除上次支付按钮
|
|
|
+ document.getElementById('paypal-button-container').innerHTML = '';
|
|
|
+ loading.value = false;
|
|
|
+ paypal.Buttons({
|
|
|
+ createOrder: (data, actions) => {
|
|
|
+ return "06S82458P0047241R"
|
|
|
+ },
|
|
|
+ onApprove: (data, actions) => {
|
|
|
+ return actions.order.capture().then((details) => {
|
|
|
+ DGTMessage.success('支付成功！')
|
|
|
+ stopPolling()
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }).render('#paypal-button-container');
|
|
|
+}
|
|
|
+
|
|
|
+// 计算汇率
|
|
|
+const handleOrderAmtChange = () => {
|
|
|
+ if(orderInfo.orderAmt){
|
|
|
+ calRate({
|
|
|
+ orderType: orderInfo.orderType,
|
|
|
+ orderNum: orderInfo.orderAmt,
|
|
|
+ }).then(res => {
|
|
|
+ if(res.code === 200){
|
|
|
+ orderInfo.orderNum = res.data?.targetAmount || 0;
|
|
|
+ message_recharge.value = res.data?.message || 0;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ orderInfo.orderNum = 0;
|
|
|
+ message_recharge.value = '';
|
|
|
+ }
|
|
|
+};
|
|
|
+// 查询汇率01-对公账户 02-提现 03-系统货币 04-米币设置
|
|
|
+const BusinessAccount = ref([]);
|
|
|
+const payConfigDearchFn = () => {
|
|
|
+ payConfigDearch({
|
|
|
+ id: "01",//01-对公账户 02-提现 03-系统货币 04-米币设置
|
|
|
+ }).then(res => {
|
|
|
+ if(res.code === 200){
|
|
|
+ BusinessAccount.value = res.data || [];
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
zhangningning