xiangyuan-app/src/pages/home/village/upgrade/dialogs/DirectPayDialog.vue

<template>
  <CommonDialog v-model:show="show" title="升级付款" :showDivider="false" :showCloseButton="false">
    <FlexCol gap="gap.lg" padding="padding.md" width="600rpx">
      <template v-if="uploadStep === 'form'">
        <Text textAlign="center" text="选择支付方式" fontConfig="contentSpeicalText" />
        <Height :height="10" />
        <FlexCol gap="gap.md">
          <BoxMid direction="row" justify="space-between">
            <FlexRow align="center">
              <Icon icon="wechat" size="40" />
              <Text text="微信支付" fontConfig="lightImportantTitle" :fontSize="42" />
            </FlexRow>
            <CheckBox :modelValue="payMethod == 'wechat'" shape="round" @update="payMethod = 'wechat'" />
          </BoxMid>
        </FlexCol>
        <FlexRow justify="space-around" gap="gap.md">
          <FrameButton text="取消" @click="show = false" width="220rpx" />
          <FrameButton primary text="支付" @click="handleSubmitPay" width="220rpx" />
        </FlexRow>
      </template>
      <template v-else-if="uploadStep === 'finished'">
        <Result
          status="success"
          title="感谢您的贡献！"
          description="村社升级已经生效啦"
        />
        <FlexRow justify="space-around" gap="gap.md">
          <FrameButton primary text="完成" @click="handleFinish" width="220rpx" />
        </FlexRow>
      </template>
    </FlexCol>
  </CommonDialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { toast } from "@/components/dialog/CommonRoot";
import { showError } from "@/common/composeabe/ErrorDisplay";
import { useAuthStore } from "@/store/auth";
import CommonDialog from "@/common/components/CommonDialog.vue";
import FrameButton from "@/common/components/FrameButton.vue";
import FlexCol from "@/components/layout/FlexCol.vue";
import FlexRow from "@/components/layout/FlexRow.vue";
import Height from "@/components/layout/space/Height.vue";
import Text from "@/components/basic/Text.vue";
import Result from "@/components/feedback/Result.vue";
import BoxMid from "@/common/components/box/BoxMid.vue";
import TreeApi from "@/api/light/TreeApi";
import CheckBox from "@/components/form/CheckBox.vue";
import type { UpgradeOrderConfirm } from "@/api/light/TreeApi";
import Icon from "@/components/basic/Icon.vue";

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

const show = ref(false);
const uploadStep = ref<'form' | 'finished'>('form');

const payMethod = ref('wechat');
const orderId = ref<number>(0);

async function handleSubmitPay() {
  if (!orderId.value) {
    showError('缺少必要参数');
    return;
  } 
  switch (payMethod.value) {
    case 'wechat':
      try {
        const payInfo: UpgradeOrderConfirm = await TreeApi.upgradePay(orderId.value);
        if (payInfo && payInfo.pay) {
          uni.requestPayment({
            provider: 'wxpay',
            appId: payInfo.pay.appId,
            timeStamp: payInfo.pay.timeStamp,
            nonceStr: payInfo.pay.nonceStr,
            package: payInfo.pay.package,
            signType: payInfo.pay.signType,
            paySign: payInfo.pay.paySign,
            success: () => {
              uploadStep.value = 'finished';
            },
            fail: (err) => {
              toast(`支付失败: ${err.errMsg}`);
            },
          });
        }
      } catch (err) {
        showError('支付接口调用失败');
      }
      break;
    default:
      throw new Error('未知支付方式');
  }
}
function handleFinish() {
  emit('success');
  show.value = false;
}

defineExpose({
  open(id: number) {
    orderId.value = id;
    uploadStep.value = 'form';
    show.value = true;
  },
  openSuccess() {
    show.value = true;
    uploadStep.value = 'finished';
  },
});
</script>