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

<template>
  <CommonDialog v-model:show="show" title="升级付款" :showDivider="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 justify="space-between">
            <Text text="微信支付" fontConfig="lightImportantTitle" :fontSize="42" />
            <CheckBox :modelValue="payMethod == 'wechat'" @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 { useAliOssUploadCo } from "@/common/components/upload/AliOssUploadCo";
import { showError } from "@/common/composeabe/ErrorDisplay";
import type { IDynamicFormOptions, IDynamicFormRef } from "@/components/dynamic";
import type { UploaderFieldProps } from "@/components/form/UploaderField.vue";
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 DynamicForm from "@/components/dynamic/DynamicForm.vue";
import Result from "@/components/feedback/Result.vue";
import ProvideVar from "@/components/theme/ProvideVar.vue";
import BoxMid from "@/common/components/box/BoxMid.vue";
import TreeApi from "@/api/light/TreeApi";
import CheckBox from "@/components/form/CheckBox.vue";

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

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

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

function handleSubmitPay() {
  if (!orderId.value) {
    showError('缺少必要参数');
    return;
  } 
  switch (payMethod.value) {
    case 'wechat':
      // 微信支付
      break;
    default:
      break;
  }
}
function handleFinish() {
  emit('success');
}

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