diff --git a/project.private.config.json b/project.private.config.json index dce67ec..8ec3296 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -28,6 +28,13 @@ "query": "", "launchMode": "default", "scene": null + }, + { + "name": "", + "pathName": "pages/customerPage/index", + "query": "", + "launchMode": "default", + "scene": null } ] } diff --git a/src/api/order.ts b/src/api/order.ts index 611dfa5..247f504 100644 --- a/src/api/order.ts +++ b/src/api/order.ts @@ -34,3 +34,10 @@ export const mpproductcolorlist = () => { method: "get" }) } +//加入购物车 +export const mpsaleOrderpreView = () => { + return useRequest({ + url: `/v1/mp/saleOrder/preView`, + method: "put" + }) +} diff --git a/src/app.config.ts b/src/app.config.ts index 8ef811e..afd9268 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -1,5 +1,5 @@ export default defineAppConfig({ - pages: ['pages/user/index', 'pages/index/index', 'pages/order/index', 'pages/shopping/index', 'pages/searchPage/index'], + pages: ['pages/user/index', 'pages/index/index', 'pages/order/index', 'pages/shopping/index', 'pages/searchPage/index', 'pages/customerPage/index'], window: { backgroundTextStyle: 'light', navigationBarBackgroundColor: '#fff', diff --git a/src/components/BottomCustomer/index.module.scss b/src/components/BottomCustomer/index.module.scss new file mode 100644 index 0000000..09bc0fb --- /dev/null +++ b/src/components/BottomCustomer/index.module.scss @@ -0,0 +1,60 @@ +.bottomBox { + width: 100%; + height: 132px; + background: #FFFFFF; + box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06); + display: flex; + padding-top: 16px; + align-items: center; + justify-content: space-between; + overflow: hidden; + + .leftBottom { + display: flex; + align-items: center; + margin-left: 12px; + + .nowFont { + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + + .selctFont { + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #236AFF; + margin-left: 10px; + } + } + + .button { + margin-right: 50px; + width: 256px; + height: 80px; + background: #4581FF; + border-radius: 40px; + font-size: 32px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #FFFFFF; + text-align: center; + line-height: 80px; + } + + .activeButton { + margin-right: 50px; + width: 256px; + height: 80px; + background: #68b4ff; + border-radius: 40px; + font-size: 32px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #fff; + text-align: center; + line-height: 80px; + } +} \ No newline at end of file diff --git a/src/components/BottomCustomer/index.tsx b/src/components/BottomCustomer/index.tsx new file mode 100644 index 0000000..7fe09ae --- /dev/null +++ b/src/components/BottomCustomer/index.tsx @@ -0,0 +1,36 @@ +import { View, ScrollView, Image, Input, Button } from '@tarojs/components' +import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react' +import styles from "./index.module.scss" +import classnames from "classnames"; +import Taro from '@tarojs/taro' + +type prosObj = { + isDisabled: boolean, + handSure?: () => void, + clientId?: Number, + clientName?: string +} + +export default memo((props: prosObj) => { + const { + isDisabled = true, + handSure, + clientName = '' + } = props + const navTo = () => { + Taro.navigateTo({ + url: '/pages/customerPage/index?clientId=' + props?.clientId + }) + } + + + return ( + + { navTo() }}> + 当前客户: + {clientName === '' ? '请选择客户 >' : clientName} + + + + ) +}) \ No newline at end of file diff --git a/src/components/goodsItem/index.module.scss b/src/components/goodsItem/index.module.scss index 4ff0816..51fd2d3 100644 --- a/src/components/goodsItem/index.module.scss +++ b/src/components/goodsItem/index.module.scss @@ -30,6 +30,7 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + background: 0, 124, 247; } .productName { @@ -96,6 +97,7 @@ font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #000000; + text-align: center; } .addBox { diff --git a/src/components/goodsItem/index.tsx b/src/components/goodsItem/index.tsx index c5a0065..1344f01 100644 --- a/src/components/goodsItem/index.tsx +++ b/src/components/goodsItem/index.tsx @@ -6,9 +6,19 @@ import classnames from "classnames"; interface props { clickAdd: (any) => void, onInputEven: (a: any, c: any) => void, + clickReduce: (any) => void, + handPlus: (any) => void, + modeFont?: number value: { showInput?: boolean, - nums?: string + nums?: string, + bulk_price?: Number | 0, + length_cut_price?: Number, + weight_cut_price?: Number, + code?: string, + rgb?: { r: number, g: number, b: number }, + name?: string, + roll?: number | string } } @@ -16,34 +26,46 @@ interface props { export default memo((props: props) => { - + const type = useMemo(() => { + if (props.modeFont === 0) { + return 'number' + } else { + return 'type' + } + }, [props.modeFont]) return ( - + { + props.value?.rgb?.r == 0 && props.value?.rgb?.g == 0 && props.value?.rgb?.b == 0 && + } + { + (props.value?.rgb?.r != 0 || props.value?.rgb?.g != 0 || props.value?.rgb?.b != 0) && + + } - 001# 环保黑 - 0681# 26S全棉平纹 - 剩:109件 + {props.value.code} {props.value.name}环保黑 + {/* 0681# 26S全棉平纹 */} + 剩:{props.value?.roll}件 - ¥37.50/kg + ¥{props.modeFont === 0 ? Number(props.value?.bulk_price) / 100 : props.modeFont === 1 ? Number(props.value?.length_cut_price) / 100 : Number(props.value?.weight_cut_price) / 100}{props.modeFont === 0 ? '/Kg' : '/m'} { props.value.showInput && - + { props.clickReduce?.(props.value) }}> - props.onInputEven($event, props)}> + props.onInputEven($event, props.value)}> - + { props.handPlus?.(props.value) }}> + } { - !props.value.showInput && props.clickAdd(props.value)}>+ + !props.value.showInput && props.clickAdd?.(props.value)}>+ } diff --git a/src/components/shoppingCart/index.module.scss b/src/components/shoppingCart/index.module.scss index 8a05dd0..27dc209 100644 --- a/src/components/shoppingCart/index.module.scss +++ b/src/components/shoppingCart/index.module.scss @@ -72,12 +72,33 @@ } } - .kingFont { - font-size: 28px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #000000; + .flexFonts { + display: flex; margin-bottom: 24px; + align-items: center; + + + .kingFont { + font-size: 28px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #000000; + + } + + .danwei { + margin-left: 16px; + width: 148px; + height: 30px; + border-radius: 4px; + border: 1px solid #E42945; + font-size: 22px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #E42945; + text-align: center; + line-height: 30px; + } } .searchBox { @@ -87,5 +108,16 @@ .scrollview { height: 500px; + + .kongBox { + height: 181px; + width: 100%; + } + } + + .posBox { + width: 100%; + position: fixed; + bottom: 0; } } \ No newline at end of file diff --git a/src/components/shoppingCart/index.tsx b/src/components/shoppingCart/index.tsx index aff72f8..7355a4d 100644 --- a/src/components/shoppingCart/index.tsx +++ b/src/components/shoppingCart/index.tsx @@ -5,13 +5,29 @@ import styles from "./index.module.scss" import classnames from "classnames"; import Popup from '@/components/popup' import Goods from "@/components/goodsItem" +import BottomCustomer from "@/components/BottomCustomer" + interface prosObj { showPopup?: false | true, closePopup?: () => void, goodList?: any[], typeList?: any[], - handCheck?: (any) => void + handCheck?: (any) => void, + addNums?: (any) => void + reduceNums?: (any) => void + oninputEvent?: (e: string, res: object) => void, + getSearchData: (any) => void, + handPlus: (any) => void, + handSure: () => void, + obj?: { + code?: string, + name?: string, + + }, + modeFont: Number | string, + clientName: string, + clientId: Number } export default memo(forwardRef((props: prosObj, ref) => { const { @@ -19,7 +35,17 @@ export default memo(forwardRef((props: prosObj, ref) => { closePopup, goodList = [], typeList = [], - handCheck + handCheck, + addNums, + reduceNums, + oninputEvent, + getSearchData, + handPlus, + obj = {}, + modeFont = 0, + clientName = '', + clientId = -1, + handSure } = props useImperativeHandle(ref, () => ({ @@ -41,31 +67,34 @@ export default memo(forwardRef((props: prosObj, ref) => { } }, [typeList]) - //输入了搜索关键字 - const getSearchData = useCallback((e) => { + //已选的颜色 + const selectTotal = useMemo(() => { + const totalArr = goodList.filter(item => { + return item.showInput + }) + return totalArr.length + }, [goodList]) - }, []) + //选择的条数或者米数 + const selectNums = useMemo(() => { + var s = 0; + goodList.forEach(function (val, idx, arr) { + if (val.showInput) { + s += val.nums; + } + }, 0); - //商品数据 - // const [goodList, setGoodlist] = useState(['a']) + return s; + }, [goodList]) - //点击加 - 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} + {obj?.code}# {obj?.name} + 已选 1 种面料,{selectTotal} 个颜色,共 {selectNums} {showModefont} 布料类型 @@ -78,26 +107,30 @@ export default memo(forwardRef((props: prosObj, ref) => { } - 颜色分类(33) + + 颜色分类({goodList?.length}) + {modeFont == 0 ? '大货' : modeFont == 1 ? '剪版' : '散剪'}单位:{showModefont} + { goodList.map((item, index) => { return ( - oninputEvent(e, obj)} clickAdd={(item) => addNums(item)} > + handPlus?.(item)} key={index} value={item} onInputEven={(e, obj) => oninputEvent?.(e, obj)} clickAdd={(item) => addNums?.(item)} clickReduce={(item) => { reduceNums?.(item) }}> ) }) } + - + + 0 && clientName !== '' ? false : true} handSure={() => { handSure() }}> + diff --git a/src/pages/customerPage/index.config.ts b/src/pages/customerPage/index.config.ts new file mode 100644 index 0000000..3e472f1 --- /dev/null +++ b/src/pages/customerPage/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '选择客户', +} diff --git a/src/pages/customerPage/index.module.scss b/src/pages/customerPage/index.module.scss new file mode 100644 index 0000000..bf15794 --- /dev/null +++ b/src/pages/customerPage/index.module.scss @@ -0,0 +1,106 @@ +page { + background: #f7f7f7; +} + +.cussBox { + + .searchBox { + position: sticky; + top: 0; + width: 750px; + height: 96px; + background: #FFFFFF; + display: flex; + align-items: center; + + .two { + width: 702px; + height: 72px; + margin-left: 24px; + } + } + + .itemBox { + margin-left: 24px; + width: 702px; + height: 104px; + background: #FFFFFF; + border-radius: 16px; + display: flex; + align-items: center; + margin-top: 24px; + box-sizing: border-box; + + .cussName { + margin-left: 48px; + width: 168px; + height: 34px; + font-size: 28px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #000000; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .phone { + margin-left: 88px; + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + + .woker { + margin-left: 88px; + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + } + + .acticveitemBox { + margin-left: 24px; + width: 702px; + height: 104px; + background: #FFFFFF; + border-radius: 16px; + display: flex; + align-items: center; + margin-top: 24px; + box-sizing: border-box; + + border: 1px solid #337FFF; + + .cussName { + margin-left: 48px; + width: 168px; + height: 34px; + font-size: 28px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #000000; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .phone { + margin-left: 88px; + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + + .woker { + margin-left: 88px; + font-size: 28px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: #000000; + } + } +} \ No newline at end of file diff --git a/src/pages/customerPage/index.tsx b/src/pages/customerPage/index.tsx new file mode 100644 index 0000000..9d3a612 --- /dev/null +++ b/src/pages/customerPage/index.tsx @@ -0,0 +1,112 @@ +import { View, ScrollView, Image, Input, Button } from '@tarojs/components' +import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react' +import styles from "./index.module.scss" +import classnames from "classnames"; +import Search from '@/components/search' +import { ClientListApi } from '@/api/order' +import { useDidShow } from '@tarojs/taro'; +import Taro from '@tarojs/taro' +import { useRouter } from '@tarojs/taro' + +export default () => { + + const [search, setSearch] = useState({ + name: null + }) + const [clentList, setClientlist] = useState([]) + + + const [clientObj, setclientObj] = useState({}) + + //输入了搜索关键字 + const getSearchData = useCallback((eq) => { + + setSearch({ name: eq }) + + }, []) + + + const router = useRouter() + // useDidShow(() => { + // if (router?.params.clientId) { + // clentList.map(item => { + // if (item.id == router?.params.clientId) { + // item.checked = true + // }else{ + + // } + // }) + // } + // }) + + useEffect(() => { + setSearch(search) + if (search.name !== '') getCuss() + }, [search]) + + + const { fetchData: clitentFetch } = ClientListApi() + const getCuss = async () => { + let res = await clitentFetch({ name: search.name === null ? '' : search.name }) + if (router?.params.clientId) { + res.data.list.map(item => { + if (item.id == router?.params.clientId) { + item.checked = true + } else { + item.checked = false + } + return item + }) + } + // res.data.list.map(item => { + // item.checked = false + // }) + setClientlist([...res.data.list]) + } + + //选择客户 + const selectClient = (item) => { + clentList.map(it => { + if (item.id === it.id) { + it.checked = true + } else { + it.checked = false + } + return it + }) + let pages = Taro.getCurrentPages(); // 获取当前的页面栈 + let prevPage = pages[pages.length - 2]; + prevPage.setData({ //设置上一个页面的值 + clientId: item.id, + clientName: item.name + }); + setClientlist([...clentList]) + setclientObj(item) + Taro.navigateBack({ + delta: 1 + }) + } + + return ( + + + + + + + + { + clentList.map((item, index) => { + return ( + { selectClient(item) }}> + {item.name} + {item.phone} + {item.sale_user_name} + + ) + }) + } + + + ) +} \ No newline at end of file diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 032906e..1f15f3b 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -9,9 +9,11 @@ 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 { mpproductcolorlist, mpsaleOrderpreView } from "@/api/order" import { dataLoadingStatus } from '@/common/util' -import Taro from '@tarojs/taro' +import Taro, { useDidShow } from '@tarojs/taro' +import goodsItem from '@/components/goodsItem' +import { WX_APPID } from '@/common/constant' export default () => { useEffect(() => { @@ -77,7 +79,9 @@ export default () => { const [search, setSearchObj] = useState({ modeId: 0, - goodsId: null + goodsId: null, + code_or_name: '', + physical_warehouse: 1 }) //选择的类型 @@ -100,23 +104,33 @@ export default () => { const { fetchData: colorlistFetch } = mpproductcolorlist() const ShopCartRef = useRef(null) - + const [goodObj, setGoodsobj] = useState({}) //点击对应商品显示购物车 const showCart = async (item) => { console.log(item, 6666) setSearchObj((e) => ({ ...e, goodsId: item.id })) setShowShopCart(true) - + setGoodsobj(item) } const getGoodList = async () => { - const res = await colorlistFetch({ product_id: search.goodsId, sale_mode: search.modeId }) + const res = await colorlistFetch({ product_id: search.goodsId, sale_mode: search.modeId, code_or_name: search.code_or_name, physical_warehouse: 1 }) + res.data.list.map((item) => { + item.showInput = false + if (search.modeId !== 2) { + item.nums = 1 + item.buyNums = 1 + } else { + item.nums = 3 + item.buyNums = 3 + } + return item + }) setGoodlist([...res.data.list]) } //监听选择的类型 useEffect(() => { setSearchObj(search) - console.log(search, 'searchsearch') if (search.goodsId) getGoodList() }, [search]) @@ -129,6 +143,136 @@ export default () => { return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading }) }, [productData, productState.loading]) + //点击加展示输入框 + const handAdd = useCallback((item) => { + goodList.map((it) => { + if (item.id === it.id) { + it.showInput = true + } + return item + }) + setGoodlist([...goodList]) + }, [goodList]) + //点击减 + const reduceNums = useCallback((item) => { + goodList.map((it) => { + if (item.id === it.id) { + item.nums-- + if (search.modeId !== 2) { + if (item.nums < 1) it.showInput = false, it.nums = 1 + } else { + if (item.nums < 3) it.showInput = false, it.nums = 3 + } + + } + return item + }) + setGoodlist([...goodList]) + }, [goodList]) + + //点击输入框的加 + const handPlus = useCallback((item) => { + goodList.map((it) => { + if (item.id === it.id) { + // if (it.nums > item.buyNums) { + it.nums++ + // } + } + return item + }) + setGoodlist([...goodList]) + }, [goodList]) + //加减输入框 + const oninputEvent = useCallback((e, item) => { + goodList.map((it) => { + if (item.id === it.id) { + if (search.modeId !== 2) { + if (Number(e.detail.value) < item.nums || e.detail.value === '') { + it.nums = 1 + } else { + it.nums = Number(e.detail.value) + } + + } else { + if (Number(e.detail.value) < item.nums || e.detail.value === '') { + it.nums = 3 + } else { + it.nums = Number(e.detail.value) + } + } + + } + return item + }) + setGoodlist([...goodList]) + }, [goodList]) + + + //输入了搜索关键字 + const getSearchData = useCallback((eq) => { + setSearchObj((e) => ({ ...e, code_or_name: eq })) + }, []) + + const [clientObj, setclientObj] = useState({ + clientId: -1, + clientName: '' + }) + useDidShow(() => { + + //获取选择的客户 + let pages = Taro.getCurrentPages(); + let currPage = pages[pages.length - 1]; // 获取当前页面 + setclientObj({ + clientId: currPage.data?.clientId, + clientName: currPage.data?.clientName, + }) + }) + + //加入购物车 + const { fetchData: preViewFetch, } = mpsaleOrderpreView() + const handSure = async () => { + const arr = goodList.filter(item => { + return item.showInput + }) + const list: any[] = [] + arr.forEach(it => { + list.push({ + shopping_cart_product_color_id: Number(it.id), + sale_price: 0 + }) + }) + const query = { + purchaser_id: clientObj.clientId, + sale_mode: search.modeId, + shopping_cart_product_color_list: list + } + let res = await preViewFetch(query) + Taro.showLoading({ + mask: true, + title: '请稍等...' + }) + if (res.data) { + Taro.showToast({ + title: "加入成功", + duration: 2000, + }); + setShowShopCart(false) + goodList.map(item => { + item.showInput = false + return item + }) + setGoodlist([...goodList]) + setSearchObj((e) => ({ ...e, goodsId: null })) + console.log(search, '000000.0.0.') + Taro.hideLoading() + } else { + Taro.hideLoading() + Taro.showToast({ + title: res.msg, + duration: 2000, + }); + } + } return ( // setShowShopCart(showShopCart)}> @@ -156,7 +300,7 @@ export default () => { - { handCheckMode(item) }} closePopup={() => closePoup()} goodList={goodList} typeList={typeList}> + handSure()} clientName={clientObj?.clientName} clientId={clientObj?.clientId} modeFont={search.modeId} handPlus={(item) => handPlus(item)} obj={goodObj} ref={ShopCartRef} getSearchData={(e) => { getSearchData(e) }} oninputEvent={(e, item) => { oninputEvent(e, item) }} reduceNums={(item) => { reduceNums(item) }} addNums={(item) => { handAdd(item) }} showPopup={showShopCart} handCheck={(item) => { handCheckMode(item) }} closePopup={() => closePoup()} goodList={goodList} typeList={typeList}> // )