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: {

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

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

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

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

 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

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

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

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

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

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

 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>

 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

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

 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/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';

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

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