From 758d8056dc3dbc6bf92c298aa3627e66b933b5a0 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期四, 22 五月 2025 13:25:21 +0800
Subject: [PATCH] feat: UI
---
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 | 61 +++++++++++++++
packages/components/src/styles/components.scss | 4 +
packages/components/src/index.ts | 1
apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue | 105 ++++++++++++++++++++++++++
apps/taro/src/app.config.ts | 2
apps/taro/src/pages/mine/index.vue | 8 +
apps/taro/src/constants/img.ts | 1
apps/taro/src/subpackages/my/promotionQrcode/promotionQrcode.config.ts | 3
apps/taro/src/constants/router.ts | 1
11 files changed, 222 insertions(+), 3 deletions(-)
diff --git a/apps/taro/src/app.config.ts b/apps/taro/src/app.config.ts
index 70b6f04..5aebc7f 100644
--- a/apps/taro/src/app.config.ts
+++ b/apps/taro/src/app.config.ts
@@ -111,7 +111,7 @@
},
{
root: 'subpackages/my',
- pages: ['shareQrcode/shareQrcode', 'dashboard/dashboard'],
+ pages: ['shareQrcode/shareQrcode', 'dashboard/dashboard', 'promotionQrcode/promotionQrcode'],
},
],
// preloadRule: {
diff --git a/apps/taro/src/constants/img.ts b/apps/taro/src/constants/img.ts
index c1a6036..2ed77b1 100644
--- a/apps/taro/src/constants/img.ts
+++ b/apps/taro/src/constants/img.ts
@@ -6,6 +6,7 @@
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`,
},
mine: {
diff --git a/apps/taro/src/constants/router.ts b/apps/taro/src/constants/router.ts
index 3b3f00a..4364eba 100644
--- a/apps/taro/src/constants/router.ts
+++ b/apps/taro/src/constants/router.ts
@@ -24,5 +24,6 @@
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',
}
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/promotionQrcode/InnerPage.vue b/apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue
new file mode 100644
index 0000000..183db04
--- /dev/null
+++ b/apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue
@@ -0,0 +1,105 @@
+<template>
+ <ContentView>
+ <!-- <div class="promotion-qrcode-content" :style="barStyle">
+ <div class="promotion-qrcode-content-qrcode">
+ <ShareQrcodeView :channles-num="userChannles[0]?.channlesNum" />
+ <div class="promotion-qrcode-content-qrcode-tips">闀挎寜浜岀淮鐮佸垎浜ソ鍙�</div>
+ </div>
+ <div class="promotion-qrcode-content-btn">鐐瑰嚮涓嬭浇浜岀淮鐮�</div>
+ </div> -->
+ <ResultWithoutBG></ResultWithoutBG>
+ </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';
+
+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',
+ // height: systemStore.navigationBarHeight + 'px',
+ } 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-image: url('https://renliyuan.oss-cn-hangzhou.aliyuncs.com/12333/lifePayment/assets/common/icon-promotion-qrcode-content-bg.png');
+ 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: linear-gradient(180deg, #d4effe 0%, rgba(227, 251, 255, 0) 100%);
+ border-radius: 44px 44px 44px 44px;
+ border: 5px solid;
+ border-image: linear-gradient(180deg, rgba(76, 198, 255, 1), rgba(241, 252, 255, 0)) 5 5;
+ }
+
+ .promotion-qrcode-content-qrcode-tips {
+ margin-bottom: -22px;
+ font-size: 32px;
+ font-weight: bold;
+ background: linear-gradient(0deg, #63654c 0%, #101f23 39%, #101f23 55%, #0082d3 100%);
+ }
+
+ .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 {
+ 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/ResultWithoutBG.vue b/packages/components/src/components/Result/ResultWithoutBG.vue
new file mode 100644
index 0000000..1209937
--- /dev/null
+++ b/packages/components/src/components/Result/ResultWithoutBG.vue
@@ -0,0 +1,61 @@
+<template>
+ <div class="result-without-bg-wrapper" v-bind="$attrs">
+ <div class="result-without-bg-content">
+ <img class="result-content-icon" :src="icon" />
+ <div class="result-content-title">{{ title }}</div>
+ <div class="result-content-remark">
+ <slot name="remark"> </slot>
+ </div>
+ </div>
+ <div class="result-wrapper-tips">
+ <slot name="tips"> </slot>
+ </div>
+ <div class="result-wrapper-actions">
+ <slot name="actions">
+ <div class="chunk-form-actions">
+ <nut-button class="recharge-button" type="primary" @click="emit('goBackHome')">
+ <div class="recharge-button-inner">
+ <div class="recharge-button-text">鐢熸垚鎴戠殑鎺ㄥ箍鐮�</div>
+ </div>
+ </nut-button>
+ </div>
+ </slot>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { OssAssets } from '../../constants/img';
+
+defineOptions({
+ name: 'ResultWithoutBG',
+});
+
+type Props = {
+ title?: string;
+ type?: 'success' | 'fail';
+ orderNo?: string;
+ servicePhone?: string;
+ dangerTips?: string;
+ warningTips?: string;
+ customerServiceTips?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const emit = defineEmits<{
+ (e: 'goBackHome'): void;
+}>();
+
+const icon = computed(() => {
+ switch (props.type) {
+ case 'success':
+ return OssAssets.result.Success;
+ case 'fail':
+ return OssAssets.result.Fail;
+ default:
+ return OssAssets.result.Success;
+ }
+});
+</script>
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 8e753b6..cccf71b 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..86f4359 100644
--- a/packages/components/src/styles/components.scss
+++ b/packages/components/src/styles/components.scss
@@ -483,3 +483,7 @@
}
}
}
+
+.result-without-bg-wrapper {
+ margin-top: 32px;
+}
--
Gitblit v1.9.1