✨ feat(ID1000902):订单状态添加发货图片

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
         }

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

@@ -23,7 +23,7 @@
   .order_status_item {
     position: relative;
 
-        &:nth-last-child(n+2) {
+    &:nth-last-child(n + 2) {
       padding-bottom: 30px;
     }
 
@@ -54,10 +54,12 @@
     }
 
     .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;
@@ -72,7 +74,7 @@
 
         .order_status_tag {
           font-size: $font_size_min;
-                background: #F0F0F0;
+          background: #f0f0f0;
           border-radius: 6px;
           padding: 5px 10px;
           color: $color_font_two;
@@ -86,6 +88,19 @@
           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;
@@ -100,7 +115,7 @@
       height: 56px;
       background: #f6f6f6;
       border-radius: 20px;
-            color: #3C3C3C;
+      color: #3c3c3c;
       font-size: 24px;
       display: flex;
       align-items: center;
@@ -112,7 +127,6 @@
         font-size: 28px;
         color: $color_main;
         padding: 0 10px;
-
       }
     }
   }
@@ -171,7 +185,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/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) && <View className={styles.order_flow_state}>
@@ -54,9 +65,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/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 (
     <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()} />
       }