✨ feat(ID1000902):订单补充发货信息
This commit is contained in:
Haiyi
parent
4c6ea5f1d2
commit
eaf107398d
@ -1,155 +1,175 @@
|
||||
.order_flow_state{
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-sizing:border-box;
|
||||
position: relative;
|
||||
.order_flow_state {
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.order_status_list {
|
||||
max-height: 250px;
|
||||
overflow: hidden;
|
||||
.order_status_list{
|
||||
max-height: 250px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.order_status_list_show {
|
||||
max-height: 1000px !important;
|
||||
}
|
||||
.order_status_item {
|
||||
position: relative;
|
||||
&:nth-last-child(n + 2) {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.order_status_list_show {
|
||||
max-height: 1000px !important;
|
||||
.order_status_tail_end,
|
||||
.order_status_tail {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 2px solid $color_main;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
.order_status_item{
|
||||
position: relative;
|
||||
&:nth-last-child(n+2) {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.order_status_tail_end, .order_status_tail{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 2px solid $color_main;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position:absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
.order_status_tail_end{
|
||||
background-color: $color_main;
|
||||
}
|
||||
.order_status_line{
|
||||
border-left: 2px solid $color_main;
|
||||
height: 100%;
|
||||
top: 10px;
|
||||
left: 9px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.order_status_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30px;
|
||||
.order_status_title{
|
||||
color: $color_font_two;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.order_status_time{
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_medium;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.order_status_tag{
|
||||
font-size: $font_size_min;
|
||||
background: #F0F0F0;
|
||||
border-radius: 6px;
|
||||
padding: 5px 10px;
|
||||
color: $color_font_two;
|
||||
}
|
||||
.order_status_select{
|
||||
color: $color_main;
|
||||
}
|
||||
.order_status_tag_select{
|
||||
color: $color_main;
|
||||
}
|
||||
}
|
||||
.order_status_des{
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
.order_status_des_select{
|
||||
color: $color_font_one;
|
||||
}
|
||||
.pay_time{
|
||||
height: 56px;
|
||||
background: #f6f6f6;
|
||||
border-radius: 20px;
|
||||
color: #3C3C3C;
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
margin-top: 20px;
|
||||
text{
|
||||
font-size: 28px;
|
||||
color: $color_main;
|
||||
padding: 0 10px;
|
||||
|
||||
}
|
||||
}
|
||||
.order_status_tail_end {
|
||||
background-color: $color_main;
|
||||
}
|
||||
.more{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $font_size_min;
|
||||
color: $color_font_one;
|
||||
padding-top: 20px;
|
||||
.miconfonts{
|
||||
display: inline-block;
|
||||
font-size: 25px;
|
||||
transform:rotate(90deg);
|
||||
}
|
||||
.open_miconfonts{
|
||||
transform:rotate(-90deg);
|
||||
}
|
||||
.order_status_line {
|
||||
border-left: 2px solid $color_main;
|
||||
height: 100%;
|
||||
top: 10px;
|
||||
left: 9px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.image_tag{
|
||||
width: 140px;
|
||||
height: 144px;
|
||||
.image{
|
||||
width: 140px;
|
||||
height: 144px;
|
||||
}
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
}
|
||||
.refresh{
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
color: #707070;
|
||||
.order_status_content {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
padding: 0 30px;
|
||||
.flexBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.order_status_title {
|
||||
color: $color_font_two;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.mconfont{
|
||||
font-size: 30px;
|
||||
.order_status_time {
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_medium;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.refresh_text{
|
||||
font-size: 23px;
|
||||
|
||||
.order_status_tag {
|
||||
font-size: $font_size_min;
|
||||
background: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
padding: 5px 10px;
|
||||
color: $color_font_two;
|
||||
}
|
||||
|
||||
.order_status_select {
|
||||
color: $color_main;
|
||||
}
|
||||
|
||||
.order_status_tag_select {
|
||||
color: $color_main;
|
||||
}
|
||||
}
|
||||
.picBox {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
.pic {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay_title_tag{
|
||||
margin-top: 10px;
|
||||
font-size: 24px;
|
||||
color: #EE7500;
|
||||
background: rgba(255,230,206,0.36);
|
||||
border-radius: 10px;
|
||||
height: 56px;
|
||||
.order_status_des {
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
.order_status_des_select {
|
||||
color: $color_font_one;
|
||||
}
|
||||
.pay_time {
|
||||
height: 56px;
|
||||
background: #f6f6f6;
|
||||
border-radius: 20px;
|
||||
color: #3c3c3c;
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
margin-top: 20px;
|
||||
text {
|
||||
font-size: 28px;
|
||||
color: $color_main;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.more {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $font_size_min;
|
||||
color: $color_font_one;
|
||||
padding-top: 20px;
|
||||
.miconfonts {
|
||||
display: inline-block;
|
||||
font-size: 25px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.open_miconfonts {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
.image_tag {
|
||||
width: 140px;
|
||||
height: 144px;
|
||||
.image {
|
||||
width: 140px;
|
||||
height: 144px;
|
||||
}
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
}
|
||||
.refresh {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
color: #707070;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
.miconfont {
|
||||
font-size: 30px;
|
||||
padding: 0 20px;
|
||||
|
||||
.mconfont {
|
||||
font-size: 30px;
|
||||
}
|
||||
.refresh_text {
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay_title_tag {
|
||||
margin-top: 10px;
|
||||
font-size: 24px;
|
||||
color: #ee7500;
|
||||
background: rgba(255, 230, 206, 0.36);
|
||||
border-radius: 10px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
.miconfont {
|
||||
font-size: 30px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import { Image, Text, View } from '@tarojs/components'
|
||||
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
|
||||
import { memo, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import * as dayjs from 'dayjs'
|
||||
@ -12,6 +13,8 @@ interface List {
|
||||
tag: string
|
||||
desc: string
|
||||
expire_time: string
|
||||
delivery_appendix_url?: string[]
|
||||
|
||||
}
|
||||
|
||||
interface Param {
|
||||
@ -23,8 +26,10 @@ interface Param {
|
||||
account_period?: number // 账期
|
||||
account_period_time?: string // 还款日期
|
||||
}
|
||||
picUrl?: string[]
|
||||
|
||||
}
|
||||
const OrderState = ({ orderInfo = { logistics_details: [], payment_method: 0, status: 0 }, onRefresh }: Param) => {
|
||||
const OrderState = ({ orderInfo = { logistics_details: [], payment_method: 0, status: 0 }, onRefresh, picUrl = [] }: Param) => {
|
||||
useEffect(() => {
|
||||
console.log('orderInfo33::', orderInfo)
|
||||
}, [orderInfo])
|
||||
@ -46,6 +51,14 @@ const OrderState = ({ orderInfo = { logistics_details: [], payment_method: 0, st
|
||||
PaymentMethodCashOnDelivery,
|
||||
} = PAYMENT_METHOD
|
||||
|
||||
const handSee = (item) => {
|
||||
console.log(item, 'itemmmm')
|
||||
Taro.previewImage({
|
||||
current: item, // 图片的地址url
|
||||
urls: picUrl, // 预览的地址url
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{(dataList?.length > 0) && <View className={styles.order_flow_state}>
|
||||
@ -54,8 +67,19 @@ const OrderState = ({ orderInfo = { logistics_details: [], payment_method: 0, st
|
||||
{(dataList.length > 1) && <View className={classnames(styles.order_status_tail, (index == 0) && styles.order_status_tail_end)}></View>}
|
||||
{(dataList.length != (index + 1)) && <View className={styles.order_status_line}></View>}
|
||||
<View className={styles.order_status_content}>
|
||||
<View className={classnames(styles.order_status_title, (index == 0) && styles.order_status_select)}>{item.status}</View>
|
||||
<View className={classnames(styles.order_status_time, (index == 0) && styles.order_status_select)}>{formatDateTime(item.time)}</View>
|
||||
<View className={styles.flexBox}>
|
||||
<View className={classnames(styles.order_status_title, (index == 0) && styles.order_status_select)}>{item.status}</View>
|
||||
<View className={classnames(styles.order_status_time, (index == 0) && styles.order_status_select)}>{formatDateTime(item.time)}</View>
|
||||
</View>
|
||||
<View className={styles.picBox}>
|
||||
{
|
||||
item.delivery_appendix_url?.map((item, index) => {
|
||||
return (
|
||||
<Image mode="aspectFit" src={item} className={styles.pic} key={index} onClick={() => handSee(item)} />
|
||||
)
|
||||
})
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
<Text className={classnames(styles.order_status_des, (index == 0) && styles.order_status_des_select)}>{item.desc}</Text>
|
||||
</View>)}
|
||||
|
||||
@ -25,6 +25,7 @@ import { SubscriptionMessageApi } from '@/api/user'
|
||||
import { AddShoppingCartApi } from '@/api/shopCart'
|
||||
import { EditSaleOrderRemarkApi, GetSaleOrderDetailApi } from '@/api/order'
|
||||
import MoveBtn from '@/components/moveBtn'
|
||||
import { IMG_CND_Prefix } from '@/common/constant'
|
||||
|
||||
const Order = () => {
|
||||
useLogin()
|
||||
@ -58,6 +59,19 @@ const Order = () => {
|
||||
const getSaleOrderPreView = async() => {
|
||||
if (orderId.current) {
|
||||
const res = await getOrderFetchData({ id: orderId.current })
|
||||
res.data.picUrl = res.data.delivery_appendix_url?.map((item) => {
|
||||
item = IMG_CND_Prefix + item
|
||||
return item
|
||||
})
|
||||
res.data.logistics_details?.map((item) => {
|
||||
if (item.status == '待收货') {
|
||||
item.delivery_appendix_url = res.data.delivery_appendix_url?.map((item) => {
|
||||
item = IMG_CND_Prefix + item
|
||||
return item
|
||||
})
|
||||
}
|
||||
return item
|
||||
})
|
||||
setOrderDetail(res.data)
|
||||
setOrderRemark(res.data.remark)
|
||||
// 预付款自动打开支付
|
||||
@ -289,7 +303,7 @@ const Order = () => {
|
||||
return (
|
||||
<MoveBtn orderObj={orderDetail} showList={['order']} messageTitle={orderDetail?.order_no} messagePath={`/pages/order/index?id=${orderDetail?.id}`} showCart>
|
||||
<View className={styles.order_main}>
|
||||
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || (
|
||||
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState picUrl={orderDetail?.picUrl} orderInfo={orderDetail} />) || (
|
||||
<AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} />
|
||||
)}
|
||||
<View>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user