电子商城测试版v4

src/pages/details/index.module.scss

@@ -43,7 +43,7 @@
             opacity: 0;
         }
         .miconfont{
-            font-size: 36px;
+            font-size: 45px;
         }
         .collected{
             color: #FFC300;

src/pages/details/index.tsx

@@ -71,7 +71,10 @@ export default (props:Params) => {
   }
 
   useEffect(() => {
-    if(productInfo.code)  getShortCode()
+    if(productInfo.code) {
+      getShortCode()
+      setCollectStatus(() => productInfo.is_favorite)
+    }
   }, [productInfo])
 
 
@@ -98,12 +101,7 @@ export default (props:Params) => {
     setShowPreview(true)
   }
 
-  //收藏功能
-  const [collectStatus, setCollectStatus] = useState(false)
-  const changeCollect = () => {
-    setCollectStatus(!collectStatus)
-    setCollectionShow(true)
-  }
+  
 
   const {setSortCode, userInfo : userObj } = useUserInfo()
   //详情页获取分享短码
@@ -132,20 +130,28 @@ export default (props:Params) => {
     setShowOrderCount(true)
   }
 
-  //加入收藏夹
+  //收藏功能
+  const [collectStatus, setCollectStatus] = useState(false)
   const [collectionShow, setCollectionShow] = useState(false)
   const {fetchData: addFavoritefetchData} = AddFavoriteApi()
   const onAdd =  useCallback(async (val) => {
     let res = await addFavoritefetchData({favorite_id: val.id, product_id: Number(params.id)})
     if(res.success) {
       alert.success('添加成功')
+      setCollectStatus(true)
     } else {
       alert.none(res.msg)
     }
+    
     setCollectionShow(false)
   }, [params])
+  const closeCollection = useCallback(() => {
+    setCollectionShow(false)
+  }, [])
 
   
+
+
   //页面下拉刷新
   usePullDownRefresh(() => {
     getProductDetail()
@@ -165,8 +171,8 @@ export default (props:Params) => {
           <View className={styles.text}>分享</View>
           <Button open-type="share" className={styles.shareBtn}></Button>
         </View>
-        <View className={styles.collect}>
-          <View className={classnames('iconfont icon-shoucang', styles.miconfont, collectStatus&&styles.collected)} onClick={() => changeCollect()}></View>
+        <View className={styles.collect} onClick={() => setCollectionShow(true)}>
+          <View className={classnames(`iconfont ${collectStatus?'icon-shoucang-pressed':'icon-shoucang'}`, styles.miconfont, collectStatus&&styles.collected)} ></View>
           <View className={styles.text}>收藏</View>
         </View>
       </View>
@@ -213,7 +219,7 @@ export default (props:Params) => {
       </CustomWrapper>
       <ShopCart show={showCart}  onClose={() => setShowCart(false)}/>
       <Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
-      <AddCollection show={collectionShow} onAdd={onAdd}/>
+      <AddCollection show={collectionShow} onAdd={onAdd} onClose={closeCollection}/>
       <View className='common_safe_area_y'></View>
     </View>
   )