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
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/customerPage/index.config.ts
+3
View File
@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '选择客户',
}
src/pages/customerPage/index.module.scss
+106
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;
}
}
}
src/pages/customerPage/index.tsx
+112
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>
)
}
src/pages/index/index.tsx
+152 -8
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>
)