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

剪板流程

Browse Source
This commit is contained in:
cheng
2022-06-10 19:02:36 +08:00
parent 9d8170c2a0
commit 3e5b19a124
42 changed files with 43 additions and 2335 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/order/comfirm.tsx
+8 -3
View File
@@ -73,7 +73,8 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
total_number: preViewOrder.total_number, //总数量
total_fabrics: preViewOrder.total_fabrics, //面料数量
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
list: preViewOrder.product_list
list: preViewOrder.product_list,
total_should_collect_money: preViewOrder.total_should_collect_money //应收金额
})
}
const formatPreViewOrderMemo = useMemo(() => {
@@ -149,7 +150,11 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
if (res.confirm) {
const res = await saleOrderFetchData(submitOrderData)
if(res.success) {
goLink('/pages/order/index',{id: res.data.id}, 'redirectTo')
if(preViewOrder?.sale_mode == 0) {
goLink('/pages/order/index',{id: res.data.id}, 'redirectTo')
} else if (preViewOrder?.sale_mode == 1) {
goLink('/pages/order/cutOrder/index',{id: res.data.id}, 'redirectTo')
}
} else {
alert.none(res.msg)
}
@@ -174,7 +179,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
</View>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<SubmitOrderBtn style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>
<SubmitOrderBtn style={{color:'#007AFF'}} number={formatPriceDiv(preViewOrder?.sale_mode == 1?formatPreViewOrder?.total_should_collect_money:formatPreViewOrder?.estimate_amount)} priceTitle={preViewOrder?.sale_mode == 1?'合计金额':'预估金额'}/>
<View className={styles.order_number_desc}>{`${formatPreViewOrder?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${formatPreViewOrder?.total_number + formatPreViewOrder?.unit}`}</View>
</View>
<View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View>
src/pages/order/components/kindList/index.tsx
+7 -6
View File
@@ -24,7 +24,7 @@ type OrderParam = {
}
type Param = {
order: OrderParam,
order: OrderParam,
comfirm?: boolean //是否是确认订单页面使用
}
@@ -96,14 +96,14 @@ export default memo(({order, comfirm = false}:Param) => {
return priceInfo.value.includes(status)
}, [order])
//金额展示
const priceConDom = useMemo(() => {
if(!order) return
//确认订单
if(comfirm == true) {
return <EstimatedAmount number={formatPriceDiv(order.estimate_amount)} title="预估金额" />
}
//订单为取消订单状态
if(order?.status == SaleOrderStatusCancel.value) {
//确认订单时
return (order.sale_mode == 1)?<EstimatedAmount number={formatPriceDiv(order.total_should_collect_money)} title="合计金额" /> : <EstimatedAmount number={formatPriceDiv(order.estimate_amount)} title="预估金额" />
} else if(order?.status == SaleOrderStatusCancel.value) {
//订单状态为取消订单时
return (
<>
{
@@ -114,6 +114,7 @@ export default memo(({order, comfirm = false}:Param) => {
</>
)
} else {
//其他订单状态
return (
<>
{
src/pages/order/components/submitOrderBtn/index.tsx
+6 -4
View File
@@ -4,10 +4,12 @@ import {formatKbPrice} from '@/common/common'
import classnames from "classnames";
import styles from './index.module.scss'
type Param = {
style?: Object,
number?: number
style?: Object,
number?: number, //数量
priceTitle: string //描述
}
export default memo(({style, number = 0}:Param) => {
export default memo(({style, number = 0, priceTitle = ''}:Param) => {
const priceDom = useCallback(() => {
let res = number.toFixed(2).split('.')
let int_num = parseInt(res[0]) + ''
@@ -24,7 +26,7 @@ export default memo(({style, number = 0}:Param) => {
<>
<View className={styles.order_price}>
<View className={classnames(styles.order_price_text, styles.emphasis)}>
<Text>预估金额</Text>
<Text>{priceTitle}</Text>
<View className={styles.iconfont_msg}>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
src/pages/order/cutOrder/index.config.ts
+6
View File
@@ -0,0 +1,6 @@
export default {
navigationBarTitleText: '订单详情',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark',
enableShareAppMessage: true,
}
src/pages/order/cutOrder/index.module.scss
+133
View File
@@ -0,0 +1,133 @@
.order_main{
min-height: 100%;
background-color:$color_bg_one;
padding: 20px;
padding-bottom: 190px;
box-sizing: border-box;
.order_title{
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box;
background-color: #fff;
height: 116px;
border-radius: 20px;
margin-top: 20px;
text{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_status{
background-color: #F0F0F0;
width: 148px;
height: 55px;
color: $color_font_three;
text-align: center;
line-height: 55px;
font-size: $font_size_medium;
border-radius: 30px;
&:nth-last-child(1) {
margin-left: 20px;
}
}
}
.order_desc{
display: flex;
align-items: center;
background-color: #fff;
padding: 20px;
min-height: 116px;
border-radius: 20px;
margin-top: 20px;
box-sizing: border-box;
.order_desc_con{
width: 150px;
font-size: $font_size;
font-weight: 700;
}
.order_desc_text, .order_desc_text_hint{
font-size: $font_size_medium;
color: $color_font_two;
margin-right: 10px;
flex:1;
word-break:break-all;
}
.order_desc_text_hint{
text-align: right;
}
.miconfont{
font-size: 20px;
color: $color_font_two;
}
}
.submit_order{
display: flex;
position: fixed;
bottom: 0;
left: 0;
justify-content: flex-end;
width: 100%;
align-items: center;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
padding: 20px 20px;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.order_btn {
width: 152px;
height: 72px;
border: 2px solid #dddddd;
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: $color_font_three;
&:nth-child(n+2) {
margin-left: 34px;
}
}
.order_btn_select{
color: $color_main;
border: 2px solid $color_main;
}
.order_number_desc{
font-size: $font_size_medium;
color: $color_font_two;
}
}
.order_info{
background-color: #fff;
margin-top: 20px;
border-radius: 20px;
padding: 20px;
.order_info_title{
font-size: $font_size;
font-weight: 700;
margin-bottom: 20px;
}
.order_num{
display: flex;
justify-content: space-between;
align-items: center;
.order_num_btn{
font-size: $font_size_medium;
padding: 5px 10px;
border: 2px solid #007cf7;
border-radius: 10px;
color: $color_main;
}
}
text{
font-size: $font_size;
}
}
.weight_memo_con{
margin-bottom: 20px;
}
}
src/pages/order/cutOrder/index.tsx
+228
View File
@@ -0,0 +1,228 @@
import {
GetSaleOrderDetailApi,
EditSaleOrderRemarkApi,
CancelOrderApi
} from "@/api/order";
import { GetOrderPayApi } from "@/api/orderPay";
import { alert, goLink } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
import OrderBtns from "@/components/orderBtns";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import { Text, Textarea, View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfoDetail from "../components/addressInfoDetail";
import KindList from "../components/kindList";
import OrderState from "../components/orderState";
import Payment from "../components/payment";
import Remark from "../components/remark";
import styles from '../index.module.scss'
export default () => {
const [showDesc, setShowDesc] = useState(false)
const router = useRouter()
const orderId = useRef<number>(Number(router.params.id))
useDidShow(() => {
getSaleOrderPreView()
})
//获取订单详情
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
const getSaleOrderPreView = async () => {
if(orderId.current) {
let res = await getOrderFetchData({id: orderId.current})
setOrderDetail(res.data)
setOrderRemark(res.data.remark)
}
Taro.stopPullDownRefresh()
}
//监听获取到的数据
useEffect(() => {
if(orderDetail)
formatData()
}, [orderDetail])
//格式化数据格式
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
const formatData = () => {
setFormatDetailOrder({
estimate_amount: orderDetail.estimate_amount, //预估金额
sale_mode: orderDetail.sale_mode,
sale_mode_name: orderDetail.sale_mode_name,
total_colors: orderDetail.total_colors, //总颜色数量
total_number: orderDetail.total_number, //总数量
total_fabrics: orderDetail.total_fabrics, //面料数量
unit: orderDetail.sale_mode == 0?'条':'m', //单位
list: orderDetail.product_list,
status: orderDetail.status, //订单状态
total_sale_price: orderDetail.total_sale_price, //销售金额
total_should_collect_money: orderDetail.total_should_collect_money, //应收金额
total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠
actual_amount: orderDetail.actual_amount, //实付金额
the_previous_status: orderDetail.the_previous_status, //取消订单时的订单状态
})
}
const formatPreViewOrderMemo = useMemo(() => {
return formatDetailOrder
}, [formatDetailOrder])
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: orderDetail?.order_no||'',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功'
})
}
})
}
//格式化初始地址
const defaultAddress = useMemo(() => {
return {
province_name: orderDetail?.province_name,
city_name: orderDetail?.city_name,
district_name: orderDetail?.district_name,
address_detail: orderDetail?.address_detail,
// id: address.id,
name: orderDetail?.target_user_name,
phone: orderDetail?.target_user_phone
}
}, [orderDetail])
//订单备注
const {fetchData: remarkFetchData} = EditSaleOrderRemarkApi()
const [orderRemark, setOrderRemark] = useState('')
const getRemark = useCallback(async (e) => {
setOrderRemark(() => e)
let res = await remarkFetchData({remark:e, id: orderId.current})
if(res.success) {
getSaleOrderPreView()
alert.success('提交成功')
} else {
alert.error(res.msg)
}
setShowDesc(() => false)
}, [])
//支付所需数据
const payOrderInfo = useMemo(() => {
if(orderDetail)
return {orderId: orderDetail.should_collect_order_id, payment_method:orderDetail.payment_method }
}, [orderDetail])
//去付款
const [payMentShow, setPayMentShow] = useState(false)
const toPay = () => {
setPayMentShow(true)
}
//打开地址修改
const addressRef = useRef<any>(null)
//修改收货方式
const getShipmentMode = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//修改地址
const getAddress = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//获取底部按钮点击, 获取按钮状态
const orderStateClick = useCallback((val) => {
if(val == 1 || val == 6) {
//取消订单
getSaleOrderPreView()
}else if(val == 2) {
//待付款
toPay()
}
}, [orderDetail])
//页面下拉刷新
usePullDownRefresh(() => {
getSaleOrderPreView()
})
//支付成功
const onPaySuccess = useCallback(() => {
getSaleOrderPreView()
closePayShow()
}, [orderDetail])
//关闭支付弹窗
const closePayShow = useCallback(() => {
setPayMentShow(() => false)
}, [orderDetail])
//按钮所需数据
const orderInfo = useMemo(() => {
return {
status: orderDetail?.status, //订单状态
orderId: orderDetail?.id,
settle_mode: orderDetail?.settle_mode,
actual_amount: orderDetail?.actual_amount, //实付金额
wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额
}
}, [orderDetail])
//订单状态枚举
const {SaleOrderStatusCancel} = ORDER_STATUS
return (
<View className={styles.order_main}>
{/* <View className={styles.weight_memo_con}>
<WeightMemo/>
</View> */}
<OrderState list={orderDetail?.logistics_details} payment_method={orderDetail?.payment_method}/>
<View >
<AddressInfoDetail orderId={orderDetail?.id} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
</View>
<KindList order={formatPreViewOrderMemo} />
<View className={styles.order_info} >
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号' height={50}>
<View className={styles.order_num}>
<Text>{orderDetail?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='下单时间' height={50}>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
<SearchInput showBorder={false} title='付款时间' height={50}>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
</View>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
{
orderRemark&&<View className={styles.order_desc_text}>{orderDetail?.remark}</View>||
<View className={styles.order_desc_text_hint}>填写备注</View>
}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
{(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
</View> }
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo} />
<View className="common_safe_area_y"></View>
</View>
)
}
src/pages/order/index.tsx
-1
View File
@@ -14,7 +14,6 @@ import { Text, Textarea, View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import order from "../orderList/components/order";
import AddressInfoDetail from "./components/addressInfoDetail";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";