From eaf107398d980a3d97e0ac5332db75498a424f00 Mon Sep 17 00:00:00 2001
From: Haiyi <1021441632@qq.com>
Date: Tue, 21 Feb 2023 14:46:03 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ID1000902):=E8=AE=A2=E5=8D=95?=
=?UTF-8?q?=E8=A1=A5=E5=85=85=E5=8F=91=E8=B4=A7=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../components/orderState/index.module.scss | 304 ++++++++++--------
.../order/components/orderState/index.tsx | 30 +-
src/pages/order/index.tsx | 16 +-
3 files changed, 204 insertions(+), 146 deletions(-)
diff --git a/src/pages/order/components/orderState/index.module.scss b/src/pages/order/components/orderState/index.module.scss
index 536417e..53e3919 100644
--- a/src/pages/order/components/orderState/index.module.scss
+++ b/src/pages/order/components/orderState/index.module.scss
@@ -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;
-
- .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;
+ }
+ }
}
-}
-.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;
}
-}
\ No newline at end of file
+ .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;
+ }
+}
diff --git a/src/pages/order/components/orderState/index.tsx b/src/pages/order/components/orderState/index.tsx
index 3baf34f..46f3b4e 100644
--- a/src/pages/order/components/orderState/index.tsx
+++ b/src/pages/order/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,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) &&
@@ -54,8 +67,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/order/index.tsx b/src/pages/order/index.tsx
index 8d71aa3..9ca06cc 100644
--- a/src/pages/order/index.tsx
+++ b/src/pages/order/index.tsx
@@ -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 (
- {(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && ) || (
+ {(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && ) || (
)}