wx-qhb/pageD/logisticsProgress/logisticsProgress.vue

<template>
  <view class="page">
    <view class="top-detail" v-if="packageList.length > 0">
      <view
        class="title"
        :style="currentSchedule == '发往仓库' ? 'color:#222222' : ''"
      >
        发往仓库
      </view>
      <image
        class="arrow"
        src="../../static/mine/339.png"
        v-if="currentSchedule == '发往仓库'"
        mode=""
      ></image>
      <image
        class="arrow"
        src="../../static/mine/340.png"
        v-else
        mode=""
      ></image>
      <view
        class="title"
        :style="currentSchedule == '仓库打包' ? 'color:#222222' : ''"
      >
        仓库打包
      </view>
      <image
        class="arrow"
        src="../../static/mine/339.png"
        v-if="currentSchedule == '发往国际'"
        mode=""
      ></image>
      <image
        class="arrow"
        src="../../static/mine/340.png"
        v-else
        mode=""
      ></image>
      <view
        class="title"
        :style="currentSchedule == '发往国际' ? 'color:#222222' : ''"
      >
        洛杉矶
      </view>
    </view>
    <view class="logistics" v-if="packageList.length > 0">
      <view class="package">
        <view class="package-title">您的订单已被分成以下包裹发出：</view>
        <view class="package-list">
          <view
            class="package-content"
            v-for="(item, index) in packageList"
            :key="item.id"
            @click="checkPackageDetail(item)"
            :class="{ 'select-package': item.id == packageId }"
            ><image
              class="package-img"
              src="../../static/mine/356.png"
              mode="scaleToFill"
              v-if="packageId == item.id"
            />
            <image
              src="../../static/mine/357.png"
              mode="scaleToFill"
              class="package-img"
              v-if="packageId != item.id"
            />
            <view>
              <view class="title-first"
                >包裹{{ numToUpperCase(index + 1) }}</view
              ><view class="title-last">{{ item.status }}</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="">
          {{ logisticsName + "&nbsp;" + "|" + "&nbsp" + "订单号：" }}
          <text>{{ orderNumber }}</text>
        </view>
        <view class="phone">
          <text @click="cope(orderNumber)">复制</text>
          {{ "&nbsp;" + "|" + "&nbsp" }}
          <text @click="makeCall">打电话</text>
        </view>
      </view>
      <view class="logistics-information" v-if="isShow">
        <Progress :logisticsList="logisticsList" />
      </view>
    </view>
    <view v-else class="no-content"> 暂未查询到物流包裹 </view>
  </view>
</template>

<script>
import Progress from "./component/progress.vue";
export default {
  components: {
    Progress,
  },
  data() {
    return {
      packageList: [], //包裹列表
      logisticsList: [],
      warehouse: [
        {
          title: "打包称重",
          time: "10:11",
          status: true,
          imageUrl: true,
          does: "商品已打包称重，待用户付款",
        },
        {
          title: "商品入库",
          time: "10:11",
          status: false,
          imageUrl: false,
          does: "商品已进入转入仓库，正在排队等待打包",
        },
      ],
      isShow: true,
      packageNum: 0, //包裹个数
      packageId: "", //包裹id
      logisticsName: "", //物流公司名称
      orderNumber: "", //订单编号
      currentSchedule: "", //物流当前进度
    };
  },
  onLoad(options) {
    this.packageNum = options.package;
    this.getPackageList(options.source_type, options.source_id);
    this.orderNumber = options.orderNumber;
    this.orderCurrentSchedule(options.orderStatus);
  },
  methods: {
    cope(str) {
      uni.setClipboardData({
        data: str,
        success() {
          uni.showToast({
            title: "复制成功",
            icon: "none",
          });
        },
      });
    },
    //拨打电话
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: "15550996275",
        success: () => {
          console.log("拨打电话成功！");
        },
        fail: () => {
          console.error("授权失败，请允许拨打电话权限！");
        },
      });
    },
    //订单当前进度
    orderCurrentSchedule(type) {
      if (
        type == "group_unpaid" ||
        type == "packaging" ||
        type == "imperfect" ||
        type == "domestic_undelivered" ||
        type == "domestic_delivered"
      ) {
        this.currentSchedule = "发往仓库";
      } else if (
        type == "domestic_received" ||
        type == "unpaid" ||
        type == "overseas_undelivered"
      ) {
        this.currentSchedule = "仓库打包";
      } else {
        this.currentSchedule = "发往国际";
      }
    },

    putItAway() {
      this.isShow = !this.isShow;
    },
    getPackageList(type, id) {
      uni.$u.http
        .get(`/api/express-order/logistic?source_type=${type}&source_id=${id}`)
        .then((res) => {
          if (res.length > 0) {
            this.packageId = res[0].id;
            this.getLogisticsStep(res[0]);
            this.logisticsName = res[0].logistics_company_name;
          } else {
            uni.showToast({
              title: "暂未查询到物流包裹",
              icon: "none",
            });
          }
          this.packageList = res;
        });
    },
    //数字转化大写
    numToUpperCase(num) {
      const digits = [
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
      ];
      return digits[num];
    },
    //查看物流
    checkPackageDetail(item) {
      this.packageId = item.id;
      this.getLogisticsStep(item);
      this.logisticsName = item.logistics_company_name;
    },
    //查询物流步骤
    getLogisticsStep(item) {
      uni.$u.http
        .get(
          `/api/express-order/logistic-trace?order_logistic_id=${item.id}&is_page=0`
        )
        .then((res) => {
          this.logisticsList = res;
        });
    },
  },
  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;
    }
  }
  .no-content {
    text-align: center;
    line-height: 100rpx;
    font-size: 26rpx;
    color: #c1c1c1;
  }
  .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;
        margin-top: 20rpx;
        .select-package {
          border-color: #ff1515 !important;
          color: #ff1515 !important;
        }
        .package-content {
          width: 172rpx;
          height: 88rpx;
          border-radius: 12rpx;
          border: 2rpx solid #c1c1c1;
          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;
            // color: #ff1515;
          }
          .title-last {
            font-size: 20rpx;
            // color: #ff1515;
          }
        }
      }
    }

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