fix: 页面

zhengyiming

2025-02-21 db9a1cb8638d0159e5bce586c0e6a0610bc2b625

fix: 页面

 apps/taro/src/app.config.ts

@@ -53,7 +53,11 @@
    },
    {
      root: 'subpackages/recharge',
      pages: ['phoneBillRecharge/phoneBillRecharge'],
      pages: [
        'phoneBillRecharge/phoneBillRecharge',
        'selectPayType/selectPayType',
        'rechargeResult/rechargeResult',
      ],
    },
  ],
  // preloadRule: {

 apps/taro/src/components/Layout/PageLayout.vue

@@ -1,7 +1,7 @@
<template>
  <Portal.Host>
    <div :class="['page-layout-wrapper', { isWeb: isWeb }]" v-bind="$attrs">
      <slot v-if="showNavigationBar" name="navigationBar">
      <slot v-if="_showNavigationBar" name="navigationBar">
        <CommonNavigationBar v-bind="_commonNavigationBarProps" />
      </slot>

@@ -45,7 +45,9 @@
import { useAuth } from '@/hooks';
import { Portal } from 'senin-mini/components';
import { usePickProps } from 'senin-mini/hooks';
import { isWeb } from '@/utils/env';
import { isWeb, isInAlipay, isInWeChat } from '@/utils/env';
//@ts-ignore
import { setPageTitle } from '@/utils';

defineOptions({
  name: 'PageLayout',
@@ -72,7 +74,20 @@
  },
});

setPageTitle(props.title);

const _commonNavigationBarProps = usePickProps(props, commonNavigationBarProps);

const _showNavigationBar = computed(() => {
  if (props.showNavigationBar) {
    if (isWeb) {
      return !isInAlipay && !isInWeChat;
    }
    return true;
  } else {
    return false;
  }
});

const { isAuth } = useAuth({
  needAuth: props.needAuth,
@@ -93,7 +108,7 @@
  let pageHeight = pageHeightWithTabBar.value
    ? systemStore.pageHeightWithTab
    : systemStore.pageHeight;
  pageHeight = pageHeight + (props.showNavigationBar ? 0 : navigationBarHeight.value);
  pageHeight = pageHeight + (_showNavigationBar.value ? 0 : navigationBarHeight.value);
  return pageHeight + 'px';
});
</script>

 apps/taro/src/constants/router.ts

@@ -9,4 +9,6 @@
  mine = '/pages/mine/index',

  phoneBillRecharge = '/subpackages/recharge/phoneBillRecharge/phoneBillRecharge',
  selectPayType = '/subpackages/recharge/selectPayType/selectPayType',
  rechargeResult = '/subpackages/recharge/rechargeResult/rechargeResult',
}

 apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue

@@ -1,13 +1,20 @@
<template>
  <ContentScrollView :paddingH="false">
    <PhoneBillRecharge />
    <PhoneBillRecharge @goPay="goPay" />
  </ContentScrollView>
</template>

<script setup lang="ts">
import { PhoneBillRecharge } from '@life-payment/components';
import Taro from '@tarojs/taro';

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

function goPay() {
  Taro.navigateTo({
    url: RouterPath.selectPayType,
  });
}
</script>

 apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.config.ts

 apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.vue

New file
@@ -0,0 +1,17 @@
<template>
  <PageLayout title="充值成功" class="rechargeResult-page-wrapper" hasBorder :need-auth="false">
    <ContentScrollView>
      <RechargeResultView style="margin-top: 40px" @go-back-home="goHome()" />
    </ContentScrollView>
  </PageLayout>
</template>

<script setup lang="ts">
import { PageLayout } from '@/components';
import { goHome } from '@/utils';
import { RechargeResultView } from '@life-payment/components';

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

 apps/taro/src/subpackages/recharge/selectPayType/InnerPage.vue

New file
@@ -0,0 +1,13 @@
<template>
  <ContentScrollView>
    <SelectPayTypeView style="margin-top: 40px" />
  </ContentScrollView>
</template>

<script setup lang="ts">
import { SelectPayTypeView } from '@life-payment/components';

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

 apps/taro/src/subpackages/recharge/selectPayType/selectPayType.config.ts

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

 apps/taro/src/subpackages/recharge/selectPayType/selectPayType.vue

New file
@@ -0,0 +1,14 @@
<template>
  <PageLayout title="话费充值" class="selectPayType-page-wrapper" hasBorder :need-auth="false">
    <InnerPage />
  </PageLayout>
</template>

<script setup lang="ts">
import { PageLayout } from '@/components';
import InnerPage from './InnerPage.vue';

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

 apps/taro/src/utils/env.ts

@@ -13,3 +13,6 @@
// H5、小程序、app 均认为是手机端产品，如果需要统一手机端 UI 样式，可以直接用 isMobile 控制
export const isMobile = isH5 || isWeChat || isApp;
export const isWeb = isH5 || isPC;

export const isInAlipay = /AlipayClient/i.test(navigator.userAgent);
export const isInWeChat = /MicroMessenger/i.test(navigator.userAgent);

 apps/taro/src/utils/index.ts

@@ -3,3 +3,5 @@
export * from './common';
export * from './validator';
export * from './file';
//@ts-ignore
export * from './setPageTitle';

 apps/taro/src/utils/setPageTitle/index.h5.ts

New file
@@ -0,0 +1,12 @@
const title = '生活缴费';

export function getPageTitle(pageTitle: string) {
  if (pageTitle) {
    return `${pageTitle} - ${title}`;
  }
  return `${title}`;
}

export function setPageTitle(pageTitle: string) {
  document.title = getPageTitle(pageTitle);
}

 apps/taro/src/utils/setPageTitle/index.weapp.ts

New file
@@ -0,0 +1,3 @@
export function getPageTitle(pageTitle: string) {}

export function setPageTitle(pageTitle: string) {}

 packages/components/assets/icon-alipay.png

 packages/components/assets/icon-free-phone.png

 packages/components/assets/icon-weixin-pay.png

 packages/components/src/components/Dialog/ConfirmDialog.vue

@@ -7,6 +7,9 @@
      <div class="confirm-dialog-content-info">
        <slot name="info"></slot>
      </div>
      <div class="confirm-dialog-content-warning">
        同一号码充值期间，未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担！！！
      </div>
    </div>
  </nut-dialog>
</template>

 packages/components/src/index.ts

@@ -1,3 +1,5 @@
export { default as RechargeGrid } from './views/RechargeGrid/RechargeGrid.vue';
export { default as PhoneBillRecharge } from './views/PhoneBillRecharge/PhoneBillRecharge.vue';
export { default as SelectPayTypeView } from './views/SelectPayTypeView/SelectPayTypeView.vue';
export { default as RechargeResultView } from './views/RechargeResultView/RechargeResultView.vue';
export * from './utils';

 packages/components/src/styles/components.scss

@@ -38,6 +38,7 @@
    padding: 12px;
    border-radius: 8px;
    background: #f0f3fa;
    margin-bottom: 8px;

    .confirm-dialog-content-info-item {
      display: flex;
@@ -67,4 +68,72 @@
      }
    }
  }

  .confirm-dialog-content-warning {
    color: boleGetCssVar('color', 'danger');
    text-align: left;
    font-size: 16px;
    line-height: 20px;
  }
}

.select-pay-type-view {
  .select-pay-type-view-item-icon {
    width: 32px;
    height: 32px;
    margin-right: 12px;
  }

  .select-pay-type-view-item {
    padding-left: 20px;
    display: flex;
    align-items: center;
    height: 80px;
    border: 1px solid #e2e5eb;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 16px;
    cursor: pointer;
    font-size: 16px;
    color: boleGetCssVar('text-color', 'primary');
  }
}

.recharge-result-view {
  // padding:;

  .recharge-result-view-title {
    font-size: 18px;
    color: boleGetCssVar('text-color', 'primary');
    font-weight: 600;
    margin-bottom: 12px;
    text-align: center;
    line-height: 24px;
  }

  .recharge-result-view-tips {
    margin-bottom: 12px;
    font-size: 16px;
    color: boleGetCssVar('color', 'danger');
    line-height: 20px;
  }

  .recharge-result-view-warning {
    margin-bottom: 20px;
    font-size: 12px;
    color: boleGetCssVar('color', 'warning');
    line-height: 16px;
  }

  .recharge-result-view-btn-wrapper {
    display: flex;
    justify-content: center;

    .recharge-result-view-btn {
      padding: 0 20px;
      font-size: 16px;
      color: boleGetCssVar('color', 'primary');
      line-height: 16px;
    }
  }
}

 packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue

@@ -51,7 +51,7 @@
      </nut-button>
      <RechargeTipsView :tips="tips" />
    </div>
    <ConfirmDialog v-model:visible="confirmDialogVisible">
    <ConfirmDialog v-model:visible="confirmDialogVisible" @ok="goPay">
      <template #info>
        <ConfirmDialogInfoItem label="充值账号" content="18858418480" />
        <ConfirmDialogInfoItem label="充值金额" :content="`￥${form.parValue}`" danger />
@@ -76,6 +76,10 @@
defineOptions({
  name: 'PhoneBillRecharge',
});

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

const form = reactive({
  ispCode: IspCode.yidong,
@@ -118,4 +122,8 @@
function recharge() {
  confirmDialogVisible.value = true;
}

function goPay() {
  emit('goPay');
}
</script>

 packages/components/src/views/RechargeResultView/RechargeResultView.vue

New file
@@ -0,0 +1,28 @@
<template>
  <div class="recharge-result-view">
    <div class="recharge-result-view-title">支付成功，充值款将在0-24小时内到账</div>
    <div class="recharge-result-view-tips">
      同一号码充值期间，未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担！！！
    </div>
    <div class="recharge-result-view-warning">
      如接到陌生来电，对方以缴费或误操作等理由要求处理款项，务必立即拉黑，谨防诈骗!!!
    </div>
    <div class="recharge-result-view-btn-wrapper">
      <div class="recharge-result-view-btn" @click="emit('goBackHome')">回首页</div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'RechargeResultView',
});

// type Props = {};

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

const emit = defineEmits<{
  (e: 'goBackHome'): void;
}>();
</script>

 packages/components/src/views/SelectPayTypeView/SelectPayTypeView.vue

New file
@@ -0,0 +1,25 @@
<template>
  <div class="select-pay-type-view">
    <div class="select-pay-type-view-item">
      <img class="select-pay-type-view-item-icon" :src="IconAliPay" />
      <div class="select-pay-type-view-item-text">支付宝支付</div>
    </div>
    <div class="select-pay-type-view-item">
      <img class="select-pay-type-view-item-icon" :src="IconWeixin" />
      <div class="select-pay-type-view-item-text">微信支付</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import IconWeixin from '../../../assets/icon-weixin-pay.png';
import IconAliPay from '../../../assets/icon-alipay.png';

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

// type Props = {};

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