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

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

@@ -1,155 +1,175 @@
-.order_flow_state{
+.order_flow_state {
-    background-color: #fff;
+  background-color: #fff;
-    border-radius: 20px;
+  border-radius: 20px;
-    padding: 20px;
+  padding: 20px;
-    box-sizing:border-box;
+  box-sizing: border-box;
-    position: relative;
+  position: relative;
+  overflow: hidden;
+  .order_status_list {
+    max-height: 250px;
     overflow: hidden;
-    .order_status_list{
+    transition: all 0.3s ease-in-out;
-        max-height: 250px;
+  }
-        overflow: hidden;
+  .order_status_list_show {
-        transition: all 0.3s ease-in-out;
+    max-height: 1000px !important;
+  }
+  .order_status_item {
+    position: relative;
+    &:nth-last-child(n + 2) {
+      padding-bottom: 30px;
     }
-    .order_status_list_show {
+    .order_status_tail_end,
-        max-height: 1000px !important;
+    .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{
+    .order_status_tail_end {
-        position: relative;
+      background-color: $color_main;
-        &: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;
-                
-            }
-        }
     }
-    .more{
+    .order_status_line {
-        width: 100%;
+      border-left: 2px solid $color_main;
-        text-align: center;
+      height: 100%;
-        font-size: $font_size_min;
+      top: 10px;
-        color: $color_font_one;
+      left: 9px;
-        padding-top: 20px;
+      position: absolute;
-        .miconfonts{
+      z-index: 1;
-            display: inline-block;
-            font-size: 25px;
-            transform:rotate(90deg);
-        }
-        .open_miconfonts{
-            transform:rotate(-90deg);
-        }
     }
-    .image_tag{
+    .order_status_content {
-        width: 140px;
+      // display: flex;
-        height: 144px;
+      // align-items: center;
-        .image{
+      padding: 0 30px;
-            width: 140px;
+      .flexBox {
-            height: 144px;
-        }
-        position: absolute;
-        top: -10px;
-        right: -10px;
-    }
-    .refresh{
-        position: absolute;
-        top: 23px;
-        right: 20px;
-        display: flex;
-        color: #707070;
         display: flex;
         align-items: center;
+        .order_status_title {
+          color: $color_font_two;
+          font-size: $font_size;
+          font-weight: 700;
+        }
 
-        .mconfont{
+        .order_status_time {
-            font-size: 30px;
+          color: $color_font_two;
+          font-size: $font_size_medium;
+          padding: 0 20px;
         }
-        .refresh_text{
+
-            font-size: 23px;
+        .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 {
-.pay_title_tag{
+      color: $color_font_two;
-    margin-top: 10px;
+      font-size: $font_size_medium;
-    font-size: 24px;
+    }
-    color: #EE7500;
+    .order_status_des_select {
-    background: rgba(255,230,206,0.36);
+      color: $color_font_one;
-    border-radius: 10px;
+    }
-    height: 56px;
+    .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;
+    .mconfont {
-    .miconfont {
+      font-size: 30px;
-        font-size: 30px;
-        padding: 0 20px;
     }
+    .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;
+  }
 }

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,8 +67,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={styles.flexBox}>
-              <View className={classnames(styles.order_status_time, (index == 0) && styles.order_status_select)}>{formatDateTime(item.time)}</View>
+                <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>)}

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>