feat: UI

wupengfei

2025-06-04 f83f74863b05def138a5c87c3084e0de0dc01392

feat: UI

 apps/taro/src/app.config.ts

@@ -117,6 +117,8 @@
        'applyAgent/applyAgent',
        'applyResult/applyResult',
        'AgentRecruitment/AgentRecruitment',
        'AgentRecruitmentPoster/AgentRecruitmentPoster',
        'generatePromotionCode/generatePromotionCode',
        'promotionQrcode/promotionQrcode',
      ],
    },

 apps/taro/src/assets/mine/icon-mine-agent-recruitment.png

 apps/taro/src/assets/mine/icon-mine-channel.png

 apps/taro/src/constants/img.ts

@@ -15,6 +15,12 @@
    // Bg: `${OssBasePath}/matchMakingMini/assets/mine/icon-bg.png`,
    Bg: `${OssBasePath}/lifePayment/assets/common/icon-home-page-bg.png`,
    IdBg: `${OssBasePath}/matchMakingMini/assets/mine/icon-id-bg.png`,

    AgentRecruitmentBg: `${OssBasePath}/lifePayment/assets/mine/icon-agent-recruitment-bg.png`,
    AgentRecruitmentRetail: `${OssBasePath}/lifePayment/assets/mine/icon-agent-recruitment-retail.png`,
    AgentRecruitmentBrand: `${OssBasePath}/lifePayment/assets/mine/icon-agent-recruitment-brand.png`,
    AgentRecruitmentArea: `${OssBasePath}/lifePayment/assets/mine/icon-agent-recruitment-area.png`,
    AgentRecruitmentPoster: `${OssBasePath}/lifePayment/assets/mine/icon-agent-recruitment-poster.png`,
  },
  setting: {
    ToggleBg: `${OssBasePath}/matchMakingMini/assets/setting/icon-toggle-bg.png`,

 apps/taro/src/constants/router.ts

@@ -27,6 +27,8 @@
  promotionQrcode = '/subpackages/my/promotionQrcode/promotionQrcode',
  dashboard = '/subpackages/my/dashboard/dashboard',
  applyAgent = '/subpackages/my/applyAgent/applyAgent',
  AgentRecruitment = '/subpackages/my/AgentRecruitment/AgentRecruitment',
  agentRecruitment = '/subpackages/my/AgentRecruitment/AgentRecruitment',
  agentRecruitmentPoster = '/subpackages/my/AgentRecruitmentPoster/AgentRecruitmentPoster',
  generatePromotionCode = '/subpackages/my/generatePromotionCode/generatePromotionCode',
  applyResult = '/subpackages/my/applyResult/applyResult',
}

 apps/taro/src/pages/mine/index.vue

@@ -23,7 +23,7 @@
        <template v-if="isChannelAccount">
          <ListItemV2 :icon="IconMineDataBoard" title="数据看板" @click="goDashboard"></ListItemV2>
          <ListItemV2
            :icon="IconMinePromotion"
            :icon="IconMineChannel"
            title="渠道二维码"
            @click="goShareQrcode"
          ></ListItemV2>
@@ -34,7 +34,7 @@
          @click="goPromotionQrcode"
        ></ListItemV2>
        <ListItemV2
          :icon="IconMinePromotion"
          :icon="IconMineAgentRecruitment"
          title="代理招募"
          @click="goAgentRecruitment"
        ></ListItemV2>
@@ -65,6 +65,8 @@
import IconMineUserId from '@/assets/mine/icon-mine-userId.png';
import IconMineDataBoard from '@/assets/mine/icon-mine-data-board.png';
import IconMinePromotion from '@/assets/mine/icon-mine-promotion.png';
import IconMineChannel from '@/assets/mine/icon-mine-channel.png';
import IconMineAgentRecruitment from '@/assets/mine/icon-mine-agent-recruitment.png';
import IconMineCustomerService from '@/assets/mine/icon-mine-customer-service.png';
import IconMineExist from '@/assets/mine/icon-mine-exist.png';
import { useSystemStore } from '@/stores/modules/system';
@@ -112,7 +114,7 @@
const goShareQrcode = useAccessLogin(() => goPage(RouterPath.shareQrcode));
const goPromotionQrcode = useAccessLogin(() => goPage(RouterPath.promotionQrcode));
const goDashboard = useAccessLogin(() => goPage(RouterPath.dashboard));
const goAgentRecruitment = useAccessLogin(() => goPage(RouterPath.AgentRecruitment));
const goAgentRecruitment = useAccessLogin(() => goPage(RouterPath.agentRecruitment));

async function goLogout() {
  try {

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

@@ -1,7 +1,26 @@
<template>
  <PageLayout title="代理招募" class="applyAgent-page-wrapper" hasBgColor :needAuth="false">
    <ContentScrollView hasPaddingTop style="background-color: transparent">
      <div>AgentRecruitment</div>
  <PageLayout title="代理招募" class="agentRecruitment-page-wrapper" hasBgColor :needAuth="false">
    <ContentScrollView :paddingH="false">
      <div class="agentRecruitment-page-content">
        <img :src="OssAssets.mine.AgentRecruitmentBg" class="agentRecruitment-page-bg" />
        <div class="agentRecruitment-page-main">
          <img
            class="agentRecruitment-page-img-item retail"
            :src="OssAssets.mine.AgentRecruitmentRetail"
            alt=""
          />
          <img
            class="agentRecruitment-page-img-item brand"
            :src="OssAssets.mine.AgentRecruitmentBrand"
            alt=""
          />
          <img
            class="agentRecruitment-page-img-item"
            :src="OssAssets.mine.AgentRecruitmentArea"
            alt=""
          />
        </div>
      </div>
    </ContentScrollView>
    <PageFooter>
      <PageFooterBtn type="primary" @click="submit">立即申请</PageFooterBtn>
@@ -11,7 +30,7 @@

<script setup lang="ts">
import { PageLayout } from '@/components';
import { RouterPath } from '@/constants';
import { RouterPath, OssAssets } from '@/constants';

defineOptions({
  name: 'AgentRecruitment',
@@ -23,3 +42,40 @@
  });
}
</script>

<style lang="scss">
@import '@/styles/common.scss';

.agentRecruitment-page-content {
  width: 100%;
  height: 100%;
  position: relative;

  .agentRecruitment-page-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .agentRecruitment-page-main {
    position: absolute;
    top: 930px;
    left: 0;
    width: 100%;

    .agentRecruitment-page-img-item {
      width: 100%;
      height: auto;
      object-fit: cover;

      &.retail {
        margin-bottom: 32px;
      }

      &.brand {
        margin-bottom: 20px;
      }
    }
  }
}
</style>

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

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

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

New file
@@ -0,0 +1,38 @@
<template>
  <PageLayout
    title="代理招募"
    class="agentRecruitmentPoster-page-wrapper"
    hasBgColor
    :needAuth="false"
  >
    <ContentScrollView :paddingH="false">
      <div class="agentRecruitmentPoster-page-content">
        <img :src="OssAssets.mine.AgentRecruitmentPoster" class="agentRecruitmentPoster-page-bg" />
      </div>
    </ContentScrollView>
  </PageLayout>
</template>

<script setup lang="ts">
import { PageLayout } from '@/components';
import { RouterPath, OssAssets } from '@/constants';

defineOptions({
  name: 'AgentRecruitmentPoster',
});
</script>

<style lang="scss">
@import '@/styles/common.scss';

.agentRecruitmentPoster-page-content {
  width: 100%;
  height: 100%;

  .agentRecruitmentPoster-page-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
</style>

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

@@ -4,7 +4,7 @@
      <ApplyAgentView @submit="submit" ref="applyAgentViewRef" />
    </ContentScrollView>
    <PageFooter>
      <PageFooterBtn type="primary" @click="handleSubmit">提交申请</PageFooterBtn>
      <PageFooterBtn type="primary" @click="handleSubmit">立即提交</PageFooterBtn>
    </PageFooter>
  </PageLayout>
</template>

 apps/taro/src/subpackages/my/generatePromotionCode.vue/generatePromotionCode.config.ts

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

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

New file
@@ -0,0 +1,41 @@
<template>
  <PageLayout
    title="生成推广码"
    class="generatePromotionCode-page-wrapper"
    hasBgColor
    :needAuth="false"
  >
    <ContentScrollView hasPaddingTop style="background-color: transparent">
      <GeneratePromotionCodeView @submit="submit" ref="generatePromotionCodeViewRef" />
    </ContentScrollView>
    <PageFooter>
      <PageFooterBtn type="primary" @click="handleSubmit">生成我的推广码</PageFooterBtn>
    </PageFooter>
  </PageLayout>
</template>

<script setup lang="ts">
import { PageLayout } from '@/components';
import { RouterPath } from '@/constants';
import { GeneratePromotionCodeView } from '@life-payment/components';
import { goBack } from '@/utils';
import type { ComponentExposed } from 'vue-component-type-helpers';

defineOptions({
  name: 'generatePromotionCode',
});

const generatePromotionCodeViewRef = useTemplateRef<
  ComponentExposed<typeof GeneratePromotionCodeView>
>('generatePromotionCodeViewRef');

function handleSubmit() {
  generatePromotionCodeViewRef.value?.handleSubmit?.();
}

function submit() {
  RouteHelper.navigateTo({
    url: RouterPath.applyResult,
  });
}
</script>

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

@@ -56,7 +56,7 @@

.promotion-qrcode-page-wrapper {
  .promotion-qrcode-content {
    margin-top: 306px;
    margin-top: 480px;
    width: 100%;
    height: 788px;
    background-size: 100% 100%;

 packages/components/src/index.ts

@@ -19,4 +19,5 @@
export { default as ShareQrcodeView } from './views/Mine/ShareQrcodeView.vue';
export { default as Dashboard } from './views/Mine/Dashboard.vue';
export { default as ApplyAgentView } from './views/Mine/ApplyAgentView.vue';
export { default as GeneratePromotionCodeView } from './views/Mine/GeneratePromotionCodeView.vue';
export * from './utils';

 packages/components/src/views/Mine/GeneratePromotionCodeView.vue

New file
@@ -0,0 +1,83 @@
<template>
  <NutForm
    :model-value="form"
    ref="formRef"
    :rules="rules"
    label-position="top"
    class="order-bill-recharge phone chunk-form"
  >
    <NutFormItem label="姓名" class="bole-form-item" prop="name" required>
      <NutInput
        v-model.trim="form.name"
        class="bole-input-text"
        placeholder="请填写您的姓名"
        type="text"
      />
    </NutFormItem>
    <NutFormItem label="联系方式" class="bole-form-item" prop="phoneNumber" required>
      <NutInput
        v-model.trim="form.phoneNumber"
        class="bole-input-text"
        placeholder="请填写您的联系方式"
        type="text"
      />
    </NutFormItem>
  </NutForm>
</template>

<script setup lang="ts">
import { Form as NutForm, FormItem as NutFormItem, Input as NutInput } from '@nutui/nutui-taro';
import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
import { reactive, ref } from 'vue';
import { useLifeRechargeContext } from '@life-payment/core-vue';
import { FormValidator } from '../../utils';

defineOptions({
  name: 'ApplyAgentView',
});

const emit = defineEmits<{
  (e: 'submit'): void;
}>();

const form = reactive({
  name: '',
  phoneNumber: '',
});

const rules = reactive<FormRules>({
  name: [{ required: true, message: '请填写您的姓名' }],
  phoneNumber: [
    { required: true, message: '请填写您的联系方式' },
    { validator: FormValidator.validatorPhoneNumber, message: '请输入正确的手机号' },
  ],
});

const { blLifeRecharge } = useLifeRechargeContext();

const formRef = ref<any>(null);

function handleSubmit() {
  if (!formRef.value) return;
  formRef.value.validate().then(({ valid, errors }: any) => {
    if (valid) {
      refundUserLifePayOrder();
    }
  });
}

async function refundUserLifePayOrder() {
  try {
    // let params = {
    //   userId: blLifeRecharge.accountModel.userId,
    //   refundApplyRemark: form.refundApplyRemark,
    // };
    // let res = await blLifeRecharge.services.refundUserLifePayOrder(params);
    emit('submit');
  } catch (error) {}
}

defineExpose({
  handleSubmit,
});
</script>