feat:下单流程对接和商城首页链接跳转问题

package.json

@@ -41,7 +41,7 @@
     "copy-to-clipboard": "^3.3.1",
     "god": "^0.1.27",
     "lingxi-design": "^1.0.7",
-    "lingxi-design-ui": "^1.1.0",
+    "lingxi-design-ui": "^1.1.2",
     "lingxi-editor-core": "^1.0.6",
     "lingxi-web": "^1.0.6",
     "lint-staged": "^10.0.7",

src/locales/zh-CN/menu.ts

@@ -10,6 +10,11 @@ export default {
   'menu.home': '首页',
   'menu.mallHome': '首页',
   'menu.shopHome': '首页',
+  'menu.commodityDetail': '商品详情',
+  'menu.mallCommoditySearch': '商品搜索',
+  'menu.order': '订单结算',
+  'menu.purchaseOrder': '进货单',
+  'menu.pay': '收银台',
   'menu.mallCommodity': '商品商城',
   'menu.shopCommodity': '商品',
   'menu.shopCommoditySearch': '商品搜索',
@@ -130,7 +135,7 @@ export default {
   'menu.tranactionAbility.enquiryOffer': '需求报价',
   'menu.tranactionAbility.enquiryOffer.enquirySearch': '需求单查询',
 
-  
+
 
   //物流能力
   'menu.logisticsAbility': '物流',

src/pages/lxMall/commodity/index.tsx

@@ -50,7 +50,7 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
   const [commonlyUsedName, setCommonlyUsedName] = useState<string>("")
   const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange, saveCommonlyUsedFilter } = FilterStore
   const { layoutType, shopId } = props
-  const { query: { categoryId, categoryName } } = props.location
+  const { query: { categoryId, categoryName, brandId, brandName } } = props.location
   const [loading, setLoading] = useState<boolean>(true)
   const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
   const [commodityList, setCommodityList] = useState<GetSearchShopEnterpriseGetCommodityListResponseDetail[]>([])
@@ -72,6 +72,13 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
         type: FILTER_TYPE.category,
       })
     }
+    if (brandId && brandName) {
+      onFilter({
+        key: brandId,
+        title: decodeURIComponent(atob(brandName)),
+        type: FILTER_TYPE.brand,
+      })
+    }
   }, [props.location.query])
 
   useEffect(() => {

src/pages/lxMall/commodityDetail/index.less

@@ -118,6 +118,9 @@
             }
 
             &_brief {
+              flex: 1;
+              width: 0;
+
               &.row {
                 display: flex;
                 align-items: center;
@@ -135,6 +138,7 @@
 
               .product_info_line_list {
                 display: flex;
+                flex-wrap: wrap;
 
                 &_item {
                   position: relative;
@@ -143,6 +147,7 @@
                   padding-right: 10px;
                   display: flex;
                   align-items: center;
+                  margin-bottom: 6px;
                   border: 1px solid rgba(235, 236, 240, 1);
                   cursor: pointer;
 
@@ -150,6 +155,11 @@
                     justify-content: center;
                   }
 
+                  &.disabled {
+                    color: rgba(235, 236, 240, 1);
+                    cursor: not-allowed;
+                  }
+
                   &.active {
                     border: 1px solid #D32F2F;
                     color: #D32F2F;

src/pages/lxMall/commodityDetail/index.tsx

@@ -101,7 +101,6 @@ const CommodityDetail = (props) => {
         initPayWayList(res.data)
       }
     })
-
   }
 
   const initPayWayList = (data) => {
@@ -158,12 +157,17 @@ const CommodityDetail = (props) => {
   useEffect(() => {
     if (selectAttrVal.length === attributeList.length) {
       getCommodityPriceRange()
+    } else {
+      if (selectCommodityId) {
+        setSelectCommodityId(null)
+      }
     }
 
   }, [selectAttrVal])
 
   const getCommodityPriceRange = () => {
     if (commodityDetail?.unitPriceAndPicList) {
+
       for (let item of commodityDetail?.unitPriceAndPicList) {
         let temp = item.attributeAndValueList.map(attrItem => {
           return {
@@ -171,7 +175,6 @@ const CommodityDetail = (props) => {
             attrValId: attrItem.customerAttributeValue.id
           }
         })
-
         if (judgeArrisCommon(temp, selectAttrVal)) {
           setSelectCommodityId(item.id)
           setCurrentPriceRange(item.unitPrice)
@@ -182,10 +185,15 @@ const CommodityDetail = (props) => {
   }
 
   const judgeArrisCommon = (list, otherList) => {
+
     if (list.length === otherList.length) {
+
       let result = list.every(listItem => {
-        return otherList.some(item => JSON.stringify(item) === JSON.stringify(listItem))
+        return otherList.some(item => {
+          return JSON.stringify(item) === JSON.stringify(listItem)
+        })
       })
+      // console.log(result, "result")
       return result
     } else {
       return false
@@ -211,6 +219,7 @@ const CommodityDetail = (props) => {
       PublicApi.postProductPurchaseSaveOrUpdatePurchase(param).then(res => {
         clickFlag = true
         if (res.code === 1000) {
+          message.destroy()
           setPurchaseCount(res.data)
           setAddSuccessVisible(true)
         }
@@ -234,7 +243,7 @@ const CommodityDetail = (props) => {
         if (res.code === 1000) {
           message.destroy()
           let buyCommodityInfo = {
-            id: commodityDetail.id,
+            id: selectCommodityId,
             count: buyCount,
             unitName: commodityDetail.unitName,
             unitPrice: getUnitPrice(),
@@ -242,12 +251,16 @@ const CommodityDetail = (props) => {
             name: commodityDetail.name,
             priceRange: commodityPriceInfo,
             memberDiscount: parameter,
+            category: commodityDetail.customerCategory.name,
+            brand: commodityDetail.brand.name,
             commodityPic: attrAndValList.commodityPic[0],
             attribute: attrAndValList.attributeAndValueList
           }
+          let sessionKey = `${commodityDetail.id}${new Date().getTime()}`
           let buyOrderInfo = {
             logistics: commodityDetail.logistics,
             payWayList,
+            supplyMembersName: commodityDetail.memberName,
             supplyMembersId: commodityDetail.memberId,
             orderList: [{
               id: shopInfo.id,
@@ -255,8 +268,8 @@ const CommodityDetail = (props) => {
               orderList: [buyCommodityInfo]
             }]
           }
-          updateOrderInfo(buyOrderInfo).then(() => {
-            history.push(`/order?id=${selectCommodityId}&scence=prompt`)
+          updateOrderInfo(buyOrderInfo, sessionKey).then(() => {
+            history.push(`/order?spam_id=${sessionKey}&scence=prompt`)
           })
           clickFlag = true
         } else {
@@ -375,13 +388,22 @@ const CommodityDetail = (props) => {
   }
 
   const handleSelectAttrVal = (attrId: number, attrValId: number) => {
+    if (!judgeHasAttr(attrId, attrValId)) {
+      return
+    }
     if (judgeSelectAttrInList(selectAttrVal, attrId, 'attrId')) {
-      setSelectAttrVal(selectAttrVal.map(item => {
-        if (item.attrId === attrId) {
+      let result = []
+      for (let item of selectAttrVal) {
+        if (item.attrId === attrId && item.attrValId !== attrValId) {
           item.attrValId = attrValId
+          result.push(item)
+        } else if (item.attrId === attrId && item.attrValId === attrValId) {
+
+        } else {
+          result.push(item)
         }
-        return item
-      }))
+      }
+      setSelectAttrVal(result)
     } else {
       setSelectAttrVal([...selectAttrVal, { attrId, attrValId }])
     }
@@ -425,6 +447,47 @@ const CommodityDetail = (props) => {
     return priceFormat(amount)
   }
 
+  /**
+   * 判断商品是否含有该属性
+   */
+  const judgeHasAttr = (attrId: number, attrValId: number) => {
+    let result = true
+    if (selectAttrVal.length > 0) {
+      if (commodityDetail?.unitPriceAndPicList) {
+        let tempList = []
+        for (let item of commodityDetail?.unitPriceAndPicList) {
+          let temp = item.attributeAndValueList.map(attrItem => {
+            return {
+              attrId: attrItem.customerAttribute.id,
+              attrValId: attrItem.customerAttributeValue.id
+            }
+          })
+          if (judegeListInList(temp, selectAttrVal)) {
+            tempList.push(temp)
+          }
+        }
+        if (selectAttrVal.length < attributeList.length && selectAttrVal[0].attrId === attrId) {
+          return true
+        }
+        result = tempList.some(item => item.some(childItem => childItem.attrId === attrId && childItem.attrValId === attrValId))
+      }
+    }
+    return result
+  }
+
+  /**
+   * 判断选的的数组是有在商品属性数组中
+   */
+  const judegeListInList = (mainList, subList) => {
+    let result = subList.every(listItem => {
+      let subRes = mainList.some(item => {
+        return JSON.stringify(item) === JSON.stringify(listItem)
+      })
+      return subRes
+    })
+    return result
+  }
+
   return (
     <div className={styles.commodity_detail}>
       <div className={styles.commodity_detail_container}>
@@ -483,7 +546,7 @@ const CommodityDetail = (props) => {
                       <div className={styles.product_info_line_list}>
                         {
                           item.customerAttributeValueList.map((childItem, index) => (
-                            <div key={`product_info_line_list_item_${childItem.id}`} className={cx(styles.product_info_line_list_item, judgeSelectAttrInList(selectAttrVal, childItem.id, 'attrValId') ? styles.active : '')} onClick={() => handleSelectAttrVal(item.customerAttribute.id, childItem.id)} >
+                            <div key={`product_info_line_list_item_${childItem.id}`} className={cx(styles.product_info_line_list_item, judgeSelectAttrInList(selectAttrVal, childItem.id, 'attrValId') ? styles.active : '', judgeHasAttr(item.customerAttribute.id, childItem.id) ? '' : styles.disabled)} onClick={() => handleSelectAttrVal(item.customerAttribute.id, childItem.id)} >
                               {
                                 childItem.commodityPic && (
                                   <div className={styles.imgbox}>

src/pages/lxMall/components/QuickNav/index.less

@@ -8,6 +8,7 @@
   right: 0;
   height: 460px;
   z-index: 1;
+  pointer-events: none;
 
   .quikc_nav_right {
     position: absolute;
@@ -17,6 +18,7 @@
     height: 440px;
     background: #fff;
     z-index: 8;
+    pointer-events: auto;
 
     .member_card {
       background-color: #FAFAFA;

src/pages/lxMall/components/QuickNav/index.tsx

@@ -73,14 +73,6 @@ const QuickNav: React.FC = (props) => {
     },
   ]
 
-  useEffect(() => {
-    // let arr = document.getElementsByTagName("a")
-    // for (var i = 0; i < arr.length; i++) {
-    //   arr[i].setAttribute("rel", arr[i].href);
-    //   arr[i].removeAttribute("href");
-    // }
-  }, [])
-
   return (
     <div className="quikc_nav">
       <div className="quikc_nav_right">

src/pages/lxMall/index/index.tsx

@@ -103,18 +103,28 @@ const MallIndex: React.FC<MallIndexPropsType> = (props) => {
           title={item.name}
         >
           <FloorLine.Horizontal>
-            <FloorLine.Category categoryAdvertPicUrl={categoryDetail.categoryAdvertPicUrl} secondCategoryList={categoryDetail.categoryBOList} />
+            <FloorLine.Category
+              linkUrl={`/commodity?categoryId=${item.id}&categoryName=${btoa(encodeURIComponent(item.name))}`}
+              subLinkUrl={`/commodity`}
+              categoryAdvertPicUrl={categoryDetail.categoryAdvertPicUrl}
+              secondCategoryList={categoryDetail.categoryBOList}
+            />
             <FloorLine.Vertical>
-              <FloorLine.FloorHeader shopNum={categoryDetail.shopNum} goodsNum={categoryDetail.goodsNum} >
+              <FloorLine.FloorHeader
+                shopNum={categoryDetail.shopNum}
+                goodsNum={categoryDetail.goodsNum}
+                linkUrl={`/commodity?categoryId=${item.id}&categoryName=${btoa(encodeURIComponent(item.name))}`}
+                shopsLinkUrl={`/shops?categoryId=${item.id}&categoryName=${btoa(encodeURIComponent(item.name))}`}
+              >
                 <FloorLine.Banner advertList={categoryDetail.thirdAdvertList} />
               </FloorLine.FloorHeader>
               <FloorLine.Horizontal>
-                <FloorLine.Goods goodsList={categoryDetail.goodsBOList} />
+                <FloorLine.Goods goodsList={categoryDetail.goodsBOList} linkUrl={`/shop/commodity/detail`} />
                 <FloorLine.Shops shopsList={categoryDetail.shopBOList} linkUrl={`/shop`} />
               </FloorLine.Horizontal>
             </FloorLine.Vertical>
           </FloorLine.Horizontal>
-          <FloorLine.Brand brandList={categoryDetail.brandBOList} />
+          <FloorLine.Brand brandList={categoryDetail.brandBOList} linkUrl='/commodity' />
         </FloorLine>
       )
     }
@@ -124,7 +134,6 @@ const MallIndex: React.FC<MallIndexPropsType> = (props) => {
 
   return (
     <div className={styles.mall_index}>
-      {/* <a href={`/shop?shopId=${btoa(JSON.stringify({ shopId: 3, memberId: 6 }))}`}>店铺链接测试</a> */}
       {
         useMemo(() => <Advert type="banner" advertList={firstAdvertList} hasQuickNav={true} ><QuickNav /></Advert>, [firstAdvertList])
       }

src/pages/lxMall/order/components/addInvoice/index.tsx

@@ -3,15 +3,11 @@ import { Modal } from 'antd'
 import {
   SchemaForm,
   SchemaMarkupField as Field,
-  createFormActions,
-  FormEffectHooks,
-  FormPath,
   createAsyncFormActions,
 } from '@formily/antd'
 import { Input, Switch, Select, FormMegaLayout, Radio } from '@formily/antd-components'
 import styles from './index.less'
 import { PublicApi } from '@/services/api'
-import { postSettleAccountsInvoiceMessageUpdate } from '@/services/SettlementApi'
 
 //列表带来的参数
 export interface ListProps {

src/pages/lxMall/order/index.tsx

@@ -13,23 +13,18 @@ import Contract from './contract'
 import Invoice from './invoice'
 import styles from './index.less'
 import { PublicApi } from '@/services/api'
-import moment from 'moment'
 import { GetLogisticsReceiverAddressGetResponse } from '@/services/LogisticsApi'
 import { isEmpty } from 'lodash'
 
-const Logistics_Type = {
-  1: '物流',
-  2: '自提',
-  3: '无需配送'
-}
-
 interface OrderPropsType {
-
+  location: any
 }
 
 const Order: React.FC<OrderPropsType> = (props) => {
+  const { spam_id } = props.location.query
   const OrderStore = useLocalStore(() => store.OrderStore)
-  const { orderInfo, clearOrderInfo } = OrderStore
+  const { clearOrderInfo, getOrderInfo } = OrderStore
+  const [orderInfo, setOrderInfo] = useState<any>()
   const [confirmLoading, setConfirmLoading] = useState(false)
   const [selectPayWay, setSelectPayWay] = useState<any>({})
   const [spinningState, setSpinningState] = useState<boolean>(true)
@@ -40,7 +35,7 @@ const Order: React.FC<OrderPropsType> = (props) => {
   const [selectInvoiceInfo, setSelectInvoiceInfo] = useState<any>()
 
   useEffect(() => {
-    if (!orderInfo) {
+    if (!spam_id) {
       message.error("订单不存在")
       history.goBack()
     }
@@ -52,20 +47,24 @@ const Order: React.FC<OrderPropsType> = (props) => {
 
   const initOrderInfo = async () => {
     let result = []
-    console.log(orderInfo, "orderInfo")
-    for (let item of orderInfo.orderList) {
+    const sessionOrderInfo: any = await getOrderInfo(spam_id)
+    for (let item of sessionOrderInfo.orderList) {
       let tempOrderList = []
       for (let orderItem of item.orderList) {
-        const res = await PublicApi.getLogisticsShipperAddressGet({ id: orderItem.logistics.sendAddress })
+        let resData: any = {}
+        if (orderItem.logistics?.sendAddress) {
+          resData = await PublicApi.getLogisticsShipperAddressGet({ id: orderItem.logistics.sendAddress })
+        }
         message.destroy()
-        orderItem.logisticsInfo = res.data
+        orderItem.logisticsInfo = resData.data || {}
         tempOrderList.push(orderItem)
       }
       item.orderList = tempOrderList
       result.push(item)
     }
-
+    console.log(result, "result")
     setOrderList(result)
+    setOrderInfo(sessionOrderInfo)
     setSpinningState(false)
   }
 
@@ -153,6 +152,8 @@ const Order: React.FC<OrderPropsType> = (props) => {
         temp.price = orderItem.unitPrice
         temp.purchaseCount = orderItem.count
         temp.memberDiscount = orderItem.memberDiscount
+        temp.category = orderItem.category
+        temp.brand = orderItem.brand
         orderProductRequests.push(temp)
       }
     }
@@ -171,12 +172,9 @@ const Order: React.FC<OrderPropsType> = (props) => {
     PublicApi.postOrderProcurementOrderAdd(params).then(res => {
       if (res.code === 1000) {
         const data = res.data
-        if (data.isPay === 1) {
-          history.push(`/pay?orderId=${data.orderId}`)
-        } else {
-
-        }
+        history.push(`/pay?orderId=${data.orderId}`)
       }
+      // history.push(`/memberCenter/tranactionAbility/purchaseOrder/readyAddOrder/orderDetail?modelType=5&spam_id=${spam_id}`)
       setConfirmLoading(false)
     }).catch(() => {
       setConfirmLoading(false)

src/pages/lxMall/order/invoice/index.tsx

@@ -3,7 +3,7 @@ import { Checkbox, Radio, Modal } from 'antd'
 import AddInvoice from '../components/addInvoice'
 import { PublicApi } from '@/services/api'
 import { getAuth } from '@/utils/auth';
-import { GetSettleAccountsInvoiceMessageListResponse } from '@/services/SettlementApi'
+import { GetSettleAccountsInvoiceMessageListResponse } from '@/services/SettleApi'
 import cx from 'classnames'
 import styles from './index.less'
 

src/pages/lxMall/order/payway/index.tsx

@@ -91,13 +91,16 @@ const PayWay: React.FC<PayWayProps> = (props) => {
           </div>
         ))
       }
-      <div className={cx(styles.more_btn, styles.pad_l_100)} onClick={() => setExpand(!expand)}>
-        <span>{expand ? '收起' : '展开'}</span>
-        <div className={styles.more_btn_icon}>
-          <DownOutlined rotate={expand ? 180 : 0} />
-        </div>
-      </div>
-
+      {
+        payWayList && payWayList.length > 0 && (
+          <div className={cx(styles.more_btn, styles.pad_l_100)} onClick={() => setExpand(!expand)}>
+            <span>{expand ? '收起' : '展开'}</span>
+            <div className={styles.more_btn_icon}>
+              <DownOutlined rotate={expand ? 180 : 0} />
+            </div>
+          </div>
+        )
+      }
     </div>
   )
 }

src/pages/lxMall/pay/components/transfer/index.less

+@import '../common.less';
+
+.bank_payway {
+  position: relative;
+
+
+  &_container {
+    width: 320px;
+    margin: 0 auto;
+    padding-top: 50px;
+
+    .bank_payway_line {
+      margin-bottom: 20px;
+
+      &>label {
+        color: #999999;
+        display: inline-block;
+        width: 70px;
+      }
+    }
+
+    .bank_payway_upload_dragger {
+      position: relative;
+      margin-top: 20px;
+    }
+
+    .bank_payway_upload {
+
+      width: 320px;
+      height: 180px;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+
+      &>img {
+        width: 100%;
+        height: 100%;
+      }
+
+      &_icon {
+        color: #cccccc;
+        font-size: 26px;
+      }
+
+      &>p {
+        margin-top: 10px;
+        color: #999999;
+      }
+    }
+
+    :global {
+      .ant-upload.ant-upload-drag .ant-upload {
+        padding: 0;
+      }
+
+      .ant-upload.ant-upload-drag {
+        border: 1px solid rgba(245, 245, 245, 1);
+
+        &:hover {
+          // border: 1px solid var(--mall_main_color);
+          border: 1px solid #cccccc;
+        }
+      }
+    }
+
+    .pay_btn {
+      font-size: 16px;
+      width: 160px;
+      height: 50px;
+      color: #ffffff;
+      text-align: center;
+      border-color: #D32F2F;
+      background-color: #D32F2F;
+      cursor: pointer;
+      display: block;
+      margin: 20px auto 0 auto;
+
+      &:hover {
+        opacity: .9;
+      }
+    }
+  }
+
+  &_needpay {
+    color: #666666;
+    font-size: 12px;
+    margin-top: 28px;
+    text-align: center;
+
+    &>span {
+      color: #D32F2F;
+      font-size: 20px;
+      margin: 0 5px;
+    }
+  }
+
+
+}
\ No newline at end of file

src/pages/lxMall/pay/components/transfer/index.tsx

+import React, { useState } from 'react'
+import { Upload, Button, message } from 'antd'
+import { UploadOutlined } from '@ant-design/icons'
+import { PublicApi } from '@/services/api'
+import { GetOrderOrderPayDetailsResponse } from '@/services/OrderApi'
+import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface'
+import { priceFormat } from '@/utils/numberFomat'
+import { UPLOAD_TYPE } from '@/constants'
+import styles from './index.less'
+
+const { Dragger } = Upload
+
+interface TransferPayWayPropsType {
+  payInfo: GetOrderOrderPayDetailsResponse
+  orderId: number
+}
+
+const TransferPayWay: React.FC<TransferPayWayPropsType> = (props) => {
+  const { payInfo, orderId } = props
+  const [loading, setLoading] = useState<boolean>(false)
+  const [payOrderUrl, setPayOrderUrls] = useState<string>()
+  const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
+
+  const beforeUpload = (file: UploadFile) => {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
+    if (!isJpgOrPng) {
+      message.error('仅支持上传JPEG/JPG/PNG文件!');
+    }
+    const isSizeLimit = file.size / 1024 < 1024;
+    if (!isSizeLimit) {
+      message.error(`上传图片不超过1M!`);
+    }
+    return isJpgOrPng && isSizeLimit;
+  }
+
+  const uploadProps = {
+    name: 'file',
+    action: '/api/file/file/upload',
+    headers: {},
+    data: {
+      fileType: UPLOAD_TYPE
+    },
+    disabled: loading,
+    showUploadList: false,
+    onChange(info: UploadChangeParam) {
+      if (info.file.status === 'uploading') {
+        setLoading(true)
+        return;
+      }
+      if (info.file.status === 'done') {
+        // 图片回显
+        const { code, data } = info.file.response
+        if (code === 1000) {
+          setPayOrderUrls(data)
+        }
+        setLoading(false)
+      }
+    },
+    beforeUpload
+  };
+
+  const handleSubmitPay = () => {
+    if (!payOrderUrl) {
+      message.info("请上传支付凭证")
+      return
+    }
+    let param = {
+      id: orderId,
+      paymentInformationId: payInfo.paymentInformationId,
+      payOrderUrls: [payOrderUrl]
+    }
+    setConfirmLoading(true)
+    PublicApi.postOrderPendingOrderPay(param).then(res => {
+      if (res.code === 1000) {
+        message.destroy()
+        message.success("支付成功")
+      } else {
+
+      }
+      setConfirmLoading(false)
+    }).catch(() => {
+      setConfirmLoading(false)
+    })
+  }
+
+  return (
+    <>
+      <div className={styles.common_title}>
+        <span>线下转账线上确认</span>
+      </div>
+      <div className={styles.bank_payway}>
+        <div className={styles.bank_payway_container}>
+          <div className={styles.bank_payway_line}>
+            <label>账户名称：</label>
+            <span>{payInfo?.name}</span>
+          </div>
+          <div className={styles.bank_payway_line}>
+            <label>银行账号：</label>
+            <span>{payInfo?.bankAccount}</span>
+          </div>
+          <div className={styles.bank_payway_line}>
+            <label>开户行：</label>
+            <span>{payInfo?.bankDeposit}</span>
+          </div>
+          <Dragger {...uploadProps} className={styles.bank_payway_upload_dragger}>
+            <div className={styles.bank_payway_upload}>
+              {
+                payOrderUrl ? (
+                  <img src={payOrderUrl} />
+                ) : (
+                    <>
+                      <UploadOutlined className={styles.bank_payway_upload_icon} />
+                      <p>上传支付凭证</p>
+                    </>
+                  )
+              }
+            </div>
+          </Dragger>
+          <div className={styles.bank_payway_needpay}>
+            <label>支付金额：</label>
+            <span>{priceFormat(payInfo?.payPrice)}</span>
+            <label>RMB</label>
+          </div>
+          <Button className={styles.pay_btn} loading={confirmLoading} onClick={() => handleSubmitPay()}>提交</Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default TransferPayWay

src/pages/lxMall/pay/index.less

@@ -5,6 +5,7 @@
 
   &_container {
     width: 1200px;
+    min-height: 500px;
     margin: 0 auto;
 
   }

src/pages/lxMall/pay/index.tsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import CommonHeader from '../components/CommonHeader'
 import PointPayWay from './components/point'
 import BablancePayWay from './components/balance'
 import CreditPayWay from './components/credit'
 import WechatPayWay from './components/wechat'
 import BankPayWay from './components/bank'
+import TransferPayWay from './components/transfer'
+import { PublicApi } from '@/services/api'
+import { GetOrderOrderPayDetailsResponse } from '@/services/OrderApi'
 import styles from './index.less'
 
 interface PayPagePropsType {
-
+  location: any
 }
 
 enum PayWayType {
   point = 'point', // 积分支付
-  balance = 'balance', // 余额支付
-  credit = 'credit', // 授信额度支付
-  wechat = 'wechat', // 微信支付
-  transfer = 'transfer', // 转战
-  bank = 'bank'
+  balance = 4, // 余额支付
+  credit = 6, // 授信额度支付
+  wechat = 2, // 微信支付
+  alipay = 1, // 微信支付
+  transfer = 5, // 转账
+  bank = 3
 }
 
 const getPayTypeTitle = (type) => {
@@ -28,6 +32,8 @@ const getPayTypeTitle = (type) => {
       return "余额支付"
     case PayWayType.credit:
     case PayWayType.wechat:
+    case PayWayType.transfer:
+    case PayWayType.alipay:
     case PayWayType.bank:
       return "收银台"
     default:
@@ -36,11 +42,32 @@ const getPayTypeTitle = (type) => {
 }
 
 const PayPage: React.FC<PayPagePropsType> = (props) => {
-  const [pageTitle, setPageTitle] = useState<string>(getPayTypeTitle(PayWayType.bank))
-  const [payType] = useState<string>(PayWayType.bank)
+  const { orderId } = props.location.query
+  const [pageTitle, setPageTitle] = useState<string>()
+  const [payType] = useState<string | number>(PayWayType.bank)
+  const [payInfo, setPayInfo] = useState<GetOrderOrderPayDetailsResponse>()
+
+  useEffect(() => {
+    if (orderId) {
+      fetchOrderInfo()
+    }
+  }, [])
+
+  const fetchOrderInfo = () => {
+    PublicApi.getOrderOrderPayDetails({ id: orderId }).then(res => {
+      if (res.code === 1000) {
+        setPayInfo(res.data)
+        setPageTitle(getPayTypeTitle(res.data.paymentChannelsId))
+      }
+    })
+  }
 
   const renderPayWay = () => {
-    switch (payType) {
+    if (!payInfo) {
+      return
+    }
+
+    switch (payInfo.paymentChannelsId) {
       case PayWayType.point:
         return <PointPayWay />
       case PayWayType.balance:
@@ -51,21 +78,23 @@ const PayPage: React.FC<PayPagePropsType> = (props) => {
         return <WechatPayWay />
       case PayWayType.bank:
         return <BankPayWay />
+      case PayWayType.transfer:
+        return <TransferPayWay payInfo={payInfo} orderId={orderId} />
       default:
         return null
     }
   }
 
-  return (
+  return payInfo ? (
     <div className={styles.pay}>
       <CommonHeader title={pageTitle} />
       <div className={styles.pay_container}>
         {
-          renderPayWay()
+          payInfo && renderPayWay()
         }
       </div>
     </div>
-  )
+  ) : null
 }
 
 export default PayPage

src/pages/lxMall/purchaseOrder/index.less

@@ -191,9 +191,11 @@
           text-align: center;
           color: #FFF;
           height: 50px;
-          line-height: 50px;
           font-size: 16px;
           background-color: #D32F2F;
+          border-color: #D32F2F;
+          border-radius: 0;
+          outline: none;
           cursor: pointer;
 
           &:hover {

src/pages/lxMall/purchaseOrder/index.tsx

@@ -4,10 +4,12 @@ import InputNumber from '@/components/InputNumber'
 import Recommand from '../components/Recommand'
 import { history } from 'umi'
 import cx from 'classnames'
-import { Checkbox, Affix, message, Modal } from 'antd'
+import { Checkbox, Affix, message, Modal, Button } from 'antd'
 import styles from './index.less'
 import { PublicApi } from '@/services/api'
-import { priceFormat } from "@/utils/numberFomat";
+import { priceFormat } from "@/utils/numberFomat"
+import { useLocalStore, observer } from 'mobx-react'
+import { store } from '@/store'
 import { GetProductPurchaseGetPurchaseListResponse } from '@/services/ProductApi'
 
 interface PurchaseOrderPropsType {
@@ -15,15 +17,17 @@ interface PurchaseOrderPropsType {
 }
 
 const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
+  const OrderStore = useLocalStore(() => store.OrderStore)
+  const { updateOrderInfo } = OrderStore
   const [buyCount, setBuyCount] = useState<number>(1)
   const [indeterminate, setIndeterminate] = useState<boolean>(false)
   const [checkAll, setCheckAll] = useState<boolean>(false)
   const [checkedList, setCheckedList] = useState([])
   const [orderList, setOrderList] = useState([])
+  const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
   let countState = true
 
   useEffect(() => {
-
     fetchPurchaseList(true)
   }, [])
 
@@ -64,6 +68,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
       } else {
         let temp: any = {}
         temp.id = item.commodityUnitPrice.commodity.storeId
+        temp.memberId = item.commodityUnitPrice.commodity.memberId
         temp.shopname = item.commodityUnitPrice.commodity.memberName
         let tempPriceRange = []
         let unitPrice = item.commodityUnitPrice.unitPrice
@@ -309,10 +314,165 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
   }
 
   /**
+   * 获取用户权益参数
+   * @param memberId 
+   * @param memberRoleId 
+   */
+  const getMemberCredit = (memberId, memberRoleId) => {
+    return new Promise((resolve) => {
+      let param = {
+        parentMemberId: memberId,
+        parentMemberRoleId: memberRoleId
+      }
+      PublicApi.getMemberManageUpperCreditParamGet(param).then(res => {
+        if (res.code === 1000) {
+          resolve(res.data?.parameter)
+        }
+      })
+    })
+  }
+
+  const getPayWayListByMemberId = (memberId: number) => {
+    return new Promise((resolve) => {
+      if (!memberId) {
+        resolve([])
+        return
+      }
+      //@ts-ignore
+      PublicApi.getPayPayWayList({ memberId }).then(res => {
+        if (res.code === 1000) {
+          resolve(initPayWayList(res.data))
+        }
+      })
+    })
+  }
+
+  const initPayWayList = (data) => {
+    if (!data) {
+      return []
+    }
+    let result = []
+    for (let item of data) {
+      if (result.some(tempItem => tempItem.payType === item.payType)) {
+        result = result.map(resItem => {
+          if (resItem.payType === item.payType) {
+            resItem.payList = [...resItem.payList, item]
+          }
+          return resItem
+        })
+      } else {
+        let payVal = ""
+        switch (item.payType) {
+          case 1:
+            payVal = "线上支付"
+            break
+          case 2:
+            payVal = "线下支付"
+            break
+          case 3:
+            payVal = "授信支付"
+            break
+          case 4:
+            payVal = "货到付款"
+            break
+        }
+        result.push({
+          payVal,
+          payType: item.payType,
+          payList: [item]
+        })
+      }
+    }
+    return result
+  }
+
+
+  /**
    * 结算
    */
-  const handleSettlement = () => {
-    console.log(checkedList, "checkedList")
+  const handleSettlement = async () => {
+
+    if (orderList.every(item => item.checkedList.length > 0)) {
+      message.info("暂不支持多个供应商商品生成订单，请选择相同供应商的商品")
+      return
+    } else if (orderList.every(item => item.checkedList.length === 0)) {
+      message.info("请选择要购买的商品")
+      return
+    }
+
+    const selectList = orderList.filter(item => item.checkedList.length > 0)
+    const selectItem = selectList[0]
+    let productIds = []
+    let buyOrderlist = []
+    const selectOrderList = selectItem.orderList.filter(item => selectItem.checkedList.includes(item.id))
+    let commonLogistics = {}
+    setConfirmLoading(true)
+    for (let item of selectOrderList) {
+      productIds.push(item.commodityUnitPrice.id)
+      commonLogistics = item.commodityUnitPrice.commodity.logistics
+      let buyCommodityInfo: any = {
+        id: item.commodityUnitPrice.id,
+        count: item.count,
+        unitName: item.commodityUnitPrice.commodity.unitName,
+        unitPrice: getUnitPrice(item.commodityUnitPrice, item.count),
+        logistics: item.commodityUnitPrice.commodity.logistics,
+        name: item.commodityUnitPrice.commodity.name,
+        priceRange: item.commodityUnitPrice.priceRange,
+        category: item.commodityUnitPrice.commodity.customerCategory.name,
+        brand: item.commodityUnitPrice.commodity.brand.name,
+        commodityPic: item.commodityUnitPrice.commodityPic[0],
+        attribute: item.commodityUnitPrice.attributeAndValueList
+      }
+      if (item.commodityUnitPrice.commodity.isMemberPrice) {
+        buyCommodityInfo.memberDiscount = await getMemberCredit(item.commodityUnitPrice.commodity.memberId, item.commodityUnitPrice.commodity.memberRoleId)
+      }
+
+      buyOrderlist.push(buyCommodityInfo)
+    }
+
+    let buyOrderInfo: any = {
+      logistics: commonLogistics,
+      supplyMembersName: selectItem.shopname,
+      supplyMembersId: selectItem.memberId,
+      orderList: [{
+        id: selectItem.id,
+        shopname: selectItem.shopname,
+        orderList: buyOrderlist
+      }]
+    }
+
+    buyOrderInfo.payWayList = await getPayWayListByMemberId(selectItem.memberId)
+
+    PublicApi.postOrderIsWorkFlow({ productIds }).then(res => {
+      setConfirmLoading(false)
+      if (res.code === 1000) {
+        let sessionKey = `${selectItem.id}${new Date().getTime()}`
+        updateOrderInfo(buyOrderInfo, sessionKey).then(() => {
+          history.push(`/order?spam_id=${sessionKey}&scence=purchase`)
+        })
+      }
+      setConfirmLoading(false)
+    }).catch(() => {
+      setConfirmLoading(false)
+    })
+  }
+
+  const getUnitPrice = (detail, count) => {
+    let unitPrice = 0
+    if (!detail) {
+      return 0
+    }
+
+    if (detail.priceRange.length <= 1) {
+      unitPrice = detail.priceRange[0]?.price
+    } else {
+      let temp = detail.priceRange.filter(item => {
+        return Number(count) >= Number(item.min) && Number(count) < Number(item.max)
+      })
+      unitPrice = temp[0]?.price
+    }
+
+    return unitPrice
   }
 
   return (
@@ -413,7 +573,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
                     checked={checkAll}
                   >
                     全选
-              </Checkbox>
+                  </Checkbox>
                   <div className={styles.settlement_box_checkedbox_delbtn} onClick={() => handleBatchDelete()}>删除</div>
                 </div>
                 <div className={styles.settlement_box_item}>
@@ -427,7 +587,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
                     <b className={styles.settlement_box_item_price_total}>{handleComputeSelectPrice()}</b>
                     <span>RMB</span>
                   </div>
-                  <div className={styles.settlement_box_item_btn} onClick={() => handleSettlement()}>结算</div>
+                  <Button loading={confirmLoading} className={styles.settlement_box_item_btn} onClick={() => handleSettlement()}>结算</Button>
                 </div>
               </div>
             </Affix>
@@ -439,4 +599,4 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
   )
 }
 
-export default PurchaseOrder
+export default observer(PurchaseOrder)

src/store/order/index.ts

 import { action, computed, observable, runInAction } from 'mobx'
 
-const sessionOrderInfo = sessionStorage.getItem("tempOrderInfo")
+
 
 class OrderStore {
-  @observable orderInfo = sessionOrderInfo ? JSON.parse(sessionOrderInfo) : null
+  @observable orderInfo = null
 
   @action.bound
-  public updateOrderInfo = (orderInfo) => {
+  public updateOrderInfo = (orderInfo, sessionKey) => {
     return new Promise((resolve) => {
       this.orderInfo = orderInfo
-      sessionStorage.setItem("tempOrderInfo", JSON.stringify(this.orderInfo))
+      sessionStorage.setItem(sessionKey, JSON.stringify(this.orderInfo))
       resolve()
     })
   }
 
   @action.bound
-  public clearOrderInfo = () => {
+  public getOrderInfo = (sessionKey) => {
+    return new Promise((resolve) => {
+      const sessionOrderInfo = sessionStorage.getItem(sessionKey)
+      resolve(JSON.parse(sessionOrderInfo))
+    })
+  }
+
+  @action.bound
+  public clearOrderInfo = (sessionKey) => {
     this.orderInfo = null
-    sessionStorage.removeItem("tempOrderInfo")
+    sessionStorage.removeItem(sessionKey)
   }
 }
 

ytt.config.ts

@@ -3,11 +3,11 @@ const tokenList = [
   { name: 'Warehouse', token: '7c8f235d95f6224ceb97c4d832b09658f9a75fb8721a95699b230af0733d7fa4' }, // 仓库服务
   { name: 'Logistics', token: '8d14d945507d1f8cd89afe139ca6d111bbad25f702fafe0aec59d3c9cd2e0ffe' },  // 物流服务
   { name: 'Member', token: 'c0e920f071595a73ba234b6fa6cfe42192d3d740d59f030caa2c7f0f08777d78' },  // 商户会员管理服务
-  { name: 'Product', token: 'efe99e20ed1375dc0db3e809e4fc7692f42ecebaf60cd77e65c50ed65d6ba6c4' },  // 商品服务
+  { name: 'Product', token: 'dbfeae0baf614a6dd8f1de2b1403444cdfa9c052a3757da6a0d6d7d52fb26178' },  // 商品服务
   { name: 'Template', token: '7ec923520215c7e2f771867cb4d29cafbf823daf0fb2d3d9fa70b57a523c8bfb' },  // 店铺模板服务
   { name: 'Pay', token: '34608cd33222b1650795459d73b8eb0b260eb92cf5e8d1e646f85a4875e36f05' }, // 支付服务
   { name: 'Search', token: 'ca19f532efba91f7773cbfbd526b798c6ac83df670071e97d72c50dca1d53a48' },  // 搜索服务
-  { name: 'Order', token: '5de0aaeaac12c8d911d86dada6cd128993e34cd6e13135fa79246aa5979a2bcd' },  //订单服务
+  { name: 'Order', token: '31b93b223421ca52389b088a7457c651fab7c1bf658fc7dd38d0689d09c8e235' },  //订单服务
   { name: 'Settle', token: 'fffbeeaaa198c285955997c606bc279fc6950fea118580c786f2c73eecccaa6a' },  //结算服务
   // { name: '', token: 'c0e920f071595a73ba234b6fa6cfe42192d3d740d59f030caa2c7f0f08777d78' } // 商户会员管理服务
 ]