From db9a1cb8638d0159e5bce586c0e6a0610bc2b625 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期五, 21 二月 2025 13:58:20 +0800
Subject: [PATCH] fix: 页面
---
apps/taro/src/subpackages/recharge/selectPayType/selectPayType.vue | 14 ++
apps/taro/src/components/Layout/PageLayout.vue | 21 +++
apps/taro/src/utils/setPageTitle/index.weapp.ts | 3
apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.vue | 17 +++
apps/taro/src/app.config.ts | 6 +
apps/taro/src/subpackages/recharge/selectPayType/selectPayType.config.ts | 3
apps/taro/src/utils/env.ts | 3
packages/components/assets/icon-free-phone.png | 0
apps/taro/src/utils/index.ts | 2
apps/taro/src/constants/router.ts | 2
packages/components/assets/icon-weixin-pay.png | 0
apps/taro/src/utils/setPageTitle/index.h5.ts | 12 ++
apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue | 9 +
packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue | 10 +
apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.config.ts | 0
packages/components/src/styles/components.scss | 69 +++++++++++++
packages/components/src/index.ts | 2
packages/components/src/views/SelectPayTypeView/SelectPayTypeView.vue | 25 +++++
packages/components/src/components/Dialog/ConfirmDialog.vue | 3
apps/taro/src/subpackages/recharge/selectPayType/InnerPage.vue | 13 ++
packages/components/assets/icon-alipay.png | 0
packages/components/src/views/RechargeResultView/RechargeResultView.vue | 28 +++++
22 files changed, 236 insertions(+), 6 deletions(-)
diff --git a/apps/taro/src/app.config.ts b/apps/taro/src/app.config.ts
index c55c549..2b836ec 100644
--- a/apps/taro/src/app.config.ts
+++ b/apps/taro/src/app.config.ts
@@ -53,7 +53,11 @@
},
{
root: 'subpackages/recharge',
- pages: ['phoneBillRecharge/phoneBillRecharge'],
+ pages: [
+ 'phoneBillRecharge/phoneBillRecharge',
+ 'selectPayType/selectPayType',
+ 'rechargeResult/rechargeResult',
+ ],
},
],
// preloadRule: {
diff --git a/apps/taro/src/components/Layout/PageLayout.vue b/apps/taro/src/components/Layout/PageLayout.vue
index 3a89eb7..9433d41 100644
--- a/apps/taro/src/components/Layout/PageLayout.vue
+++ b/apps/taro/src/components/Layout/PageLayout.vue
@@ -1,7 +1,7 @@
<template>
<Portal.Host>
<div :class="['page-layout-wrapper', { isWeb: isWeb }]" v-bind="$attrs">
- <slot v-if="showNavigationBar" name="navigationBar">
+ <slot v-if="_showNavigationBar" name="navigationBar">
<CommonNavigationBar v-bind="_commonNavigationBarProps" />
</slot>
@@ -45,7 +45,9 @@
import { useAuth } from '@/hooks';
import { Portal } from 'senin-mini/components';
import { usePickProps } from 'senin-mini/hooks';
-import { isWeb } from '@/utils/env';
+import { isWeb, isInAlipay, isInWeChat } from '@/utils/env';
+//@ts-ignore
+import { setPageTitle } from '@/utils';
defineOptions({
name: 'PageLayout',
@@ -72,7 +74,20 @@
},
});
+setPageTitle(props.title);
+
const _commonNavigationBarProps = usePickProps(props, commonNavigationBarProps);
+
+const _showNavigationBar = computed(() => {
+ if (props.showNavigationBar) {
+ if (isWeb) {
+ return !isInAlipay && !isInWeChat;
+ }
+ return true;
+ } else {
+ return false;
+ }
+});
const { isAuth } = useAuth({
needAuth: props.needAuth,
@@ -93,7 +108,7 @@
let pageHeight = pageHeightWithTabBar.value
? systemStore.pageHeightWithTab
: systemStore.pageHeight;
- pageHeight = pageHeight + (props.showNavigationBar ? 0 : navigationBarHeight.value);
+ pageHeight = pageHeight + (_showNavigationBar.value ? 0 : navigationBarHeight.value);
return pageHeight + 'px';
});
</script>
diff --git a/apps/taro/src/constants/router.ts b/apps/taro/src/constants/router.ts
index 95b1024..239feab 100644
--- a/apps/taro/src/constants/router.ts
+++ b/apps/taro/src/constants/router.ts
@@ -9,4 +9,6 @@
mine = '/pages/mine/index',
phoneBillRecharge = '/subpackages/recharge/phoneBillRecharge/phoneBillRecharge',
+ selectPayType = '/subpackages/recharge/selectPayType/selectPayType',
+ rechargeResult = '/subpackages/recharge/rechargeResult/rechargeResult',
}
diff --git a/apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue b/apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue
index f77691f..97bebf1 100644
--- a/apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue
+++ b/apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue
@@ -1,13 +1,20 @@
<template>
<ContentScrollView :paddingH="false">
- <PhoneBillRecharge />
+ <PhoneBillRecharge @goPay="goPay" />
</ContentScrollView>
</template>
<script setup lang="ts">
import { PhoneBillRecharge } from '@life-payment/components';
+import Taro from '@tarojs/taro';
defineOptions({
name: 'InnerPage',
});
+
+function goPay() {
+ Taro.navigateTo({
+ url: RouterPath.selectPayType,
+ });
+}
</script>
diff --git a/apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.config.ts b/apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.config.ts
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.config.ts
diff --git a/apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.vue b/apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.vue
new file mode 100644
index 0000000..69046ef
--- /dev/null
+++ b/apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.vue
@@ -0,0 +1,17 @@
+<template>
+ <PageLayout title="鍏呭�兼垚鍔�" class="rechargeResult-page-wrapper" hasBorder :need-auth="false">
+ <ContentScrollView>
+ <RechargeResultView style="margin-top: 40px" @go-back-home="goHome()" />
+ </ContentScrollView>
+ </PageLayout>
+</template>
+
+<script setup lang="ts">
+import { PageLayout } from '@/components';
+import { goHome } from '@/utils';
+import { RechargeResultView } from '@life-payment/components';
+
+defineOptions({
+ name: 'rechargeResult',
+});
+</script>
diff --git a/apps/taro/src/subpackages/recharge/selectPayType/InnerPage.vue b/apps/taro/src/subpackages/recharge/selectPayType/InnerPage.vue
new file mode 100644
index 0000000..c5c7245
--- /dev/null
+++ b/apps/taro/src/subpackages/recharge/selectPayType/InnerPage.vue
@@ -0,0 +1,13 @@
+<template>
+ <ContentScrollView>
+ <SelectPayTypeView style="margin-top: 40px" />
+ </ContentScrollView>
+</template>
+
+<script setup lang="ts">
+import { SelectPayTypeView } from '@life-payment/components';
+
+defineOptions({
+ name: 'selectPayType',
+});
+</script>
diff --git a/apps/taro/src/subpackages/recharge/selectPayType/selectPayType.config.ts b/apps/taro/src/subpackages/recharge/selectPayType/selectPayType.config.ts
new file mode 100644
index 0000000..305fdb1
--- /dev/null
+++ b/apps/taro/src/subpackages/recharge/selectPayType/selectPayType.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+ disableScroll: true,
+});
diff --git a/apps/taro/src/subpackages/recharge/selectPayType/selectPayType.vue b/apps/taro/src/subpackages/recharge/selectPayType/selectPayType.vue
new file mode 100644
index 0000000..201fa1d
--- /dev/null
+++ b/apps/taro/src/subpackages/recharge/selectPayType/selectPayType.vue
@@ -0,0 +1,14 @@
+<template>
+ <PageLayout title="璇濊垂鍏呭��" class="selectPayType-page-wrapper" hasBorder :need-auth="false">
+ <InnerPage />
+ </PageLayout>
+</template>
+
+<script setup lang="ts">
+import { PageLayout } from '@/components';
+import InnerPage from './InnerPage.vue';
+
+defineOptions({
+ name: 'selectPayType',
+});
+</script>
diff --git a/apps/taro/src/utils/env.ts b/apps/taro/src/utils/env.ts
index 1f39f41..adcea3c 100644
--- a/apps/taro/src/utils/env.ts
+++ b/apps/taro/src/utils/env.ts
@@ -13,3 +13,6 @@
// H5銆佸皬绋嬪簭銆乤pp 鍧囪涓烘槸鎵嬫満绔骇鍝侊紝濡傛灉闇�瑕佺粺涓�鎵嬫満绔� UI 鏍峰紡锛屽彲浠ョ洿鎺ョ敤 isMobile 鎺у埗
export const isMobile = isH5 || isWeChat || isApp;
export const isWeb = isH5 || isPC;
+
+export const isInAlipay = /AlipayClient/i.test(navigator.userAgent);
+export const isInWeChat = /MicroMessenger/i.test(navigator.userAgent);
diff --git a/apps/taro/src/utils/index.ts b/apps/taro/src/utils/index.ts
index a06c11d..b376cea 100644
--- a/apps/taro/src/utils/index.ts
+++ b/apps/taro/src/utils/index.ts
@@ -3,3 +3,5 @@
export * from './common';
export * from './validator';
export * from './file';
+//@ts-ignore
+export * from './setPageTitle';
diff --git a/apps/taro/src/utils/setPageTitle/index.h5.ts b/apps/taro/src/utils/setPageTitle/index.h5.ts
new file mode 100644
index 0000000..54b6d1d
--- /dev/null
+++ b/apps/taro/src/utils/setPageTitle/index.h5.ts
@@ -0,0 +1,12 @@
+const title = '鐢熸椿缂磋垂';
+
+export function getPageTitle(pageTitle: string) {
+ if (pageTitle) {
+ return `${pageTitle} - ${title}`;
+ }
+ return `${title}`;
+}
+
+export function setPageTitle(pageTitle: string) {
+ document.title = getPageTitle(pageTitle);
+}
diff --git a/apps/taro/src/utils/setPageTitle/index.weapp.ts b/apps/taro/src/utils/setPageTitle/index.weapp.ts
new file mode 100644
index 0000000..0d04f02
--- /dev/null
+++ b/apps/taro/src/utils/setPageTitle/index.weapp.ts
@@ -0,0 +1,3 @@
+export function getPageTitle(pageTitle: string) {}
+
+export function setPageTitle(pageTitle: string) {}
diff --git a/packages/components/assets/icon-alipay.png b/packages/components/assets/icon-alipay.png
new file mode 100644
index 0000000..3d25ddf
--- /dev/null
+++ b/packages/components/assets/icon-alipay.png
Binary files differ
diff --git a/packages/components/assets/icon-free-phone.png b/packages/components/assets/icon-free-phone.png
new file mode 100644
index 0000000..b98d1f8
--- /dev/null
+++ b/packages/components/assets/icon-free-phone.png
Binary files differ
diff --git a/packages/components/assets/icon-weixin-pay.png b/packages/components/assets/icon-weixin-pay.png
new file mode 100644
index 0000000..b2b0ab4
--- /dev/null
+++ b/packages/components/assets/icon-weixin-pay.png
Binary files differ
diff --git a/packages/components/src/components/Dialog/ConfirmDialog.vue b/packages/components/src/components/Dialog/ConfirmDialog.vue
index abea7ef..8cf3fcc 100644
--- a/packages/components/src/components/Dialog/ConfirmDialog.vue
+++ b/packages/components/src/components/Dialog/ConfirmDialog.vue
@@ -7,6 +7,9 @@
<div class="confirm-dialog-content-info">
<slot name="info"></slot>
</div>
+ <div class="confirm-dialog-content-warning">
+ 鍚屼竴鍙风爜鍏呭�兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�
+ </div>
</div>
</nut-dialog>
</template>
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index d7d994b..d2d94eb 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,3 +1,5 @@
export { default as RechargeGrid } from './views/RechargeGrid/RechargeGrid.vue';
export { default as PhoneBillRecharge } from './views/PhoneBillRecharge/PhoneBillRecharge.vue';
+export { default as SelectPayTypeView } from './views/SelectPayTypeView/SelectPayTypeView.vue';
+export { default as RechargeResultView } from './views/RechargeResultView/RechargeResultView.vue';
export * from './utils';
diff --git a/packages/components/src/styles/components.scss b/packages/components/src/styles/components.scss
index 9d54699..9e9517c 100644
--- a/packages/components/src/styles/components.scss
+++ b/packages/components/src/styles/components.scss
@@ -38,6 +38,7 @@
padding: 12px;
border-radius: 8px;
background: #f0f3fa;
+ margin-bottom: 8px;
.confirm-dialog-content-info-item {
display: flex;
@@ -67,4 +68,72 @@
}
}
}
+
+ .confirm-dialog-content-warning {
+ color: boleGetCssVar('color', 'danger');
+ text-align: left;
+ font-size: 16px;
+ line-height: 20px;
+ }
+}
+
+.select-pay-type-view {
+ .select-pay-type-view-item-icon {
+ width: 32px;
+ height: 32px;
+ margin-right: 12px;
+ }
+
+ .select-pay-type-view-item {
+ padding-left: 20px;
+ display: flex;
+ align-items: center;
+ height: 80px;
+ border: 1px solid #e2e5eb;
+ border-radius: 8px;
+ background-color: #fff;
+ margin-bottom: 16px;
+ cursor: pointer;
+ font-size: 16px;
+ color: boleGetCssVar('text-color', 'primary');
+ }
+}
+
+.recharge-result-view {
+ // padding:;
+
+ .recharge-result-view-title {
+ font-size: 18px;
+ color: boleGetCssVar('text-color', 'primary');
+ font-weight: 600;
+ margin-bottom: 12px;
+ text-align: center;
+ line-height: 24px;
+ }
+
+ .recharge-result-view-tips {
+ margin-bottom: 12px;
+ font-size: 16px;
+ color: boleGetCssVar('color', 'danger');
+ line-height: 20px;
+ }
+
+ .recharge-result-view-warning {
+ margin-bottom: 20px;
+ font-size: 12px;
+ color: boleGetCssVar('color', 'warning');
+ line-height: 16px;
+ }
+
+ .recharge-result-view-btn-wrapper {
+ display: flex;
+ justify-content: center;
+
+ .recharge-result-view-btn {
+ padding: 0 20px;
+ font-size: 16px;
+ color: boleGetCssVar('color', 'primary');
+ line-height: 16px;
+ }
+ }
}
diff --git a/packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue b/packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue
index e629150..f3d2d56 100644
--- a/packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue
+++ b/packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue
@@ -51,7 +51,7 @@
</nut-button>
<RechargeTipsView :tips="tips" />
</div>
- <ConfirmDialog v-model:visible="confirmDialogVisible">
+ <ConfirmDialog v-model:visible="confirmDialogVisible" @ok="goPay">
<template #info>
<ConfirmDialogInfoItem label="鍏呭�艰处鍙�" content="18858418480" />
<ConfirmDialogInfoItem label="鍏呭�奸噾棰�" :content="`锟�${form.parValue}`" danger />
@@ -76,6 +76,10 @@
defineOptions({
name: 'PhoneBillRecharge',
});
+
+const emit = defineEmits<{
+ (e: 'goPay'): void;
+}>();
const form = reactive({
ispCode: IspCode.yidong,
@@ -118,4 +122,8 @@
function recharge() {
confirmDialogVisible.value = true;
}
+
+function goPay() {
+ emit('goPay');
+}
</script>
diff --git a/packages/components/src/views/RechargeResultView/RechargeResultView.vue b/packages/components/src/views/RechargeResultView/RechargeResultView.vue
new file mode 100644
index 0000000..d83124d
--- /dev/null
+++ b/packages/components/src/views/RechargeResultView/RechargeResultView.vue
@@ -0,0 +1,28 @@
+<template>
+ <div class="recharge-result-view">
+ <div class="recharge-result-view-title">鏀粯鎴愬姛锛屽厖鍊兼灏嗗湪0-24灏忔椂鍐呭埌璐�</div>
+ <div class="recharge-result-view-tips">
+ 鍚屼竴鍙风爜鍏呭�兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�
+ </div>
+ <div class="recharge-result-view-warning">
+ 濡傛帴鍒伴檶鐢熸潵鐢碉紝瀵规柟浠ョ即璐规垨璇搷浣滅瓑鐞嗙敱瑕佹眰澶勭悊娆鹃」锛屽姟蹇呯珛鍗虫媺榛戯紝璋ㄩ槻璇堥獥!!!
+ </div>
+ <div class="recharge-result-view-btn-wrapper">
+ <div class="recharge-result-view-btn" @click="emit('goBackHome')">鍥為椤�</div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+ name: 'RechargeResultView',
+});
+
+// type Props = {};
+
+// const props = withDefaults(defineProps<Props>(), {});
+
+const emit = defineEmits<{
+ (e: 'goBackHome'): void;
+}>();
+</script>
diff --git a/packages/components/src/views/SelectPayTypeView/SelectPayTypeView.vue b/packages/components/src/views/SelectPayTypeView/SelectPayTypeView.vue
new file mode 100644
index 0000000..818faa5
--- /dev/null
+++ b/packages/components/src/views/SelectPayTypeView/SelectPayTypeView.vue
@@ -0,0 +1,25 @@
+<template>
+ <div class="select-pay-type-view">
+ <div class="select-pay-type-view-item">
+ <img class="select-pay-type-view-item-icon" :src="IconAliPay" />
+ <div class="select-pay-type-view-item-text">鏀粯瀹濇敮浠�</div>
+ </div>
+ <div class="select-pay-type-view-item">
+ <img class="select-pay-type-view-item-icon" :src="IconWeixin" />
+ <div class="select-pay-type-view-item-text">寰俊鏀粯</div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import IconWeixin from '../../../assets/icon-weixin-pay.png';
+import IconAliPay from '../../../assets/icon-alipay.png';
+
+defineOptions({
+ name: 'SelectPayTypeView',
+});
+
+// type Props = {};
+
+// const props = withDefaults(defineProps<Props>(), {});
+</script>
--
Gitblit v1.9.1