xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🦄 refactor:首页加入购物车

Browse Source
This commit is contained in:
Haiyi 2022-09-05 18:09:35 +08:00
parent f75de04f83
commit 1bf5d3f69e
13 changed files with 612 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
project.private.config.json
View File

@ -28,6 +28,13 @@
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/customerPage/index",
"query": "",
"launchMode": "default",
"scene": null
}
]
}

7
src/api/order.ts
View File

@ -34,3 +34,10 @@ export const mpproductcolorlist = () => {
method: "get"
})
}
//加入购物车
export const mpsaleOrderpreView = () => {
return useRequest({
url: `/v1/mp/saleOrder/preView`,
method: "put"
})
}

2
src/app.config.ts
View File

@ -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',

60
src/components/BottomCustomer/index.module.scss Normal file
View File

@ -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;
}
}

36
src/components/BottomCustomer/index.tsx Normal file
View File

@ -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 (
<View className={styles.bottomBox}>
<View className={styles.leftBottom} onClick={() => { navTo() }}>
<View className={styles.nowFont}>当前客户：</View>
<View className={styles.selctFont}>{clientName === '' ? '请选择客户 >' : clientName}</View>
</View>
<Button className={classnames(isDisabled ? styles.activeButton : styles.button)} disabled={isDisabled} onClick={() => { handSure?.() }}> 加入购物车</Button >
</View >
)
})

2
src/components/goodsItem/index.module.scss
View File

@ -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 {

44
src/components/goodsItem/index.tsx
View File

@ -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 (
<View className={styles.goodsBox}>
<Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
{
props.value?.rgb?.r == 0 && props.value?.rgb?.g == 0 && props.value?.rgb?.b == 0 && <Image className={styles.pic} mode={'aspectFill'} src={'https://test.cdn.zzfzyc.com/mall/no_img.png'}></Image>
}
{
(props.value?.rgb?.r != 0 || props.value?.rgb?.g != 0 || props.value?.rgb?.b != 0) &&
<View className={styles.pic} style={{ backgroundColor: `rgb(${props.value.rgb?.r} ${props.value.rgb?.g} ${props.value.rgb?.b})` }}></View>
}
<View className={styles.rightGoodbox}>
<View className={styles.leftFontsbox}>
<View className={styles.title}>001# 环保黑</View>
<View className={styles.productName}>0681# 26S全棉平纹</View>
<View className={styles.productNums}>剩:109件</View>
<View className={styles.title}>{props.value.code} {props.value.name}环保黑</View>
{/* <View className={styles.productName}>0681# 26S全棉平纹</View> */}
<View className={styles.productNums}>剩:{props.value?.roll}件</View>
</View>
<View className={styles.rightFontsbox}>
<View className={styles.money}>¥37.50/kg</View>
<View className={styles.money}>¥{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'}</View>
{
props.value.showInput && <View className={styles.inputBox}>
<View className={styles.reduceBox}>
<View className={styles.reduceBox} onClick={() => { props.clickReduce?.(props.value) }}>
<View className={styles.reduce}>
</View>
</View>
<View className={styles.numsBox}>
<Input type='number' value={props.value.nums} onInput={($event) => props.onInputEven($event, props)}></Input>
<Input type={type as any} value={props.value.nums} onInput={($event) => props.onInputEven($event, props.value)}></Input>
</View>
<View className={styles.addBox}>
<View className={styles.addBox} onClick={() => { props.handPlus?.(props.value) }}>
+
</View>
</View>
}
{
!props.value.showInput && <View className={styles.addtine} onClick={() => props.clickAdd(props.value)}>+</View>
!props.value.showInput && <View className={styles.addtine} onClick={() => props.clickAdd?.(props.value)}>+</View>
}
</View>
</View>

42
src/components/shoppingCart/index.module.scss
View File

@ -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;
}
}

79
src/components/shoppingCart/index.tsx
View File

@ -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<any[]>(['a'])
return s;
}, [goodList])
//点击加
const addNums = (item) => {
console.log(item, 4444)
}
//输入框监听
const oninputEvent = useCallback((e, obj) => {
console.log(e, obj, '123123')
}, [])
return (
<Popup showTitle={false} show={showPopup} onClose={() => closePopup?.()}>
<View className={styles.shopcartBox}>
<View className={styles.topTitle}>0681# 26S全棉平纹</View>
<View className={styles.selectFont}>已选 1 种面料，1 个颜色，共 4 {showModefont}</View>
<View className={styles.topTitle}>{obj?.code}# {obj?.name}</View>
<View className={styles.selectFont}>已选 1 种面料，{selectTotal} 个颜色，共 {selectNums} {showModefont}</View>
<View className={styles.line}></View>
<View className={styles.typeFont}>布料类型</View>
<View className={styles.flexType}>
@ -78,26 +107,30 @@ export default memo(forwardRef((props: prosObj, ref) => {
}
</View>
<View className={styles.line}></View>
<View className={styles.kingFont}>颜色分类(33)</View>
<View className={styles.flexFonts}>
<View className={styles.kingFont}>颜色分类({goodList?.length})</View>
<View className={styles.danwei}>{modeFont == 0 ? '大货' : modeFont == 1 ? '剪版' : '散剪'}单位：{showModefont}</View>
</View>
<View className={styles.searchBox}>
<Search placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
</View>
<ScrollView
className={styles.scrollview}
scroll-y={true}
showScrollbar={false}
enhanced={true}
>
{
goodList.map((item, index) => {
return (
<Goods key={index} value={item} onInputEven={(e, obj) => oninputEvent(e, obj)} clickAdd={(item) => addNums(item)} ></Goods>
<Goods modeFont={(modeFont as number)} handPlus={(item) => handPlus?.(item)} key={index} value={item} onInputEven={(e, obj) => oninputEvent?.(e, obj)} clickAdd={(item) => addNums?.(item)} clickReduce={(item) => { reduceNums?.(item) }}></Goods>
)
})
}
<View className={styles.kongBox}></View>
</ScrollView>
<View className={styles.posBox}>
<BottomCustomer clientName={clientName} clientId={clientId} isDisabled={selectTotal > 0 && clientName !== '' ? false : true} handSure={() => { handSure() }}></BottomCustomer>
</View>
</View>
</Popup>

3
src/pages/customerPage/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '选择客户',
}

106
src/pages/customerPage/index.module.scss Normal file
View File

@ -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;
}
}
}

112
src/pages/customerPage/index.tsx Normal file
View File

@ -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<any[]>([])
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 (
<View className={styles.cussBox}>
<View className={styles.searchBox}>
<View className={styles.two}>
<Search placeholder='请输入客户名称或手机号码' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
</View>
</View>
{
clentList.map((item, index) => {
return (
<View className={classnames(item.checked ? styles.acticveitemBox : styles.itemBox)} key={index} onClick={() => { selectClient(item) }}>
<View className={styles.cussName}>{item.name}</View>
<View className={styles.phone}>{item.phone}</View>
<View className={styles.woker}>{item.sale_user_name}</View>
</View>
)
})
}
</View>
)
}

160
src/pages/index/index.tsx
View File

@ -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<any>(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 (
// <MoveBtn onClick={() => setShowShopCart(showShopCart)}>
<View className={styles.main}>
@ -156,7 +300,7 @@ export default () => {
</SideBar>
</View>
<View className='common_safe_area_y'></View>
<ShopCart ref={ShopCartRef} showPopup={showShopCart} handCheck={(item) => { handCheckMode(item) }} closePopup={() => closePoup()} goodList={goodList} typeList={typeList}></ShopCart>
<ShopCart handSure={() => 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}></ShopCart>
</View>
// </MoveBtn>
)