公共组件

包括三个公共组件：

shortcut`<div id="shortcut-2024"></div>`、

elevator`<div id="elevator-2024"></div>`、

area`<div id="area-2024"></div>`。

1. node版本：18.19.1；安装 pnpm install；运行 npm run start ；预发包 npm run buildPre；生产包 npm run buildProd；

如何使用

区分预发和生产：window.pageConfig.product.colorApiDomain = '//beta-api.m.jd.com'

appid配置：window.commonAppId = "www-jd-com"

一、elevator，电梯，侧边栏

1、加车统一方法：pageConfig.flyToCart() **

** 使用示例：**

 pageConfig.flyToCart({

      img: '',   // 飞入的主图图片链接

      id: '', // 点击位置元素id

      apiBody: {

       appid: 'item-v3', // 接口appid

       directOperation: {

       source: 'common',// 场景来源：全流程支持立即购买common 、百亿补贴bybt、国补zfbt

      theSkus: [

       {

        skuId: '100091554525',

        num: '2', // 商品数量 虚拟组套传1，其他传期数*件数，本期pc不支持虚拟组套类型

        itemType: 1, // 商品类型， 等待确认

        // extFlag: extFlag,

        // relationSkus: relationSkus

       },

      ],

      // ext: ext

      },

     },

    // 成功和失败回调，封装通用的逻辑，一些特殊逻辑可以调用方自己包装

    callback: {

     success: (data) => {

      console.log('callback2', data)

     },

     error: (e) => {

      console.log('callback', e)

     },

     complete: () => { }

    }

    })

directOperation参数都是加入购物车接口需要的入参，对应的接口文档：** PC购物车 - 加车 / 立即购买接口文档

**更新购物车数量：**window.itemEventBus.dispatchEmit('cartNumChange', { cartNum:this.state.cartNum })

2、侧边栏点击回调和曝光：function onClick({ name }) { }；function expose({ name }) { }；window.elevator({ onClick, expose }); 更新侧边栏数据：updateLinkData(data= [{ name:'', url:'', icon:'Cart', src:'', hoverSrc:'' }]);

3、配置

// 手机京东的配置

window.pageConfig.shortcutMobileData = [
  {
    title: '\u624b\u673a\u4eac\u4e1c',
    desc: '\u65b0\u4eba\u4e13\u4eab\u5927\u793c\u5305',
    img: 'jfs\/t1\/84498\/39\/9486\/28110\/5d72189bEee8e7110\/773e5a267ab3786c.png',
    url: 'https:\/\/app.jd.com\/',
    devices: [
      { type: 'iphone', src: 'https:\/\/itunes.apple.com\/cn\/app\/id414245413' },
      { type: 'android', src: 'https:\/\/storage.jd.com\/jdmobile\/JDMALL-PC2.apk' },
      { type: 'ipad', src: 'https:\/\/itunes.apple.com\/cn\/app\/jing-dong-hd\/id434374726' },
    ]
  },
  {
    title: '\u5173\u6ce8\u4eac\u4e1c\u5fae\u4fe1',
    desc: '\u5fae\u4fe1\u626b\u4e00\u626b\u5173\u6ce8\u4eac\u4e1c\u670d\u52a1\u53f7\u8ba2\u9605\u66f4\u591a\u4fc3\u9500\u4f18\u60e0\u798f\u5229',
    img: 'jfs\/t1\/74865\/18\/9334\/11346\/5d7218c7Ecccb8ff0\/34095b63503fc108.jpg',
    url: '',
    devices: []
  },
  {
    title: '\u4eac\u4e1c\u91d1\u878d\u5ba2\u6237\u7aef',
    desc: '\u65b0\u4eba\u4e13\u4eab\u5927\u793c\u5305',
    img: 'jfs\/t1\/77329\/31\/9360\/15408\/5d7218f7Efb5248cb\/ac1de226dafd0455.jpg',
    url: 'https:\/\/m.jr.jd.com\/integrate\/download\/html\/pc.html',
    devices: [
      {
        type: 'iphone',
        src: 'https:\/\/itunes.apple.com\/cn\/app\/jing-dong-jin-rong-hui-li\/id895682747?mt=8',
      },
      { type: 'android', src: 'http:\/\/211.151.9.66\/downapp\/jrapp_jr188.apk' },
    ]
  },
  {
    title: '\u4eac\u4e1c\u5065\u5eb7\u5ba2\u6237\u7aef',
    desc: '',
    img: 'jfs\/t1\/171539\/38\/9328\/28300\/60404decE2ee00c60\/297e613c999daada.png',
    url: 'https:\/\/www.jd.com',
    devices: [
      { type: 'iphone', src: 'https:\/\/hlc.m.jd.com\/download\/?downloadSource=jdh_JDcom' },
      { type: 'android', src: 'https:\/\/hlc.m.jd.com\/download\/?downloadSource=jdh_JDcom' },
    ]
  },
  {
    title: '\u5173\u6ce8\u4eac\u4e1c\u5c0f\u7a0b\u5e8f',
    desc: '\u65b0\u4eba0.1\u5143\u8d2d',
    img: 'jfs\/t1\/154335\/38\/20291\/19657\/60404de0Ece970bda\/917415e2e3b10628.jpg',
    url: '',
    devices: []
  }
]

//侧边栏反馈链接配置
window.pageConfig.product.FEEDBACK = 'https://wj-dongjian.jd.com/q/61961f7b0871e6011f8bd699'

//隐藏切换企业版配置
window.pageConfig.hideCom = true

//适老化配置
window.pageConfig.headShiLaoHua = true

//隐藏购物车图标，不调用购物车数量查询接口
window.pageConfig.hideCart = true,

//客户服务链接配置
window.pageConfig.headServiceType = 'default'
是用HEAD_SERVICE

//const type=window.pageConfig?.headServiceType

//url=APIS[`HEAD_SERVICE_BACKUP${type?.toUpperCase()}`]

//export const HEAD_SERVICE='//dc.3.cn/client/get'

//export const HEAD_SERVICE_BACKUP='//d.jd.com/client/get'

// 头部客户服务每两周兜底

//export const HEAD_SERVICE_BACKUPA='//storage.jd.com/backup-static-js/8a2d78cd48848469fe695c4a83addadc.js'

//export const HEAD_SERVICE_BACKUPB='//storage.jd.com/backup-static-js/8e13789a508d4c451575ba61fc86afe7.js'

//侧边栏icon配置
window.pageConfig.cartIcons = [
  { name: '购物车', poiSuffix: '051', icon: 'Cart' },
  { name: '我的', poiSuffix: '052', icon: 'Me' },
  { name: '客服', poiSuffix: '05', icon: 'ConsumerService' },
  { name: '问医生', poiSuffix: '053', icon: 'AskDoctor' },
  { name: '营业厅', poiSuffix: '054', icon: 'Hall' },
  { name: '手机查看', poiSuffix: '055', icon: 'QRCode' },
  { name: '反馈', poiSuffix: '06', icon: 'Feedback' },
]

bus通信插件`<script type="text/javascript" src="https://storage.360buyimg.com/retail-mall/lib/emiter.js"></script>`

适老化`<script charset='utf-8' type="text/javascript" src="https://static.360buyimg.com/item/assets/oldman/wza1/aria.js?appid=bfeaebea192374ec1f220455f8d5f952"></script>`

二、地址组件 area

1，

   window.area($("#area-2024"), {
  
    placement: 'bottomLeft',  // bottom居中对齐，bottomLeft左对齐，bottomRight右对齐，不写默认在父级右侧，如商详;

    topClassName: "jd-cart",  // 给组件添加class

    hasOversea: true,

    scopeLevel: 4,

    showLoading: true,

    initArea: readCookie("ipLoc-djd") || "1-72-0-0.123",

    hasCommonAreas: true,

    cookieOpts: { path: "/", domain: "jd.com", expires: 30 },

    onReady: function (local) {

    handleArea(local);

     setTimeout(function () {

      window.CartAction("LOAD_CARTINFO"); // 刷新主接口

     }, 500);

    },

    onChange: function (area, local) {

     handleArea(local);

     setTimeout(function () {

      window.CartAction("LOAD_CARTINFO"); // 刷新主接口

     }, 500);

    },

    onTabClick: function (name) { },
  
    onClick: function (data) { },

});

三、公共组件相关的接口

shortcut组件 functionId: 'pcCart_jc_getCartNum' 购物车数量 functionId: 'pcCart_jc_gate' 加车接口 functionId: 'checkChat' 商详客服接口 functionId: 'pcorder_getOrderListCountJson' 待处理订单 functionId: 'pc_getMyJdAnswerCount’我的问答 functionId: 'jsfbox_queryTopbar',改成pctradesoa_queryTopbar 页头plus工具条用户信息 functionId: 'jsfbox_followCommodity_queryForCount'改成pctradesoa_followCommodity_count 用户关注商品中降级数量 functionId: 'pc_home_ace', 改成pctradesoa_query_ace 企业采购下拉 functionId: 'jsfbox_user_level',已弃用，改用name:jsonpUserinfo, '//passport.jingdong.com/user/petName/getUserInfoForMiniJd.action' 判断企业用户 functionId: 'pingou_webmonitor_biz' 前端功能可用性上报 functionId: 'getcouponcount' 我的优惠券 functionId: 'btshowjsf' 我的白条

/----------- areaMini地址 -----------/ //lapi.jd.com/locate?source=pchome

/----------- 头部客户服务 -----------/ export const HEAD_SERVICE = '//dc.3.cn/client/get?callback=jsonpshortService' export const HEAD_SERVICE_BACKUP = '//d.jd.com/client/get' // 头部客户服务每两周兜底 export const HEAD_SERVICE_BACKUPA='//storage.jd.com/backup-static-js/8a2d78cd48848469fe695c4a83addadc.js' export const HEAD_SERVICE_BACKUPB='//storage.jd.com/backup-static-js/8e13789a508d4c451575ba61fc86afe7.js'

/----------- 头部网址导航 -----------/ export const HEAD_SITENAV = '//dc.3.cn/navigation/get?&callback=jsonpshortcutSitenav' export const HEAD_SITENAV_BACKUP = '//d.jd.com/navigation/get'

/----------- 获取用户名 -----------/ export const USER_NAME = '//passport.jd.com/new/helloService.ashx'

/----------- 用户信息 -----------/ export const GET_RELEVANCEPIN = '//passport.jd.com/bc/relevancePin?&callback=jsonpRelevancePin' export const GET_USERINFO = '//passport.jd.com/user/petName/getUserInfoForMiniJd.action' export const IS_LOGIN = '//passport.jd.com/loginservice.aspx?method=Login'

area组件 functionId:'pc_address_cmpnt_getCascadeAddress' 地址四级地址省市区 functionId:'pc_address_cmpnt_queryAddress' 常用地址