feat: 更新

traceCodePackages/traceabilityCodeQuery/pages/detail/index.vue

@@ -28,17 +28,17 @@
         <view class="detail-label">生产企业：</view>
         <view
           class="detail-value detail-wrap detail-company-value"
-          :class="{ 'detail-clamp': !companyExpanded }"
-          :style="{ marginBottom: needCompanyToggle ? '40rpx' : undefined }"
+          :class="{ 'detail-clamp': !isExpanded }"
+          :style="{ marginBottom: needToggle ? '40rpx' : undefined }"
           id="companyValue"
         >
           <text>{{ data.produceEntName }}</text>
         </view>
         <text
-          v-if="needCompanyToggle"
+          v-if="needToggle"
           class="detail-expand-tag"
-          @click="toggleCompanyExpand"
-          >{{ companyExpanded ? "收起" : "展开" }}</text
+          @click="toggleExpand"
+          >{{ isExpanded ? "收起" : "展开" }}</text
         >
       </view>
       <view class="detail-row">
@@ -49,143 +49,72 @@
         <view class="detail-label">生产日期：</view>
         <view class="detail-value">{{ data.produceDate }}</view>
       </view>
-      <view class="detail-row" v-show="cardExpanded">
+      <view class="detail-row">
         <view class="detail-label">产品批号：</view>
         <view class="detail-value">{{ data.produceBatchNo }}</view>
       </view>
-      <view class="detail-row" v-show="cardExpanded">
+      <view class="detail-row">
         <view class="detail-label">
           剂<text :style="{ opacity: 0 }">剂型</text>型：</view
         >
         <view class="detail-value">{{ data.prepnDesc }}</view>
       </view>
-      <view class="detail-row" v-show="cardExpanded">
+      <view class="detail-row">
         <view class="detail-label">包装规格：</view>
         <view class="detail-value">{{ data.prepnSpec }}</view>
       </view>
-      <view class="detail-row" v-show="cardExpanded">
+      <view class="detail-row">
         <view class="detail-label">有效期至：</view>
         <view class="detail-value">{{ data.validEndDate }}</view>
       </view>
-      <view class="detail-card-toggle" @click="toggleCardExpand">
-        <uni-icons
-          :type="cardExpanded ? 'up' : 'down'"
-          size="18"
-          color="#9aa4b2"
-        ></uni-icons>
-      </view>
     </view>
 
     <view
       class="detail-timeline detail-bg"
       :style="{ backgroundImage: 'url(' + bg + ')' }"
     >
-      <view class="detail-section-header">
-        <view class="detail-section-title">扫码跟踪</view>
-        <!-- <view class="detail-section-actions">
-          <view
-            class="detail-section-action"
-            @tap="toggleTimelineView"
-          >
-            <uni-icons
-              :type="timelineView === 'text' ? 'image' : 'list'"
-              size="20"
-              color="#59a8f2"
-            ></uni-icons>
-            <text>{{
-              timelineView === "text" ? "查看图形" : "查看文字"
-            }}</text>
-          </view>
-          <view class="detail-section-action" @tap="onSetDefaultView">
-            <uni-icons type="gear" size="20" color="#59a8f2"></uni-icons>
-            <text>设置默认</text>
-          </view>
-        </view> -->
-      </view>
-      <view class="detail-graph-placeholder" v-if="timelineView === 'graph'">
-        图形视图占位区域
-      </view>
-      <view class="detail-timeline-toolbar" v-if="timelineView === 'text'">
-        <view class="detail-toolbar-btn" @tap.stop="setAllTimelineDetail(true)"
-          >全部展示详情</view
-        >
-        <view class="detail-toolbar-btn" @tap.stop="setAllTimelineDetail(false)"
-          >全部展示概要</view
-        >
-      </view>
+      <view class="detail-section-title">扫码跟踪</view>
       <view
-        v-if="timelineView === 'text'"
         class="detail-timeline-item"
         :class="{ 'detail-timeline-item-first': i === 0 }"
-        v-for="(value, i) in data.billDetailList"
+        v-for="(value, i) in data.enterpriseList"
         :key="i"
       >
         <view class="detail-left">
-          <view class="detail-dot" :class="{ 'detail-fill': false }"></view>
+          <view class="detail-dot" :class="{ 'detail-fill': i == 0 }"></view>
           <view
             class="detail-line"
-            v-if="i < (data.billDetailList || []).length - 1"
+            v-if="i < data.enterpriseList.length - 1"
           ></view>
         </view>
         <view class="detail-right">
-          <view class="detail-title-row">
-            <view class="detail-title" :class="{ 'detail-bold': true }">
-              {{ value.billTypeName || "--" }} {{ value.billCode || "" }}
-            </view>
-            <view class="detail-item-toggle" @tap.stop="toggleTimelineItem(i)">
-              {{ value._showDetail ? "概要" : "详情" }}
-              <uni-icons
-                :type="value._showDetail ? 'up' : 'down'"
-                size="14"
-                color="#888"
-              ></uni-icons>
+          <view class="detail-title" :class="{ 'detail-bold': i == 0 }">{{
+            value.entName
+          }}</view>
+          <view class="detail-desc"
+            >[{{ value.entTypeName }}]&nbsp;{{ getRegion(value) }}</view
+          >
+          <view
+            class="detail-extra"
+            v-if="!!value.inBoundBillsTime || !!value.outBoundBillsTime"
+          >
+            <view class="detail-extra-item" v-if="!!value.inBoundBillsTime">
+              <text
+                >{{ value.inBoundTypeName }}：{{
+                  formatDate(value.inBoundBillsTime)
+                }}</text
+              >
             </view>
-          </view>
-          <view class="detail-info-row">
-            <text class="detail-info-label">发货企业：</text>
-            <text class="detail-info-value">{{ value.fromEntName || "--" }}</text>
-          </view>
-          <view class="detail-tag-row" v-if="value._showDetail">
-            <text class="detail-tag" v-if="value.fromEntTypeName">{{
-              value.fromEntTypeName
-            }}</text>
-            <text class="detail-tag detail-tag-region" v-if="getRegionByPrefix(value, 'from')">{{
-              getRegionByPrefix(value, "from")
-            }}</text>
-          </view>
-          <view class="detail-info-row">
-            <text class="detail-info-label">收货企业：</text>
-            <text class="detail-info-value">{{ value.toEntName || "--" }}</text>
-          </view>
-          <view class="detail-tag-row" v-if="value._showDetail">
-            <text class="detail-tag" v-if="value.toEntTypeName">{{
-              value.toEntTypeName
-            }}</text>
-            <text class="detail-tag detail-tag-region" v-if="getRegionByPrefix(value, 'to')">{{
-              getRegionByPrefix(value, "to")
-            }}</text>
-          </view>
-          <view class="detail-info-row">
-            <text class="detail-info-label">入出库时间：</text>
-            <text class="detail-info-value">{{ value.billTime || "--" }}</text>
-          </view>
-          <view class="detail-info-row">
-            <text class="detail-info-label">上传企业：</text>
-            <text class="detail-info-value">{{
-              value.uploadEntName || "--"
-            }}</text>
-          </view>
-          <view class="detail-tag-row" v-if="value._showDetail">
-            <text class="detail-tag" v-if="value.uploadEntTypeName">{{
-              value.uploadEntTypeName
-            }}</text>
-            <text class="detail-tag detail-tag-region" v-if="getRegionByPrefix(value, 'upload')">{{
-              getRegionByPrefix(value, "upload")
-            }}</text>
-          </view>
-          <view class="detail-info-row">
-            <text class="detail-info-label">上传时间：</text>
-            <text class="detail-info-value">{{ value.uploadTime || "--" }}</text>
+            <view class="detail-extra-item" v-if="!value.inBoundBillsTime"
+              >无入库信息</view
+            >
+            <view class="detail-extra-item">{{
+              !!value.outBoundBillsTime
+                ? value.outBoundTypeName +
+                  "：" +
+                  formatDate(value.outBoundBillsTime)
+                : "无出库信息"
+            }}</view>
           </view>
         </view>
       </view>
@@ -242,12 +171,8 @@ export default {
       traceCode: "",
       pageHeight: 0,
       bg,
-      companyExpanded: true,
-      needCompanyToggle: false,
-      cardExpanded: false,
-      allTimelineDetail: true,
-      timelineView: "text",
-      defaultTimelineViewKey: "traceabilityCodeQuery.detail.timelineDefaultView",
+      isExpanded: true,
+      needToggle: false,
     };
   },
   onLoad(options) {
@@ -257,18 +182,14 @@ export default {
     if (options.traceCode) {
       this.traceCode = options.traceCode;
     }
-    const defaultView = uni.getStorageSync(this.defaultTimelineViewKey);
-    if (defaultView === "graph" || defaultView === "text") {
-      this.timelineView = defaultView;
-    }
-    // this.getData(options.traceCode);
-    this.getData2(options.traceCode);
+    this.getData(options.traceCode);
+    // this.getData2(options.traceCode);
   },
   onReady() {
     this.$nextTick(() => {
       const info = uni.getSystemInfoSync();
       const lineHeightPx = (info.windowWidth / 750) * 40;
-      this.companyExpanded = true; // 展开测量高度
+      this.isExpanded = true; // 展开测量高度
       uni
         .createSelectorQuery()
         .in(this)
@@ -276,8 +197,8 @@ export default {
         .boundingClientRect((rect) => {
           if (!rect || !lineHeightPx) return;
           const lines = Math.round(rect.height / lineHeightPx);
-          this.needCompanyToggle = lines > 2;
-          this.companyExpanded = !this.needCompanyToggle;
+          this.needToggle = lines > 2;
+          this.isExpanded = !this.needToggle;
         })
         .exec();
     });
@@ -292,35 +213,6 @@ export default {
         [provinceDesc, cityDesc, areaDesc].filter(Boolean).join("，") || ""
       );
     },
-    getRegionByPrefix(value = {}, prefix = "from") {
-      const province = value[`${prefix}ProvinceDesc`];
-      const city = value[`${prefix}CityDesc`];
-      const area = value[`${prefix}AreaDesc`];
-      return [province, city, area].filter(Boolean).join("-") || "";
-    },
-    toggleTimelineItem(index) {
-      if (!this.data || !Array.isArray(this.data.billDetailList)) return;
-      const item = this.data.billDetailList[index];
-      if (!item) return;
-      this.$set(item, "_showDetail", !item._showDetail);
-    },
-    setAllTimelineDetail(showDetail) {
-      this.allTimelineDetail = !!showDetail;
-      if (!this.data || !Array.isArray(this.data.billDetailList)) return;
-      this.data.billDetailList.forEach((item) => {
-        if (item) this.$set(item, "_showDetail", !!showDetail);
-      });
-    },
-    toggleTimelineView() {
-      this.timelineView = this.timelineView === "text" ? "graph" : "text";
-    },
-    onSetDefaultView() {
-      uni.setStorageSync(this.defaultTimelineViewKey, this.timelineView);
-      uni.showToast({
-        title: "已设为默认",
-        icon: "none",
-      });
-    },
     getData2(traceCode) {
       request("/bills/scanCode2", {
         tracCode: traceCode,
@@ -329,12 +221,6 @@ export default {
         if (res.code == 200) {
           const _data = res.data;
           this.data = _data || null;
-          if (this.data && Array.isArray(this.data.billDetailList)) {
-            this.data.billDetailList = this.data.billDetailList.map((item) => ({
-              ...item,
-              _showDetail: !!this.allTimelineDetail,
-            }));
-          }
           if (
             typeof _data === "object" &&
             Object.values(_data).filter((i) => !!i).length == 0
@@ -385,12 +271,9 @@ export default {
         },
       });
     },
-    toggleCompanyExpand() {
-      if (!this.needCompanyToggle) return;
-      this.companyExpanded = !this.companyExpanded;
-    },
-    toggleCardExpand() {
-      this.cardExpanded = !this.cardExpanded;
+    toggleExpand() {
+      if (!this.needToggle) return;
+      this.isExpanded = !this.isExpanded;
     },
     formatTraceCode(traceCode) {
       return String(traceCode || "")
@@ -403,6 +286,7 @@ export default {
 
 <style>
 .detail-bg {
+  background-repeat: no-repeat;
   background-position: center top;
   background-size: 100% auto;
 }
@@ -496,80 +380,22 @@ export default {
   margin: -10rpx 0 45rpx;
 }
 
-.detail-card-toggle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-top: 18rpx;
-}
-
 .detail-traceability .detail-label {
   width: auto;
 }
 
-.detail-section-header {
-  padding: 30rpx 24rpx 20rpx 46rpx;
-  border-bottom: 1rpx solid #55555526;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .detail-section-title {
+  padding: 30rpx 46rpx;
+  border-bottom: 1rpx solid #55555526;
   font-size: 35rpx;
   font-weight: 900;
 }
 
-.detail-section-actions {
-  display: flex;
-  align-items: center;
-  gap: 12rpx;
-}
-
-.detail-section-action {
-  font-size: 26rpx;
-  color: #59a8f2;
-  padding: 4rpx 6rpx;
-  display: flex;
-  align-items: center;
-  gap: 6rpx;
-}
-
-.detail-section-action.active {
-  color: #2c69ff;
-  font-weight: 600;
-}
-
 .detail-timeline {
   margin-top: 20rpx;
   padding-bottom: 50rpx;
 }
 
-.detail-graph-placeholder {
-  margin: 16rpx 20rpx 0;
-  background: #fff;
-  border-radius: 14rpx;
-  font-size: 24rpx;
-  text-align: center;
-  color: #97a0ae;
-  padding: 120rpx 20rpx;
-}
-
-.detail-timeline-toolbar {
-  display: flex;
-  gap: 16rpx;
-  padding: 20rpx 32rpx 10rpx;
-}
-
-.detail-toolbar-btn {
-  padding: 8rpx 18rpx;
-  border: 1rpx solid #d8dbe0;
-  border-radius: 999rpx;
-  color: #666;
-  font-size: 24rpx;
-  background: #fff;
-}
-
 .detail-timeline-item {
   position: relative;
   display: flex;
@@ -616,13 +442,6 @@ export default {
   border-bottom: 1rpx solid #55555526;
 }
 
-.detail-title-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 16rpx;
-}
-
 .detail-title {
   font-size: 32rpx;
   color: #333;
@@ -632,56 +451,33 @@ export default {
   font-weight: 800;
 }
 
-.detail-item-toggle {
-  flex-shrink: 0;
-  padding: 6rpx 12rpx;
-  border: 1rpx solid #d8dbe0;
-  border-radius: 999rpx;
-  font-size: 22rpx;
-  color: #666;
-  display: flex;
-  align-items: center;
-  gap: 6rpx;
+.detail-desc,
+.detail-extra {
+  margin-top: 6rpx;
+  font-size: 30rpx;
+  color: #727a86;
 }
 
-.detail-info-row {
+.detail-extra {
   display: flex;
-  margin-top: 10rpx;
-  font-size: 28rpx;
-  color: #444;
-}
-
-.detail-info-label {
-  color: #666;
-  flex-shrink: 0;
-}
-
-.detail-info-value {
-  color: #333;
-  word-break: break-all;
+  align-items: center;
+  font-size: 26rpx;
 }
 
-.detail-tag-row {
+.detail-extra-item {
+  flex: 1;
   display: flex;
-  flex-wrap: wrap;
-  gap: 10rpx;
-  margin-top: 8rpx;
-  padding-left: 130rpx;
+  align-items: center;
 }
 
-.detail-tag {
-  background: #fff7df;
-  color: #ecb640;
-  border-radius: 8rpx;
-  padding: 5rpx 14rpx;
-  font-size: 22rpx;
-  border: 1rpx solid #f3d9a1;
+.detail-extra-item:nth-child(2) {
+  margin-left: 20rpx;
 }
 
-.detail-tag-region {
-  background: #f5f5f5;
-  color: #999;
-  border: 1rpx solid #d8dbe0;
+.detail-title,
+.detail-desc,
+.detail-extra {
+  padding-right: 20rpx;
 }
 
 .detail-text-red {