电子商城测试版v4

2022-07-04 20:33:39 +08:00
parent 8ec073a085
commit 0a77473193
26 changed files with 419 additions and 81 deletions
@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '我的收藏a',
+  enableShareAppMessage: true,
+}
@@ -0,0 +1,47 @@
+
+.collection_main {
+    padding: 0 20px;
+    min-height: 100%;
+    background-color: #F8F8F8;
+    .search {
+        display: flex;
+        align-items: center;
+        .miconfont_con{
+            padding: 0 20px;
+        }
+        .miconfont{
+            font-size: 30px;
+            color: #007AFF;
+            border: 1px solid #007AFF;
+            border-radius: 50%;
+        }
+    }
+    .operation{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 20px 20px 0 20px;
+        font-size: 26px;
+        color: #707070;
+        .operation_check{
+            display: flex;
+            align-items: center;
+            Text{
+                margin-left: 15px;
+                height: 100%;
+                display: inline-block;
+                
+            }
+        }
+    }
+    .operation_check_right{
+        Text{
+            color: #CCCCCC;
+            margin-right: 20px;
+        }
+    }
+    .class_list{
+        margin-top: 30px;
+        
+    }
+}
@@ -0,0 +1,65 @@
+import { CreateFavoriteApi, DelFavoriteApi, FavoriteListApi, UpdateFavoriteApi } from "@/api/favorite";
+import { alert } from "@/common/common";
+import { getFilterData } from "@/common/util";
+import Product from "../components/product";
+import Search from "@/components/search"
+import { Text, View } from "@tarojs/components"
+import Taro from "@tarojs/taro";
+import classnames from "classnames";
+import { useCallback, useEffect, useRef, useState } from "react";
+import CreatePopup from "../components/createPopup";
+import UpdatePopup from "../components/updatePopup";
+import styles  from './index.module.scss'
+import MCheckbox from "@/components/checkbox";
+
+
+export default () => {
+
+  //获取收藏夹面料
+  const [list, setList] = useState<any[]>([])
+  const getFavoriteInfo = () => {
+    let arr:any[] = []
+    new Array(10).fill("").map((item, index) => {
+      arr.push({code: index})
+    })
+    setList(arr)
+  }
+
+  //获取搜索数据
+  const [searchData, setSearchData] = useState('')
+  const onSearch = useCallback((e) => {
+    setSearchData(() => e)
+  }, [])
+  useEffect(() => {
+    getFavoriteInfo()
+  }, [searchData])
+
+  const selectCallBack = useCallback(() => {
+
+  }, [])
+
+  const colseCallBack = useCallback(() => {
+
+  }, [])
+
+    return (
+      <View className={styles.collection_main}>
+        <View className={styles.search}>
+          <Search  style={{width: '100%'}} debounceTime={300} changeOnSearch={onSearch} placeholder="请输入面料关键词" />
+        </View>
+        <View className={styles.operation}>
+            <View className={styles.operation_check}>
+              <MCheckbox  onSelect={() => selectCallBack()} onClose={() => colseCallBack()}/>
+              <Text>全选</Text>
+            </View>
+            <View className={styles.operation_check_right}>
+              <Text>移动到</Text>
+              <Text>取消收藏</Text>
+            </View>
+          </View>
+        <View className={styles.class_list}>
+          <Product productList={list}/>
+        </View>
+      </View>
+    )
+  }
@@ -0,0 +1,89 @@
+
+.products_list{
+    padding: 0 20px 20px 20px;
+    box-sizing: border-box;
+    height: 100%;
+}
+.products_item{
+    width: 100%;
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 20px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    &:nth-child(n+2){
+        margin-top: 16px;
+    }
+    .checkbox{
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        z-index: 999;
+    }
+    .item_img{
+        width: 198px;
+        height: 198px;
+        position: relative;
+        image{
+            width: 100%;
+            height: 100%;
+            border-radius: 10px;
+        }
+        .num{
+            padding: 5px 10px 5px 20px;
+            font-size: $font_size_min;
+            position: absolute;
+            right:0;
+            bottom: 0;
+            background: rgba($color: #000, $alpha: 0.3);
+            border-radius: 36px 0px 10px 0px;
+            color: #fff;
+            text-align: center;
+        }
+    }
+    .item_con{
+        padding-left: 20px;
+        font-size: $font_size;
+        flex:1;
+        .title{
+            font-size: $font_size;
+            color: #707070;
+            text{
+                color: $color_font_one;
+                font-weight: bold;
+            }
+        }
+        .tag_list{
+            display: flex;
+            margin-top: 16px;
+            flex-wrap: wrap;
+            .tag, .tag_g{
+                max-width: 260rpx;
+                padding: 3px 10px;
+                background-color: #CDE5FF;
+                font-size: $font_size_min;
+                border-radius: 5px;
+                color: $color_main;
+                margin-right: 10px;
+                margin-bottom: 10px;
+            }
+            .tag_g{
+                background-color: #FFE6CE;
+                color: #EE7500;
+            }
+        }
+        .introduce{
+            font-size: $font_size_medium;
+            color: $color_font_two;
+            
+        }
+        .des{
+            font-size:$font_size_medium;
+            color: #707070;
+            margin-top: 16px;
+            @include common_ellipsis($params:2);
+        }
+    }
+}
@@ -0,0 +1,58 @@
+import { Image, View } from "@tarojs/components"
+import Taro from "@tarojs/taro"
+import { goLink } from "@/common/common"
+import styles  from './index.module.scss'
+import { formatHashTag, formatImgUrl } from "@/common/fotmat"
+import LabAndImg from "@/components/LabAndImg"
+import MCheckbox from "@/components/checkbox";
+import { useCallback, useEffect, useState } from "react"
+
+type Params = {
+    desStatus?: true|false,
+    productList?: any[]
+}
+export default ({desStatus = true, productList = []}:Params) => {
+    const [list, setList] = useState<any[]>([])
+    useEffect(() => {
+        console.log('productList::', productList)
+        setList(() => [...productList])
+    },[productList]) 
+
+  
+
+    const onSelect = (item, e) => {
+        console.log('e:::', e)
+        item.check = true
+        setList(() => ([...list]))
+    }
+
+    const onClose = (item, e) => {
+        item.check = false
+        setList(() => ([...list]))
+    }
+
+    return (
+        <View className={styles.products_list}>
+            {list?.map(item => {
+                return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
+                    <View className={styles.checkbox}>
+                        <MCheckbox status={item.check} onSelect={() => onSelect(item, e)} onClose={() => onClose(item, e)}/>
+                    </View>
+                    <View className={styles.item_img}>
+                        <LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
+                        <View className={styles.num}>{item.product_color_count}色</View>
+                    </View>
+                    <View className={styles.item_con}>
+                    <View className={styles.title}><text>{formatHashTag(item.product_code, '')} </text>{item.product_name}</View>
+                    <View className={styles.tag_list}>
+                        <View className={styles.tag}>{item.width}</View>
+                        <View className={styles.tag_g}>{item.weight_density}</View>
+                    </View>
+                    <View className={styles.introduce}>{item.component}</View>
+                        {desStatus&&<View className={styles.des}>{item.describe}</View>}
+                    </View>
+                </View>
+            })}
+        </View>
+    )
+}
@@ -1,7 +1,7 @@
 import { CreateFavoriteApi, DelFavoriteApi, FavoriteListApi, UpdateFavoriteApi } from "@/api/favorite";
 import { alert } from "@/common/common";
 import { getFilterData } from "@/common/util";
-import Product from "@/components/product";
+import Product from "./components/product";
 import Search from "@/components/search"
 import { Text, View } from "@tarojs/components"
 import Taro from "@tarojs/taro";
@@ -127,7 +127,6 @@ export default () => {
      setCollectioinShow(false)
    }

-
    return (
      <View className={styles.collection_main}>
        <View className={styles.search}>