|
|
@@ -0,0 +1,136 @@
|
|
|
+
|
|
|
+
|
|
|
+<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(1)" />
|
|
|
+ </BoxMid>
|
|
|
+ <BoxMid
|
|
|
+ direction="row"
|
|
|
+ justify="space-between"
|
|
|
+ align="center"
|
|
|
+ gap="gap.md"
|
|
|
+ >
|
|
|
+ <FlexCol width="74%">
|
|
|
+ <Text text="测试" fontConfig="lightImportantTitle" :fontSize="42" />
|
|
|
+ <Text text="¥ 0.01" fontConfig="lightGoldTitle" :fontSize="30" />
|
|
|
+ </FlexCol>
|
|
|
+ <FrameButton primary text="选择" @click="handleDirectPay(2)" />
|
|
|
+ </BoxMid>
|
|
|
+ </FlexCol>
|
|
|
+ </FlexCol>
|
|
|
+ <UpgradeManagementSuccessDialog
|
|
|
+ ref="upgradeManagementSuccessDialog"
|
|
|
+ @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 OfficialApi from '@/api/light/OfficialApi';
|
|
|
+import UpgradeManagementSuccessDialog from './dialogs/UpgradeManagementSuccess.vue';
|
|
|
+
|
|
|
+const upgradeManagementSuccessDialog = ref<InstanceType<typeof UpgradeManagementSuccessDialog>>();
|
|
|
+
|
|
|
+const { requireLoginAsync } = useRequireLogin();
|
|
|
+
|
|
|
+function handlePaySuccess() {
|
|
|
+ setTimeout(() => {
|
|
|
+ backAndCallOnPageBack('paySuccessAndRefresh', {});
|
|
|
+ }, 100);
|
|
|
+}
|
|
|
+
|
|
|
+const { querys } = useLoadQuerys({
|
|
|
+ villageId: 0,
|
|
|
+}, () => {
|
|
|
+
|
|
|
+});
|
|
|
+
|
|
|
+async function handleMyOrders() {
|
|
|
+ if (!await requireLoginAsync('登录后查看我的升级订单哦'))
|
|
|
+ return;
|
|
|
+ navTo('/pages/home/village/upgrade/my-orders', {
|
|
|
+ villageId: querys.value.villageId,
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+async function handleDirectPay(levelType: number) {
|
|
|
+ if (!requireLoginAsync('登录后为村社升级,做出你的贡献哦'))
|
|
|
+ return;
|
|
|
+ try {
|
|
|
+ uni.showLoading({ title: '创建订单中...' });
|
|
|
+ const { order: orderInfo, pay: payInfo } = await OfficialApi.upgradeStaff(
|
|
|
+ querys.value.villageId,
|
|
|
+ levelType,
|
|
|
+ );
|
|
|
+ if (payInfo) {
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: 'wxpay',
|
|
|
+ appId: payInfo.appId,
|
|
|
+ timeStamp: payInfo.timeStamp,
|
|
|
+ nonceStr: payInfo.nonceStr,
|
|
|
+ package: payInfo.package,
|
|
|
+ signType: payInfo.signType,
|
|
|
+ paySign: payInfo.paySign,
|
|
|
+ success: () => {
|
|
|
+ upgradeManagementSuccessDialog.value?.open();
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ showError(`支付失败: ${err.errMsg}`);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ showError(e);
|
|
|
+ } finally {
|
|
|
+ uni.hideLoading();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+defineExpose({
|
|
|
+ onPageBack(name: string, data: any) {
|
|
|
+ if (name === 'handlePaySuccess') {
|
|
|
+ handlePaySuccess();
|
|
|
+ }
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|