visualization-design/src/views/components/Pay.vue

<template>
  <div class="wechat-pay">
    <div class="order">
      <div>
        <div>{{$t('订单编号：')}}{{ props.order.id }}</div>
        <div>{{$t('订单类型：')}}{{ props.order.goods.type }}</div>
      </div>
      <div class="flex items-center">
        {{$t('应付金额')}}：
        <span style="font-size: 20px; color: #f5222d">
          ￥{{ props.order.amount }}</span
        >
      </div>
    </div>
    <div class="code-panel">
      <div>
        <t-radio
          :checked="payType === 0"
          :disabled="user.amount < props.order.amount"
          @click="
            payType = 0;
            hideQrPay();
          ">
          <h5>{{$t('余额支付')}}</h5>
        </t-radio>
        <div class="pl-3 mt-3 ml-3">
          {{$t('当前余额')}}：<span class="bland">￥ {{ user.amount }} 元</span>
        </div>
      </div>

      <div class="mt-5">
        <t-radio
          :checked="payType === 1"
          @click="
            payType = 1;
            showQrPay();
          ">
          <h5>{{$t('扫码支付')}}</h5>
        </t-radio>
        <div class="flex pl-3 ml-3" v-show="payType === 1">
          <div class="code">
            <img class="qrcode" :src="payQRCode.wepay" />
            <div class="icon">
              <img src="/img/wepay.png" />
            </div>
          </div>
          <div class="code">
            <div class="qrcode">
              <iframe
                :src="payQRCode.alipay"
                frameborder="no"
                scrolling="no"
                allowtransparency="true"
              />
            </div>
            <div class="icon">
              <img src="/img/alipay.png" />
            </div>
          </div>
        </div>
      </div>

      <div class="mt-5 bland">【{{$t('注意')}}】{{$t('不支持退款')}}</div>
    </div>
    <div style="padding: 20px"></div>
    <div class="buttons">
      <t-button v-if="payType === 0" @click="payByAmount" :loading="payLoading">
        {{$t('确认支付')}}
      </t-button>
      <t-button v-if="payType === 1" @click="getPayResult"> {{$t('支付完成')}} </t-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeMount, onUnmounted, ref } from 'vue';
import axios from 'axios';
import QRCode from 'qrcode';
import { useUser } from '@/services/user';

const props = defineProps<{
  order: any;
  alipayUrl: string;
  codeUrl: string;
}>();

const emit = defineEmits(['success']);

const { user, getUser } = useUser();

const payType = ref(0);

const payQRCode = ref<any>({});

const payLoading = ref(false);

let timer: any;

onBeforeMount(async () => {
  if (user.amount >= props.order.amount) {
    payType.value = 0;
  } else {
    payType.value = 1;
  }
  payQRCode.value.alipay = props.alipayUrl;

  payQRCode.value.wepay = await QRCode.toDataURL(props.codeUrl, {
    margin: 0,
  });
  if (payType.value === 1) {
    showQrPay();
  }
});

const hideQrPay = () => {
  clearInterval(timer);
};

const showQrPay = async () => {
  clearInterval(timer);
  timer = setInterval(async () => {
    const success = await getPayResult();
    if (success) {
      clearInterval(timer);
    }
  }, 5000);
};

onUnmounted(() => {
  clearInterval(timer);
});

const getPayResult = async () => {
  const result: { state: number } = await axios.post('/api/order/pay/state', {
    id: props.order.id || props.order._id,
  });
  if (result && result.state === 8) {
    emit('success', true);
    return true;
  }
};

const payByAmount = async () => {
  payLoading.value = true;
  const result: any = await axios.post('/api/order/pay/by/amount', {
    id: props.order.id,
  });
  payLoading.value = false;
  if (result) {
    emit('success', true);
  }
};
</script>

<style lang="postcss" scoped>
.wechat-pay {
  .order {
    padding: 10px 0;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* .pay-type {
    background-color: #f7f8fa;
  }

  .wepay {
    color: var(--color-title);
    margin-top: 16px;
  }

  .wepay-qrcode {
    width: 150px;
    margin-top: 24px;
  }
  .wepay-text {
    padding: 10px 40px;
    line-height: 20px;
    color: #ffffff;
    font-size: 13px;
  } */
  .code-panel {
    padding: 30px 40px;
    color: #171b27;
    background: #f7f8fa;
    margin-top: 8px;

    .flex > div {
      flex: 1;
      .icon {
        width: 100px;
        text-align: center;
        & > img {
          height: 28px;
          margin: 8px auto;
        }
      }
    }

    .code {
      height: 150px;
    }
  }

  .qrcode {
    width: 100px;
    height: 100px;
    margin-top: 16px;
  }

  iframe {
    width: 160px;
    height: 160px;
    /* margin-top: 16px; */
    transform: scale(0.625);
    transform-origin: 0 0;
  }
  .buttons {
    position: absolute;
    bottom: 32px;
    right: 32px;
  }
  .pl-3{
    padding-left: 0.75rem;
  } 
  .mt-3{
    margin-top: 0.75rem;
  } 
  .ml-3{
    margin-left: 0.75rem;
  }
  .mt-5{
    margin-top: 1.25rem;
  }
  :deep(.t-radio__label){
    color: #171b27;
  }
  :deep(.t-radio__input){
    background-color: #fff0 !important;
  }
  
}
</style>