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">
        <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" :class="{ 'detail-fill': i == 0 }"></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>
  </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;
  margin-top: 12rpx;
  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: 2rpx;
}

.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>