From b8aa16ee1bd825e9798b9c749a1b8877844882fb Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期四, 29 五月 2025 13:43:27 +0800
Subject: [PATCH] Merge branch 'dev-ui' of http://120.26.58.240:8888/r/LifePaymentFront into dev-ui
---
apps/taro/src/app.config.ts | 8 +
apps/taro/src/pages/mine/index.vue | 8 +
packages/components/src/constants/img.ts | 1
apps/taro/src/subpackages/my/promotionQrcode/promotionQrcode.config.ts | 3
apps/taro/src/constants/router.ts | 2
apps/taro/src/subpackages/my/shareQrcode/shareQrcode.vue | 2
apps/taro/src/subpackages/my/promotionQrcode/promotionQrcode.vue | 37 ++++++
packages/components/src/components/Result/ResultWithoutBG.vue | 47 +++++++
apps/taro/src/subpackages/my/applyAgent/applyAgent.vue | 5
apps/taro/src/subpackages/my/applyResult/applyResult.config.ts | 3
packages/components/src/styles/components.scss | 44 +++++++
packages/components/src/index.ts | 1
apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue | 110 ++++++++++++++++++
apps/taro/src/constants/img.ts | 3
packages/components/src/components/Result/Result.vue | 1
apps/taro/src/subpackages/my/applyResult/applyResult.vue | 25 ++++
packages/components/src/views/Mine/ShareQrcodeView.vue | 7
17 files changed, 301 insertions(+), 6 deletions(-)
diff --git a/apps/taro/src/app.config.ts b/apps/taro/src/app.config.ts
index bd61f41..1e5d61c 100644
--- a/apps/taro/src/app.config.ts
+++ b/apps/taro/src/app.config.ts
@@ -111,7 +111,13 @@
},
{
root: 'subpackages/my',
- pages: ['shareQrcode/shareQrcode', 'dashboard/dashboard', 'applyAgent/applyAgent'],
+ pages: [
+ 'shareQrcode/shareQrcode',
+ 'dashboard/dashboard',
+ 'applyAgent/applyAgent',
+ 'applyResult/applyResult',
+ 'promotionQrcode/promotionQrcode',
+ ],
},
],
// preloadRule: {
diff --git a/apps/taro/src/constants/img.ts b/apps/taro/src/constants/img.ts
index c1a6036..6e700ad 100644
--- a/apps/taro/src/constants/img.ts
+++ b/apps/taro/src/constants/img.ts
@@ -6,7 +6,10 @@
HomePageBg: `${OssBasePath}/lifePayment/assets/common/icon-home-page-bg.png`,
DataPageBg: `${OssBasePath}/lifePayment/assets/common/icon-data-page-bg.png`,
MinePageBg: `${OssBasePath}/lifePayment/assets/common/icon-mine-page-bg.png`,
+ PromotionQrcodePageBg: `${OssBasePath}/lifePayment/assets/common/icon-promotion-qrcode-page-bg.png`,
PhoneBillRechargePageBg: `${OssBasePath}/lifePayment/assets/common/icon-phoneBillRecharge-page-bg.png`,
+
+ PromotionQrcodeContentBG: `${OssBasePath}/lifePayment/assets/common/icon-promotion-qrcode-content-bg.png`,
},
mine: {
// Bg: `${OssBasePath}/matchMakingMini/assets/mine/icon-bg.png`,
diff --git a/apps/taro/src/constants/router.ts b/apps/taro/src/constants/router.ts
index 617bded..5ab7836 100644
--- a/apps/taro/src/constants/router.ts
+++ b/apps/taro/src/constants/router.ts
@@ -24,6 +24,8 @@
editPhoneUserAccount = '/subpackages/userAccount/editPhoneUserAccount/editPhoneUserAccount',
editElectricUserAccount = '/subpackages/userAccount/editElectricUserAccount/editElectricUserAccount',
shareQrcode = '/subpackages/my/shareQrcode/shareQrcode',
+ promotionQrcode = '/subpackages/my/promotionQrcode/promotionQrcode',
dashboard = '/subpackages/my/dashboard/dashboard',
applyAgent = '/subpackages/my/applyAgent/applyAgent',
+ applyResult = '/subpackages/my/applyResult/applyResult',
}
diff --git a/apps/taro/src/pages/mine/index.vue b/apps/taro/src/pages/mine/index.vue
index ca824f6..e379d80 100644
--- a/apps/taro/src/pages/mine/index.vue
+++ b/apps/taro/src/pages/mine/index.vue
@@ -24,8 +24,13 @@
<ListItemV2 :icon="IconMineDataBoard" title="鏁版嵁鐪嬫澘" @click="goDashboard"></ListItemV2>
<ListItemV2
:icon="IconMinePromotion"
- title="鎺ㄥ箍浜岀淮鐮�"
+ title="娓犻亾浜岀淮鐮�"
@click="goShareQrcode"
+ ></ListItemV2>
+ <ListItemV2
+ :icon="IconMinePromotion"
+ title="鎺ㄥ箍浜岀淮鐮�"
+ @click="goPromotionQrcode"
></ListItemV2>
</template>
<ListItemV2
@@ -100,6 +105,7 @@
const goOrderManage = useAccessLogin(() => goPage(RouterPath.order));
const goUserAccountList = useAccessLogin(() => goPage(RouterPath.userAccountList));
const goShareQrcode = useAccessLogin(() => goPage(RouterPath.shareQrcode));
+const goPromotionQrcode = useAccessLogin(() => goPage(RouterPath.promotionQrcode));
const goDashboard = useAccessLogin(() => goPage(RouterPath.dashboard));
async function goLogout() {
diff --git a/apps/taro/src/subpackages/my/applyAgent/applyAgent.vue b/apps/taro/src/subpackages/my/applyAgent/applyAgent.vue
index 66c9529..da2982f 100644
--- a/apps/taro/src/subpackages/my/applyAgent/applyAgent.vue
+++ b/apps/taro/src/subpackages/my/applyAgent/applyAgent.vue
@@ -11,6 +11,7 @@
<script setup lang="ts">
import { PageLayout } from '@/components';
+import { RouterPath } from '@/constants';
import { ApplyAgentView } from '@life-payment/components';
import { goBack } from '@/utils';
import type { ComponentExposed } from 'vue-component-type-helpers';
@@ -27,6 +28,8 @@
}
function submit() {
- goBack();
+ RouteHelper.navigateTo({
+ url: RouterPath.applyResult,
+ });
}
</script>
diff --git a/apps/taro/src/subpackages/my/applyResult/applyResult.config.ts b/apps/taro/src/subpackages/my/applyResult/applyResult.config.ts
new file mode 100644
index 0000000..305fdb1
--- /dev/null
+++ b/apps/taro/src/subpackages/my/applyResult/applyResult.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+ disableScroll: true,
+});
diff --git a/apps/taro/src/subpackages/my/applyResult/applyResult.vue b/apps/taro/src/subpackages/my/applyResult/applyResult.vue
new file mode 100644
index 0000000..56d16be
--- /dev/null
+++ b/apps/taro/src/subpackages/my/applyResult/applyResult.vue
@@ -0,0 +1,25 @@
+<template>
+ <PageLayout title="绔嬪嵆鐢宠" class="applyAgent-page-wrapper" hasBgColor :needAuth="false">
+ <ResultWithoutBG
+ remark="鎴戜滑鐨勮繍钀ヤ汉鍛樹細鍦�5涓伐浣滄棩鍐呰仈绯绘偍娌熼�氫唬鐞嗕簨瀹滐紝璇蜂繚鎸佺數璇濈晠閫�!"
+ tips="娉細鎴愬姛鎷涘嫙浠ｇ悊鍟嗭紝杩樻湁鏈�楂�1000鍏冨鍔憋紝璇﹁璇峰挩璇細16505012333"
+ title="鎻愪氦鎴愬姛"
+ @generate="generate"
+ ></ResultWithoutBG>
+ </PageLayout>
+</template>
+
+<script setup lang="ts">
+import { PageLayout } from '@/components';
+import { ResultWithoutBG } from '@life-payment/components';
+
+defineOptions({
+ name: 'applyAgent',
+});
+
+function generate() {
+ RouteHelper.navigateTo({
+ url: RouterPath.promotionQrcode,
+ });
+}
+</script>
diff --git a/apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue b/apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue
new file mode 100644
index 0000000..c464a25
--- /dev/null
+++ b/apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue
@@ -0,0 +1,110 @@
+<template>
+ <ContentView>
+ <div class="promotion-qrcode-content" :style="barStyle">
+ <div
+ class="promotion-qrcode-content-qrcode"
+ :style="{ backgroundImage: `url(${OssAssets.common.PromotionQrcodeContentBG})` }"
+ >
+ <ShareQrcodeView :channles-num="userChannles[0]?.channlesNum" :size="148" />
+ <div class="promotion-qrcode-content-qrcode-tips">闀挎寜浜岀淮鐮佸垎浜ソ鍙�</div>
+ </div>
+ <div class="promotion-qrcode-content-btn">鐐瑰嚮涓嬭浇浜岀淮鐮�</div>
+ </div>
+ </ContentView>
+</template>
+
+<script setup lang="ts">
+import { ShareQrcodeView, ResultWithoutBG } from '@life-payment/components';
+import { useLifeRechargeContext } from '@life-payment/core-vue';
+import { isWeb } from '@/utils/env';
+import { useSystemStore } from '@/stores/modules/system';
+import { CSSProperties } from 'vue';
+import { OssAssets } from '@/constants';
+
+defineOptions({
+ name: 'InnerPage',
+});
+
+// const { virtualUserInfo } = useUser();
+const { blLifeRecharge } = useLifeRechargeContext();
+
+const userChannles = computed(() =>
+ (blLifeRecharge.accountModel.userChannles ?? []).filter(
+ (x) => x.switchType !== blLifeRecharge.constants.LifePaySwitchTypeEnum.寰俊灏忕▼搴�
+ )
+);
+
+const channlesType = ref(userChannles.value[0]?.channlesNum ?? '');
+
+watch(userChannles, (val) => {
+ channlesType.value = val?.[0]?.channlesNum ?? '';
+});
+
+const systemStore = useSystemStore();
+
+const barStyle = computed(
+ () =>
+ ({
+ paddingTop: systemStore.info.statusBarHeight + 'px',
+ backgroundImage: `url(${OssAssets.common.PromotionQrcodeContentBG})`,
+ } as CSSProperties)
+);
+</script>
+
+<style lang="scss">
+@import '@/styles/common.scss';
+
+.promotion-qrcode-page-wrapper {
+ .promotion-qrcode-content {
+ margin-top: 306px;
+ width: 100%;
+ height: 788px;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .promotion-qrcode-content-qrcode {
+ width: 432px;
+ height: 432px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ position: relative;
+ }
+
+ .promotion-qrcode-content-qrcode-tips {
+ font-size: 32px;
+ font-weight: bold;
+ position: absolute;
+ bottom: -22px;
+ background: linear-gradient(0.25turn, #63654c 0%, #101f23 39%, #101f23 55%, #0082d3 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+ .promotion-qrcode-content-btn {
+ width: 432px;
+ height: 96px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: boleGetCssVar('color', 'primary');
+ margin-top: 70px;
+ border-radius: 12px;
+ font-size: 38px;
+ font-weight: 500;
+ color: #ffffff;
+ }
+
+ .share-qrcode-view {
+ margin-top: 60px;
+ padding: 0;
+ }
+}
+</style>
diff --git a/apps/taro/src/subpackages/my/promotionQrcode/promotionQrcode.config.ts b/apps/taro/src/subpackages/my/promotionQrcode/promotionQrcode.config.ts
new file mode 100644
index 0000000..305fdb1
--- /dev/null
+++ b/apps/taro/src/subpackages/my/promotionQrcode/promotionQrcode.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+ disableScroll: true,
+});
diff --git a/apps/taro/src/subpackages/my/promotionQrcode/promotionQrcode.vue b/apps/taro/src/subpackages/my/promotionQrcode/promotionQrcode.vue
new file mode 100644
index 0000000..6547e85
--- /dev/null
+++ b/apps/taro/src/subpackages/my/promotionQrcode/promotionQrcode.vue
@@ -0,0 +1,37 @@
+<template>
+ <PageLayoutWithBg class="promotion-qrcode-page-wrapper">
+ <template #navigationBar>
+ <TransparentNavigationBar :title="'鎺ㄥ箍浜岀淮鐮�'" :is-absolute="false">
+ </TransparentNavigationBar>
+ </template>
+ <template #bg>
+ <img :src="OssAssets.common.PromotionQrcodePageBg" class="promotion-qrcode-page-bg" />
+ </template>
+ <InnerPage />
+ </PageLayoutWithBg>
+</template>
+
+<script setup lang="ts">
+import InnerPage from './InnerPage.vue';
+import { OssAssets } from '@/constants';
+
+defineOptions({
+ name: 'shareQrcode',
+});
+</script>
+
+<style lang="scss">
+@import '@/styles/common.scss';
+
+.promotion-qrcode-page-wrapper {
+ .promotion-qrcode-page-bg {
+ position: fixed;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
+</style>
diff --git a/apps/taro/src/subpackages/my/shareQrcode/shareQrcode.vue b/apps/taro/src/subpackages/my/shareQrcode/shareQrcode.vue
index de62774..d7220d9 100644
--- a/apps/taro/src/subpackages/my/shareQrcode/shareQrcode.vue
+++ b/apps/taro/src/subpackages/my/shareQrcode/shareQrcode.vue
@@ -1,5 +1,5 @@
<template>
- <PageLayout title="鎺ㄥ箍浜岀淮鐮�" class="shareQrcode-page-wrapper" hasBorder>
+ <PageLayout title="娓犻亾浜岀淮鐮�" class="shareQrcode-page-wrapper" hasBorder>
<InnerPage />
</PageLayout>
</template>
diff --git a/packages/components/src/components/Result/Result.vue b/packages/components/src/components/Result/Result.vue
index 6c8b33d..d52da9c 100644
--- a/packages/components/src/components/Result/Result.vue
+++ b/packages/components/src/components/Result/Result.vue
@@ -31,6 +31,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import { OssAssets } from '../../constants/img';
+import { Button as NutButton } from '@nutui/nutui-taro';
defineOptions({
name: 'Result',
diff --git a/packages/components/src/components/Result/ResultWithoutBG.vue b/packages/components/src/components/Result/ResultWithoutBG.vue
new file mode 100644
index 0000000..09f3e2e
--- /dev/null
+++ b/packages/components/src/components/Result/ResultWithoutBG.vue
@@ -0,0 +1,47 @@
+<template>
+ <div class="result-without-bg-wrapper" v-bind="$attrs">
+ <div class="result-without-bg-content">
+ <img class="result-without-bg-content-icon" :src="OssAssets.result.Successv2" />
+ <div class="result-without-bg-content-title">{{ title }}</div>
+ <div class="result-without-bg-content-remark">
+ <slot name="remark">{{ remark }} </slot>
+ </div>
+ </div>
+ <div class="result-without-bg-wrapper-actions">
+ <slot name="actions">
+ <div class="chunk-form-actions">
+ <nut-button class="recharge-button" type="primary" @click="emit('generate')">
+ <div class="recharge-button-inner">
+ <div class="recharge-button-text">鐢熸垚鎴戠殑鎺ㄥ箍鐮�</div>
+ </div>
+ </nut-button>
+ </div>
+ </slot>
+ </div>
+ <div class="result-without-bg-wrapper-tips">
+ <slot name="tips">{{ tips }} </slot>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { OssAssets } from '../../constants/img';
+import { Button as NutButton } from '@nutui/nutui-taro';
+
+defineOptions({
+ name: 'ResultWithoutBG',
+});
+
+type Props = {
+ title?: string;
+ type?: 'success' | 'fail';
+ tips?: string;
+ remark?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const emit = defineEmits<{
+ (e: 'generate'): void;
+}>();
+</script>
diff --git a/packages/components/src/constants/img.ts b/packages/components/src/constants/img.ts
index d03668b..b47b00e 100644
--- a/packages/components/src/constants/img.ts
+++ b/packages/components/src/constants/img.ts
@@ -25,6 +25,7 @@
result: {
Success: `${OssBasePath}/lifePayment/assets/common/icon-result-success.png`,
+ Successv2: `${OssBasePath}/lifePayment/assets/common/icon-result-successv2.png`,
Fail: `${OssBasePath}/lifePayment/assets/common/icon-result-fail.png`,
},
};
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index e6b38ac..2b7329a 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -6,6 +6,7 @@
export { default as RechargeResultView } from './views/RechargeResultView/RechargeResultView.vue';
export { default as Result } from './components/Result/Result.vue';
export { default as ResultWithTips } from './components/Result/ResultWithTips.vue';
+export { default as ResultWithoutBG } from './components/Result/ResultWithoutBG.vue';
export { default as PhoneOrder } from './views/Order/components/PhoneOrder.vue';
export { default as ElectricOrder } from './views/Order/components/ElectricOrder.vue';
export { default as GasOrder } from './views/Order/components/GasOrder.vue';
diff --git a/packages/components/src/styles/components.scss b/packages/components/src/styles/components.scss
index b89132d..c49e509 100644
--- a/packages/components/src/styles/components.scss
+++ b/packages/components/src/styles/components.scss
@@ -483,3 +483,47 @@
}
}
}
+
+.result-without-bg-wrapper {
+ margin-top: 32px;
+ padding: 0 40px;
+
+ .result-without-bg-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+
+ .result-without-bg-content-icon {
+ width: 320px;
+ height: 320px;
+ margin-bottom: 22px;
+ }
+
+ .result-without-bg-content-title {
+ font-size: 48px;
+ color: boleGetCssVar('text-color', 'primary');
+ font-weight: bold;
+ margin-bottom: 12px;
+ line-height: 68px;
+ }
+
+ .result-without-bg-content-remark {
+ font-size: 32px;
+ line-height: 48px;
+ color: boleGetCssVar('text-color', 'regular');
+ font-weight: 500;
+ text-align: center;
+ padding: 0 32px;
+ margin-bottom: 120px;
+ }
+ }
+
+ .result-without-bg-wrapper-tips {
+ font-size: 30px;
+ line-height: 48px;
+ color: #ff9e25;
+ margin-top: 26px;
+ padding: 0 20px;
+ }
+}
diff --git a/packages/components/src/views/Mine/ShareQrcodeView.vue b/packages/components/src/views/Mine/ShareQrcodeView.vue
index 49d3a60..9a3df1d 100644
--- a/packages/components/src/views/Mine/ShareQrcodeView.vue
+++ b/packages/components/src/views/Mine/ShareQrcodeView.vue
@@ -1,6 +1,6 @@
<template>
<div class="share-qrcode-view">
- <qrcode-vue :value="link" :size="200"></qrcode-vue>
+ <qrcode-vue :value="link" :size="size"></qrcode-vue>
</div>
</template>
@@ -15,9 +15,12 @@
type Props = {
channlesNum?: string;
+ size?: number;
};
-const props = withDefaults(defineProps<Props>(), {});
+const props = withDefaults(defineProps<Props>(), {
+ size: 200,
+});
const { blLifeRecharge } = useLifeRechargeContext();
--
Gitblit v1.9.1