From fab3cd8b86aa423973df372843f4e8d58543f193 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Wed, 22 Jun 2022 14:17:34 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B4=AD=E7=89=A9=E8=BD=A6=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E6=95=B0=E9=87=8F=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/constant.js | 4 +- src/components/counter/index.tsx | 2 +- src/components/shopCart/index copy.tsx | 275 +++++++++++++++++++++++++ src/components/shopCart/index.tsx | 38 +++- 4 files changed, 308 insertions(+), 11 deletions(-) create mode 100644 src/components/shopCart/index copy.tsx diff --git a/src/common/constant.js b/src/common/constant.js index 42b4b0b..8e897bc 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -6,11 +6,11 @@ // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞 // export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境 // export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发 -// export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发 +export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发 // export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境 // export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞 -export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添 +// export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添 // export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 杰 // CDN diff --git a/src/components/counter/index.tsx b/src/components/counter/index.tsx index 20472c3..37c1e59 100644 --- a/src/components/counter/index.tsx +++ b/src/components/counter/index.tsx @@ -28,7 +28,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, const minus = () => { let {count} = value let num_res = Big(count).minus(step).toNumber() - num_res = num_res < minNum?0:num_res + num_res = num_res < minNum?minNum:num_res setValue({...value, count:num_res}) onChange?.(parseFloat(num_res)) onClickBtn?.(parseFloat(num_res)) diff --git a/src/components/shopCart/index copy.tsx b/src/components/shopCart/index copy.tsx new file mode 100644 index 0000000..504abbd --- /dev/null +++ b/src/components/shopCart/index copy.tsx @@ -0,0 +1,275 @@ +import {Image, ScrollView, View } from "@tarojs/components" +import Popup from "@/components/popup" +import classnames from "classnames"; +import MCheckbox from "@/components/checkbox"; +import LoadingCard from "@/components/loadingCard"; +import InfiniteScroll from "@/components/infiniteScroll"; +import styles from "./index.module.scss" +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import Taro from "@tarojs/taro"; +import { alert, goLink } from "@/common/common"; +import {GetShoppingCartApi, DelShoppingCartApi} from "@/api/shopCart" +import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; +import { setParam } from "@/common/system"; +import { debounce } from "@/common/util"; + +type param = { + show?: true|false, + onClose?: () => void +} +export default ({show = false, onClose}: param) => { + const selectList = [ + // {value:-1, title:'不限', unit:'', eunit:''}, + {value:0, title:'大货', unit:'件', eunit:'kg'}, + {value:1,title:'剪板', unit:'米', eunit:'m'}, + {value:2,title:'散剪', unit:'米', eunit:'kg'}, + + ] + + const [selectIndex, setSelectIndex] = useState(0) + const selectProduct = (index:number) => { + setSelectIndex(index) + } + + useEffect(() => { + resetList() + setSelectStatus(true) + }, [selectIndex]) + + //重置勾选数据 + const resetList = () => { + list?.map(item => { + if(selectIndex == item.sale_mode || selectIndex == -1) { + item.select = true + } else { + item.select = false + } + }) + setList([...list]) + } + + //获取数据 + const [list, setList] = useState([]) + const [loading, setLoading] = useState(false) + const {fetchData} = GetShoppingCartApi() + const getShoppingCart = async () => { + setLoading(true) + const {data} = await fetchData() + let color_list = data.color_list||[] + color_list.reverse() + initList(color_list) + setList(color_list) + setLoading(false) + } + + //初始化全部数据 + const initList = (color_list) => { + color_list?.map(item => { + if(selectIndex == item.sale_mode) item.select = true + }) + } + + //显示是展示数据 + useEffect(() => { + if(!show) { + setList([]) + setSelectIndex(0) + } else { + getShoppingCart() + } + }, [show]) + + useEffect(() => { + return () => { + setList([]) + } + }, []) + + const [showPopup, setShowPopup] = useState(false) + useEffect(() => { + setShowPopup(show) + }, [show]) + + //全选反选 + const [selectStatus, setSelectStatus] = useState(false) + const selectAll = () => { + list.map(item => { + if(selectIndex == item.sale_mode || selectIndex == -1) + item.select = !selectStatus + }) + setSelectStatus(!selectStatus) + setList([...list]) + } + + //checkbox选中回调 + const selectCallBack = (item) => { + item.select = true + checkSelect() + setList([...list]) + } + + //checkbox选中判断是否全部选中，全部选中后是全选，否则反选 + const checkSelect = () => { + let list_count = 0 + let select_count = 0 + list?.map(item => { + if(selectIndex == -1 || selectIndex == item.sale_mode) { + list_count ++ + if(item.select) select_count++ + } + }) + setSelectStatus(select_count == list_count) + } + + //checkbox关闭回调 + const colseCallBack = (item) => { + item.select = false + checkSelect() + setList([...list]) + } + + //popup关闭 + const closePopup = () => { + onClose?.() + setShowPopup(false) + } + + //删除购物车内容 + const {fetchData:delShopFetchData} = DelShoppingCartApi() + const delSelect = () => { + Taro.showModal({ + content: '删除所选商品？', + success: async function (res) { + if (res.confirm) { + getSelectId() + const res = await delShopFetchData({id:selectIds.current}) + if(res.success) { + getShoppingCart() + Taro.showToast({ + title: '成功', + icon: 'success', + }) + } else { + Taro.showToast({ + title: res.msg, + icon: 'none', + }) + } + + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + //获取面料选中的id + const selectIds = useRef([]) + const getSelectId = () => { + selectIds.current = [] + list?.map(item => { + if(selectIndex == -1 || selectIndex == item.sale_mode) { + item.select&&selectIds.current.push(item.id) + } + }) + } + + //格式化金额 + const formatPirce = useCallback((price) => { + return Number(formatPriceDiv(price)) + }, []) + + //格式化数量 + const formatCount = useCallback((item) => { + return item.sale_mode == 0? item.roll + '件': (item.length/100) + 'm' + }, []) + + //预估金额 + const estimatePrice = useMemo(() => { + let count = 0 + list.map(item => { + if(item.select) count += item.estimate_amount + }) + return Number(formatPriceDiv(count)) + },[list]) + + //去结算 + const orderDetail = debounce(() => { + getSelectId() + if(selectIds.current.length == 0) { + alert.error('请选择面料') + } else { + let ids = selectIds.current.join('-') + setParam({ids, sale_mode:selectIndex}) + closePopup() + goLink('/pages/order/comfirm') + } + }, 500) + + return ( + + closePopup()} > + + + {!selectStatus?'全选':'反选'} + + + 删除所选 + + + + {selectList.map((item) => { + return selectProduct(item.value)} className={classnames(styles.search_item, (selectIndex==item.value)&&styles.search_item_select)}>{item.title} + })} + + + {loading&&} + {!loading&&list?.length > 0&& + + {list?.map((item, index) => { + return + + selectCallBack(item)} onClose={() => colseCallBack(item)}/> + + + + + + {formatHashTag(item.product_code, item.product_name)} + {item.product_color_code +' ' + item.product_color_name} + {item.sale_mode_name} + + + ￥{formatPirce(item.sale_price)}/{selectList[selectIndex].eunit} + ×{formatCount(item)} + + + })} + + } + {!loading&&list?.length == 0 && + 暂未选择商品 + 去选购 + } + + + + + + + + + ￥{estimatePrice} + 预估金额 + + orderDetail()}> + 去结算 + + + + + + + ) +} + diff --git a/src/components/shopCart/index.tsx b/src/components/shopCart/index.tsx index 504abbd..d76c056 100644 --- a/src/components/shopCart/index.tsx +++ b/src/components/shopCart/index.tsx @@ -12,6 +12,7 @@ import {GetShoppingCartApi, DelShoppingCartApi} from "@/api/shopCart" import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; import { setParam } from "@/common/system"; import { debounce } from "@/common/util"; +import Counter from "../counter"; type param = { show?: true|false, @@ -19,11 +20,9 @@ type param = { } export default ({show = false, onClose}: param) => { const selectList = [ - // {value:-1, title:'不限', unit:'', eunit:''}, - {value:0, title:'大货', unit:'件', eunit:'kg'}, - {value:1,title:'剪板', unit:'米', eunit:'m'}, - {value:2,title:'散剪', unit:'米', eunit:'kg'}, - + {value:0, title:'大货', unit:'条', eunit:'kg', step:1, digits:0, minNum:1, maxNum:100000, defaultNum:1}, + {value:1,title:'剪板', unit:'米', eunit:'m', step:1, digits:2, minNum:0.5, maxNum:9.99, defaultNum:1}, + {value:2,title:'散剪', unit:'米', eunit:'kg', step:1, digits:2, minNum:5, maxNum:100000, defaultNum:10}, ] const [selectIndex, setSelectIndex] = useState(0) @@ -56,7 +55,6 @@ export default ({show = false, onClose}: param) => { setLoading(true) const {data} = await fetchData() let color_list = data.color_list||[] - color_list.reverse() initList(color_list) setList(color_list) setLoading(false) @@ -66,6 +64,7 @@ export default ({show = false, onClose}: param) => { const initList = (color_list) => { color_list?.map(item => { if(selectIndex == item.sale_mode) item.select = true + item.count = formatCount(item) }) } @@ -181,7 +180,13 @@ export default ({show = false, onClose}: param) => { //格式化数量 const formatCount = useCallback((item) => { - return item.sale_mode == 0? item.roll + '件': (item.length/100) + 'm' + console.log('item:::',item) + return item.sale_mode == 0? item.roll : (item.length/100) + }, []) + + //格式化单位 + const formatUnit = useCallback((item) => { + return item.sale_mode == 0? '条':'米' }, []) //预估金额 @@ -205,6 +210,13 @@ export default ({show = false, onClose}: param) => { goLink('/pages/order/comfirm') } }, 500) + + //计数组件 + const getInputValue = (num, item) => { + item.count = parseFloat(num) + setList([...list]) + } + return ( @@ -241,7 +253,17 @@ export default ({show = false, onClose}: param) => { ￥{formatPirce(item.sale_price)}/{selectList[selectIndex].eunit} - ×{formatCount(item)} + {/* ×{formatCount(item)} */} + getInputValue(e, item)} + defaultNum={item.count} + step={selectList[selectIndex].step} + digits={selectList[selectIndex].digits} + onClickBtn={(e) => getInputValue(e, item)} + unit={formatUnit(item)} + minNum={selectList[selectIndex].minNum} + maxNum={selectList[selectIndex].maxNum} + /> })}