diff --git a/project.private.config.json b/project.private.config.json
index 9f46e75..b3e36d5 100644
--- a/project.private.config.json
+++ b/project.private.config.json
@@ -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
}
diff --git a/src/pages/orderDetails/components/orderState/index.module.scss b/src/pages/orderDetails/components/orderState/index.module.scss
index e9fc208..ad6cdde 100644
--- a/src/pages/orderDetails/components/orderState/index.module.scss
+++ b/src/pages/orderDetails/components/orderState/index.module.scss
@@ -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;
- }
-}
\ No newline at end of file
+ .miconfont {
+ font-size: 30px;
+ padding: 0 20px;
+ }
+}
diff --git a/src/pages/orderDetails/components/orderState/index.tsx b/src/pages/orderDetails/components/orderState/index.tsx
index 7c86530..254a8ad 100644
--- a/src/pages/orderDetails/components/orderState/index.tsx
+++ b/src/pages/orderDetails/components/orderState/index.tsx
@@ -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) &&
@@ -54,8 +65,19 @@ const OrderState = ({ orderInfo = { logistics_details: [], payment_method: 0, st
{(dataList.length > 1) && }
{(dataList.length != (index + 1)) && }
- {item.status}
- {formatDateTime(item.time)}
+
+ {item.status}
+ {formatDateTime(item.time)}
+
+
+ {
+ item.delivery_appendix_url?.map((item, index) => {
+ return (
+ handSee(item)} />
+ )
+ })
+ }
+
{item.desc}
)}
diff --git a/src/pages/orderDetails/index.tsx b/src/pages/orderDetails/index.tsx
index 0be4d6b..abe3bfc 100644
--- a/src/pages/orderDetails/index.tsx
+++ b/src/pages/orderDetails/index.tsx
@@ -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 (
- {(infoObj?.status != 10 && )}
+ {(infoObj?.status != 10 && )}
{
infoObj.status === 10 && refresh()} />
}