feat: UI

wupengfei

2025-05-22 2500843dbffc841eeab2e0a91d735c56cb6ea357

feat: UI

 apps/taro/src/app.config.ts

@@ -115,6 +115,7 @@
        'shareQrcode/shareQrcode',
        'dashboard/dashboard',
        'applyAgent/applyAgent',
        'applyResult/applyResult',
        'promotionQrcode/promotionQrcode',
      ],
    },

 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`,

 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',
}

 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>

 apps/taro/src/subpackages/my/applyResult/applyResult.config.ts

New file
@@ -0,0 +1,3 @@
export default definePageConfig({
  disableScroll: true,
});

 apps/taro/src/subpackages/my/applyResult/applyResult.vue

New file
@@ -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>

 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;
  }
}

 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',

 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>

 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`,
  },
};

 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;
  }
}

 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();