From 2500843dbffc841eeab2e0a91d735c56cb6ea357 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期四, 22 五月 2025 17:03:46 +0800
Subject: [PATCH] feat: UI
---
packages/components/src/components/Result/ResultWithoutBG.vue | 40 ++++---------
apps/taro/src/subpackages/my/applyAgent/applyAgent.vue | 7 ++
apps/taro/src/subpackages/my/applyResult/applyResult.config.ts | 3 +
packages/components/src/styles/components.scss | 40 +++++++++++++
apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue | 31 ++++++----
apps/taro/src/app.config.ts | 1
apps/taro/src/constants/img.ts | 2
packages/components/src/constants/img.ts | 1
packages/components/src/components/Result/Result.vue | 1
apps/taro/src/constants/router.ts | 1
apps/taro/src/subpackages/my/applyResult/applyResult.vue | 25 ++++++++
packages/components/src/views/Mine/ShareQrcodeView.vue | 7 +
12 files changed, 116 insertions(+), 43 deletions(-)
diff --git a/apps/taro/src/app.config.ts b/apps/taro/src/app.config.ts
index cf6f3af..1e5d61c 100644
--- a/apps/taro/src/app.config.ts
+++ b/apps/taro/src/app.config.ts
@@ -115,6 +115,7 @@
'shareQrcode/shareQrcode',
'dashboard/dashboard',
'applyAgent/applyAgent',
+ 'applyResult/applyResult',
'promotionQrcode/promotionQrcode',
],
},
diff --git a/apps/taro/src/constants/img.ts b/apps/taro/src/constants/img.ts
index 2ed77b1..6e700ad 100644
--- a/apps/taro/src/constants/img.ts
+++ b/apps/taro/src/constants/img.ts
@@ -8,6 +8,8 @@
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 b51edce..5ab7836 100644
--- a/apps/taro/src/constants/router.ts
+++ b/apps/taro/src/constants/router.ts
@@ -27,4 +27,5 @@
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/subpackages/my/applyAgent/applyAgent.vue b/apps/taro/src/subpackages/my/applyAgent/applyAgent.vue
index 7f06d32..3760641 100644
--- a/apps/taro/src/subpackages/my/applyAgent/applyAgent.vue
+++ b/apps/taro/src/subpackages/my/applyAgent/applyAgent.vue
@@ -15,10 +15,15 @@
<script setup lang="ts">
import { PageLayout } from '@/components';
+import { RouterPath } from '@/constants';
defineOptions({
name: 'applyAgent',
});
-function handleSubmit() {}
+function handleSubmit() {
+ 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
index 183db04..c464a25 100644
--- a/apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue
+++ b/apps/taro/src/subpackages/my/promotionQrcode/InnerPage.vue
@@ -1,13 +1,15 @@
<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" :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> -->
- <ResultWithoutBG></ResultWithoutBG>
+ </div>
</ContentView>
</template>
@@ -17,6 +19,7 @@
import { isWeb } from '@/utils/env';
import { useSystemStore } from '@/stores/modules/system';
import { CSSProperties } from 'vue';
+import { OssAssets } from '@/constants';
defineOptions({
name: 'InnerPage',
@@ -43,7 +46,7 @@
() =>
({
paddingTop: systemStore.info.statusBarHeight + 'px',
- // height: systemStore.navigationBarHeight + 'px',
+ backgroundImage: `url(${OssAssets.common.PromotionQrcodeContentBG})`,
} as CSSProperties)
);
</script>
@@ -56,7 +59,6 @@
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;
@@ -71,17 +73,19 @@
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;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ position: relative;
}
.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%);
+ 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 {
@@ -99,6 +103,7 @@
}
.share-qrcode-view {
+ margin-top: 60px;
padding: 0;
}
}
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
index 1209937..09f3e2e 100644
--- a/packages/components/src/components/Result/ResultWithoutBG.vue
+++ b/packages/components/src/components/Result/ResultWithoutBG.vue
@@ -1,19 +1,16 @@
<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>
+ <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-wrapper-tips">
- <slot name="tips"> </slot>
- </div>
- <div class="result-wrapper-actions">
+ <div class="result-without-bg-wrapper-actions">
<slot name="actions">
<div class="chunk-form-actions">
- <nut-button class="recharge-button" type="primary" @click="emit('goBackHome')">
+ <nut-button class="recharge-button" type="primary" @click="emit('generate')">
<div class="recharge-button-inner">
<div class="recharge-button-text">鐢熸垚鎴戠殑鎺ㄥ箍鐮�</div>
</div>
@@ -21,12 +18,15 @@
</div>
</slot>
</div>
+ <div class="result-without-bg-wrapper-tips">
+ <slot name="tips">{{ tips }} </slot>
+ </div>
</div>
</template>
<script setup lang="ts">
-import { computed } from 'vue';
import { OssAssets } from '../../constants/img';
+import { Button as NutButton } from '@nutui/nutui-taro';
defineOptions({
name: 'ResultWithoutBG',
@@ -35,27 +35,13 @@
type Props = {
title?: string;
type?: 'success' | 'fail';
- orderNo?: string;
- servicePhone?: string;
- dangerTips?: string;
- warningTips?: string;
- customerServiceTips?: string;
+ tips?: string;
+ remark?: string;
};
const props = withDefaults(defineProps<Props>(), {});
const emit = defineEmits<{
- (e: 'goBackHome'): void;
+ (e: 'generate'): 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/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/styles/components.scss b/packages/components/src/styles/components.scss
index 86f4359..c49e509 100644
--- a/packages/components/src/styles/components.scss
+++ b/packages/components/src/styles/components.scss
@@ -486,4 +486,44 @@
.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