xiangyuan-app/src/pages/home/village/bless/recharge.vue

<template>
  <CommonTopBanner 
    title="充值乡源果"
    showNav
  >
    <FlexCol gap="gap.lg" padding="padding.md">
      <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 v-for="item in listLoader.content.value" direction="row" justify="space-between" align="center" gap="gap.md">
          <FlexCol width="74%">
            <Text :text="item.name" fontConfig="lightImportantTitle" :fontSize="42" />
            <Text :text="`+ ${item.addFruit} 乡源果`" fontConfig="lightGoldTitle" :fontSize="30" />
          </FlexCol>
          <FlexRow align="center" gap="gap.lg">
            <Text :text="`￥${item.price}`" fontConfig="lightGoldTitle" :fontSize="42" />
            <FrameButton primary text="选择" @click="handlePay(item.id)" />
          </FlexRow>
        </BoxMid>
      </FlexCol>
    </FlexCol>
  </CommonTopBanner>
</template>

<script setup lang="ts">
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { useRequireLogin } from '@/common/composeabe/RequireLogin';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { toast } from '@/components/dialog/CommonRoot';
import { backAndCallOnPageBack, navTo } 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 Image from '@/components/basic/Image.vue';
import TreeApi from '@/api/light/TreeApi';

const { requireLoginAsync } = useRequireLogin();
const { querys } = useLoadQuerys({
  villageId: 0,
});

const listLoader = useSimpleDataLoader(async () => {
  return (await TreeApi.getFruitDepositList({ page: 1, pageSize: 30 })).list;
});

async function handlePay(id: number) {
  if (!requireLoginAsync('登录后为村社升级，做出你的贡献哦'))
    return;
  try {
    uni.showLoading({ title: '创建订单中...' });
    const payInfo = await TreeApi.placeOrder(
      id,
      querys.value.villageId,
    );
    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: () => {
          toast('支付成功');
          setTimeout(() => 
            backAndCallOnPageBack('paySuccessAndRefresh', {})
          , 1000);
        },
        fail: (err) => {
          showError(`支付失败: ${err.errMsg}`);
        },
      });
    }
  } catch (e) {
    showError(e);
  } finally {
    uni.hideLoading();
  }
}
</script>