🦄 refactor(ID1000779): 八、收藏功能；

【八、收藏功能；】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000779

src/components/addCollection/index.module.scss

@@ -1,47 +1,32 @@
-
-.collection_con{
-    padding: 20px ;
-    .header{
-        display: flex;
-        justify-content: center;
-        position: relative;
-        .title{
-            font-size: 30px;
-            font-weight: 700;
-        }
-        .miconfont_con{
-            position: absolute;
-            right: 10px;
-            top: 0;
-            font-size: 26px;
-            color: #007AFF;
-            .miconfont{
-                font-size: 30px;
-                color: #007AFF;
-                border: 1px solid #007AFF;
-                border-radius: 50%;
-                margin-right: 10px;
-            }
-        }
+.collection_con {
+  .collection_item {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    font-size: 26px;
+    padding: 0px 32px;
+    align-items: center;
+    .collectionImage {
+      width: 90px;
+      height: 90px;
+      background-color: #f6f6f6;
+      border: 1px solid #dedede;
+      border-radius: 5px;
+      margin-right: 32px;
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+      align-items: center;
     }
-    .scrollView{
-        height: 60vh;
+    .miconfont {
+      font-size: 36px;
+      color: #007aff;
     }
-    .collection_item{
-        padding: 30px 0 15px 0;
-        border-bottom: 1px solid #F3F3F3;
-        .name{
-            font-size: 26px;
-            font-weight: 700;
-            text{
-                font-weight: normal;
-            }
-        }
-        .desc{
-            font-size: 22px;
-            color: #707070;
-            padding-left: 10px;
-            margin-top: 20px;
-        }
+    .text {
+      margin-left: 10px;
     }
-}
+  }
+}
+.scrollStyle {
+  max-height: 60vh;
+}

src/components/addCollection/index.tsx

@@ -1,6 +1,8 @@
 import { Input, ScrollView, Text, View } from '@tarojs/components'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import classnames from 'classnames'
+import IconFont from '../iconfont/iconfont'
+import Divider from '../divider'
 import styles from './index.module.scss'
 import Popup from '@/components/popup'
 import TextareaEnhance from '@/components/textareaEnhance'
@@ -9,14 +11,17 @@ import { alert, goLink } from '@/common/common'
 import { getFilterData } from '@/common/util'
 
 // 原因选择
-interface ReasonInfoParam {
+interface AddCollectionParam {
   show?: boolean // 显示
   onClose?: () => void // 关闭
   onAdd?: (val: any) => void
 }
-const AddCollection = ({ show = false, onClose, onAdd }: ReasonInfoParam) => {
+const AddCollection = (props: AddCollectionParam) => {
+  const {
+    show = false, onClose, onAdd,
+  } = props
   // 获取列表
-  const [list, setList] = useState([])
+  const [list, setList] = useState<any[]>([])
   const { fetchData: fetchDataList } = FavoriteListApi()
   const getFavoriteList = async() => {
     const res = await fetchDataList(getFilterData())
@@ -25,35 +30,38 @@ const AddCollection = ({ show = false, onClose, onAdd }: ReasonInfoParam) => {
   useEffect(() => {
     if (show) { getFavoriteList() }
   }, [show])
-
-  const onCreate = () => {
-    onClose?.()
-    goLink('/pages/collection/index')
+  const handleNewCollection = () => {
+    // 新建收藏夹
+    goLink('/pages/collection/collectionDetail/index', { title: '新建收藏夹', isEdit: false, editData: null })
   }
-
   return (
-    <Popup show={show} onClose={onClose} showTitle={false}>
-      <View className={styles.collection_con}>
-        <View className={styles.header}>
-          <Text className={styles.title}>选择收藏夹</Text>
-          <View className={styles.miconfont_con}>
-            <Text className={classnames(styles.miconfont, 'iconfont icon-jia')}></Text>
-            <Text onClick={onCreate}>新建</Text>
-          </View>
-        </View>
-        <ScrollView scrollY className={styles.scrollView}>
-          {list?.map((item: any, index) => (
-            <View key={index} onClick={() => onAdd?.(item)} className={styles.collection_item}>
-              <View className={styles.name}>
-                {item.name}
-                <Text>（{item.product_color_list?.length || 0}）</Text>
-              </View>
-              <View className={styles.desc}>{item.remark}</View>
+    <Popup show={show} onClose={onClose} showTitle title="加入收藏夹" >
+      <Divider direction="horizontal" customStyles={{ marginTop: '0px', marginBottom: '12px' }}></Divider>
+      <ScrollView className={styles.scrollStyle} scrollY>
+        <View className={styles.collection_con}>
+          {
+            list.map((item, key) => (
+              <>
+                <View key={key} className={styles.collection_item} onClick={() => onAdd?.(item)}>
+                  <View className={styles.collectionImage}></View>
+                  <Text className={styles.text}>{item.name}</Text>
+                </View>
+                <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+              </>
+            ))
+          }
+          <View className={styles.collection_item} onClick={handleNewCollection}>
+            <View className={styles.collectionImage}>
+              <IconFont name="icon-xinzengshoucangjia" size={40}></IconFont>
             </View>
-          ))}
-        </ScrollView>
-      </View>
+            <Text className={styles.text}>新建收藏夹</Text>
+          </View>
+          <Divider direction="horizontal" customStyles={{ margin: '12px 0' }}></Divider>
+
+        </View>
+      </ScrollView>
     </Popup>
   )
 }
+
 export default memo(AddCollection)