From f75de04f83b14d722b848a171d035abe041ac33b Mon Sep 17 00:00:00 2001
From: Haiyi <1021441632@qq.com>
Date: Fri, 2 Sep 2022 19:06:57 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20refactor:=E9=A6=96=E9=A1=B5?=
=?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A650%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/api/order.ts | 9 +-
src/components/goodsItem/index.module.scss | 126 ++++++++++++++++++
src/components/goodsItem/index.tsx | 52 ++++++++
src/components/product/index.tsx | 31 ++---
src/components/shoppingCart/index.module.scss | 91 +++++++++++++
src/components/shoppingCart/index.tsx | 105 +++++++++++++++
src/pages/index/index.tsx | 58 +++++++-
7 files changed, 452 insertions(+), 20 deletions(-)
create mode 100644 src/components/goodsItem/index.module.scss
create mode 100644 src/components/goodsItem/index.tsx
create mode 100644 src/components/shoppingCart/index.module.scss
create mode 100644 src/components/shoppingCart/index.tsx
diff --git a/src/api/order.ts b/src/api/order.ts
index 345ccf0..611dfa5 100644
--- a/src/api/order.ts
+++ b/src/api/order.ts
@@ -26,4 +26,11 @@ export const ClientListApi = () => {
url: `/v1/mp/purchaser/list`,
method: "get"
})
-}
\ No newline at end of file
+}
+//面料种类列表
+export const mpproductcolorlist = () => {
+ return useRequest({
+ url: `/v1/mp/product/color/list`,
+ method: "get"
+ })
+}
diff --git a/src/components/goodsItem/index.module.scss b/src/components/goodsItem/index.module.scss
new file mode 100644
index 0000000..4ff0816
--- /dev/null
+++ b/src/components/goodsItem/index.module.scss
@@ -0,0 +1,126 @@
+.goodsBox {
+ display: flex;
+ margin-bottom: 32px;
+ // justify-content: space-between;
+
+ .pic {
+ width: 118px;
+ height: 118px;
+ border-radius: 8px;
+ margin-right: 32px;
+ }
+
+ .rightGoodbox {
+ padding-bottom: 31px;
+ border-bottom: 1px solid #efefef;
+ display: flex;
+ justify-content: space-between;
+ // margin-right: 32px;
+ width: 538px;
+
+ .leftFontsbox {
+ .title {
+ width: 260px;
+ height: 34px;
+ font-size: 28px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #000000;
+ margin-bottom: 8px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .productName {
+ width: 260px;
+ height: 30px;
+ font-size: 24px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #000000;
+ margin-bottom: 16px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .productNums {
+ font-size: 24px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #000000;
+ }
+ }
+
+ .rightFontsbox {
+ .money {
+ display: flex;
+ justify-content: flex-end;
+ font-size: 28px;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #F41A39;
+ margin-bottom: 14px;
+ }
+
+ .inputBox {
+ width: 189px;
+ height: 64px;
+ border-radius: 8px;
+ border: 1px solid #979797;
+ display: flex;
+
+ .reduceBox {
+ width: 64px;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .reduce {
+ width: 20px;
+ height: 3px;
+ background: #000000;
+ border-radius: 1px;
+ opacity: 0.8;
+ }
+ }
+
+ .numsBox {
+ width: 61px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #000000;
+ }
+
+ .addBox {
+ width: 64px;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #000;
+ font-size: 35px;
+ }
+ }
+
+ .addtine {
+ width: 64px;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #000;
+ font-size: 35px;
+ border-radius: 8px;
+ border: 1px solid #979797;
+ float: right;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/goodsItem/index.tsx b/src/components/goodsItem/index.tsx
new file mode 100644
index 0000000..c5a0065
--- /dev/null
+++ b/src/components/goodsItem/index.tsx
@@ -0,0 +1,52 @@
+import { View, ScrollView, Image, Input } from '@tarojs/components'
+import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+
+interface props {
+ clickAdd: (any) => void,
+ onInputEven: (a: any, c: any) => void,
+ value: {
+ showInput?: boolean,
+ nums?: string
+ }
+}
+
+
+export default memo((props: props) => {
+
+
+
+ return (
+
+
+
+
+ 001# 环保黑
+ 0681# 26S全棉平纹
+ 剩:109件
+
+
+ ¥37.50/kg
+ {
+ props.value.showInput &&
+
+
+
+
+
+ props.onInputEven($event, props)}>
+
+
+ +
+
+
+ }
+ {
+ !props.value.showInput && props.clickAdd(props.value)}>+
+ }
+
+
+
+ )
+})
\ No newline at end of file
diff --git a/src/components/product/index.tsx b/src/components/product/index.tsx
index c08b492..193c2e5 100644
--- a/src/components/product/index.tsx
+++ b/src/components/product/index.tsx
@@ -1,39 +1,40 @@
import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro"
import { goLink } from "@/common/common"
-import styles from './index.module.scss'
+import styles from './index.module.scss'
import { formatHashTag, formatImgUrl } from "@/common/fotmat"
import LabAndImg from "../LabAndImg"
import { useCallback, useMemo } from "react"
type Params = {
- desStatus?: true|false,
- productList?: any[]
+ desStatus?: true | false,
+ productList?: any[],
+ popupShow?: (any) => void
}
-export default ({desStatus = true, productList = []}:Params) => {
+export default ({ desStatus = true, productList = [], popupShow }: Params) => {
const labAndImgObj = useCallback((item) => {
- return {lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}
+ return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
}, [productList])
return (
{productList?.map(item => {
- return goLink(`/pages/details/index?id=${item.id}`)}>
+ return popupShow?.(item)}>
-
+
{item.product_color_count}色
- {formatHashTag(item.code, '')} {item.name}
-
- {item.width}
- {item.weight_density}
-
- {item.component}
- {desStatus&&{item.describe}}
+ {formatHashTag(item.code, '')} {item.name}
+
+ {item.width}
+ {item.weight_density}
+
+ {item.component}
+ {desStatus && {item.describe}}
})}
-
+
)
}
diff --git a/src/components/shoppingCart/index.module.scss b/src/components/shoppingCart/index.module.scss
new file mode 100644
index 0000000..8a05dd0
--- /dev/null
+++ b/src/components/shoppingCart/index.module.scss
@@ -0,0 +1,91 @@
+.shopcartBox {
+ padding-left: 32px;
+
+ .topTitle {
+ font-size: 32px;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #000000;
+ margin-top: 24px;
+ margin-bottom: 8px;
+ }
+
+ .selectFont {
+ font-size: 24px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #000000;
+ margin-bottom: 24px;
+ }
+
+ .line {
+ margin-bottom: 24px;
+ width: 686px;
+ height: 1px;
+ background: #000000;
+ opacity: 0.1;
+ }
+
+ .typeFont {
+ font-size: 28px;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #000000;
+ margin-bottom: 24px;
+ }
+
+ .flexType {
+ display: flex;
+ align-items: center;
+ margin-bottom: 32px;
+
+ .activemodeFont {
+ margin-right: 16px;
+ width: 160px;
+ height: 68px;
+ background: rgba(51, 127, 255, 0.1);
+ border-radius: 8px;
+ border: 1px solid #337FFF;
+ box-sizing: border-box;
+ font-size: 28px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #337FFF;
+ text-align: center;
+ line-height: 68px;
+ }
+
+ .modeFont {
+ margin-right: 16px;
+ width: 160px;
+ height: 68px;
+ background: #E9E9E9;
+ border-radius: 8px;
+ opacity: 0.4;
+ font-size: 28px;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #000000;
+ box-sizing: border-box;
+ text-align: center;
+ line-height: 68px;
+ }
+ }
+
+ .kingFont {
+ font-size: 28px;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #000000;
+ margin-bottom: 24px;
+ }
+
+ .searchBox {
+ width: 686px;
+ margin-bottom: 32px;
+ }
+
+ .scrollview {
+ height: 500px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/shoppingCart/index.tsx b/src/components/shoppingCart/index.tsx
new file mode 100644
index 0000000..aff72f8
--- /dev/null
+++ b/src/components/shoppingCart/index.tsx
@@ -0,0 +1,105 @@
+import { View, ScrollView } from '@tarojs/components'
+import { useCallback, forwardRef, useEffect, useMemo, useRef, useState, memo, useImperativeHandle, } from 'react'
+import Search from '@/components/search'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Popup from '@/components/popup'
+import Goods from "@/components/goodsItem"
+
+interface prosObj {
+ showPopup?: false | true,
+ closePopup?: () => void,
+ goodList?: any[],
+ typeList?: any[],
+ handCheck?: (any) => void
+}
+export default memo(forwardRef((props: prosObj, ref) => {
+ const {
+ showPopup = false,
+ closePopup,
+ goodList = [],
+ typeList = [],
+ handCheck
+ } = props
+
+ useImperativeHandle(ref, () => ({
+ Object: props,
+ typeList: typeList
+ }))
+
+
+
+ //判断选择的类型
+ const showModefont = useMemo(() => {
+ const modeObj = typeList.filter(item => {
+ return item.checked
+ })
+ if (modeObj[0].id === 0) {
+ return '条'
+ } else {
+ return '米'
+ }
+ }, [typeList])
+
+ //输入了搜索关键字
+ const getSearchData = useCallback((e) => {
+
+ }, [])
+
+ //商品数据
+ // const [goodList, setGoodlist] = useState(['a'])
+
+
+ //点击加
+ const addNums = (item) => {
+ console.log(item, 4444)
+ }
+
+ //输入框监听
+ const oninputEvent = useCallback((e, obj) => {
+ console.log(e, obj, '123123')
+ }, [])
+
+
+ return (
+ closePopup?.()}>
+
+ 0681# 26S全棉平纹
+ 已选 1 种面料，1 个颜色，共 4 {showModefont}
+
+ 布料类型
+
+ {
+ typeList.map((item, index) => {
+ return (
+ { handCheck?.(item) }} key={index} className={classnames(item.checked ? styles.activemodeFont : styles.modeFont)}>{item.name}
+ )
+ })
+ }
+
+
+ 颜色分类(33)
+
+
+
+
+
+ {
+ goodList.map((item, index) => {
+ return (
+ oninputEvent(e, obj)} clickAdd={(item) => addNums(item)} >
+ )
+ })
+ }
+
+
+
+
+
+ )
+}))
\ No newline at end of file
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index f14d122..032906e 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -3,12 +3,13 @@ import Search from '@/components/search'
import SideBar from '@/components/sideBar'
import Product from '@/components/product'
import MoveBtn from '@/components/moveBtn'
-// import ShopCart from '@/components/shopCart'
+import ShopCart from '@/components/shoppingCart'
import { goLink } from '@/common/common'
import styles from './index.module.scss'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { kindListApi, ProductListApi } from '@/api/index'
// import useLogin from '@/use/useLogin'
+import { mpproductcolorlist } from "@/api/order"
import { dataLoadingStatus } from '@/common/util'
import Taro from '@tarojs/taro'
@@ -74,6 +75,55 @@ export default () => {
setRefresherTriggeredStatus(true)
}
+ const [search, setSearchObj] = useState({
+ modeId: 0,
+ goodsId: null
+ })
+
+ //选择的类型
+ const [typeList, setTypeList] = useState([{ id: 0, name: '大货', checked: true }, { id: 1, name: '剪版', checked: false }, { id: 2, name: '散剪', checked: false }])
+ //选择类型
+ const handCheckMode = (item) => {
+ typeList.map(it => {
+ if (it.id === item.id) {
+ it.checked = true
+ setSearchObj((e) => ({ ...e, modeId: it.id }))
+ } else {
+ it.checked = false
+ }
+ return it
+ })
+ setTypeList([...typeList])
+
+ }
+ const [goodList, setGoodlist] = useState([])
+ const { fetchData: colorlistFetch } = mpproductcolorlist()
+ const ShopCartRef = useRef(null)
+
+
+ //点击对应商品显示购物车
+ const showCart = async (item) => {
+ console.log(item, 6666)
+ setSearchObj((e) => ({ ...e, goodsId: item.id }))
+ setShowShopCart(true)
+
+ }
+
+ const getGoodList = async () => {
+ const res = await colorlistFetch({ product_id: search.goodsId, sale_mode: search.modeId })
+ setGoodlist([...res.data.list])
+ }
+ //监听选择的类型
+ useEffect(() => {
+ setSearchObj(search)
+ console.log(search, 'searchsearch')
+ if (search.goodsId) getGoodList()
+ }, [search])
+
+ //关闭弹窗
+ const closePoup = () => {
+ setShowShopCart(false)
+ }
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading })
@@ -87,7 +137,7 @@ export default () => {
我的收藏
*/}
goLink('/pages/searchPage/index')}>
-
+
@@ -102,11 +152,11 @@ export default () => {
heightItem={150}
refresherTriggered={refresherTriggeredStatus}
selfOnRefresherRefresh={() => getRefresherRefresh()}>
-
+ showCart(item)} />
- {/* setShowShopCart(false)} /> */}
+ { handCheckMode(item) }} closePopup={() => closePoup()} goodList={goodList} typeList={typeList}>
//
)