demo-library/library-activity/src/views/logisticsInfo/logisticsInfo.vue

<template>
	<div class="main">
    <div class="order-detail-header">
      <span class="back" @click="toBack"></span>
    </div>
    <div class="logistics-main">
      <div class="logistics-tab">
        <span :class="tabActive === 0 ? 'active':''" @click="tabActive=0">订单1</span>
        <span :class="tabActive === 1 ? 'active':''" @click="tabActive=1">订单2</span>
      </div>
      <div class="logistics-detail">
        <div class="logistics-top">
          <p>顺丰速运 SF1629871960733</p>
          <div class="logistics-handle">
            <span @click="copyLogisticsInfo">复制</span>
            <span @click="makePhoneCall">打电话</span>
          </div>
        </div>
        <div class="log-step">
          <div class="log-step-new">
            <div class="step-new-info">
              <p>运输中 11-21  16:57</p>
              <span>查看详情</span>
            </div>
            <div class="step-new-detail">
              [鄂州市]快件离开 【湖北武昌转运中心】已发往 【湖北武汉洪山广场公司】
            </div>
          </div>
          <div class="send-to-location">
            <div class="location-info">送至 中南路8号石化大院4栋3单元201</div>
            <div class="location-detail">
              <p>张三   86-130****0000</p>
              <span>取件可出示虚拟号  156232142001-4596</span>
            </div>
          </div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
import { Toast } from 'vant'
import { reactive, computed, onMounted, getCurrentInstance, toRefs } from 'vue'
export default {
	name: 'LogisticsInfo',
  components:{ Toast },
	setup() {
		const { proxy } = getCurrentInstance()
		let data = reactive({
			tabActive: 0,
      orderType: null
		})
		onMounted(() => {
      if(proxy.$route.query.tabActive !== undefined){
        data.orderType = JSON.parse(proxy.$route.query.tabActive)
      }else{
        data.orderType = null
      }
    })
		let toBack = () => {
      if(data.orderType){
        proxy.$router.push({
          path: '/Order',
          query: {
            tabActive: data.orderType
          }
        })
      }else{
        proxy.$router.go(-1)
      }
		}
    let copyLogisticsInfo = () => {
      const logisticsInfo = 'SF1629871960733';
      if (navigator.clipboard) {
        navigator.clipboard.writeText(logisticsInfo)
          .then(() => {
            Toast('物流单号已复制');
          })
          .catch(err => {
            console.error('复制失败:', err);
          });
      } else {
        const input = document.createElement('textarea');
        input.style.position = 'fixed';
        input.style.opacity = 0;
        input.value = logisticsInfo;
        document.body.appendChild(input);
        input.select();
        document.execCommand('copy');
        document.body.removeChild(input);
        Toast('物流单号已复制');
      }
    }
    let makePhoneCall = () => {
      const phoneNumber = '95338';
      const telLink = `tel:${phoneNumber}`;
      window.open(telLink, '_self');
    }
		return {
			...toRefs(data),
			toBack,
      copyLogisticsInfo,
      makePhoneCall
		}
	}
}
</script>

<style scoped lang="scss">
.order-detail-header{
  height: 6.8rem;
  background: url('@assets/images/log-img1.png') no-repeat left top;
	background-size: contain;
  .back{
    background: url('@assets/images/back.png') no-repeat transparent;
		background-size: .5rem .5rem;
  }
}
.logistics-main{
  position: relative;
  margin-top: -3rem;
  .logistics-tab{
    position: absolute;
    right: 0;
    top: -3.5rem;
    display: flex;
    justify-content: center;
    margin: 0 .32rem .2rem .32rem;
    padding: 0 .2rem;
    background: #fff;
    box-shadow: 0px 0.03rem 0.6rem 1px rgba(0, 0, 0, 0.08);
    border-radius: 0.08rem;
    span{
      display: block;
      padding: 0 .2rem;
      height: .6rem;
      line-height: .6rem;
      font-size: .28rem;
      color: #666;
      &.active{
        font-weight: bold;
        color: #000;
      } 
    }
  }
  .logistics-detail{
    padding: 0 .32rem .32rem .32rem;
    background-color: #fff;
    border-radius: .32rem .32rem 0 0;
    .logistics-top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .28rem;
      padding: .3rem 0 .36rem 0;
      p{
        padding-left: .5rem;
        background: url('@assets/images/log-img2.png') no-repeat left center;
		    background-size: .36rem .36rem;
      }
      .logistics-handle{
        opacity: .4;
        span{
          display: inline-block;
          padding: 0 .2rem;
          height: .24rem;
          line-height: .24rem;
          &:first-child{
            border-right:  1px solid #000;
          }
        }
      }
    }
    .log-step{
      .log-step-new{
        position: relative;
        &::before{
          position: absolute;
          left: .16rem;
          top: .46rem;
          content: "";
          width: 0.01rem;
          height: 100%;
          border-left: 1px solid #ddd;
        }
        .step-new-info{
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: .24rem;
          color: #FE6902;
          p{
            background: url('@assets/images/log-img5.png') no-repeat left center;
            background-size: .32rem .32rem;
          }
          span{
            padding-right: .22rem;
            background: url('@assets/images/log-img3.png') no-repeat right center;
		        background-size: .16rem .16rem;
          }
        }
      }
      .send-to-location{
        .location-info{
          background: url('@assets/images/log-img4.png') no-repeat left center;
          background-size: .32rem .32rem;
        }
        .location-detail{
          span{
            opacity: .6;
          }
        }
      }

      .step-new-info p,
      .location-info{
        padding-left: .5rem;
        font-size: .32rem;
        font-weight: bold;
      }

      .step-new-detail,
      .location-detail{
        margin: .16rem 0 .48rem .5rem;
        padding: .18rem .18rem .18rem .24rem;
        font-size: .28rem;
        line-height: .42rem;
        background: #F6F6FB;
        border-radius: 0.08rem;
      }
    }
  }
}
</style>