🦄 refactor:搜索历史加入购物车100%
This commit is contained in:
Haiyi
@@ -0,0 +1,4 @@
|
||||
export default {
|
||||
navigationBarTitleText: '确认订单',
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
})
|
||||
}
|
||||
</>
|
||||
|
||||
)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user