xiangyuan-app/src/pages/home/village/upgrade/select.vue

<template>
  <CommonTopBanner 
    title="升级村社"
    showNav
  >
    <FlexCol gap="gap.lg" padding="padding.md">
      
      <FlexRow justify="flex-end">
        <Button icon="https://xy.wenlvti.net/app_static/images/home/IconOrder.png" text="我的订单" @click="handleMyOrders()" />
      </FlexRow>
      <FlexRow center>
        <Image src="https://xy.wenlvti.net/app_static/images/village/IconBlessing.png" :width="100" :height="100" />
      </FlexRow>
      <FlexCol padding="padding.md" center>
        <Text 
          text="感谢您选择升级村社，请选择您要付款方式" 
          fontConfig="contentText" :fontSize="30" textAlign="center" 
        />
      </FlexCol>

      <FlexCol gap="gap.md">
        <BoxMid
          direction="row"
          justify="space-between"
          align="center"
          gap="gap.md"
        >
          <FlexCol width="74%">
            <Text text="在线支付" fontConfig="lightImportantTitle" :fontSize="42" />
            <Text text="推荐使用微信线支付方式，方便快捷，立即生效" fontConfig="lightGoldTitle" :fontSize="30" />
          </FlexCol>
          <FrameButton primary text="选择" @click="handleDirectPay" />
        </BoxMid>
        <BoxMid
          direction="row"
          justify="space-between"
          align="center"
          gap="gap.md"
        >
          <FlexCol width="74%">
            <Text text="对公打款" fontConfig="lightImportantTitle" :fontSize="42" />
            <Text text="对公打款，需要提供对公账户信息。适用于村社政府做出贡献" fontConfig="lightGoldTitle" :fontSize="30" />
          </FlexCol>
          <FrameButton primary text="选择" @click="handlePublicPay" />
        </BoxMid>
      </FlexCol>
    </FlexCol>

    <DirectPayDialog
      ref="directPayDialog"
      @success="handlePaySuccess"
    />
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useRequireLogin } from '@/common/composeabe/RequireLogin';
import { ref } from 'vue';
import { navTo, backAndCallOnPageBack } from '@/components/utils/PageAction';
import { showError } from '@/common/composeabe/ErrorDisplay';
import BoxMid from '@/common/components/box/BoxMid.vue';
import CommonTopBanner from '@/common/components/CommonTopBanner.vue';
import FrameButton from '@/common/components/FrameButton.vue';
import Text from '@/components/basic/Text.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Button from '@/components/basic/Button.vue';
import Image from '@/components/basic/Image.vue';
import DirectPayDialog from './dialogs/DirectPayDialog.vue';
import TreeApi from '@/api/light/TreeApi';
import Touchable from '@/components/feedback/Touchable.vue';

const { requireLoginAsync } = useRequireLogin();

const directPayDialog = ref<InstanceType<typeof DirectPayDialog>>();

function handlePaySuccess() {
  setTimeout(() => {
    backAndCallOnPageBack('paySuccessAndRefresh', {});
  }, 100);
}

const { querys } = useLoadQuerys({
  villageId: 0,
  upgradePackageId: 0,
}, () => {

});

async function handleMyOrders() {
  if (!await requireLoginAsync('登录后查看我的升级订单哦'))
    return;
  navTo('/pages/home/village/upgrade/my-orders', {
    villageId: querys.value.villageId,
  });
}

async function handleDirectPay() {
  if (!requireLoginAsync('登录后为村社升级，做出你的贡献哦'))
    return;
  try {
    uni.showLoading({ title: '创建订单中...' });
    const result = await TreeApi.createUpgradeOrder(
      querys.value.villageId,
      querys.value.upgradePackageId,
      1,
    );
    directPayDialog.value?.open(result.order.id);
  } catch (e) {
    showError(e);
  } finally {
    uni.hideLoading();
  }
}

function handlePublicPay() {
  if (!requireLoginAsync('登录后为村社升级，做出你的贡献哦'))
    return;
  navTo('/pages/home/village/upgrade/pay-public', {
    villageId: querys.value.villageId,
    upgradePackageId: querys.value.upgradePackageId,
  });
}

defineExpose({
  onPageBack(name: string, data: any) {
    if (name === 'handlePaySuccess') {
      handlePaySuccess();
    }
  },
});
</script>