✨ feat(ID1000902):订单状态添加发货图片
This commit is contained in:
Haiyi
parent
35c6ecaf50
commit
e83a28e461
@ -298,6 +298,7 @@
|
||||
},
|
||||
{
|
||||
"name": "",
|
||||
<<<<<<< HEAD
|
||||
"pathName": "pages/customerPage/index",
|
||||
"query": "clientId=1750",
|
||||
"launchMode": "default",
|
||||
@ -314,6 +315,10 @@
|
||||
"name": "",
|
||||
"pathName": "pages/customerManagement/index",
|
||||
"query": "",
|
||||
=======
|
||||
"pathName": "pages/orderDetails/index",
|
||||
"query": "id=31651",
|
||||
>>>>>>> 3de3efe (✨ feat(ID1000902):订单状态添加发货图片)
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
}
|
||||
|
||||
@ -1,187 +1,201 @@
|
||||
.order_flow_state {
|
||||
width: 702px;
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
border-radius: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
width: 702px;
|
||||
margin-top: 24px;
|
||||
margin-left: 24px;
|
||||
border-radius: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.order_status_list {
|
||||
max-height: 250px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.order_status_list {
|
||||
max-height: 250px;
|
||||
overflow: hidden;
|
||||
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;
|
||||
|
||||
.mconfont {
|
||||
font-size: 30px;
|
||||
.order_status_title {
|
||||
color: $color_font_two;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.refresh_text {
|
||||
font-size: 23px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.picBox {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: wrap;
|
||||
.pic {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
.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,7 @@ interface List {
|
||||
tag: string
|
||||
desc: string
|
||||
expire_time: string
|
||||
delivery_appendix_url?: string[]
|
||||
}
|
||||
|
||||
interface Param {
|
||||
@ -23,8 +25,9 @@ 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 +49,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 +65,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>)}
|
||||
|
||||
@ -31,10 +31,11 @@ import {
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { formatDateTime, formatHashTag, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
|
||||
import IconFont from '@/components/iconfont/iconfont'
|
||||
import { PAY_H5_CODE_URL } from '@/common/constant'
|
||||
import { IMG_CND_Prefix, PAY_H5_CODE_URL } from '@/common/constant'
|
||||
import SaleCodeList from '@/components/SaleCodeList'
|
||||
import LabAndImg from '@/components/LabAndImg'
|
||||
import Tag from '@/components/tag'
|
||||
|
||||
// 卡片盒子元素
|
||||
interface Obs {
|
||||
title?: string
|
||||
@ -189,7 +190,7 @@ const OrderDetails = () => {
|
||||
mask: true,
|
||||
})
|
||||
const res = await infoFetch({ id: router.params.id })
|
||||
setInfoObj(res.data)
|
||||
|
||||
orderMsg.map((it) => {
|
||||
if (it.leftTitle === '订单编号：') {
|
||||
it.rightTitle = res.data.order_no
|
||||
@ -214,6 +215,20 @@ const OrderDetails = () => {
|
||||
}
|
||||
}
|
||||
})
|
||||
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
|
||||
})
|
||||
setInfoObj(res.data)
|
||||
setOrderMsg([...orderMsg])
|
||||
setReceivingStatus(res.data.shipment_mode)
|
||||
// 小程序提供的api，通知页面停止下拉刷新效果
|
||||
@ -799,7 +814,7 @@ const OrderDetails = () => {
|
||||
|
||||
return (
|
||||
<View className={styles.mainBox}>
|
||||
{(infoObj?.status != 10 && <OrderState orderInfo={infoObj} />)}
|
||||
{(infoObj?.status != 10 && <OrderState picUrl={infoObj?.picUrl} orderInfo={infoObj} />)}
|
||||
{
|
||||
infoObj.status === 10 && <AdvanceOrderState orderInfo={infoObj} onRefresh={() => refresh()} />
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user