jsm-mall-h5-front/src/components/logistics2/common-logistics.vue

<template>
  <view class="bg-white">
    <view class="common-logistics">
      <view class="logistic-item" v-for="(item, index) in logisticsData" :key="index">
        <view class="total-wrap">
          <view class="item-container">
            <view class="item-container-center">
              <view class="tag-container">
                <view class="item-tag-container">
                  <image
                    class="item-tag"
                    :src="
                      index == 0
                        ? '/static/mine/logistics/active-line-state.png'
                        : '/static/mine/logistics/line-state.png'
                    "
                    mode="scaleToFill"
                  ></image>
                </view>
              </view>
              <view class="line-container" v-if="index !== logisticsData.length - 1">
                <view class="line"></view>
              </view>
            </view>
            <view class="item-container-right">
              <view class="item-title text-dm text-bold" :class="index == 0 ? 'text-1A1A1A' : 'text-808080'"
                >{{ item.title }}<text>{{ item.time }}</text></view
              >
              <view class="item-desc text-dm" :class="index == 0 ? 'text-1A1A1A' : 'text-999999'">
                {{ item.content }}
                <text
                  v-for="(url, index_) in (item.imgSrc || '').split(',').filter(u => u != '')"
                  :key="index_"
                  style="margin-left: 10px; color: blue"
                  @click="downloadFile(url)"
                  >{{ `附件${index_ + 1}` }}</text
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    logisticsData: {
      type: [Object, Array]
    }
  },
  filters: {},
  computed: {},
  methods: {
    downloadFile(url) {
      console.log(url)
      return new Promise((resolve, reject) => {
        window.open(url, '_blank')
        resolve(true)
        // 提取文件名和类型
        // const filename = url.split('/').pop().split('?')[0] // 获取文件名
        // const fileExtension = filename.split('.').pop().toLowerCase() // 获取文件扩展名

        // // H5环境下下载
        // const link = document.createElement('a')
        // link.href = url
        // link.download = `${filename}.${fileExtension}` // 设置下载文件名
        // document.body.appendChild(link)
        // link.click()
        // document.body.removeChild(link)

        // // 判断当前平台
        // const platform = uni.getSystemInfoSync().platform
        // // 使用uni.downloadFile进行文件下载
        // uni.downloadFile({
        //   url: url,
        //   header: {
        //     'Content-Type': 'application/x-www-form-urlencoded'
        //   },
        //   success: res => {
        //     if (res.statusCode === 200) {
        //       // H5环境下下载
        //       const link = document.createElement('a')
        //       link.href = res.tempFilePath
        //       link.download = `${filename}.${fileExtension}` // 设置下载文件名
        //       document.body.appendChild(link)
        //       link.click()
        //       document.body.removeChild(link)
        //     } else {
        //       reject('Download failed: ' + res.statusCode)
        //     }
        //   },
        //   fail: err => {
        //     reject('Download error: ' + err)
        //   }
        // })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('@/components/logistics/main.css');

.common-logistics {
  height: auto;
  box-sizing: border-box;
  background: #ffffff;
}

.item-container {
  width: 100%;
  height: auto;
  display: flex;

  .item-container-left {
    width: 120rpx;
    max-width: 120rpx;
  }

  .item-container-center {
    width: 44rpx;
    height: auto;
    display: flex;
    flex-direction: column;

    .tag-container {
      width: 44rpx;
      height: 44rpx;

      image {
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
      }

      .item-tag-container {
        width: 44rpx;
        height: 44rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .item-tag {
          width: 14rpx;
          height: 14rpx;
          border-radius: 50%;
        }
      }
    }

    .line-container {
      flex: 1;
      box-sizing: border-box;
      width: 44rpx;
      height: 100%;
      min-height: 88rpx;
      padding-top: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .line {
        width: 2rpx;
        height: 100%;
        min-height: 80rpx;
        background-color: #dcdcdc;
      }
    }
  }

  .item-container-right {
    flex: 1;
    box-sizing: border-box;
    padding: 0 10rpx 12rpx 24rpx;

    .item-title {
      width: 100%;
      line-height: 44rpx;
      color: #333333;
      font-size: 28rpx;
      text {
        font-size: 24rpx;
        color: $sec-font;
        margin-left: 12rpx;
        font-weight: normal;
      }
    }

    .item-desc {
      margin-top: 10rpx;
      width: 100%;
      min-height: 30rpx;
      line-height: 32rpx;
      word-wrap: break-word;
      word-break: normal;
    }

    .item-time {
      margin-top: 12rpx;
      width: 100%;
      height: 34rpx;
      line-height: 34rpx;
      font-size: 24rpx;
    }
  }
}

.line-state {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
}

.take-space {
  width: 100%;
  height: 80rpx;
}

.text-1A1A1A {
  color: #1a1a1a;
}

.text-999999 {
  color: #999999;
}

.text-808080 {
  color: #808080;
}
</style>