feat: UI

wupengfei

16 小时以前 758d8056dc3dbc6bf92c298aa3627e66b933b5a0

feat: UI

 apps/taro/src/app.config.ts

@@ -111,7 +111,7 @@
    },
    {
      root: 'subpackages/my',
      pages: ['shareQrcode/shareQrcode', 'dashboard/dashboard'],
      pages: ['shareQrcode/shareQrcode', 'dashboard/dashboard', 'promotionQrcode/promotionQrcode'],
    },
  ],
  // preloadRule: {

 apps/taro/src/constants/img.ts

@@ -6,6 +6,7 @@
    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`,
  },
  mine: {

 apps/taro/src/constants/router.ts

@@ -24,5 +24,6 @@
  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',
}

 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/promotionQrcode/InnerPage.vue

New file
@@ -0,0 +1,105 @@
<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-qrcode-tips">长按二维码分享好友</div>
      </div>
      <div class="promotion-qrcode-content-btn">点击下载二维码</div>
    </div> -->
    <ResultWithoutBG></ResultWithoutBG>
  </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';

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',
      // height: systemStore.navigationBarHeight + 'px',
    } 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-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;
    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: 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;
  }

  .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%);
  }

  .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 {
    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/ResultWithoutBG.vue

New file
@@ -0,0 +1,61 @@
<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>
      </div>
    </div>
    <div class="result-wrapper-tips">
      <slot name="tips"> </slot>
    </div>
    <div class="result-wrapper-actions">
      <slot name="actions">
        <div class="chunk-form-actions">
          <nut-button class="recharge-button" type="primary" @click="emit('goBackHome')">
            <div class="recharge-button-inner">
              <div class="recharge-button-text">生成我的推广码</div>
            </div>
          </nut-button>
        </div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { OssAssets } from '../../constants/img';

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

type Props = {
  title?: string;
  type?: 'success' | 'fail';
  orderNo?: string;
  servicePhone?: string;
  dangerTips?: string;
  warningTips?: string;
  customerServiceTips?: string;
};

const props = withDefaults(defineProps<Props>(), {});

const emit = defineEmits<{
  (e: 'goBackHome'): 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/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,7 @@
    }
  }
}

.result-without-bg-wrapper {
  margin-top: 32px;
}