yshop-pro-uniapp/components/PayPopup/index.vue

<!--
    @name: 付款弹窗
    @author: kahu
    @date: 2023-11-08 10:53
    @description：index
    @update: 2023-11-08 10:53
-->
<script setup>
import Popup from '@/components/Popup/index.vue';
import { ref, unref } from "vue";
import { payRows } from "./index.data";
import UvRadioGroup from "@/uni_modules/uv-radio/components/uv-radio-group/uv-radio-group.vue";
import UvRadio from "@/uni_modules/uv-radio/components/uv-radio/uv-radio.vue";
import { doPayment, PayType } from "@/utils/paymentUtils";
import { orderInfo as orderInfoRequest } from "@/api/order";
import { useInterface } from "@/hooks/useInterface";
import { useRouter } from "@/hooks/useRouter";
import { useMainStore } from "@/store/modules/useMainStore";

const {toast} = useInterface()
const {push} = useRouter()
const emits = defineEmits(['confirm', 'close']);
const mainStore = useMainStore()
const popupRef = ref()

async function show(orderId) {
  await doGetOrderDetail(orderId)
  unref(popupRef).show()
}

function close() {
  emits('close')
}

defineExpose({show})

const payType = ref(PayType["0"]) // 支付方式

const orderInfo = ref({}) // 订单信息
const zeroPrice = ref(false) // 本单金额是否为0
async function doGetOrderDetail(orderId) {
  orderInfo.value = await orderInfoRequest({key: orderId});
  if (orderInfo.value.totalPrice <= 0) {
    payType.value = PayType["1"]
    zeroPrice.value = true
    toast({title: '支付金额为0.00，自动选择余额支付', icon: 'none', duration: 3000})
  } else {
    zeroPrice.value = false
  }
}

const subLoading = ref(false)

async function handleSubmit() {
  try {
    subLoading.value = true
    await doPayment({type: payType.value, payInfo: orderInfo.value, isGroup: orderInfo.value.campaignType === 1})
    subLoading.value = false
    emits('confirm')
    close()
  } catch (e) {
    console.error(e)
    push({url: '/pages/payStatus/index'}, {data: {type: 1}})
    toast({title: '支付失败了'})
    close()
  }
}

</script>

<template>
  <Popup
      ref="popupRef"
      title="支付"
      @close="close"
  >
    <view class="pay-container">
      <uv-radio-group
          placement="column"
          iconPlacement="right"
          v-model="payType"
          class="pay-box__inner flex flex-ai__center flex-jc__center flex-wrap"
          shape="circle"
          activeColor="#ec6e47"
      >
        <template
            v-for="pay in payRows"
            :key="pay.type"
        >
          <uv-radio
              :name="pay.type"
              :disabled="pay.disabled|| (pay.type===PayType['0']&&zeroPrice) || (mainStore.user.nowMoney===0 &&!zeroPrice&&pay.type===PayType['1'])"
          >
            <view class="pay-row flex flex-ai__center">
              <image
                  class="icon"
                  :src="pay.icon"
              />
              <view class="info">
                <view
                    class="label flex flex-nowrap flex-ai__end"
                    style="white-space: nowrap">
                  {{ pay.label }}
                  <span
                      v-if="pay.type===PayType['1']"
                      style="font-size: 16rpx;white-space: nowrap;">
                    （{{ mainStore.user.nowMoney }}元）
                    </span>
                </view>
                <view>
                  {{ pay.eLabel }}
                </view>
              </view>
            </view>
          </uv-radio>
        </template>
      </uv-radio-group>
      <view
          class="animation-button sub-button"
          :class="{active:subLoading}"
          @click="handleSubmit"
      >
        立即支付
      </view>
    </view>
  </Popup>
</template>

<style
    scoped
    lang="scss"
>
.pay-container {
  @include usePadding(35, 0);
  width: 100%;

  .pay-row {

    @include usePadding(0, 20);
    font-size: 20rpx;
    color: $tips-color;
    border-bottom: 1rpx solid #e5e5e5;

    &:last-child {
      border-bottom: none;
    }

    .icon {
      width: 80rpx;
      height: 80rpx;
      margin-right: 30rpx;
    }

    .info {
      .label {
        font-size: 28rpx;
        color: #333;
      }
    }
  }

  :deep(.uv-radio) {
    width: 100%;
    transition: all .3s;

    &:active {
      scale: 1.1;
    }
  }

  .sub-button {
    $button-height: 80rpx;
    margin: 20rpx auto;
    height: $button-height;
    line-height: $button-height;
    border-radius: $button-height;
    text-align: center;
  }
}
</style>