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

🦄 refactor:搜索历史加入购物车100%

Browse Source
This commit is contained in:
Haiyi 2022-09-16 18:08:04 +08:00
parent 7ddb3bf784
commit 9342906c67
16 changed files with 1065 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
project.private.config.json
View File

@ -77,6 +77,13 @@
"query": "id=27651",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/submitOrder/index",
"query": "",
"launchMode": "default",
"scene": null
}
]
}

7
src/api/addressList.ts
View File

@ -38,4 +38,11 @@ export const mppurchaseraddressput = () => {
url: `/v1/mp/purchaser/address`,
method: "put",
})
}
//删除收货地址信息
export const mppurchaseraddressdelect = () => {
return useRequest({
url: `/v1/mp/purchaser/address`,
method: "delete",
})
}

16
src/api/order.ts
View File

@ -122,4 +122,18 @@ export const mpsaleOrderaddress = () => {
url: `/v1/mp/saleOrder/address`,
method: "put",
})
}
}
//关键字搜索历史
export const mpsearchHistorylist = () => {
return useRequest({
url: `/v1/mp/searchHistory/list`,
method: "get",
})
}
//添加关键字搜索
export const mpsearchHistory = () => {
return useRequest({
url: `/v1/mp/searchHistory`,
method: "post",
})
}

6
src/app.config.ts
View File

@ -88,5 +88,11 @@ export default defineAppConfig({
"index"
]
},
{
root: "pages/submitOrder",
pages: [
"index"
]
},
],
})

63
src/components/AddressList/index.tsx
View File

@ -58,52 +58,37 @@ const AddressList = memo((props: Params) => {
// 列表选择
const { fetchData: selectFetch } = mpsaleOrderaddress()
const handleSelect = async (item: any, index: number) => {
Taro.showLoading({
title: '请稍等...',
mask: true
})
const res = await selectFetch({ address_id: item.id, id: Number(router.params.orderId), shipment_mode: 2 })
if (res.msg === 'success') {
Taro.hideLoading()
Taro.showToast({
title: '成功',
icon: 'success'
})
Taro.navigateBack({
delta: 1
})
} else {
Taro.hideLoading()
Taro.showToast({
title: res.msg,
icon: 'error'
if (router.params.orderId) {
Taro.showLoading({
title: '请稍等...',
mask: true
})
const res = await selectFetch({ address_id: item.id, id: Number(router.params.orderId), shipment_mode: 2 })
if (res.msg === 'success') {
Taro.hideLoading()
Taro.showToast({
title: '成功',
icon: 'success'
})
Taro.navigateBack({
delta: 1
})
} else {
Taro.hideLoading()
Taro.showToast({
title: res.msg,
icon: 'error'
})
}
}
props.onSelect && props.onSelect(item, index);
if (focusBorderEnabled) {
setFocusId(item?.id);
}
}
// 删除地址
// const { fetchData: deleteFetch } = addressDeleteApi()
// const handleDelete = (item: any) => {
// showModal(({
// title: "提示",
// content: "是否删除地址？",
// async success(ev) {
// if (ev.confirm) {
// const result = await deleteFetch({ id: item.id });
// if (result.success) {
// alert.success("删除成功");
// getData();
// } else {
// alert.success(result.msg);
// }
// }
// }
// }))
// }
return (
<View className="address-scroll-view">
<ScrollView scrollY refresherEnabled={props.refresherEnabled} enhanced refresherTriggered={refreshState} onRefresherRefresh={handleRefresh}>
@ -114,7 +99,7 @@ const AddressList = memo((props: Params) => {
// data.length>0?
// data.map((item,index)=>{
return (
<View onLongPress={() => handleDelete(item)} onClick={() => handleSelect(item, index)} className={`address-list ${focusId == item.id && 'address-active'}`}>
<View onClick={() => handleSelect(item, index)} className={`address-list ${focusId == item.id && 'address-active'}`}>
<View className="address-user">
{item.name}
{

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

@ -20,7 +20,10 @@ interface props {
name?: string,
roll?: number | string,
buyNums?: number | string,
}
id?: number
},
goodList?: any[],
onBlur?: (a: any, c: any) => void
}
@ -28,7 +31,6 @@ export default memo((props: props) => {
const [value, setValue] = useState<any>({ count: props.value.nums })
const onInputEven = (e) => {
let res = e.detail.value
if (props.modeFont !== 2) {
if (Number(res) == 0 || Number(res) < 1) {
@ -59,7 +61,7 @@ export default memo((props: props) => {
}
<View className={styles.rightGoodbox}>
<View className={styles.leftFontsbox}>
<View className={styles.title}>{props.value?.code} {props.value?.name}环保黑</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>
@ -72,7 +74,7 @@ export default memo((props: props) => {
</View>
</View>
<View className={styles.numsBox}>
<Input type={type as any} value={value.count} onInput={onInputEven}></Input>
<Input type={type as any} value={value.count} onInput={onInputEven} onBlur={(e) => props.onBlur?.(e, props.value.id)}></Input>
{/* <Input type={type as any} value={value.count} onInput={($event) => onInputEven($event, props.value)}></Input> */}
</View>
@ -88,4 +90,5 @@ export default memo((props: props) => {
</View>
</View>
)
})
})
// ($event) => onInputEven($event, props.value)

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

@ -138,4 +138,11 @@
z-index: 999;
bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
}
.noBottom {
width: 100%;
position: fixed;
z-index: 999;
bottom: env(safe-area-inset-bottom);
}
}

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

@ -8,7 +8,6 @@ import Goods from "@/components/goodsItem"
import BottomCustomer from "@/components/BottomCustomer"
import VirtualList from '@tarojs/components/virtual-list'
import DotLoading from "@/components/dotLoading"
interface prosObj {
showPopup?: false | true,
closePopup?: () => void,
@ -17,7 +16,7 @@ interface prosObj {
handCheck?: (any) => void,
addNums?: (any) => void
reduceNums?: (any) => void
oninputEvent?: (e: string, res: object) => void,
// oninputEvent?: (e: string, res: object) => void,
getSearchData: (any) => void,
handPlus: (any) => void,
handSure: () => void,
@ -28,7 +27,9 @@ interface prosObj {
},
modeFont: Number | string,
clientName: string,
clientId: Number
clientId: Number,
hasBottom?: true | false, //默认不占位底部
onBlur?: (e: string, res: object) => void
}
export default memo(forwardRef((props: prosObj, ref) => {
const {
@ -39,14 +40,16 @@ export default memo(forwardRef((props: prosObj, ref) => {
handCheck,
addNums,
reduceNums,
oninputEvent,
// oninputEvent,
getSearchData,
handPlus,
obj = {},
modeFont = 0,
clientName = '',
clientId = -1,
handSure
handSure,
hasBottom = true,
onBlur
} = props
useImperativeHandle(ref, () => ({
@ -78,26 +81,39 @@ export default memo(forwardRef((props: prosObj, ref) => {
//选择的条数或者米数
const selectNums = useMemo(() => {
var s = 0;
goodList.forEach(function (val, idx, arr) {
if (val.showInput) {
s += val.nums;
let arr: any = []
goodList.forEach(item => {
if (item.showInput) {
arr.push(Number(item.nums))
}
}, 0);
return s;
})
let hate = sum(arr)
return hate
}, [goodList])
// onInputEven={(e, obj) => oninputEvent?.(e, obj)}
// onInputEven={(e, item) => oninputEvent?.(e, item)}
function sum(arr) {
var s = 0;
for (var i = arr.length - 1; i >= 0; i--) {
s += arr[i];
}
return s;
}
const rows = memo(({ id, index, style, data }: any) => {
let item = data[index]
return (
<>
<Goods modeFont={(modeFont as number)}
<Goods
onBlur={(e, id) => onBlur?.(e, id)}
modeFont={(modeFont as number)}
handPlus={(item) => handPlus?.(item)}
value={item || {}}
clickAdd={(item) => addNums?.(item)}
clickReduce={(item) => { reduceNums?.(item) }}></Goods>
clickReduce={(item) => { reduceNums?.(item) }}
goodList={goodList}
></Goods>
</>
)
})
@ -151,7 +167,10 @@ export default memo(forwardRef((props: prosObj, ref) => {
<View className={styles.loading_more}>加载中<DotLoading /></View>
</>
}
<View className={styles.posBox}>
{
!hasBottom && <View style={{ height: '100rpx' }}></View>
}
<View className={classnames(hasBottom === true ? styles.posBox : styles.noBottom)}>
<BottomCustomer clientName={clientName} clientId={clientId} isDisabled={selectTotal > 0 && clientName !== '' ? false : true} handSure={() => { handSure() }}></BottomCustomer>
</View>
</View>

35
src/pages/addAddress/index.tsx
View File

@ -1,15 +1,13 @@
import { alert, retrieval } from "@/common/common"
import { alert } from "@/common/common"
import Address from "@/components/address"
import FromList from "@/components/FromList"
import { Button, Input, Text, Textarea, View, Switch } from "@tarojs/components"
import Taro, { setNavigationBarTitle, useDidShow, useRouter, showToast } from "@tarojs/taro"
import Taro, { setNavigationBarTitle, useDidShow, useRouter } from "@tarojs/taro"
import { useEffect, useMemo, useState } from "react"
import styles from "./index.module.scss"
import classnames from "classnames";
import { mppurchaseraddress, mppurchaseraddressget, mppurchaseraddressput } from '@/api/addressList'
import { mppurchaseraddress, mppurchaseraddressget, mppurchaseraddressput, mppurchaseraddressdelect } from '@/api/addressList'
import { getFilterData } from '@/common/util'
import search from "@/components/search"
export default () => {
const [itemList, setItemList] = useState<any[]>(
@ -234,6 +232,31 @@ export default () => {
})
}
}
// 删除地址
const { fetchData: deleteFetch } = mppurchaseraddressdelect()
const handleDelete = async () => {
Taro.showModal(({
title: "提示",
content: "是否删除地址？",
async success(ev) {
if (ev.confirm) {
Taro.showLoading({
title: '请稍等...'
})
const result = await deleteFetch({ id: Number(router.params.purchaser_id) });
if (result.success) {
alert.success("删除成功");
Taro.hideLoading()
Taro.navigateBack({
delta: 1
})
} else {
alert.error(result.msg);
}
}
}
}))
}
return (
<>
<View className={styles.main}>
@ -278,7 +301,7 @@ export default () => {
{
router.params.type === 'edit' &&
<View className={styles.bottomBox}>
<Button className={styles.delectBox} >删除</Button>
<Button className={styles.delectBox} onClick={() => handleDelete()}>删除</Button>
<Button onClick={() => handEdit()} disabled={btnDisabled} className={classnames(btnDisabled ? styles.nobtn : styles.sureBox)} >确认</Button>
</View>
}

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

@ -9,12 +9,10 @@ import styles from './index.module.scss'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { kindListApi, ProductListApi } from '@/api/index'
// import useLogin from '@/use/useLogin'
import { mpproductcolorlist, mpsaleOrderpreView } from "@/api/order"
import { mpproductcolorlist, mpshoppingCartproductColorlist } from "@/api/order"
import { dataLoadingStatus } from '@/common/util'
import Taro, { useDidShow } from '@tarojs/taro'
import goodsItem from '@/components/goodsItem'
import { WX_APPID } from '@/common/constant'
import { debounce } from "@/common/util";
import { getFilterData } from '@/common/util'
export default () => {
useEffect(() => {
categoryList()
@ -205,7 +203,7 @@ export default () => {
})
//加入购物车
const { fetchData: preViewFetch, } = mpsaleOrderpreView()
const { fetchData: preViewFetch, } = mpshoppingCartproductColorlist()
const handSure = async () => {
const arr = goodList.filter(item => {
return item.showInput
@ -213,16 +211,18 @@ export default () => {
const list: any[] = []
arr.forEach(it => {
list.push({
shopping_cart_product_color_id: Number(it.id),
sale_price: 0
roll: search.modeId === 0 ? it.nums : 0,
length: search.modeId !== 0 ? it.nums * 100 : 0,
product_color_id: Number(it.id)
})
})
const query = {
purchaser_id: clientObj.clientId,
sale_mode: search.modeId,
shopping_cart_product_color_list: list
color_list: list,
sale_offect: 0
}
let res = await preViewFetch(query)
let res = await preViewFetch(getFilterData(query))
Taro.showLoading({
mask: true,
title: '请稍等...'
@ -248,6 +248,17 @@ export default () => {
});
}
}
//输入框失焦
const onBlur = (e, id) => {
goodList.map((item) => {
if (item.id == id) {
item.nums = e.detail.value
}
return item
})
setGoodlist([...goodList])
}
return (
// <MoveBtn onClick={() => setShowShopCart(showShopCart)}>
<View className={styles.main}>
@ -283,7 +294,7 @@ export default () => {
obj={goodObj}
ref={ShopCartRef}
getSearchData={(e) => { getSearchData(e) }}
onBlur={(e, id) => onBlur(e, id)}
reduceNums={(item) => { reduceNums(item) }}
addNums={(item) => { handAdd(item) }}
showPopup={showShopCart}

30
src/pages/orderDetails/index.tsx
View File

@ -21,7 +21,8 @@ import {
orderPaymentorderPaymentSubmission,
orderPaymentpreCollectOrderorderPaymentSubmission,
mpsaleOrdercancel,
GetPayCode
GetPayCode,
mpsaleOrderaddress
} from '@/api/order'
import { alert, goLink } from '@/common/common'
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
@ -44,13 +45,36 @@ export default () => {
//收货方法,1:自提，2物流
const [receivingStatus, setReceivingStatus] = useState(null)
//切换自提或者物流
const onReceivingStatus = debounce((e, value) => {
const { fetchData: selectFetch } = mpsaleOrderaddress()
const onReceivingStatus = debounce(async (e, value) => {
if (infoObj.status === 8 || infoObj.status === 9 || infoObj.status === 4 || infoObj.status === 5) {
alert.error('不允许更改')
return false
}
e.stopPropagation()
setReceivingStatus(value)
if (receivingStatus === value) {
alert.error('不能选择相同的方式')
return false
}
Taro.showLoading({
title: '请稍等...',
mask: true
})
const res = await selectFetch({ id: Number(infoObj.id), shipment_mode: value })
if (res.msg === 'success') {
Taro.hideLoading()
Taro.showToast({
title: '成功',
icon: 'success'
})
setReceivingStatus(value)
} else {
Taro.hideLoading()
Taro.showToast({
title: res.msg,
icon: 'error'
})
}
}, 300)
const { fetchData: infoFetch } = mpsaleOrder()

4
src/pages/searchPage/components/goods/index.tsx
View File

@ -2,6 +2,8 @@ import { View, Image } from '@tarojs/components'
import React, { useCallback, memo, useEffect, useMemo, useRef, useState } from 'react'
import styles from "../goods/index.module.scss"
import LabAndImg from "@/components/LabAndImg"
export default memo((props: any) => {
@ -9,7 +11,7 @@ export default memo((props: any) => {
return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
}, [])
return (
<View className={styles.itemBox}>
<View className={styles.itemBox} onClick={() => props?.clickItem?.()}>
{
props.data?.texture_url === '' && <>

279
src/pages/searchPage/index.tsx
View File

@ -4,18 +4,223 @@ import Search from '@/components/search'
import styles from "./index.module.scss"
import classnames from "classnames";
import Empty from './components/empty'
import Taro from '@tarojs/taro';
import Taro, { useDidShow } from '@tarojs/taro';
import Goods from './components/goods'
import { mpproductlist } from "@/api/search"
import { debounce } from "@/common/util";
import ShopCart from '@/components/shoppingCart'
import {
mpproductcolorlist,
mpshoppingCartproductColorlist,
mpsearchHistorylist,
mpsearchHistory
} from "@/api/order"
import { getFilterData } from '@/common/util'
export default memo(() => {
//获取数据
const [histroyList, setHistroyList] = useState<any[]>(['a','b'])
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 [typeList, setTypeList] = useState<any[]>([{ id: 0, name: '大货', checked: true }, { id: 1, name: '剪版', checked: false }, { id: 2, name: '散剪', checked: false }])
const [goodList, setGoodlist] = useState<any[]>([])
const [search, setSearchObj] = useState({
modeId: 0,
goodsId: null,
code_or_name: '',
physical_warehouse: 1
})
const [showShopCart, setShowShopCart] = useState(false)
//监听选择的类型
useEffect(() => {
setSearchObj(search)
if (search.goodsId) getGoodList()
}, [search])
//获取商品
const { fetchData: colorlistFetch } = mpproductcolorlist()
const getGoodList = async () => {
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])
}
//加入购物车
const { fetchData: preViewFetch, } = mpshoppingCartproductColorlist()
const handSure = async () => {
const arr = goodList.filter(item => {
return item.showInput
})
const list: any[] = []
arr.forEach(it => {
list.push({
roll: search.modeId === 0 ? it.nums : 0,
length: search.modeId !== 0 ? it.nums * 100 : 0,
product_color_id: Number(it.id)
})
})
const query = {
purchaser_id: clientObj.clientId,
sale_mode: search.modeId,
color_list: list,
sale_offect: 0
}
let res = await preViewFetch(getFilterData(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])
console.log(search, '000000.0.0.')
Taro.hideLoading()
} else {
Taro.hideLoading()
Taro.showToast({
title: res.msg,
duration: 2000,
});
}
}
//点击输入框的加
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 getSearchDataInput = useCallback((eq) => {
setSearchObj((e) => ({ ...e, code_or_name: eq }))
}, [])
const [goodObj, setGoodsobj] = useState({})
//点击对应商品显示购物车
const showCart = async (item) => {
console.log(item, 6666)
setSearchObj((e) => ({ ...e, goodsId: item.id }))
setShowShopCart(true)
setGoodsobj(item)
}
//点击加展示输入框
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 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])
setGoodlist([])
}
//关闭弹窗
const closePoup = () => {
setShowShopCart(false)
}
//获取关键字数据
const [histroyList, setHistroyList] = useState<any[]>([])
const { fetchData: historyFetch } = mpsearchHistorylist()
const getHistory = async () => {
Taro.showLoading({
title: '加载中...',
mask: true
})
const res = await historyFetch()
if (res.data) {
setHistroyList([...res.data.list])
Taro.hideLoading()
}
}
//搜索商品的数组
const [searchList, setSearchList] = useState<any[]>(['a'])
const [searchList, setSearchList] = useState<any[]>([])
//是否有值输入框
const [hasFonts, setHasFonts] = useState(false)
useEffect(() => {
getHistory()
}, [])
//输入了搜索关键字
const getSearchData = useCallback((e) => {
if (e) {
@ -25,21 +230,27 @@ export default memo(() => {
setHasFonts(false)
setSearchList([])
}
// pageNum.current.page = 1
// setOrderData(() => ({ list: [], total: 0 }))
// setSearchField((val) => ({ ...val, name: e, size: 10 }))
}, [])
//搜索获取商品数据
const { fetchData: productFetch } = mpproductlist()
const getProduct = async (e) => {
const res = await productFetch({ code_or_name: e })
// res.data.list.map(item=>{
// if(item.texture_url !==''){
// }
// })
setSearchList([...res.data.list])
}
const { fetchData: historyputFetch } = mpsearchHistory()
const getProduct = debounce(async (e) => {
Taro.showLoading({
title: '加载中...',
mask: true
})
await historyputFetch({ key: e, scene: 0 }).then((res) => {
if (res.data) {
getHistory()
}
})
productFetch({ code_or_name: e }).then((res) => {
if (res.data) {
Taro.hideLoading()
setSearchList([...res.data.list])
}
})
}, 300)
//返回
const back = () => {
Taro.navigateBack({
@ -47,6 +258,17 @@ export default memo(() => {
})
}
//输入框失焦
const onBlur = (e, id) => {
goodList.map((item) => {
if (item.id == id) {
item.nums = e.detail.value
}
return item
})
setGoodlist([...goodList])
}
return (
<View className={styles.main}>
<Search placeholder='请输入搜索布料' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} >
@ -63,7 +285,7 @@ export default memo(() => {
<View className={styles.bigBox}>
{histroyList.map((item, index) => {
return (
<View key={index} className={styles.itemBox}>{item}</View>
<View key={index} className={styles.itemBox}>{item.search_key}</View>
)
})}
</View>
@ -81,7 +303,7 @@ export default memo(() => {
{
!!searchList.length && searchList.map((item, index) => {
return (
<Goods key={index} data={item}></Goods>
<Goods clickItem={() => showCart(item)} key={index} data={item}></Goods>
)
})
}
@ -90,9 +312,26 @@ export default memo(() => {
}
</>
}
<ShopCart handSure={() => handSure()}
clientName={clientObj?.clientName}
clientId={clientObj?.clientId}
modeFont={search.modeId}
handPlus={(item) => handPlus(item)}
obj={goodObj}
getSearchData={(e) => { getSearchDataInput(e) }}
hasBottom={false}
reduceNums={(item) => { reduceNums(item) }}
addNums={(item) => { handAdd(item) }}
showPopup={showShopCart}
handCheck={(item) => { handCheckMode(item) }}
closePopup={() => closePoup()}
goodList={goodList}
typeList={typeList}
onBlur={(e, id) => onBlur(e, id)}
></ShopCart>
</View>
)
})
// oninputEvent={(e, item) => { onInputEven?.(e, item) }}

4
src/pages/submitOrder/index.config.ts Normal file
View File

@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '确认订单',
}

383
src/pages/submitOrder/index.module.scss Normal file
View File

@ -0,0 +1,383 @@
page {
background: #f7f7f7;
}
.mainBox {
.pussBox {
margin-top: 24px;
display: flex;
align-items: center;
.pussName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.pussPhone {
margin-left: 88px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.total {
margin-top: 44px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-left: 32px;
margin-bottom: 8px;
}
.productBox {
width: 702px;
background: #FFFFFF;
border-radius: 16px;
margin-left: 24px;
padding-bottom: 36px;
overflow: hidden;
.flexMoney {
display: flex;
margin-top: 32px;
align-items: center;
justify-content: space-between;
.flexTotalBox {
display: flex;
align-items: center;
.totalFont {
margin-left: 32px;
margin-right: 8px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.tishi {
font-size: 28px;
}
}
.shoudPay {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #F64861;
margin-right: 32px;
}
}
}
}
.defaltBox {
margin: 24px;
padding: 24px 32px 24px 24px;
background: #FFFFFF;
border-radius: 16px;
.titleBox {
width: 638px;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
.modeName {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #337FFF;
}
}
.modeLine {
margin-top: 24px;
width: 638px;
height: 1px;
background: #000000;
opacity: 0.1;
}
}
.goodsBox {
margin-top: 24px;
overflow: hidden;
border-bottom: 8px solid #F7F7F7;
.goodsProduct {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
margin-left: 32px;
}
.goodsLine {
width: 638px;
height: 1px;
background: #000000;
opacity: 0.1;
margin-left: 32px;
margin-top: 24px;
}
.itemGoods {
margin-top: 24px;
display: flex;
.itemPic {
margin-left: 32px;
margin-right: 42px;
width: 108px;
height: 108px;
background: #322F2F;
border-radius: 8px;
}
.itemRight {
padding-bottom: 24px;
width: 495px;
border-bottom: 1px solid #f7f7f7;
.item_right_top {
margin-bottom: 41px;
display: flex;
align-items: center;
justify-content: space-between;
.itemName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.itemNums {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.item_right_Bottom {
display: flex;
align-items: center;
justify-content: space-between;
.itemMoney {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.itemMoneyOne {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
}
}
}
.itemGoods:last-child {
margin-top: 24px;
display: flex;
.itemPic {
margin-left: 32px;
margin-right: 42px;
width: 108px;
height: 108px;
background: #322F2F;
border-radius: 8px;
}
.itemRight {
padding-bottom: 24px;
width: 495px;
border-bottom: none;
.item_right_top {
margin-bottom: 41px;
display: flex;
align-items: center;
justify-content: space-between;
.itemName {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.itemNums {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.item_right_Bottom {
display: flex;
align-items: center;
justify-content: space-between;
.itemMoney {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.itemMoneyOne {
font-size: 28px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
}
}
}
}
}
.goodsBox:last-child {
border-bottom: none;
}
.detailBox {
display: flex;
margin-top: 24px;
align-items: center;
justify-content: space-between;
.detailRightFlex {
display: flex;
align-items: center;
.detailRight {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.detailBtn {
margin-left: 16px;
width: 65px;
height: 32px;
border-radius: 8px;
border: 1PX solid #337FFF;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #337FFF;
text-align: center;
line-height: 32px;
}
}
.detailFont {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.remarkFont {
margin-top: 24px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
.safeBottom {
height: 300px;
}
.bottomBox {
width: 750px;
height: 160px;
background: #FFFFFF;
display: flex;
// padding-top: 16px;
position: fixed;
bottom: 0;
justify-content: space-between;
.leftBottom {
margin-top: 22px;
.topFlex {
margin-left: 48px;
display: flex;
align-items: center;
margin-bottom: 14px;
.topFont {
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
margin-right: 10px;
}
.topTotal {
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #F64861;
}
}
.bottomFlex {
margin-left: 48px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
}
}
.rightBottom {
margin-top: 16px;
width: 224px;
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;
margin-right: 24px;
}
}

230
src/pages/submitOrder/index.tsx Normal file
View File

@ -0,0 +1,230 @@
import { View } from '@tarojs/components'
import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
import AddressDetailBox from '../orderDetails/components/addressDetailBox'
import Remark from '../orderDetails/components//remark'
import Popup from '@/components/popup'
import { debounce } from '@/common/util'
import {
mpsaleOrder,
mpsaleOrderput,
mpsaleOrderaddress
} from '@/api/order'
import { alert } from '@/common/common'
import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
export default () => {
const router = useRouter()
useDidShow(() => {
getDetail()
})
//页面下拉刷新
usePullDownRefresh(() => {
getDetail()
})
//收货方法,1:自提，2物流
const [receivingStatus, setReceivingStatus] = useState(null)
//切换自提或者物流
const { fetchData: selectFetch } = mpsaleOrderaddress()
const onReceivingStatus = debounce(async (e, value) => {
if (infoObj.status === 8 || infoObj.status === 9 || infoObj.status === 4 || infoObj.status === 5) {
alert.error('不允许更改')
return false
}
e.stopPropagation()
if (receivingStatus === value) {
alert.error('不能选择相同的方式')
return false
}
Taro.showLoading({
title: '请稍等...',
mask: true
})
const res = await selectFetch({ id: Number(infoObj.id), shipment_mode: value })
if (res.msg === 'success') {
Taro.hideLoading()
Taro.showToast({
title: '成功',
icon: 'success'
})
setReceivingStatus(value)
} else {
Taro.hideLoading()
Taro.showToast({
title: res.msg,
icon: 'error'
})
}
}, 300)
const { fetchData: infoFetch } = mpsaleOrder()
const [infoObj, setInfoObj] = useState<any>({})
//获取订单详情
const getDetail = async () => {
const res = await infoFetch({ id: 27708 })
setInfoObj(res.data)
setReceivingStatus(res.data.shipment_mode)
}
//备注操作
const [showDesc, setShowDesc] = useState(false)
const { fetchData: remarkFetch } = mpsaleOrderput()
const getRemark = useCallback(async (e) => {
const res = await remarkFetch({ remark: e, id: Number(router.params.id) })
if (res.msg === 'success') {
Taro.showToast({
title: '成功',
icon: 'success'
})
setShowDesc(false)
getDetail()
}
}, [])
const handSelect = (obj) => {
Taro.navigateTo({
url: '/pages/addressManager/index?orderId=' + obj.id + '&purchaser_id=' + obj.purchaser_id
})
}
return (
<View className={styles.mainBox}>
<AddressDetailBox
navSelect={(obj) => handSelect(obj)}
obj={infoObj}
receivingStatus={receivingStatus}
onReceivingStatus={(e, value) => onReceivingStatus(e, value)}
></AddressDetailBox>
<DefaultBox
showMode={true}
title={'客户信息'}
modeName={infoObj.sale_mode_name}
>
<View className={styles.pussBox}>
<View className={styles.pussName}>{infoObj.purchaser_name}</View>
<View className={styles.pussPhone}>{infoObj.purchaser_phone}</View>
</View>
</DefaultBox>
<View className={styles.total}> {infoObj.total_fabrics} 种面料，{infoObj.total_colors} 个颜色，共 {infoObj.sale_mode === 0 ? infoObj.total_number : infoObj.total_number / 100} {infoObj.sale_mode === 0 ? '条' : 'm'}</View>
<View className={styles.productBox}>
<GoodsItem list={infoObj?.product_list} obj={infoObj}></GoodsItem>
<View className={styles.flexMoney}>
<View className={styles.flexTotalBox}>
<View className={styles.totalFont}>合计金额</View>
<View className={classnames('iconfont', 'icon-tishi', styles.tishi)}></View>
</View>
<View className={styles.shoudPay}>{formatPriceDiv(infoObj.total_should_collect_money)}</View>
</View>
</View>
<DefaultBox title={'备注信息'} showMode={true} modeName={`${'填写/修改备注'} >`} clickNode={() => setShowDesc(true)}>
<View className={styles.remarkFont}>{infoObj.remark === '' ? '暂无' : infoObj.remark}</View>
</DefaultBox>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={(e) => getRemark(e)} defaultValue={infoObj.remark} />
</Popup>
<View className={styles.safeBottom}></View>
<View className={styles.bottomBox}>
<View className={styles.leftBottom}>
<View className={styles.topFlex}>
<View className={styles.topFont}>预估金额:</View>
<View className={styles.topTotal}>¥3564.00</View>
</View>
<View className={styles.bottomFlex}>3 种面料，3 种颜色，共 3 M</View>
</View>
<View className={styles.rightBottom}>提交订单</View>
</View>
</View>
)
}
//卡片盒子元素
interface Obs {
title?: string,
modeName?: string,
showMode?: boolean,
children?: ReactNode,
clickNode?: () => void
}
const DefaultBox = memo((props: Obs) => {
const {
title = '标题',
modeName = '大货',
showMode = false,
children,
clickNode
} = props
return (
<View className={styles.defaltBox}>
<View className={styles.titleBox}>
<View className={styles.title}>{title}</View>
{
showMode && <View className={styles.modeName} onClick={() => clickNode?.()}>{modeName}</View>
}
</View>
<View className={styles.modeLine}></View>
{children}
</View>
)
})
//产品商品元素
interface PropGoods {
// item?: {
// code?: string | number
// }
list: any[],
obj: {
sale_mode?: number | string
},
}
const GoodsItem = memo((porps: PropGoods) => {
const { list = [], obj = {} } = porps
return (
<>
{
list.map((item, index) => {
return (
<View className={styles.goodsBox} key={index}>
<View className={styles.goodsProduct}>{item.code}# {item.name}</View>
<View className={styles.goodsLine}></View>
{
item.product_colors.map((it, inx) => {
return (
<View className={styles.itemGoods}>
<View className={styles.itemPic} style={{ backgroundColor: `rgb(${it?.rgb?.r} ${it?.rgb?.g} ${it?.rgb?.b})` }}></View>
<View className={styles.itemRight}>
<View className={styles.item_right_top}>
<View className={styles.itemName}>{it.code}# {it.name}</View>
<View className={styles.itemNums}>x{obj?.sale_mode === 0 ? it.roll : it.length / 100}{obj?.sale_mode === 0 ? '条' : 'm'}</View>
</View>
<View className={styles.item_right_Bottom}>
<View className={styles.itemMoney}>¥{it.sale_price / 100}/{obj?.sale_mode === 0 ? '条' : 'm'}</View>
<View className={styles.itemMoneyOne}>¥{formatPriceDiv(it.total_sale_price)}</View>
</View>
</View>
</View>
)
})
}
</View>
)
})
}
</>
)
})