From e372854c71bc97d162452cc4b3f5cfa586da50a8 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期四, 22 五月 2025 17:06:31 +0800
Subject: [PATCH] feat: UI
---
apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 110 insertions(+), 0 deletions(-)
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>
--
Gitblit v1.9.1