feat:店铺收藏接口对接

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

@@ -120,6 +120,15 @@
       text-align: center;
       cursor: pointer;
 
+      &.active {
+        background-color: var(--mall_main_color);
+        color: #FFFFFF;
+
+        &:hover {
+          background-color: var(--mall_main_color);
+        }
+      }
+
       &>a {
         display: block;
         color: #303133;

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

 import React, { useState } from 'react'
-import { Rate, Button } from 'antd'
+import { Rate, Button, message } from 'antd'
 import { Link } from 'umi'
 import { PublicApi } from '@/services/api'
 import shop_icon from '@/assets/imgs/shop_icon.png'
 import credit_icon from '@/assets/imgs/credit_icon.png'
+import cx from 'classnames'
 import styles from './index.less'
 
 interface ShopInfoPropsType {
   shopInfo: any;
   shopUrlParam: string;
+  updateShopInfo: Function
 }
 
 const ShopInfo: React.FC<ShopInfoPropsType> = (props) => {
-  const { shopInfo, shopUrlParam } = props
+  const { shopInfo, shopUrlParam, updateShopInfo } = props
   const [applyLoading, setApplyLoading] = useState<boolean>(false)
+  const [collectState, setCollectState] = useState<boolean>(shopInfo?.collectStatus || false)
 
   const applyFroVip = () => {
     if (shopInfo) {
@@ -32,13 +35,22 @@ const ShopInfo: React.FC<ShopInfoPropsType> = (props) => {
   }
 
   const handleCollect = () => {
+    let status = !collectState
     let param = {
-      shopId: shopInfo.shopId,
-      status: true
+      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)
+        }
       }
     })
   }
@@ -83,7 +95,7 @@ const ShopInfo: React.FC<ShopInfoPropsType> = (props) => {
       <div className={styles.dashed_split}></div>
       <div className={styles.shop_info_btn_group}>
         <div className={styles.shop_info_btn}><Link to={`/shop?shopId=${shopUrlParam}`}>进入店铺</Link></div>
-        <div className={styles.shop_info_btn} onClick={() => handleCollect()}>收藏本店</div>
+        <div className={cx(styles.shop_info_btn, collectState ? styles.active : '')} onClick={() => handleCollect()}>{collectState ? '已收藏本店' : '收藏本店'}</div>
       </div>
       <Button loading={applyLoading} className={styles.apply_member_btn} onClick={() => applyFroVip()}>申请成为本店会员</Button>
     </div>

src/pages/lxMall/commodityDetail/index.tsx

@@ -810,7 +810,9 @@ const CommodityDetail = (props) => {
         </div>
         <div className={styles.commodity_detail_body}>
           <div className={styles.commodity_detail_body_left}>
-            <ShopInfo {...props} />
+            {
+              layoutType === LAYOUT_TYPE.shop && <ShopInfo {...props} />
+            }
             <Interested priceType={commodityDetail?.priceType} />
           </div>
           <div className={styles.commodity_detail_body_right}>

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

@@ -245,6 +245,15 @@
             text-align: center;
             cursor: pointer;
 
+            &.active {
+              background-color: var(--mall_main_color);
+              color: #FFFFFF;
+
+              &:hover {
+                background-color: var(--mall_main_color);
+              }
+            }
+
             &:hover {
               background-color: #F4F5F7;
             }

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

 import React, { useState, useEffect } from 'react'
 import { CaretDownOutlined } from '@ant-design/icons'
-import { Rate, Input, Button } from 'antd'
+import { Rate, Input, Button, message } from 'antd'
 import { history, Link } from 'umi'
 import isEmpty from 'lodash/isEmpty'
 import shop_icon from '@/assets/imgs/shop_icon.png'
 import credit_icon from '@/assets/imgs/credit_icon.png'
 import styles from './index.less'
+import cx from 'classnames'
 import { PublicApi } from '@/services/api'
 
 interface ShopHeaderPropsType {
@@ -13,12 +14,14 @@ interface ShopHeaderPropsType {
   shopUrlParam: string;
   shopInfo: any;
   logo: string;
+  updateShopInfo: Function
 }
 
 const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
-  const { shopId, shopUrlParam, shopInfo, logo } = 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 { search } = history.location.query
 
   useEffect(() => {
@@ -53,7 +56,26 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (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_header}>
@@ -110,7 +132,7 @@ const ShopHeader: React.FC<ShopHeaderPropsType> = (props) => {
             <div className={styles.dashed_split}></div>
             <div className={styles.shop_info_btn_group}>
               <div className={styles.shop_info_btn}><Link to={`/shop?shopId=${shopUrlParam}`}>进入店铺</Link></div>
-              <div className={styles.shop_info_btn}>收藏本店</div>
+              <div className={cx(styles.shop_info_btn, collectState ? styles.active : '')} onClick={() => handleCollect()}>{collectState ? '已收藏本店' : '收藏本店'}</div>
             </div>
             <Button loading={applyLoading} className={styles.apply_member_btn} onClick={() => applyFroVip()}>申请成为本店会员</Button>
           </div>

src/pages/lxMall/layouts/LXShopLayout.tsx

@@ -80,6 +80,10 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
   const basicInfo = getMenuData(props.route.routes, { locale: true }, formatMessage)
   const menuData = basicInfo.menuData ? basicInfo.menuData.filter(item => !item.redirect) : []
 
+  const handleUpdate = () => {
+    fetchShopInfo(query.memberId)
+  }
+
   return (
     <Fragment>
       <Helmet>
@@ -90,7 +94,7 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
       <div className={styles.lxmall_page}>
         <TopBar langComponent={<SelectLang />} name={mallInfo.name} type={LAYOUT_TYPE.shop} />
         <div className={styles.content}>
-          <ShopHeader logo={mallInfo.logoUrl} shopId={query.shopId} shopUrlParam={shopId} shopInfo={shopInfo} />
+          <ShopHeader logo={mallInfo.logoUrl} shopId={query.shopId} shopUrlParam={shopId} shopInfo={shopInfo} updateShopInfo={() => handleUpdate()} />
           <MainNav menuData={menuData} pathname={location.pathname} type={LAYOUT_TYPE.shop} shopId={query.shopId} shopUrlParam={shopId} />
           {
             children && React.Children.map(children, (child: any) => {
@@ -100,7 +104,8 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
                   shopId: query.shopId,
                   memberId: query.memberId,
                   shopUrlParam: shopId,
-                  shopInfo
+                  shopInfo,
+                  updateShopInfo: () => handleUpdate()
                 },
               );
             })

src/pages/systemSetting/collection/index.less

@@ -63,6 +63,7 @@
             font-size: 12px;
             color: #303133;
             font-weight: 500;
+            cursor: pointer;
           }
 
           &_about {

src/pages/systemSetting/collection/shops.tsx

 import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
-import { Rate, Pagination } from 'antd'
+import { Rate, Pagination, Modal } from 'antd'
 import { StarFilled } from '@ant-design/icons'
 import shop_icon from '@/assets/imgs/shop_icon.png'
 import credit_icon from '@/assets/imgs/credit_icon.png'
 import { PublicApi } from '@/services/api'
+import moment from 'moment'
 import styles from './index.less'
 
 const Shops: React.FC = () => {
@@ -38,6 +39,40 @@ const Shops: React.FC = () => {
     setCurrent(page)
   }
 
+  const handleCancelCollect = (detail) => {
+    Modal.confirm({
+      centered: true,
+      className: styles.mallComfirm,
+      content: `是否要取消收藏?`,
+      onOk: () => {
+        return new Promise((resolve, reject) => {
+          let param = {
+            shopId: detail.id,
+            status: false
+          }
+          PublicApi.postTemplateShopCollect(param).then(res => {
+            if (res.code === 1000) {
+              // fetchPurchaseList()
+              fetchCollectShopList()
+              resolve()
+            } else {
+              reject()
+            }
+          }).catch(() => {
+            reject()
+          })
+        })
+      }
+    })
+  }
+
+  const linkToDetail = (detail) => {
+    let el = document.createElement('a')
+    el.href = `/shop?shopId=${btoa(JSON.stringify({ shopId: detail.id, memberId: detail.memberId }))}`;
+    el.target = '_blank';
+    el.click()
+  }
+
   return (
     <>
       <div className={styles.shops_list}>
@@ -47,21 +82,21 @@ const Shops: React.FC = () => {
               <div className={cx(styles.shops_list_item_item, styles.morehalf)}>
                 <div className={styles.shop_header_info}>
                   <div className={styles.shop_header_info_logo}>
-                    <img src="https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/69f3f329d5a848119dc89029a10acb081600332395671.jpg" />
+                    <img src={item.logo} />
                   </div>
                   <div className={styles.shop_header_info_content}>
-                    <div className={styles.shop_header_info_content_name}>
-                      <span>温州市龙昌皮业有限公司</span>
+                    <div className={styles.shop_header_info_content_name} onClick={() => linkToDetail(item)}>
+                      <span>{item.memberName}</span>
                     </div>
                     <div className={styles.shop_header_info_content_about}>
                       <div className={styles.shop_header_info_content_about_item}>
                         <i className={styles.icon}><img src={shop_icon} /></i>
-                        <span className={styles.red}>2</span>
+                        <span className={styles.red}>{item.registerYears}</span>
                         <span>年</span>
                       </div>
                       <div className={styles.shop_header_info_content_about_item}>
                         <i className={styles.icon}><img src={credit_icon} /></i>
-                        <span>1288</span>
+                        <span>{item.integral}</span>
                       </div>
                     </div>
 
@@ -69,17 +104,17 @@ const Shops: React.FC = () => {
                 </div>
               </div>
               <div className={cx(styles.shops_list_item_item)}>
-                <i className={cx(styles.level_icon, styles.level3)}></i>
+                {/* <i className={cx(styles.level_icon, styles.level3)}></i> */}
                 <div className={styles.rate_wrap}>
                   <span>满意度：</span>
-                  <Rate disabled defaultValue={2} />
+                  <Rate disabled defaultValue={item.satisfied} />
                 </div>
               </div>
               <div className={cx(styles.shops_list_item_item)}>
-                <span className={styles.date}>2020-10-25  10:58</span>
+                <span className={styles.date}>{moment(item.collectTime).format("YYYY-MM-DD HH:mm")}</span>
               </div>
               <div className={cx(styles.shops_list_item_item)}>
-                <div className={cx(styles.collection_state)}>
+                <div className={cx(styles.collection_state)} onClick={() => handleCancelCollect(item)}>
                   <StarFilled />
                   <label>收藏</label>
                 </div>