fix: 进货单商品变更为询价商品时的处理

config/mallRoutes/index.ts

@@ -81,13 +81,13 @@ const mallRoute = {
       hideHeader: true,
       component: '@/pages/lxMall/payResult',
     },
-    {
-      // 在线求购
-      path: `/purchaseOnline`,
-      name: 'purchaseOnline',
-      key: 'purchaseOnline',
-      component: '@/pages/lxMall/purchaseOnline',
-    },
+    // {
+    //   // 在线求购
+    //   path: `/purchaseOnline`,
+    //   name: 'purchaseOnline',
+    //   key: 'purchaseOnline',
+    //   component: '@/pages/lxMall/purchaseOnline',
+    // },
     {
       // 积分商城
       path: pointMallRoute,

src/pages/editor/customComponents/ChannelGoodsCard/index.less

@@ -17,14 +17,76 @@
       &-title {
         display: flex;
         padding: 10px 12px;
-        background: linear-gradient(135deg, #F6DDB7 0%, #F6E4CF 100%);
+        color: #303133;
         align-items: center;
 
+        &.theme_0 {
+          color: #303133;
+          background: linear-gradient(84deg, #F4F5F7 0%, #FFFFFF 100%);
+
+          .lingxi-goods-list-item-more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &.theme_1 {
+          color: #3D4263;
+          background: linear-gradient(84deg, #C0C3D8 0%, #DDE1F5 100%);
+
+          .lingxi-goods-list-item-more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &.theme_2 {
+          color: #B53838;
+          background: linear-gradient(84deg, #F3C4C4 0%, #FFEFEF 100%);
+
+          .lingxi-goods-list-item-more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &.theme_3 {
+          color: #C18223;
+          background: linear-gradient(135deg, #F6DDB7 0%, #F6E4CF 100%);
+
+          .lingxi-goods-list-item-more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &.theme_4 {
+          color: #008F72;
+          background: linear-gradient(135deg, #ABE4D2 0%, #D7F8EE 100%);
+
+          .lingxi-goods-list-item-more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &.theme_5 {
+          color: #2E77C2;
+          background: linear-gradient(135deg, #B3D4F6 0%, #DEE7FF 100%);
+
+          .lingxi-goods-list-item-more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &.theme_6 {
+          color: #5243AA;
+          background: linear-gradient(135deg, #C6C0E9 0%, #ECEAF8 100%);
+
+          .lingxi-goods-list-item-more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
         &-left {
           flex: 1;
 
           &-title {
-            color: #3D4263;
             font-size: 16px;
             font-weight: 500;
             line-height: 18px;
@@ -32,7 +94,6 @@
 
           &-vicetitle {
             display: block;
-            color: #3D4263;
             font-size: 14px;
             margin-top: 10px;
             line-height: 14px;

src/pages/editor/customComponents/ChannelGoodsCard/index.tsx

@@ -59,7 +59,7 @@ const ChannelGoodsCard: React.FC<ChannelGoodsCardPropsType> = (props) => {
           {
             dataList && dataList.map((dataItem, dataIndex) => (
               <div className={styles["lingxi-goods-list-item"]} key={`goods-list-item-${dataIndex}`}>
-                <div className={styles["lingxi-goods-list-item-title"]}>
+                <div className={cx(styles["lingxi-goods-list-item-title"], styles[`theme_${dataItem.style}`])}>
                   <div className={styles["lingxi-goods-list-item-title-left"]}>
                     <div className={styles["lingxi-goods-list-item-title-left-title"]}>{dataItem.title}</div>
                     <label className={styles["lingxi-goods-list-item-title-left-vicetitle"]}>{dataItem.viceTitle}</label>

src/pages/editor/mobileSettingPanel/propsSettings/components/channelGoods/index.tsx

@@ -78,6 +78,9 @@ const ChannelGoods: React.FC<QualityPropsType> = (props) => {
       }
     }
     setList(newList)
+    changeProps({
+      props:Object.assign({ ...props }, { dataList: newList })
+    })
   }
 
   /**
@@ -243,25 +246,6 @@ const ChannelGoods: React.FC<QualityPropsType> = (props) => {
   }
 
   /**
-   * 根据类型查询导航栏链接名称
-   * @param type
-   */
-  const findNameByType = (type: number) => {
-    switch(type) {
-      case 1:
-        return "商品"
-      case 2:
-       return "店铺"
-      case 3:
-        return "品牌"
-      case 4:
-        return "资讯"
-      default:
-        return ""
-    }
-  }
-
-  /**
    * 打开选择模态框
    * @param type
    */

src/pages/editor/mobileSettingPanel/styleSettings/components/GoodsCardTitleStyle/index.tsx

+import React, { useEffect, useState } from 'react'
+import cx from 'classnames'
+import { changeProps } from 'lingxi-editor-core'
+import styles from './styles.less'
+
+interface DataItemType {
+  id: number,
+  title: string,
+  style: number,
+  viceTitle: string,
+  productIdList: number[]
+  productList?: any[],
+  expand: boolean,
+}
+
+interface GoodsCardTitleStylePropsType {
+  dataList: DataItemType[]
+}
+
+const STYLE_THEME_LIST = [
+  {
+    id: 0,
+    styleName: 'one'
+  },
+  {
+    id: 1,
+    styleName: 'two'
+  },
+  {
+    id: 2,
+    styleName: 'three'
+  },
+  {
+    id: 3,
+    styleName: 'four'
+  },
+  {
+    id: 4,
+    styleName: 'five'
+  },
+  {
+    id: 5,
+    styleName: 'six'
+  },
+  {
+    id: 6,
+    styleName: 'seven'
+  },
+]
+
+const GoodsCardTitleStyle: React.FC<GoodsCardTitleStylePropsType> = (props) => {
+  const { dataList } = props
+  const [currentItem, setCurrentItem] = useState<DataItemType | null>(null)
+
+  const updateCurrentItem = (list: DataItemType[]) => {
+    const expandList = list.filter((item) => item.expand)
+    if (expandList.length > 0) {
+      setCurrentItem(expandList[0])
+    } else {
+      setCurrentItem(null)
+    }
+  }
+
+  useEffect(() => {
+    console.log(dataList, "dataList")
+    updateCurrentItem(dataList)
+  }, [dataList])
+
+  const handleSelectStyle = (id: number) => {
+    const newList = [...dataList]
+     for(const item of newList) {
+      if (item.id === currentItem.id) {
+        item.style = id
+      }
+    }
+    changeProps({
+      props:Object.assign({ ...props }, { dataList: newList })
+    })
+  }
+
+  return currentItem ? (
+    <div className={styles.goods_card_title_style}>
+      <div className={styles.style_list}>
+        {
+          STYLE_THEME_LIST.map((item) => (
+            <div
+              className={cx(styles.style_list_item, item.id === currentItem?.style ? styles.active : null)}
+              key={`style_list_item_${item.id}`}
+              onClick={() => handleSelectStyle(item.id)}
+            >
+              <div className={cx(styles.card_style, styles[item.styleName])}>
+                <div className={styles["card_style_left"]}>
+                  <div className={styles["card_style_left_title"]}>标题</div>
+                  <label className={styles["card_style_left_vicetitle"]}>副标题</label>
+                </div>
+                <div className={styles["card_style_more"]}>
+                  <span>更多 &gt;</span>
+                </div>
+              </div>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+  ) : null
+}
+
+export default GoodsCardTitleStyle

src/pages/editor/mobileSettingPanel/styleSettings/components/GoodsCardTitleStyle/styles.less

+.goods_card_title_style {
+  width: 100%;
+  padding: 0 12px;
+
+  .style_list {
+    position: relative;
+
+    &_item {
+      position: relative;
+      padding: 24px;
+      border: 1px solid #E4E6EB;
+      margin-bottom: 24px;
+
+      &.active {
+        border: 1px solid #00B382;
+
+        &::after {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 0;
+          border-bottom: 12px solid #00B37A;
+          border-left: 12px solid transparent;
+          bottom: 0;
+          right: 0;
+          z-index: 5;
+        }
+      }
+
+      .card_style {
+        display: flex;
+        padding: 10px 12px;
+        align-items: center;
+        border-radius: 8px 8px 0px 0px;
+        color: #303133;
+
+        &.one {
+          color: #303133;
+          background: linear-gradient(84deg, #F4F5F7 0%, #FFFFFF 100%);
+
+          .card_style_more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &.two {
+          color: #3D4263;
+          background: linear-gradient(84deg, #C0C3D8 0%, #DDE1F5 100%);
+
+          .card_style_more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &.three {
+          color: #B53838;
+          background: linear-gradient(84deg, #F3C4C4 0%, #FFEFEF 100%);
+
+          .card_style_more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &.four {
+          color: #C18223;
+          background: linear-gradient(135deg, #F6DDB7 0%, #F6E4CF 100%);
+
+          .card_style_more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &.five {
+          color: #008F72;
+          background: linear-gradient(135deg, #ABE4D2 0%, #D7F8EE 100%);
+
+          .card_style_more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &.six {
+          color: #2E77C2;
+          background: linear-gradient(135deg, #B3D4F6 0%, #DEE7FF 100%);
+
+          .card_style_more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &.seven {
+          color: #5243AA;
+          background: linear-gradient(135deg, #C6C0E9 0%, #ECEAF8 100%);
+
+          .card_style_more {
+            background-color: rgba(48, 49, 51, 0.1);
+          }
+        }
+
+        &_left {
+          flex: 1;
+
+          &_title {
+            font-size: 16px;
+            font-weight: 500;
+            line-height: 18px;
+          }
+
+          &_vicetitle {
+            display: block;
+            font-size: 14px;
+            margin-top: 10px;
+            line-height: 14px;
+          }
+        }
+
+        &_more {
+          width: 60px;
+          height: 24px;
+          background-color: rgba(61, 66, 99, 0.1);
+          font-size: 12px;
+          text-align: center;
+          line-height: 24px;
+          border-radius: 13px;
+        }
+      }
+    }
+  }
+}

src/pages/editor/mobileSettingPanel/styleSettings/index.tsx

 import React, { useState } from 'react'
 import cx from 'classnames'
 import { SelectedInfoType, changeProps, PROPS_TYPES } from 'lingxi-editor-core'
+import GoodsCardTitleStyle from './components/GoodsCardTitleStyle'
 import styles from './index.less'
 
 interface StyleSettingsPropsType {
@@ -37,7 +38,7 @@ const StyleSettings: React.FC<StyleSettingsPropsType> = ({ selectedInfo }) => {
             </div>
           ))
         case PROPS_TYPES.mobileChannelGoodsCard:
-          return 'mobileChannelGoodsCard'
+          return <GoodsCardTitleStyle {...initProps} />
         default:
           return null
       }

src/pages/lxMall/purchaseOrder/index.less

@@ -127,6 +127,7 @@
               cursor: pointer;
               color: #909399;
               font-size: 12px;
+              display: block;
 
               &:hover {
                 color: var(--mall_main_color);
@@ -151,6 +152,19 @@
       width: 270px;
       flex-direction: column;
       line-height: 20px;
+
+      .delete {
+        text-decoration: line-through;
+      }
+
+      .tip {
+        color: #D32F2F;
+      }
+
+      .member_unitprice {
+        color: #D32F2F;
+        margin-left: 8px;
+      }
     }
 
     .settlement_box {