feat:店铺收藏

src/pages/afterService/exchangeGoods/waitSubmitOrderList/detail.less

+.detail_wrap {
+  position: relative;
+}
\ No newline at end of file

src/pages/afterService/exchangeGoods/waitSubmitOrderList/detail.tsx

@@ -4,6 +4,7 @@ import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { history, Helmet } from 'umi'
 import { Button } from 'antd'
 import ReutrnEle from '@/components/ReturnEle'
+import styles from './detail.less'
 
 interface OrderDetailProps {
   location: any,
@@ -23,7 +24,6 @@ const OrderDetail: React.FC<OrderDetailProps> = (props) => {
       default:
         return ''
     }
-
   }
 
   return (
@@ -41,8 +41,10 @@ const OrderDetail: React.FC<OrderDetailProps> = (props) => {
           </Button>,
         ]}
       >
-        OrderDetail
+        <div className={styles.detail_wrap}>
+
 
+        </div>
       </PageHeaderWrapper>
     </>
   )

src/pages/lxMall/commodityDetail/components/ShopInfo/index.tsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Rate, Button, message } from 'antd'
 import { Link } from 'umi'
 import { PublicApi } from '@/services/api'
@@ -16,7 +16,13 @@ interface ShopInfoPropsType {
 const ShopInfo: React.FC<ShopInfoPropsType> = (props) => {
   const { shopInfo, shopUrlParam, updateShopInfo } = props
   const [applyLoading, setApplyLoading] = useState<boolean>(false)
-  const [collectState, setCollectState] = useState<boolean>(shopInfo?.collectStatus || false)
+  const [collectState, setCollectState] = useState<boolean>(false)
+
+  useEffect(() => {
+    if (shopInfo) {
+      setCollectState(shopInfo.collectStatus)
+    }
+  }, [shopInfo])
 
   const applyFroVip = () => {
     if (shopInfo) {

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

@@ -21,7 +21,7 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
   const { updateShopInfo, shopUrlParam, shopInfo, logo } = props
   const [searchValue, setSearchValue] = useState<string>("")
   const [applyLoading, setApplyLoading] = useState<boolean>(false)
-  const [collectState, setCollectState] = useState<boolean>(shopInfo?.collectStatus || false)
+  const [collectState, setCollectState] = useState<boolean>(false)
   const { search } = history.location.query
 
   useEffect(() => {
@@ -32,6 +32,12 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
     }
   }, [search])
 
+  useEffect(() => {
+    if (shopInfo) {
+      setCollectState(shopInfo.collectStatus)
+    }
+  }, [shopInfo])
+
   const handleSearchCommodity = () => {
     if (!isEmpty(searchValue)) {
       history.push(`/shop/commodity/search?shopId=${shopUrlParam}&search=${encodeURIComponent(searchValue)}`)

src/pages/lxMall/shopAbout/index.less

@@ -34,6 +34,15 @@
           border: 1px solid #EEF0F3;
           cursor: pointer;
 
+          &.active {
+            background-color: var(--mall_main_color);
+            color: #FFFFFF;
+
+            &:hover {
+              background-color: var(--mall_main_color);
+            }
+          }
+
           &:hover {
             opacity: .9;
           }

src/pages/lxMall/shopAbout/index.tsx

-import React, { useState } from 'react'
-import { Rate, Button } from 'antd'
+import React, { useState, useEffect } from 'react'
+import { Rate, Button, message } from 'antd'
 import { LeftOutlined, RightOutlined } from '@ant-design/icons'
 import cx from 'classnames'
 import shop_icon from '@/assets/imgs/shop_icon.png'
 import credit_icon from '@/assets/imgs/credit_icon.png'
 import { PublicApi } from '@/services/api'
 import styles from './index.less'
+import { LAYOUT_TYPE } from '@/constants'
 
 interface ShopAboutPropType {
-  shopInfo: any
+  shopInfo: any,
+  layoutType: LAYOUT_TYPE,
+  updateShopInfo: Function
 }
 
 const ShopAbout: React.FC<ShopAboutPropType> = (props) => {
-  const { shopInfo } = props
+  const { shopInfo, layoutType, updateShopInfo } = props
   const [offSetLeft, setOffSetLeft] = useState<number>(0)
   const [applyLoading, setApplyLoading] = useState<boolean>(false)
+  const [collectState, setCollectState] = useState<boolean>(false)
   const unitDistance = 406
 
+  useEffect(() => {
+    if (shopInfo) {
+      setCollectState(shopInfo.collectStatus)
+    }
+  }, [shopInfo])
+
   const handlePrev = () => {
     if (offSetLeft < 0) {
       setOffSetLeft(offSetLeft + unitDistance)
@@ -48,6 +58,27 @@ const ShopAbout: React.FC<ShopAboutPropType> = (props) => {
     }
   }
 
+  const handleCollect = () => {
+    let status = !collectState
+    let param = {
+      shopId: shopInfo.id,
+      status
+    }
+    PublicApi.postTemplateShopCollect(param).then(res => {
+      if (res.code === 1000) {
+        updateShopInfo()
+        message.destroy()
+        if (status) {
+          message.success("收藏成功")
+          setCollectState(true)
+        } else {
+          message.success("取消收藏成功")
+          setCollectState(false)
+        }
+      }
+    })
+  }
+
   return (
     <div className={styles.shop_about}>
       <div className={styles.shop_about_container}>
@@ -72,10 +103,11 @@ const ShopAbout: React.FC<ShopAboutPropType> = (props) => {
           </div>
           <div className={cx(styles.shop_about_info_item)}>
             <div className={styles.shop_about_btn_group}>
-              <div className={styles.shop_about_btn}>收藏本店</div>
+              {
+                layoutType === LAYOUT_TYPE.shop && <div className={cx(styles.shop_about_btn, collectState ? styles.active : "")} onClick={() => handleCollect()}>{collectState ? '已收藏本店' : '收藏本店'}</div>
+              }
               <Button loading={applyLoading} className={cx(styles.shop_about_btn, styles.primary)} onClick={() => applyFroVip()}>申请成为本店会员</Button>
             </div>
-
           </div>
           <div className={cx(styles.shop_about_info_item, styles.auto_width)}>
             <i className={styles.shop_about_info_item_character}>“</i>