applet/pages/order/logisticsNew.vue

<template>
  <view class="container">
    <!-- 包裹选项卡 -->
    <view class="packAge" v-if="packAgeList.length">
      <scroll-view scroll-X="true" class="packAge-scoll">
        <view
          class="every"
          :class="[
            currentIndex == index ? 'activeTab' : '',
            packAgeList.length == 1 ? 'one' : '',
          ]"
          v-for="(item, index) in packAgeList"
          :key="index"
          @click="changeTab(item, index)"
        >
          包裹{{ index + 1 }}
        </view>
      </scroll-view>
    </view>

    <!-- 商品信息 -->
    <view class="goods">
      <view class="title"> 商品信息 </view>
      <view
        class="goods-box"
        v-for="(item, index) in detail.packageItems || []"
        :key="index"
      >
        <view class="goods-img">
          <image :src="item.productCover" mode="aspectFill"></image>
        </view>
        <view class="goods-info">
          <view class="label">{{ item.productTitle }}</view>
          <view class="box sku-box">
            <view class="sku">
              {{ item.skuSetName }}
            </view>
            <!-- <view class="sku num"> x {{ item.number }} </view> -->
          </view>
          <view class="box">
            <view class="u-FFF u-font36 priceColor">
              <!-- <rich-text
                :nodes="$mUtil.priceBigSmall(item.sale_price)"
              ></rich-text> -->
            </view>
            <view class="number"> 发货数量 x {{ item.number }} </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 物流信息 -->
    <view class="logistics" v-if="detail.packageExpressVo">
      <view class="title"> 物流信息 </view>
      <view class="box">
        <text>物流公司：</text>
        <text>{{ detail.packageExpressVo.expressName }}</text>
      </view>
      <view class="box">
        <text>物流单号：</text>
        <text>{{ detail.packageExpressVo.logisticCode }}</text>
      </view>
    </view>

    <!-- 物流记录 -->
    <view class="">
      <view class="record"> 物流记录 </view>
      <view class="shipping u-bg-fff">
        <view class="ul u-plr30" v-for="(item, index) in shiplist" :key="index">
          <view class="li">
            <view class="mmmm">
              <view
                class="yuan"
                :class="[
                  index == 0 ? 'act' : '',
                  index == shiplist.length - 1 ? 'end' : '',
                ]"
              >
              </view>
            </view>
            <view class="desc">
              <view class="u-font26 u-1A1A1A">{{ item.acceptStation }}</view>
              <view class="u-999 u-font24 u-mt10">{{ item.acceptTime }}</view>
            </view>
          </view>
        </view>
        <noData
          v-if="shiplist.length == 0"
          :config="{ top: 20, content: '暂无物流数据~' }"
        ></noData>
      </view>
    </view>
    <view class="floatBottom" v-if="detail.packageStatus == 0">
      <button class="u-btn-two u-br-f00 u-FF0000" @click="sureGetOrder">
        确认收货
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
  shopOrderList_Api,
  selectExpress_Api,
  receiptPackage_Api,
} from "@/api/order";

const shiplist = ref([]);
const packAgeList = ref([]);
const currentIndex = ref(0);
const detail = ref({});

// 包裹列表
const getPackAge = (orderId, index = 0) => {
  shopOrderList_Api(orderId).then((res) => {
    if (res.code === 200) {
      packAgeList.value = res.data;
      if (index != null) detail.value = packAgeList.value[index];
      getLogistiscs(detail.value.packageId);
    }
  });
};
// 包裹切换
const changeTab = (item, index) => {
  if (currentIndex.value == index) {
    return false;
  }
  currentIndex.value = index;
  detail.value = packAgeList.value[index];
  getLogistiscs(detail.value.packageId);
};

// 物流信息
const getLogistiscs = (packageId) => {
  selectExpress_Api(packageId).then((res) => {
    if (res && res.code == 200 && res.data.traces) {
      shiplist.value = res.data.traces.reverse();
    }
  });
};

const sureGetOrder = () => {
  uni.showModal({
    title: "是否确认收货？",
    content: "该包裹确认收货后，将无法撤销",
    success: (res) => {
      if (res.confirm) {
        console.log("用户点击确定");
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        receiptPackage_Api({
          orderId: detail.value.orderId,
          packageId: detail.value.packageId,
        })
          .then((res) => {
            uni.hideLoading();
            if (res && res.code == 200) {
              uni.showToast({
                title: "确认收货成功",
                icon: "success",
              });
              setTimeout(() => {
                getPackAge(detail.value.orderId, currentIndex.value);
              }, 500);
            }
          })
          .catch((err) => {
            // uni.hideLoading();
          });
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};

onLoad((options) => {
  if (options.id) {
    currentIndex.value = options.index;
    getPackAge(options.id, options.index);
  }
});
</script>

<style lang="scss">
.container {
  padding-bottom: 170rpx;
}
// 包裹选项卡
.packAge {
  width: 100%;
  height: 100rpx;
  // margin-bottom: 20rpx;
  padding-left: 30rpx;
  line-height: 100rpx;
  background-color: #fff;

  .packAge-scoll {
    width: 100%;
    height: 100%;
    white-space: nowrap;
  }

  .every {
    display: inline-block;
    width: 180rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    border: 1rpx solid #fa6138;
    border-right: none;
    // border-radius: 10rpx;

    &:first-child {
      border-right: none;
      border-radius: 10rpx 0 0 10rpx;
    }

    &:last-child {
      border-right: 1rpx solid #fa6138;
      border-radius: 0 10rpx 10rpx 0;
    }

    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 20rpx;
      vertical-align: middle;
    }
  }

  .activeTab {
    background-color: #fa6138;
    color: #fff;
  }

  .one {
    &:first-child {
      border-radius: 10rpx;
    }
  }
}

.goods {
  padding: 30rpx;
  padding-bottom: 10rpx;
  background-color: #fff;

  .goods-box {
    display: flex;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f2f2f2;

    .goods-img {
      width: 150rpx;
      height: 150rpx;
      margin-right: 20rpx;
      border-radius: 20rpx;
      flex-shrink: 0;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .goods-info {
      flex: 1;
      width: 0;

      .label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #1a1a1a;
        margin-bottom: 10rpx;
      }

      .box {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .sku {
          font-size: 22rpx;
          color: #999;
          margin-right: 10rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .priceColor {
          color: #fa6138;
          font-weight: bold;
        }

        .num {
          flex-shrink: 0;
        }

        .number {
          font-size: 22rpx;
          flex-shrink: 0;
        }
      }

      .sku-box {
        margin-bottom: 20rpx;
      }
    }
  }
}

.title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.logistics {
  padding: 30rpx;
  padding-bottom: 10rpx;
  background-color: #fff;

  .box {
    padding-left: 30rpx;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.record {
  padding: 30rpx;
  padding-bottom: 10rpx;
  font-size: 30rpx;
  font-weight: bold;
  background-color: #fff;
}

.shipping {
  width: 100%;
  margin: 0 auto;
  background-color: #ffffff;

  .linehh {
    position: absolute;
    width: 2rpx;
    margin-left: 16rpx;
    border-left: 2rpx dotted #bec2cb;
  }

  .ul {
    .li {
      width: 100%;
      display: flex;
      height: auto;
      margin-top: 2rpx;

      .state {
        padding: 20rpx 0rpx;

        &.act {
          color: #fa6138;
        }

        .timeday {
          font-size: 28upx;
        }

        .timeh {
          font-size: 24upx;
        }
      }

      .mmmm {
        position: relative;
        display: flex;
        padding: 0rpx 32rpx 0rpx 36rpx;
        margin-top: 22rpx;

        .yuan {
          position: absolute;
          left: 26rpx;
          width: 25rpx;
          height: 25rpx;
          background: #dedede;
          border-radius: 50%;
          border: 3rpx solid #f2f2f2;

          &.act {
            background-color: #fa6138;
            width: 44rpx;
            height: 44rpx;
            margin-left: -10rpx;
          }
        }
      }

      .desc {
        width: 74%;
        padding: 20rpx 0rpx;
        margin-left: 22rpx;
      }
    }
  }

  &:deep(.no-data-view) {
    margin-top: 0 !important;
  }
}
.floatBottom {
  width: 750rpx;
  background: #ffffff;
  padding: 30rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
}
</style>