ali_ai_learn_web/src/pages/order/orderConfirm.vue

<template>
  <div class="orderConfirm container-height">
    <!-- <Breadcrumb /> -->
    <el-button class="mt20 mb20" @click="router.back()">
      <el-icon><ArrowLeft /></el-icon>
      <span>{{$t('common.back')}}</span>
    </el-button>
    <div class="gap10">
      <div class="font_size24 bold">{{$t('route.recharge')}}</div>
      <!-- <span class="font_size16 color_price">{{$t('common.orderConfirmTip')}}</span> -->
    </div>
    <!-- 订单信息 -->
    <div class="border_radius_8 padding16 bg_color_fff box_shadow_card mt20">
      <div class="gap10">
        <div class="line_vertical"></div>
        <div class="font_size20 bold">{{$t('common.orderInfo')}}</div>
      </div>
      <div class="border border_radius_8 mt10">
        <div class="flex-between order_table padding16">
          <div class="flex_1 font_size18">{{$t('common.orderInfo')}}</div>
          <div class="flex_1 font_size18">{{$t('common.amount')}}（{{$t('common.RMB')}}）</div>
          <div class="flex_1 font_size18">
            {{$t('common.quantity')}}
            ({{orderInfo.orderType === 'bm_recharge' ? $t('common.baomibi') : $t('common.mibi')}})
          </div>
        </div>
        <div>
          <div class="flex-between padding16">
            <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 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 font_size18 color_price">
             {{orderInfo.orderNum}}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="border_radius_8 padding16 bg_color_fff box_shadow_card mt20">
      <div class="gap10">
        <div class="line_vertical"></div>
        <div class="font_size20 bold">{{$t('common.payWay')}}</div>
      </div>
      <div class="gap10 mt20">
        <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;orderInfo.payMethod = 'bank_transfer';pageRedirectionData='';payConfigDearchFn();">
          <div class="checkType" :class="{'active': payType === 2}"></div>
          <div class="font_size16">对公支付</div>
        </div>
      </div>
      <!-- 个人支付 -->
      <div class="mt20" v-if="payType === 1">
        <div class="gap10">
          <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" 
          :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" 
          :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" 
          :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="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 class="mt20" v-if="payType === 2">
        <div class="flex-between order_table padding16">
          <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>
          <div class="mt20">
            <FileUploader
                ref="fileUploader"
                accept="image/*"
                :multiple="true"
                :auto-upload="true"
                list-type="picture-card"
                :data="{ directory: 'workflow' }"
                buttonText=""
                v-model="images"
                tip=""
              />
          </div>
        </div>
      </div>
      <div class="mt20 flex-center-between" style="width: 300px;">
        <div class="font_size18">总价：</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">￥{{orderInfo.orderAmt}}</div>
      </div>
      <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>
        我已阅读并同意 <span class="color_theme bold">《AI学习论坛服务协议》</span> 和 <span class="color_theme bold">《AI学习论坛知识产权保护协议》</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import zhifubaoIcon from '@/assets/imgs/pay/zhifubao.png'
import weixinIcon from '@/assets/imgs/pay/weixin.png'
import yinlianIcon from '@/assets/imgs/pay/yinlian.png'
import paypalIcon from '@/assets/imgs/pay/paypal.png'
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 { reactive, ref, onBeforeUnmount, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import DGTMessage from '@/utils/message'
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore()
//获取参数
const route = useRoute()
const router = useRouter()
const query = route.query;
const id = ref(query.id || '');

//
// 支付方式
const payType = 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();
});



// 立即支付
const payNowFn = () => {
  if(!agreement.value){
    DGTMessage.warning('请先同意协议')
    return
  }
  if(payType.value == 1 && orderInfo.orderAmt <= 0){
    DGTMessage.warning('请输入金额')
    return
  }
  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()
};


// 支付状态轮询相关
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('支付成功！');
        appStore.USERINFO();
        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">
.orderConfirm{
  .order_table{
    background-color: #F5F7FA ;
  }
  .payway{
    padding: 20px 16px;
    background-color: #F5F7FA ;
    border-radius: 8px;
    cursor: pointer;
    &.active{
      background-color: #EAF0FF;
      .checkType{
        border:4px solid $primary-color;
      }
    }
  }
  .zhifu{
    padding: 10px 20px;
    color: #ffffff;
    border-radius: 10px;
  }
}
</style>