huarun/traceCodePackages/traceabilityCodeQuery/pages/detail/index.vue

<template>
  <Water></Water>
  <view class="detail-page" :style="{ height: pageHeight }" v-if="!!data && !loading">
    <view class="detail-card detail-bg" :style="{ backgroundImage: 'url(' + bg + ')' }">
      <view class="detail-drug-title">{{ data.physicName }}</view>
      <view class="detail-row detail-traceability">
        <view class="detail-label">追溯码：</view>
        <view class="detail-value detail-wrap">{{
          formatTraceCode(traceCode)
        }}</view>
        <view class="detail-copy-btn" @click="copy(traceCode)">
          <image src="../../../static/images/copy.png" mode="scaleToFill"
            :style="{ width: '30rpx', height: '30rpx' }" />
        </view>
      </view>

      <view class="detail-row detail-baseline">
        <view class="detail-label">生产企业：</view>
        <view class="detail-value detail-wrap detail-company-value" :class="{ 'detail-clamp': !isExpanded }"
          :style="{ marginBottom: needToggle ? '40rpx' : undefined }" id="companyValue">
          <text>{{ data.produceEntName }}</text>
        </view>
        <text v-if="needToggle" class="detail-expand-tag" @click="toggleExpand">{{ isExpanded ? "收起" : "展开" }}</text>
      </view>
      <view class="detail-row">
        <view class="detail-label">批准文号：</view>
        <view class="detail-value">{{ data.approveNo }}</view>
      </view>
      <view class="detail-row">
        <view class="detail-label">生产日期：</view>
        <view class="detail-value">{{ data.produceDate }}</view>
      </view>
      <view class="detail-row">
        <view class="detail-label">产品批号：</view>
        <view class="detail-value">{{ data.produceBatchNo }}</view>
      </view>
      <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">
        <view class="detail-label">包装规格：</view>
        <view class="detail-value">{{ data.prepnSpec }}</view>
      </view>
      <view class="detail-row">
        <view class="detail-label">有效期至：</view>
        <view class="detail-value">{{ data.validEndDate }}</view>
      </view>
    </view>

    <view class="detail-timeline detail-bg" :style="{ backgroundImage: 'url(' + bg + ')' }">
      <view class="detail-section-title">扫码跟踪</view>
      <view class="detail-timeline-item" :class="{ 'detail-timeline-item-first': i === 0 }"
        v-for="(value, i) in data.enterpriseList">
        <view class="detail-left">
          <view class="detail-dot detail-fill"></view>
          <view class="detail-line" v-if="i < data.enterpriseList.length - 1"></view>
        </view>
        <view class="detail-right">
          <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">
              <image src="../../../static/images/warehousing.png" mode="scaleToFill"
                :style="{ width: '34rpx', height: '34rpx', marginTop: '4rpx' }" />
              <text>{{ value.inBoundTypeName }}：{{
                formatDate(value.inBoundBillsTime)
                }}</text>
            </view>
            <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>
      <!-- <view class="detail-timeline-item">
        <view class="detail-left">
          <view class="detail-dot"></view>
          <view class="detail-line"></view>
        </view>
        <view class="detail-right">
          <view class="detail-title">丰沃达医药物流(安徽)有限公司</view>
          <view class="detail-desc">批发企业-坐标：安徽省，合肥市</view>
          <view class="detail-extra">
            <view class="detail-extra-item detail-text-red">
              <text>退货入库：2025-12-12</text>
            </view>
            <view class="detail-extra-item">销售出库：2025-12-12</view>
          </view>
        </view>
      </view>
      <view class="detail-timeline-item">
        <view class="detail-left">
          <view class="detail-dot"></view>
          <view class="detail-line"></view>
        </view>
        <view class="detail-right">
          <view class="detail-title"
            >安庆市百姓缘东苑连锁有限公司龙眠山路店</view
          >
          <view class="detail-desc"
            >零售企业-坐标：安徽省，安庆市，宜秀区，高店乡，安徽省，安庆市，宜秀区，高店乡，安徽省，安庆市，宜秀区，高店乡</view
          >
        </view>
      </view>
      <view class="detail-timeline-item">
        <view class="detail-left">
          <view class="detail-dot"></view>
        </view>
        <view class="detail-right" :style="{ borderBottom: 'none' }">
          <view class="detail-title"
            >安庆市百姓缘东苑连锁有限公司龙眠山路店</view
          >
          <view class="detail-desc"
            >零售企业-坐标：安徽省，安庆市，宜秀区，高店乡</view
          >
          <view class="detail-extra">
            <view class="detail-extra-item">
              <text>无入库信息</text>
            </view>
            <view class="detail-extra-item">销售出库：2025-12-12</view>
          </view>
        </view>
      </view> -->
    </view>
  </view>
  <view class="detail-page-empty" :style="{ height: pageHeight }" v-if="!data && !loading">
    <image src="../../../static/images/empty.png" mode="scaleToFill" :style="{ width: '264rpx', height: '200rpx' }" />
    <text :style="{
      fontSize: '24rpx',
      color: '#99a1ad',
      marginTop: '60rpx',
      textAlign: 'center',
    }">所查询药品所在生产企业尚未纳入扫码范围，后续将进一步扩大，敬请期待</text>
  </view>
  <view class="detail-page-empty" :style="{ height: pageHeight }" v-if="loading">
    <image src="../../../static/images/loading.png" mode="scaleToFill" :style="{ width: '50rpx', height: '50rpx' }"
      class="detail-loading" />
  </view>
</template>

<script>
import bg from "../../../static/images/bg.png";
import { formatDate } from "../../../utils/utils.js";
import request from '../../../request/index.js'
import Water from "@/components/water/water.vue";
export default {
  components: {
    Water,
  },
  data() {
    return {
      data: null,
      loading: true,
      statusBarHeight: 20,
      traceCode: "",
      pageHeight: 0,
      bg,
      isExpanded: true,
      needToggle: false,
    };
  },
  onLoad(options) {
    const info = uni.getSystemInfoSync();
    this.statusBarHeight = info.statusBarHeight || 20;
    this.pageHeight = (info.windowHeight && info.windowHeight + "px") || "100%";
    if (options.traceCode) {
      this.traceCode = options.traceCode;
    }
    this.getData(options.traceCode);
  },
  onReady() {
    this.$nextTick(() => {
      const info = uni.getSystemInfoSync();
      const lineHeightPx = (info.windowWidth / 750) * 40;
      this.isExpanded = true; // 展开测量高度
      uni
        .createSelectorQuery()
        .in(this)
        .select("#companyValue")
        .boundingClientRect((rect) => {
          if (!rect || !lineHeightPx) return;
          const lines = Math.round(rect.height / lineHeightPx);
          this.needToggle = lines > 2;
          this.isExpanded = !this.needToggle;
        })
        .exec();
    });
  },
  methods: {
    formatDate(date) {
      return formatDate({ date }, "YYYY-MM-DD");
    },
    getRegion(value = {}) {
      const { provinceDesc, cityDesc, areaDesc } = value;
      return (
        [provinceDesc, cityDesc, areaDesc].filter(Boolean).join("，") || ""
      );
    },
    getData(traceCode) {
      request('/bills/scanCode', {
        tracCode: traceCode,
        path: '/traceabilityCodeQuery/pages/detail/index.vue',
      }).then(res => {
        if (res.code == 200) {
          const _data = res.data;
          this.data = _data || null;
          if (
            typeof _data === "object" &&
            Object.values(_data).filter((i) => !!i).length == 0
          ) {
            this.data = null;
          }
          this.loading = false;
        } else {
          uni.showToast({ title: "查询失败", icon: "none" });
        }
      })
    },
    copy(text) {
      const data = String(text || this.traceCode);
      uni.setClipboardData({
        data,
        success: () => {
          console.log('packages/traceabilityCodeQuery/pages/detail/index.vue' + 'storage' + 'clipboardData');
          uni.showToast({
            title: "已复制追溯码",
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
    toggleExpand() {
      if (!this.needToggle) return;
      this.isExpanded = !this.isExpanded;
    },
    formatTraceCode(traceCode) {
      return String(traceCode || "")
        .replace(/(.{5})/g, "$1 ")
        .trim();
    },
  },
};
</script>

<style>
.detail-bg {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}

.detail-page {
  box-sizing: border-box;
  background: rgb(226 226 226);
  padding-bottom: 50rpx;
  overflow: auto;
}

.detail-page-empty {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 136rpx 280rpx;
}

.detail-card {
  padding: 40rpx;
}

.detail-drug-title {
  font-size: 45rpx;
  font-weight: 800;
  color: #000;
  margin-bottom: 16rpx;
}

.detail-row {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 12rpx;
}

.detail-row.detail-baseline {
  align-items: baseline;
}

.detail-label {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: baseline;
  width: 150rpx;
  font-size: 28rpx;
}

.detail-value {
  display: inline-block;
  vertical-align: baseline;
  font-size: 28rpx;
}

.detail-company-value {
  line-height: 40rpx;
}

.detail-company-value.detail-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.detail-expand-tag {
  position: absolute;
  left: 150rpx;
  bottom: 0;
  color: #2c69ff;
  font-size: 28rpx;
}

.detail-value.detail-wrap {
  word-break: break-all;
  white-space: normal;
}

.detail-copy-btn {
  margin-left: 16rpx;
  display: flex;
  align-items: center;
  color: #2c69ff;
}

.detail-copy-text {
  margin-left: 6rpx;
  font-size: 26rpx;
}

.detail-traceability {
  font-size: 24rpx;
  margin: -10rpx 0 45rpx;
}

.detail-traceability .detail-label {
  width: auto;
}

.detail-section-title {
  padding: 30rpx 46rpx;
  border-bottom: 1rpx solid #55555526;
  font-size: 35rpx;
  font-weight: 900;
}

.detail-timeline {
  margin-top: 20rpx;
  padding-bottom: 50rpx;
}

.detail-timeline-item {
  position: relative;
  display: flex;
  margin-left: 36rpx;
}

.detail-timeline-item-first {
  margin-top: 20rpx;
}

.detail-left {
  position: absolute;
  top: 34rpx;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.detail-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  border: 2rpx solid #2c69ff;
}

.detail-dot.detail-fill {
  background: #2c69ff;
  border-color: #2c69ff;
}

.detail-line {
  width: 2rpx;
  flex: 1;
  background: #8face68f;
  margin-right: 5rpx;
}

.detail-right {
  flex: 1;
  padding: 20rpx 0;
  margin-left: 45rpx;
  border-bottom: 1rpx solid #55555526;
}

.detail-title {
  font-size: 32rpx;
  color: #333;
}

.detail-title.detail-bold {
  font-weight: 800;
}

.detail-desc,
.detail-extra {
  margin-top: 6rpx;
  font-size: 30rpx;
  color: #727a86;
}

.detail-extra {
  display: flex;
  align-items: center;
  font-size: 26rpx;
}

.detail-extra-item {
  flex: 1;
  display: flex;
  align-items: center;
}

.detail-extra-item:nth-child(2) {
  margin-left: 20rpx;
}

.detail-title,
.detail-desc,
.detail-extra {
  padding-right: 20rpx;
}

.detail-text-red {
  color: red;
}

.detail-loading {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>