feat：物流信息

shop/commodity/components/orderDetail/orderCardDetailInfo.vue

@@ -110,14 +110,12 @@ export default {
       },
     };
   },
-  
+
   methods: {
     handleCopy(val) {
       copy(val);
     },
-	sendGoods(){
-		
-	}
+    sendGoods() {},
   },
 };
 </script>
@@ -140,7 +138,7 @@ export default {
   min-height: 719rpx;
   background: #ffffff;
   border-radius: 16px;
-  padding:0 20rpx;
+  padding: 0 20rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -188,7 +186,7 @@ export default {
   .details-xiangqing-niri {
     // width: 634rpx;
     // height: 548rpx;
-	    width: 100%;
+    width: 100%;
     margin: 26rpx 0 50rpx 0;
     display: flex;
     flex-direction: column;
@@ -224,7 +222,7 @@ export default {
         .order-list-yi-in-neibu-left-url {
           // width: 290rpx;
           display: flex;
-		  padding:0 20rpx;
+          padding: 0 20rpx;
 
           .order-list-yi-in-neibu-left-url-top {
             width: 100%;

shop/commodity/logisticsInformationDetail.vue

@@ -1,21 +1,136 @@
 <template>
-  <view class="logistics-info-card">
+  <view class="logistics-info-cardssss">
     <headersVue @headerJump="topgi" header-title="物流信息"></headersVue>
-    <view class="logistics-info-card-wrapper">1212</view>
+    <view class="logistics-info-card-headers">
+      <view class="logistics-info-card-headers__imagelist">
+        <view class="image-list">
+          <view class="image-scroll_box">
+            <view class="image-scroll_box__image">
+              <view
+                v-for="(item, index) in procductList"
+                :key="item.cart_num + '_index_' + index"
+                class="cmsd-ocm"
+              >
+                <image :src="item.image" />
+                <view class="tip-num">{{ 10 }}件</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="icon-right" @click="handlePopup">
+          <uni-icons type="right" size="20" class="icon-image"></uni-icons>
+        </view>
+      </view>
+      <view class="logistics-info-card-headers__logicistics">
+        <view class="image-company__image">
+          <image
+            src="https://cdn.bjtdba.com/chuxubao/images/2025-02-10/8198d202502101042344757.png"
+          />
+        </view>
+        <view class="image-company__content">
+          <view class="image-company__content-title">
+            <text>中通快递： </text>
+            <text>98765432345678</text>
+          </view>
+        </view>
+        <view class="image-company__btn">
+          <view class="copy-btn btn" @click="handleGiop('copy')">复制</view>
+          <view class="tel-btn btn" @click="handleGiop('tel')">电话</view>
+        </view>
+      </view>
+    </view>
+    <view class="logistics-info-card-wrapper">
+      <view class="logistics-info-card-wrapper__logicistics">
+        <view class="logistics-info-card-wrapper__logicistics-title">
+          <view class="order-list-yi-bot-xiangxi">
+            <view class="order-list-yi-bot-xiangxier">
+              <view class="shou-icon">收</view>
+            </view>
+            <view class="order-list-yi-bot-xadasrfe">
+              <view class="order-list-yi-bot-xadasrfe-top">
+                <text
+                  >北京市北京市朝阳区北京市北京市朝阳区北京市北京市朝阳</text
+                >
+                <text> 郭女士</text>
+                <text>185****4736</text>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="logicistis">
+          <view
+            class="logicistis-bot-xiangxi"
+            v-for="(items, index) in logisticsData"
+            :key="index + '_index_'"
+          >
+            <view class="logicistis-bot-xiangxier">
+              <view class="shou-icon " :class="[index===0?'ativedata':'']"></view>
+            </view>
+            <view class="logicistis-bot-xadasrfe">
+              <view class="logicistis-bot-xadasrfe-top">
+                <view class="title-cs">{{ items.status }}</view>
+                <view class="title-time">{{ items.time }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <ItemsInsidePackageVue ref="refsPackage" />
   </view>
 </template>
 
 <script>
 import headersVue from "../components/headers/headers.vue";
-import { toQueryString } from "@/utils/index.js";
+import { toQueryString, copy } from "@/utils/index.js";
+import ItemsInsidePackageVue from "./components/changeDetailInfo/ItemsInsidePackage.vue";
+import { mockDataLogistics } from "./mockData.js";
 export default {
-  components: { headersVue },
+  components: { headersVue, ItemsInsidePackageVue },
   data() {
     return {
       indexs: "",
       status: "",
       order_id: "", //订单ID
-      formType: ""
+      formType: "",
+      logisticsData: [],
+      procductList: [
+        {
+          pay_price: "88888",
+          cart_num: "10",
+          image:
+            "https://cdn.bjtdba.com/chuxubao/images/2025-02-10/8198d202502101042344757.png",
+          store_name: "三个苹果 纯天然浓缩果蔬汁清汁苹果汁…"
+        },
+        {
+          pay_price: "88888",
+          cart_num: "10",
+          image:
+            "https://cdn.bjtdba.com/chuxubao/images/2025-02-10/8198d202502101042344757.png",
+          store_name: "三个苹果 纯天然浓缩果蔬汁清汁苹果汁…"
+        },
+        {
+          pay_price: "88888",
+          cart_num: "10",
+          image:
+            "https://cdn.bjtdba.com/chuxubao/images/2025-02-10/8198d202502101042344757.png",
+          store_name: "三个苹果 纯天然浓缩果蔬汁清汁苹果汁…"
+        },
+        {
+          pay_price: "88888",
+          cart_num: "10",
+          image:
+            "https://cdn.bjtdba.com/chuxubao/images/2025-02-10/8198d202502101042344757.png",
+          store_name: "三个苹果 纯天然浓缩果蔬汁清汁苹果汁…"
+        },
+        {
+          pay_price: "88888",
+          cart_num: "10",
+          image:
+            "https://cdn.bjtdba.com/chuxubao/images/2025-02-10/8198d202502101042344757.png",
+          store_name: "三个苹果 纯天然浓缩果蔬汁清汁苹果汁…"
+        }
+      ]
     };
   },
   onLoad(e) {
@@ -24,8 +139,21 @@ export default {
     this.status = e.status;
     this.formType = e.formType || "";
     // this.getOrderDetails()
+    this.logisticsData = mockDataLogistics || [];
   },
   methods: {
+    handleGiop(type) {
+      if (type === "copy") {
+        copy("98765432345678");
+      } else {
+        uni.makePhoneCall({
+          phoneNumber: "98765432345678"
+        });
+      }
+    },
+    handlePopup() {
+      this.$refs.refsPackage.open();
+    },
     topgi() {
       const obj = {
         status: this.status,
@@ -33,7 +161,7 @@ export default {
         formType: this.formType,
         order_id: this.order_id
       };
-	  const params = toQueryString(obj);
+      const params = toQueryString(obj);
       const redirectUrl =
         this.formType === "detail" ? `./details?` : `./order?`;
       uni.redirectTo({
@@ -44,5 +172,238 @@ export default {
   }
 };
 </script>
+<style>
+page {
+  background-color: #f7f8fc;
+  /* height: 100%; */
+  box-sizing: border-box;
+}
+</style>
+<style lang="scss" scoped>
+.logistics-info-cardssss {
+  // height: 100%;
+  box-sizing: border-box;
+  .logistics-info-card-headers {
+    padding: 15rpx 16rpx 15rpx 32rpx;
+    margin-top: 95rpx;
+    width: 100%;
+    min-height: 260rpx;
+    background: #ffffff;
+    box-sizing: border-box;
+    &__imagelist {
+      display: flex;
+      align-items: center;
+      .image-list {
+        // border: 2rpx solid #4e14ec;
+        flex: 1;
+        height: 160rpx;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding-right: 20rpx;
+        .image-scroll_box {
+          display: flex;
+          .image-scroll_box__image {
+            display: flex;
+            flex: 1;
+            flex-shrink: 0;
+            .cmsd-ocm {
+              position: relative;
+            }
+            image {
+              border-radius: 16rpx;
+              width: 158rpx;
+              height: 158rpx;
+              flex-shrink: 0;
+              margin-right: 20rpx;
+              &:last-child {
+                margin-right: 50rpx;
+              }
+            }
+            .tip-num {
+              position: absolute;
+              right: 20rpx;
+              bottom: 10rpx;
+              width: 61rpx;
+              height: 37rpx;
+              background: rgba($color: #000000, $alpha: 0.2);
+              border-radius: 16rpx 0rpx 16rpx 0rpx;
+              font-weight: 400;
+              font-size: 24rpx;
+              color: #ffffff;
+              padding: 0 5rpx;
+              text-align: center;
+            }
+          }
+        }
+      }
+      .icon-right {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 2rpx 6rpx 20rpx 0rpx rgba(231, 79, 79, 0.1);
+        flex-shrink: 0;
+        width: 30rpx;
+        height: 160rpx;
+        text-align: center;
 
-<style lang="scss"></style>
+        .icon-image {
+        }
+      }
+    }
+    &__logicistics {
+      // border: 2rpx solid #4e14ec;
+      display: flex;
+      min-height: 70rpx;
+      align-items: center;
+      gap: 20rpx;
+      padding-top: 10rpx;
+      .image-company__image {
+        width: 35rpx;
+        height: 35rpx;
+        border-radius: 50%;
+        flex-shrink: 0;
+        image {
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+        }
+      }
+      .image-company__content-title {
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #333333;
+        flex: 1;
+        word-break: break-all;
+      }
+      .image-company__btn {
+        display: flex;
+        gap: 20rpx;
+        user-select: none;
+        .btn {
+          width: 62rpx;
+          height: 35rpx;
+          border-radius: 4rpx;
+          border: 1rpx solid #c8c8c8;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #333333;
+          text-align: center;
+          line-height: 35rpx;
+        }
+      }
+    }
+  }
+  .logistics-info-card-wrapper {
+    margin-top: 30rpx;
+    background: #ffffff;
+    min-height: 100rpx;
+    &__logicistics {
+      padding: 32rpx 20rpx 15rpx 32rpx;
+      &-title {
+        .order-list-yi-bot-xiangxi {
+          position: relative;
+          display: flex;
+          align-items: flex-start;
+
+          .order-list-yi-bot-xiangxier {
+            width: 40rpx;
+            height: 40rpx;
+            background: #1f7cff;
+            flex-shrink: 0;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            .shou-icon {
+              font-family: PingFangSC, PingFang SC;
+              font-weight: 400;
+              font-size: 24rpx;
+              color: #ffffff;
+            }
+          }
+
+          .order-list-yi-bot-xadasrfe {
+            height: 100%;
+            margin-left: 16rpx;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: flex-start;
+            &:last-child {
+              padding-bottom: 20rpx;
+            }
+
+            .order-list-yi-bot-xadasrfe-top {
+              width: 100%;
+              font-weight: 400;
+              font-size: 28rpx;
+              color: #333333;
+              // display: -webkit-box;
+              // -webkit-box-orient: vertical;
+              // -webkit-line-clamp: 2;
+              // overflow: hidden;
+              padding-bottom: 5rpx;
+              text {
+                padding-right: 20rpx;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .logicistis {
+    .logicistis-bot-xiangxi {
+      position: relative;
+      display: flex;
+      padding-bottom: 35rpx;
+      &::before{
+        content: '';
+        width: 2rpx;
+        background: #bdafaf;
+        height: calc(100% - 2rpx);
+        position: absolute;
+        left: 13rpx;
+        top: 23rpx;
+      }
+      &:last-child {
+        &::before {
+          height: 0rpx;
+        }
+      }
+      .logicistis-bot-xiangxier {
+        padding-right: 20rpx;
+        // padding-left: 5rpx;
+        .shou-icon {
+          width: 20rpx;
+          height: 20rpx;
+          background: #999999;
+          flex-shrink: 0;
+          border-radius: 50%;
+          &:not(.ativedata){
+            margin-left: 5rpx;
+          }
+          &.ativedata {
+            width: 28rpx;
+            height: 28rpx;
+            background: #1f7cff;
+            z-index: 66;
+          }
+        }
+      }
+      .title-cs {
+        font-weight: 400;
+        font-size: 28rpx;
+        color: #333333;
+        line-height: 40rpx;
+      }
+      .title-time {
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #999999;
+        padding-top: 10rpx;
+      }
+    }
+  }
+}
+</style>