添加运单详情页面

src/pages.json

@@ -207,11 +207,17 @@
       }
     },
     {
-      "path": "pages/pickup/waybillPickUpDetail",
+      "path": "pages/pickup/waybillPickUpDetails",
       "style": {
         "navigationBarTitleText": "取件详情"
       }
     },
+    {
+      "path": "pages/pickup/waybillPickUpDetail",
+      "style": {
+        "navigationBarTitleText": "运单信息"
+      }
+    },
     {
       "path": "pages/waybillDeliveryOrder/waybillDeliveryOrder",
       "style": {

src/pages/pickup/waybillPickUpDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getPickUpById } from '@/services/waybillPickUpOrder'
+import { getPickUpByWaybillNo } from '@/services/waybillPickUpOrder'
 import type { PickUpDetailItem } from '@/types/waybillPickUp'
 import { onLoad } from '@dcloudio/uni-app'
 import { ref } from 'vue'
@@ -9,16 +9,14 @@ const { safeAreaInsets } = uni.getSystemInfoSync()
 
 // 接收页面参数
 const query = defineProps<{
-  id: string
+  waybill_no: string
 }>()
 
 // 获取商品详情信息
 const details = ref<PickUpDetailItem[]>()
 const getOrderByIdData = async () => {
-  const res = await getPickUpById(query.id)
-  console.log('res--', res.data.details)
-
-  details.value = res.data.details
+  const res = await getPickUpByWaybillNo(query.waybill_no)
+  console.log('res--', res)
 }
 
 // 页面加载
@@ -46,20 +44,20 @@ const contactClient = () => {
 <template>
   <scroll-view enable-back-to-top scroll-y class="viewport">
     <view class="detail panel">
-      <view class="title">
-        <text>运单详情 </text>
-      </view>
       <view class="content">
         <view class="properties">
           <view v-for="item in details" :key="item.id" class="item">
-            <view class="order_no_state">
-              <view>
-                <text>{{ item.waybill_no }}</text>
+            <navigator :url="`/pages/pickup/waybillPickUpDetail?id=${item.id}`">
+              <view class="order_no_state">
+                <view>
+                  <text>{{ item.waybill_no }}</text>
+                </view>
+                <view class="order_state">
+                  <text :class="'state-' + item.status">{{ item.status_text }}</text>
+                </view>
               </view>
-              <view class="order_state">
-                <text :class="'state-' + item.status">{{ item.status_text }}</text>
-              </view>
-            </view>
+            </navigator>
+
             <view class="info">
               <view>
                 预估重量：

src/pages/pickup/waybillPickUpDetails.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import { getPickUpById } from '@/services/waybillPickUpOrder'
+import type { PickUpDetailItem } from '@/types/waybillPickUp'
+import { onShow } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+
+// 接收页面参数
+const query = defineProps<{
+  id: string
+}>()
+
+// 获取商品详情信息
+const details = ref<PickUpDetailItem[]>()
+const getOrderByIdData = async () => {
+  const res = await getPickUpById(query.id)
+  details.value = res.data.details
+}
+
+// 页面加载
+onShow(() => {
+  getOrderByIdData()
+})
+
+// 点击图片时
+const onTapImage = (url: string) => {
+  // 大图预览
+  uni.previewImage({
+    current: url,
+    urls: goods.value!.mainPictures,
+  })
+}
+
+// 联系客户
+const contactClient = () => {
+  uni.makePhoneCall({
+    phoneNumber: '13200000000',
+  })
+}
+</script>
+
+<template>
+  <scroll-view enable-back-to-top scroll-y class="viewport">
+    <view class="detail panel">
+      <view class="title">
+        <text>运单列表</text>
+      </view>
+      <view class="content">
+        <view class="properties">
+          <view v-for="item in details" :key="item.id" class="item">
+            <navigator :url="`/pages/pickup/waybillPickUpDetail?waybill_no=${item.waybill_no}`">
+              <view class="order_no_state">
+                <view>
+                  <text>{{ item.waybill_no }}</text>
+                </view>
+                <view class="order_state">
+                  <text :class="'state-' + item.status">{{ item.status_text }}</text>
+                </view>
+              </view>
+            </navigator>
+            <view class="info">
+              <view>
+                预估重量：
+                <text>{{ item.estimated_weight }}KG</text>
+              </view>
+              <view>
+                Ups 取件码：
+                <text>{{ item.ups_prn || '无' }}</text>
+              </view>
+              <view>
+                Ups 准备时间：
+                <text>{{ item.ups_ready_time || '无' }}</text>
+              </view>
+              <view>
+                Ups 截止时间：
+                <text>{{ item.ups_close_time || '无' }}</text>
+              </view>
+              <view> 面单 </view>
+            </view>
+            <view class="title label">
+              <text
+                >物品清单
+                <text class="bln" v-if="!item.goods.length">无</text>
+              </text>
+            </view>
+            <view v-for="(good, g) in item.goods" :key="g" class="goods">
+              <view
+                >类型：
+                <text>{{ good.category_name }}</text>
+              </view>
+              <view
+                >名称：
+                <text>{{ good.goods_name }}</text>
+                <text style="color: #666666; font-size: 22rpx">{{ ' x' + good.qty }}</text>
+              </view>
+
+              <view
+                >价格：
+                <text>￡{{ good.price }}</text>
+              </view>
+              <view
+                >合计：
+                <text>￡{{ good.amount }}</text>
+              </view>
+              <!-- <image
+                class="image"
+                v-for="item in good.images"
+                :key="item"
+                mode="widthFix"
+                :src="item"
+              ></image> -->
+            </view>
+          </view>
+        </view>
+        <!-- 图片详情 -->
+      </view>
+    </view>
+  </scroll-view>
+
+  <!-- 用户操作 -->
+  <view
+    v-if="details"
+    class="contact-client"
+    :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
+  >
+    <view class="buttons">
+      <view @tap="contactClient" class="payment"> 联系客户 </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+page {
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.viewport {
+  background-color: #ffffff;
+  height: 100%;
+  position: relative;
+}
+
+.panel {
+  margin-top: 20rpx;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 90rpx;
+    line-height: 1;
+    padding: 30rpx 60rpx 30rpx 6rpx;
+    position: relative;
+    text {
+      padding-left: 10rpx;
+      font-size: 28rpx;
+      color: #333;
+      font-weight: 600;
+      border-left: 4rpx solid #27ba9b;
+    }
+    navigator {
+      font-size: 24rpx;
+      color: #666;
+    }
+    .bln {
+      border-left: 0;
+    }
+  }
+  .label {
+    height: auto;
+    padding: 6rpx;
+  }
+}
+
+.arrow {
+  &::after {
+    position: absolute;
+    top: 50%;
+    right: 30rpx;
+    content: '\e6c2';
+    color: #ccc;
+    font-family: 'erabbit' !important;
+    font-size: 32rpx;
+    transform: translateY(-50%);
+  }
+}
+
+/* 商品详情 */
+.detail {
+  padding-left: 20rpx;
+  padding-bottom: 78rpx;
+  margin-bottom: 20rpx;
+  .content {
+    margin-left: -20rpx;
+    .image {
+      width: 100%;
+    }
+  }
+  .properties {
+    padding: 0 20rpx;
+    font-size: 30rpx;
+    .item {
+      display: flex;
+      flex-direction: column;
+      line-height: 2;
+      margin: 10rpx;
+      overflow: hidden;
+      font-size: 26rpx;
+      border-radius: 20rpx;
+      box-sizing: border-box;
+      background-color: #fff;
+      color: #333;
+      box-shadow: 0 0rpx 10rpx rgba(200, 200, 200, 0.5);
+      margin-bottom: 20rpx;
+      .order_no_state {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #eeeeee;
+        padding: 20rpx;
+        .order_state {
+          font-size: 24rpx;
+          .state-2 {
+            color: #2979ff;
+          }
+          .state-3 {
+            color: #1c67da;
+          }
+          .state-4 {
+            color: #f3a73f;
+          }
+          .state-5 {
+            color: #18bc37;
+          }
+          .state-6 {
+            color: #f3a73f;
+          }
+          .state-7 {
+            color: #01b075;
+          }
+        }
+      }
+      .info {
+        padding: 10rpx 20rpx;
+      }
+      .goods {
+        margin: 10rpx 20rpx;
+        padding: 10rpx;
+        border: 1rpx solid #eaeaea;
+        border-radius: 10rpx;
+      }
+    }
+  }
+}
+
+/* 底部联系客户 */
+.contact-client {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: calc((var(--window-bottom)));
+  z-index: 1;
+  background-color: #fff;
+  height: 72rpx;
+  border-top: 1rpx solid #eaeaea;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: content-box;
+  .buttons {
+    display: flex;
+    background-color: #27ba9b;
+    flex: 1;
+    justify-content: center;
+    & > view {
+      width: 100%;
+      text-align: center;
+      line-height: 72rpx;
+      font-size: 26rpx;
+      color: #fff;
+    }
+  }
+}
+</style>

src/pages/pickup/waybillPickUpOrder.vue

@@ -5,7 +5,6 @@
       <uni-easyinput v-model="searchValue" placeholder="请输入单号" :inputBorder="false" />
       <view class="filter">
         <text>筛选</text>
-        <!-- <uni-icons fontFamily="iconFont" size="16" color="#999999">{{ '\ue8b7' }}</uni-icons> -->
       </view>
     </view>
     <!-- 状态选项 -->
@@ -39,7 +38,7 @@
           class="navigator"
           v-for="(item, i) in waybillDelivery"
           :key="i"
-          :url="`/pages/pickup/waybillPickUpDetail?id=${item.id}`"
+          :url="`/pages/pickup/waybillPickUpDetails?id=${item.id}`"
         >
           <view class="order_no_state">
             <view class="order_no">
@@ -89,7 +88,7 @@
 
 <script setup lang="ts">
 import { reactive, ref, onMounted } from 'vue'
-import { onLoad, onNavigationBarButtonTap } from '@dcloudio/uni-app'
+import { onShow, onNavigationBarButtonTap } from '@dcloudio/uni-app'
 import { checkPermission } from '@/utils'
 import { waybillPickUpOrders, getPickUpByWaybillNo } from '@/services/waybillPickUpOrder'
 import type { StatusItem } from '@/types/waybillPickUp'
@@ -392,7 +391,6 @@ const getList = async () => {
   const res = await waybillPickUpOrders(params)
 
   loading.value = false
-  console.log(res)
   if (res.code == 1) {
     waybillDelivery.value = res.data.list
     total.value = res.data.total
@@ -402,7 +400,7 @@ const getList = async () => {
     messageRef.value.open()
   }
 }
-onLoad(() => {
+onShow(() => {
   getList()
 })
 onMounted(() => {
@@ -411,8 +409,20 @@ onMounted(() => {
 onNavigationBarButtonTap(async (event) => {
   if (event.index === 0) {
     const res = await getPickUpByWaybillNo('YTSEA2412080001GB01')
+    // uni.navigateTo({
+    //   url: `/pages/pickup/waybillPickUpDetail?waybill_no=YTSEA2412080001GB01`,
+    // })
+    console.log('res---3', res)
 
-    console.log('res---', res)
+    if (res.code == 1) {
+      // uni.navigateTo({
+      //   url: `/pages/pickup/waybillPickUpDetail?waybill_no=${res.data.waybill_no}`,
+      // })
+    } else {
+      messageType.value = 'error'
+      messageText.value = res.msg
+      messageRef.value.open()
+    }
 
     // scanInput()
     // showRightRef.value.open()

src/services/waybillPickUpOrder.ts

@@ -27,7 +27,7 @@ export const getPickUpById = (pick_up_order_id: string) => {
  * @param waybill_no 运单号
  */
 export const getPickUpByWaybillNo = (waybill_no: string) => {
-  return http<{ details: PickUpDetailItem[] }>({
+  return http<PickUpDetailItem>({
     method: 'GET',
     url: '/admin/pickup.waybillPickUpOrder/getByWaybillNo',
     data: { waybill_no },