fix: b2b商城添加页面标题国际化

1cb266e2 · GuanHua · 82a2c787 · 1cb266e2 · 1cb266e2 · 1cb266e2
Commit 1cb266e2 authored Mar 03, 2022 by GuanHua
19 changed files
--- a/apps/b2b/locales.json
+++ b/apps/b2b/locales.json
--- a/apps/b2b/web/layout/index.tsx
+++ b/apps/b2b/web/layout/index.tsx
@@ -24,6 +24,8 @@ const Layout: SFC<LayoutProps> = (props: LayoutProps): JSX.Element | null => {
    const { serverData } = props.layoutData! // tslint:disable-line
    const { injectCss, injectScript, keyword, description, title, themeName, subDomain } = props.layoutData!.app.config // tslint:disable-line

+    const pageTitle = `${title ? title : GlobalConfig.mallInfo.name}-${GlobalConfig.getMallInfoBySubDomain(subDomain)}`
+
    return (
      <html lang='en'>
        <head>
@@ -31,7 +33,7 @@ const Layout: SFC<LayoutProps> = (props: LayoutProps): JSX.Element | null => {
          <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no' />
          <meta name='theme-color' content='#000000' />
          <link rel='icon' type='image/x-icon' href={favIcon} />
-          <title>{`${title || GlobalConfig.mallInfo.name}-${GlobalConfig.getMallInfoBySubDomain(subDomain)}`}</title>
+          <title>{pageTitle}</title>
          <meta name='keyword' content={keyword || GlobalConfig.getMallInfoBySubDomain(subDomain)} />
          <meta name='description' content={description || GlobalConfig.getMallInfoBySubDomain(subDomain)} />
          {

--- a/apps/b2b/web/page/activity/index.tsx
+++ b/apps/b2b/web/page/activity/index.tsx
-import { Skeleton } from 'antd';
+import { MallInfoType } from '@/store/siteStore/modal';
+import { useMessageIntl } from '@linkseeks/lingxi-utils';
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { RouteComponentProps } from 'react-router';
 import CommodityList from './components/Commodity/list';
 import Coupon from './components/Coupon';
@@ -12,6 +14,9 @@ import styles from './index.less'
 interface IMatchParams {
  id: string;
 }
+interface Iprops {
+  mallInfo: MallInfoType
+}

 type CouponType = React.ComponentProps<typeof Coupon>

@@ -24,10 +29,10 @@ const ComponentMap: any = {
 /** 以下类型的全部为ComponentList 组件 */
 const ACTIVITY_TYPE = ["hot", "specialOffer", "plummet", "discount", "fullQuantitySub", "fullQuantityDiscount", "fullMoneySub", "fullMoneyDiscount", "giveProduct", "giveCoupon", "morePiece", "combination", "groupPurchase", "bargain", "secKill", "fullSwap", "buySwap", "preSale", "setMeal", "attempt"];

-
-const Activity: React.FC<RouteComponentProps<IMatchParams>> = (props: RouteComponentProps<IMatchParams>) => {
-  const { match: { params: { id } } } = props;
+const Activity: React.FC<RouteComponentProps<IMatchParams> & Iprops> = (props) => {
+  const { match: { params: { id } }, mallInfo } = props;
  const { activityData, layout, info, pageLoading, isExpired } = useActivityLayout(+id);
+  const { getMessage } = useMessageIntl()

  if (isExpired) {
    return (
@@ -42,7 +47,10 @@ const Activity: React.FC<RouteComponentProps<IMatchParams>> = (props: RouteCompo
  }

  return (
-    <div className={styles.page} style={{backgroundColor: layout?.['themeStyle'].props.color || '#E80047'}}>
+    <div className={styles.page} style={{ backgroundColor: layout?.['themeStyle'].props.color || '#E80047' }}>
+      <Helmet>
+        <title>{getMessage('page.title.activity')}-{mallInfo?.name}</title>
+      </Helmet>
      {
        activityData.map((_item: any, _index: number) => {
          const componentName = ACTIVITY_TYPE.includes(_item.name) || _item.name.includes('suggestProduct') ? 'commodityList' : _item.name
@@ -68,7 +76,7 @@ const Activity: React.FC<RouteComponentProps<IMatchParams>> = (props: RouteCompo
          if (!Component) {
            return null
          }
-          
+
          return <Component key={`${_item.name}-${_index}`} {..._item} activityType={_item.name} shopId={info?.shopId} />
        })
      }
@@ -78,12 +86,12 @@ const Activity: React.FC<RouteComponentProps<IMatchParams>> = (props: RouteCompo

 (Activity as any).getInitialProps = async (ctx: any) => {
  if (!__isBrowser__) {
-    return { 
+    return {
      // location: {
      //   pathname: ctx.req._parseUrl.pathname,
      //   search: ctx.req._parseUrl.search || ''
      // },
-      match: { 
+      match: {
        params: ctx.params
      }
    }

--- a/apps/b2b/web/page/commodity/index.less
+++ b/apps/b2b/web/page/commodity/index.less
@@ -42,7 +42,8 @@
            height: 16px;
            align-items: center;
            color: #606266;
-            width: 88px;
+            min-width: 88px;
+            padding: 0 8px;
            justify-content: center;
            font-size: 12px;
            border-right: 1px solid #EBECF0;

--- a/apps/b2b/web/page/commodity/index.tsx
+++ b/apps/b2b/web/page/commodity/index.tsx
 import React, { useState, useEffect } from 'react'
+import { Helmet } from 'react-helmet'
 import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons'
 import Filter from '@/components/Filter'
 import { FILTER_TYPE, LAYOUT_TYPE, COMMODITY_SHOW_TYPE } from '@/constants'
@@ -35,7 +36,7 @@ interface CommodityPropsType {
 const Commodity: SFC<CommodityPropsType> = (props) => {
  const { getMessage } = useMessageIntl()
  const [initLoad, setInitLoad] = useState<boolean>(true)
-  const { layoutType, shopId, mallId, FilterStore, userInfo, priceType = 1 } = props
+  const { layoutType, shopId, mallId, FilterStore, userInfo, mallInfo, priceType = 1 } = props
  const { filterParam, getCategoryList, getBrandList, getUseArea, updateFilterLoading } = FilterStore
  const [loading, setLoading] = useState<boolean>(true)
  const [showType, setShowType] = useState<COMMODITY_SHOW_TYPE>(COMMODITY_SHOW_TYPE.gird) // 展示方式：1：矩阵排列； 2:列表排列
@@ -224,6 +225,9 @@ const Commodity: SFC<CommodityPropsType> = (props) => {

  return (
    <div className={styles.commodity}>
+      <Helmet>
+        <title>{getMessage(priceType === 1 ? 'page.title.commodity' : 'page.title.inquiry')}-{mallInfo.name}</title>
+      </Helmet>
      <div className={styles.mall_container}>
        <div className={styles.commodity_container}>
          <Filter filterConfig={filterConfig} {...props} />

--- a/apps/b2b/web/page/commodityDetail/index.tsx
+++ b/apps/b2b/web/page/commodityDetail/index.tsx
@@ -51,6 +51,7 @@ import { MarketingDetailType, CurrentSkuItemType, GroupDetailType, PromotionItem
 // import useGetMarketingCampaign from './hooks/useGetMarketingCampaign'
 import styles from './index.less'
 import { dateFormat } from "@/utils/date";
+import { Helmet } from "react-helmet";

 interface ImgItemType {
  id: string;
@@ -1025,6 +1026,9 @@ const CommodityDetail: SFC<CommodityDetailPropsType> = (props) => {

  return (
    <Spin spinning={spinLoading}>
+      <Helmet>
+        <title>{getMessage('page.title.commodityDetail')}-{mallInfo.name}</title>
+      </Helmet>
      <div className={styles.commodity_detail}>
        {!errorInfo ? commodityDetail && (
          <div className={styles.commodity_detail_container}>

--- a/apps/b2b/web/page/integral/index.tsx
+++ b/apps/b2b/web/page/integral/index.tsx
@@ -35,7 +35,7 @@ interface CommodityPropsType {
 const Integral: SFC<CommodityPropsType> = (props) => {
  const { getMessage } = useMessageIntl()
  const [initLoad, setInitLoad] = useState<boolean>(true)
-  const { layoutType, shopId, FilterStore } = props
+  const { layoutType, shopId, FilterStore, mallInfo } = props
  const { filterParam, getCategoryList, updateFilterLoading } = FilterStore
  const { filter } = props.match?.params || {}
  const { pathname, search } = props.location || {}
@@ -181,7 +181,9 @@ const Integral: SFC<CommodityPropsType> = (props) => {

  return (
    <>
-      <Helmet></Helmet>
+      <Helmet>
+        <title>{getMessage('page.title.integral')}-{mallInfo.name}</title>
+      </Helmet>
      <div className={styles.commodity}>
        <div className={styles.mall_container}>
          <div className={styles.commodity_container}>

--- a/apps/b2b/web/page/makeUpList/activity.tsx
+++ b/apps/b2b/web/page/makeUpList/activity.tsx
@@ -19,6 +19,7 @@ import {
 import { postSearchShopPurchaseSaveOrUpdatePurchase } from '@/services/SearchV2Api'
 import { getQueryString, useMessageIntl } from '@linkseeks/lingxi-utils'
 import { OrderStoreModal } from '@/store/orderStore/modal'
+import { Helmet } from 'react-helmet'

 interface CommodityPropsType {
  location: any,
@@ -41,7 +42,7 @@ interface ActivityParamType {

 const ActivityMakeUpList: SFC<CommodityPropsType> = (props) => {
  const { getMessage } = useMessageIntl()
-  const { mallId, userInfo, OrderStore } = props
+  const { mallId, userInfo, OrderStore, mallInfo } = props
  const { id } = props.match?.params || {}
  const { search } = props.location || {}
  const [loading, setLoading] = useState<boolean>(true)
@@ -147,6 +148,9 @@ const ActivityMakeUpList: SFC<CommodityPropsType> = (props) => {

  return (
    <div className={styles.commodity}>
+      <Helmet>
+        <title>{getMessage('page.title.makeUpList')}-{mallInfo?.name}</title>
+      </Helmet>
      <div className={styles.mall_container}>
        <div className={styles.commodity_container}>
          <div className={styles.commodity_main}>

--- a/apps/b2b/web/page/makeUpList/index.tsx
+++ b/apps/b2b/web/page/makeUpList/index.tsx
@@ -20,6 +20,7 @@ import { postSearchShopPurchaseSaveOrUpdatePurchase } from '@/services/SearchV2A
 import { getQueryString, useMessageIntl } from '@linkseeks/lingxi-utils'
 import { OrderStoreModal } from '@/store/orderStore/modal'
 import { useLocation, useRouteMatch } from 'react-router-dom'
+import { Helmet } from 'react-helmet'

 interface CommodityPropsType {
  location: any,
@@ -42,7 +43,7 @@ interface CouponParamType {

 const makeUpList: SFC<CommodityPropsType> = (props) => {
  const { getMessage } = useMessageIntl()
-  const { mallId, userInfo, OrderStore } = props
+  const { mallId, userInfo, OrderStore, mallInfo } = props
  const { search } = useLocation()
  const { id } = useRouteMatch<{ id: string }>().params

@@ -146,6 +147,9 @@ const makeUpList: SFC<CommodityPropsType> = (props) => {

  return (
    <div className={styles.commodity}>
+      <Helmet>
+        <title>{getMessage('page.title.makeUpList')}-{mallInfo?.name}</title>
+      </Helmet>
      <div className={styles.mall_container}>
        <div className={styles.commodity_container}>
          <div className={styles.commodity_main}>

--- a/apps/b2b/web/page/news/index.tsx
+++ b/apps/b2b/web/page/news/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { RouteComponentProps } from 'react-router'
 import { Context } from 'midway'
 import './index.less'
-import {  useMessageIntl } from '@linkseeks/lingxi-utils'
+import { useMessageIntl } from '@linkseeks/lingxi-utils'

 interface MockData {
  [index: string]: string

--- a/apps/b2b/web/page/order/index.tsx
+++ b/apps/b2b/web/page/order/index.tsx
@@ -59,6 +59,7 @@ import CouponSelect from "./coupon";
 import { dateFormat } from "@/utils/date";
 import OrderMessage from "./orderMessage";
 import { postMarketingMobileActivityGoodsPriceCalculate } from "@/services/MarketingV2Api";
+import { Helmet } from "react-helmet";

 interface OrderPropsType {
  location: any;
@@ -985,6 +986,9 @@ const Order: SFC<OrderPropsType> = (props) => {
  };
  return (
    <Spin spinning={spinningState}>
+      <Helmet>
+        <title>{getMessage('page.title.order')}-{mallInfo.name}</title>
+      </Helmet>
      <div className={styles.order}>
        <CommonHeader
          logoUrl={mallInfo.logoUrl}

--- a/apps/b2b/web/page/pay/index.tsx
+++ b/apps/b2b/web/page/pay/index.tsx
@@ -18,6 +18,7 @@ import { LAYOUT_TYPE } from '@/constants'
 import { PayWayType } from '@/constants/pay'
 import styles from './index.less'
 import { Button } from 'antd'
+import { Helmet } from 'react-helmet'

 interface PayPagePropsType {
  location: any;
@@ -144,6 +145,9 @@ const PayPage: SFC<PayPagePropsType> = (props) => {

  return !loading ? query ? !payState ? (
    <div className={styles.pay}>
+      <Helmet>
+        <title>{getMessage('page.title.pay')}-{mallInfo.name}</title>
+      </Helmet>
      <CommonHeader
        logoUrl={mallInfo.logoUrl}
        title={pageTitle}

--- a/apps/b2b/web/page/payResult/index.tsx
+++ b/apps/b2b/web/page/payResult/index.tsx
 /*
 * @Author: ghua
 * @Date: 2020-11-09 18:18:52
- * @LastEditTime: 2021-02-22 14:47:14
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-03-03 17:42:44
+ * @LastEditors: GHua
 * @Description: In User Settings Edit
 * @FilePath: /lingxi-business-paltform/src/pages/lxMall/payResult/index.tsx
 */
@@ -17,6 +17,7 @@ import { getQueryString, useMessageIntl } from '@linkseeks/lingxi-utils'
 import { LinkTo } from '@/utils'
 import paySuccessIcon from '@/assets/imgs/pay_success.png'
 import styles from './index.less'
+import { Helmet } from 'react-helmet'

 interface PayResultPropsType {
  location: any;
@@ -81,6 +82,9 @@ const PayResult: React.FC<PayResultPropsType> = (props) => {

  return (
    <div className={styles.pay}>
+      <Helmet>
+        <title>{getMessage('page.title.payResult')}-{mallInfo.name}</title>
+      </Helmet>
      <CommonHeader
        logoUrl={mallInfo.logoUrl}
        title={getMessage('payResult.index.orderResult')}

--- a/apps/b2b/web/page/purchaseOrder/index.tsx
+++ b/apps/b2b/web/page/purchaseOrder/index.tsx
@@ -19,6 +19,7 @@ import ButtonSettlement from './buttonSettlement'
 import { NoData } from '@linkseeks/lingxi-components'
 import { useMessageIntl } from '@linkseeks/lingxi-utils'
 import { fnInitHandPrice } from './commonFn'
+import { Helmet } from 'react-helmet'

 interface PurchaseOrderPropsType {
  OrderStore: OrderStoreModal,
@@ -357,6 +358,9 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {

  return (
    <div className={styles.purchase_order}>
+      <Helmet>
+        <title>{getMessage('page.title.purchaseOrder')}-{mallInfo.name}</title>
+      </Helmet>
      <CommonHeader
        title={getMessage('purchaseOrder.index.purchaseOrder')}
        type={layoutType}

--- a/apps/b2b/web/page/stores/index.tsx
+++ b/apps/b2b/web/page/stores/index.tsx
@@ -16,6 +16,7 @@ import isEmpty from 'lodash/isEmpty'
 import styles from './index.less'
 import { GetTemplateWebMemberShopWebMemberShopListResponseDetail, getTemplateWebMemberShopWebMemberShopList } from '@/services/Template2Api'
 import { MallInfoType } from '@/store/siteStore/modal'
+import { Helmet } from 'react-helmet'

 interface ShopListPropsType {
  FilterStore: FilterStoreModal;
@@ -32,7 +33,7 @@ interface ShopListPropsType {

 const ShopList: React.FC<ShopListPropsType> = (props) => {
  const { getMessage } = useMessageIntl()
-  const { layoutType, FilterStore, mallId } = props
+  const { layoutType, FilterStore, mallId, mallInfo } = props
  const { filterParam, getCategoryList, getUseArea, updateFilterLoading } = FilterStore
  const { pathname, search } = useLocation()
  const { filter } = useRouteMatch<{ filter: string }>().params
@@ -149,6 +150,9 @@ const ShopList: React.FC<ShopListPropsType> = (props) => {

  return (
    <div className={styles.commodity}>
+      <Helmet>
+        <title>{getMessage('page.title.stores')}-{mallInfo.name}</title>
+      </Helmet>
      <div className={styles.mall_container}>
        <div className={styles.commodity_container}>
          <Filter filterConfig={filterConfig} {...props} layoutType={LAYOUT_TYPE.shopList} />

--- a/locales/b2b/zh-CN.js
+++ b/locales/b2b/zh-CN.js
@@ -1273,5 +1273,5 @@ module.exports = {
    'activity.expire.seeOther': '商城正在进行其他活动，赶紧去看看吧',
    'activity.expire.back': '立即返回',
    'activity.expire.timeoutBefore': '系统将在',
-    'activity.expire.timeoutAfter': '秒后返回活动页面'
+    'activity.expire.timeoutAfter': '秒后返回活动页面',
 }
\ No newline at end of file
--- a/locales/common/en-US.js
+++ b/locales/common/en-US.js
 module.exports = {
+  'page.title.commodity': 'Spot Commodity',
+  'page.title.inquiry': 'Inquiry product product',
+  'page.title.commodityDetail': 'Product Details',
+  'page.title.stores': 'Preferred Stores',
+  'page.title.integral': 'Points exchange',
+  'page.title.purchaseOrder': 'Purchase Order',
+  'page.title.order': 'Order settlement',
+  'page.title.pay': 'Order payment',
+  'page.title.payResult': 'Payment Result',
+  'page.title.noFound': 'Page not found',
  "39076": "Contract execution id cannot be all empty",
  "39075": "The materials are not all associated with the quotation products",
  "39078": "The payment details and the contract documents do not match",

--- a/locales/common/ko-KR.js
+++ b/locales/common/ko-KR.js
 module.exports = {
+  'page.title.commodity': '상품 현물',
+  'page.title.inquiry': '상품 문의하기',
+  'page.title.commodityDetail': '제품 세부 정보',
+  'page.title.stores': '선호하는 상점',
+  'page.title.integral': '포인트 교환',
+  'page.title.purchaseOrder': '구매 주문',
+  'page.title.order': '주문결제',
+  'page.title.pay': '주문결제',
+  'page.title.payResult': '결제 결과',
+  'page.title.noFound': '페이지를 찾을 수 없음',
  "39076": "계약 실행 ID는 모두 비워 둘 수 없습니다.",
  "39075": "자료가 모두 견적 제품과 연결되어 있지는 않습니다.",
  "39078": "결제내역과 계약서류가 일치하지 않습니다",

--- a/locales/common/zh-CN.js
+++ b/locales/common/zh-CN.js
 module.exports = {
+  'page.title.commodity': '现货商品',
+  'page.title.inquiry': '询价商品商品',
+  'page.title.commodityDetail': '商品详情',
+  'page.title.stores': '优选店铺',
+  'page.title.integral': '积分兑换',
+  'page.title.purchaseOrder': '进货单',
+  'page.title.order': '订单结算',
+  'page.title.pay': '订单支付',
+  'page.title.payResult': '支付结果',
+  'page.title.noFound': '找不到页面',
+  'page.title.activity': '活动页',
+  'page.title.makeUpList': '活动凑单',
  "39076": "合同执行id不能全为空",
  "39075": "物料未全部关联报价商品",
  "39078": "请款明细单据与合同单据不匹配",