wx-qhb/pageD/logisticsProgress/logisticsProgress.vue

<template>
  <view class="page">
    <view class="top-detail">
      <view class="title"> 发往仓库 </view>
      <image class="arrow" src="../../static/mine/339.png" mode=""></image>
      <view class="title"> 仓库打包 </view>
      <image class="arrow" src="../../static/mine/340.png" mode=""></image>
      <view class="title"> 洛杉矶 </view>
    </view>
    <view class="logistics">
      <view class="package" v-if="packageNum > 1">
        <view class="package-title">您的订单已被分成多个包裹发出：</view>
        <view class="package-list">
          <view class="package-content"
            ><image
              class="package-img"
              src="../../static/mine/356.png"
              mode="scaleToFill"
            /><view>
              <view class="title-first">包裹一</view
              ><view class="title-last">运送中</view>
            </view></view
          >
        </view>
      </view>

      <view class="warehouse-packaging" v-if="warehouse.length > 0">
        <Progress :logisticsList="warehouse" />
      </view>
      <view class="_detail-1">
        <text>已于11月24日送至平台仓库</text>
        <u-icon
          @click="putItAway"
          name="arrow-up"
          color="#666666"
          size="18"
          v-if="isShow"
        ></u-icon>
        <u-icon
          @click="putItAway"
          name="arrow-down"
          color="#666666"
          size="18"
          v-else
        ></u-icon>
      </view>
      <view class="logistics-detail" v-if="isShow">
        <view class="">
          {{ "顺丰快递" + "&nbsp;" + "|" + "&nbsp" + "订单号：" }}
          <text>JDV21093105892</text>
        </view>
        <view class="phone">
          <text @click="cope('JDV21093105892')">复制</text>
          {{ "&nbsp;" + "|" + "&nbsp" }}
          <text @click="makeCall">打电话</text>
        </view>
      </view>
      <view class="logistics-information" v-if="isShow">
        <Progress :logisticsList="logisticsList" />
      </view>
    </view>
  </view>
</template>

<script>
import Progress from "./component/progress.vue";
export default {
  components: {
    Progress,
  },
  data() {
    return {
      logisticsList: [
        {
          title: "已签收",
          time: "10:11",
          status: false,
          does: "您的快件已暂存至浦口东方万汇城北区2号楼超市店菜鸟驿站，请凭取件码及时领取。",
        },
        {
          title: "派送中",
          time: "10:11",
          status: false,
          does: "临沂市配送员【叶景瑞】 187626516732 正为您派送，感谢您的耐心等待",
        },
        {
          title: "",
          time: "10:11",
          status: false,
          does: "临沂市配送员【叶景瑞】 187626516732 正为您派送，感谢您的耐心等待",
        },
        {
          title: "运输中",
          time: "10:11",
          status: false,
          does: "快递离开******",
        },
      ],
      warehouse: [
        {
          title: "打包称重",
          time: "10:11",
          status: true,
          imageUrl: true,
          does: "商品已打包称重，待用户付款",
        },
        {
          title: "商品入库",
          time: "10:11",
          status: false,
          imageUrl: false,
          does: "商品已进入转入仓库，正在排队等待打包",
        },
      ],
      isShow: true,
      packageNum: 0, //包裹个数
    };
  },
  onLoad(options) {
    this.packageNum = options.package;
  },
  computed: {},
  methods: {
    cope(str) {
      uni.setClipboardData({
        data: str,
        success() {
          uni.showToast({
            title: "复制成功",
            icon: "none",
          });
        },
      });
    },
    makeCall() {
      uni.authorize({
        scope: "scope.makePhoneCall",
        success: () => {
          uni.makePhoneCall({
            phoneNumber: "手机号码",
            success: () => {
              console.log("拨打电话成功！");
            },
            fail: () => {
              console.error("拨打电话失败！");
            },
          });
        },
        fail: () => {
          console.error("授权失败，请允许拨打电话权限！");
        },
      });
    },
    putItAway() {
      this.isShow = !this.isShow;
    },
  },
  created() {
    uni.setNavigationBarTitle({
      title: "物流进度",
    });
  },
};
</script>

<style scoped lang="scss">
.page {
  padding: 20rpx 24rpx;
  .top-detail {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 144rpx;
    background: linear-gradient(180deg, #f6e1de 0%, #efefef 100%);
    border-radius: 16rpx 16rpx 0 0;

    .title {
      color: rgba(34, 34, 34, 0.6);
      font-size: 32rpx;
    }

    .arrow {
      width: 98rpx;
      height: 8rpx;
    }
  }

  .logistics {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx 20rpx;
    position: relative;
    top: -20rpx;
    .package {
      .package-title {
        font-size: 24rpx;
        color: #222222;
      }
      .package-list {
        display: flex;
        .package-content {
          width: 172rpx;
          height: 88rpx;
          border-radius: 12rpx;
          border: 2rpx solid #ff1515;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-right: 20rpx;

          .package-img {
            width: 36rpx;
            height: 36rpx;
          }
          .title-first {
            font-size: 26rpx;
            font-weight: 600;
          }
          .title-last {
            font-size: 20rpx;
          }
        }
      }
    }

    ._detail-1 {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: #666;
      align-items: center;
      border-top: 2rpx solid rgba(151, 151, 151, 0.1);
      padding-top: 28rpx;
    }

    .logistics-detail {
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      color: #333;
      height: 104rpx;
      align-items: center;
      border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
    }

    .logistics-information {
      padding: 20rpx 0;

      .information {
        position: relative;
      }
    }
  }
}
</style>