From e83a28e461e48cba390308b95dc5b4d22ffdd212 Mon Sep 17 00:00:00 2001
From: Haiyi <1021441632@qq.com>
Date: Wed, 22 Feb 2023 20:01:14 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(ID1000902):=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=B7=BB=E5=8A=A0=E5=8F=91=E8=B4=A7=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 project.private.config.json                   |   5 +
 .../components/orderState/index.module.scss   | 346 +++++++++---------
 .../components/orderState/index.tsx           |  28 +-
 src/pages/orderDetails/index.tsx              |  21 +-
 4 files changed, 228 insertions(+), 172 deletions(-)

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) && <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>)}
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 (
     <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()} />
       }