✨ feat(ID1000902):订单补充发货信息

src/pages/order/components/orderState/index.module.scss

@@ -18,7 +18,8 @@
     &:nth-last-child(n + 2) {
       padding-bottom: 30px;
     }
-        .order_status_tail_end, .order_status_tail{
+    .order_status_tail_end,
+    .order_status_tail {
       width: 15px;
       height: 15px;
       border: 2px solid $color_main;
@@ -41,33 +42,53 @@
       z-index: 1;
     }
     .order_status_content {
+      // display: flex;
+      // align-items: center;
+      padding: 0 30px;
+      .flexBox {
         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;
+          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;
@@ -79,7 +100,7 @@
       height: 56px;
       background: #f6f6f6;
       border-radius: 20px;
-            color: #3C3C3C;
+      color: #3c3c3c;
       font-size: 24px;
       display: flex;
       align-items: center;
@@ -90,7 +111,6 @@
         font-size: 28px;
         color: $color_main;
         padding: 0 10px;
-                
       }
     }
   }
@@ -140,7 +160,7 @@
 .pay_title_tag {
   margin-top: 10px;
   font-size: 24px;
-    color: #EE7500;
+  color: #ee7500;
   background: rgba(255, 230, 206, 0.36);
   border-radius: 10px;
   height: 56px;

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) && <View className={styles.order_flow_state}>
@@ -54,9 +67,20 @@ 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={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>)}
         </View>

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 (
     <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>