wx-qhb/pageD/orderInformation/orderInformation.vue

<template>
  <view class="page">
    <view class="top">
      <view class="title">
        {{ orderTitle }}
      </view>
      <view class="prompt">
        {{ orderDetail }}
      </view>
    </view>
    <view class="packaging" v-if="orderStauts == 4">
      <view class="packaging-top">
        <view class="">
          {{ "普通包裹" + "&nbsp;" + "|" + "&nbsp" + "海运散货" }}
        </view>
        <view style="color: #f83224"> 拼包中 </view>
      </view>
      <view class="packaging-center">
        <view class="packaging-left">
          <view class="left-top"> 东莞仓库 </view>
          <view class="left-bottom"> 始发地 </view>
        </view>
        <image class="jiantou" src="../../static/mine/339.png" mode=""></image>
        <view class="packaging-left">
          <view class="left-top"> 澳大利亚 </view>
          <view class="left-bottom"> 目的地 </view>
        </view>
      </view>
      <view class="packaging-time">
        <view class="time">
          <text>开始时间：</text>
          <text>{{ "2024-5-25" + "&emsp;" }}</text>
        </view>
        <view class="time">
          <text>开始时间：</text>
          <text>2024-5-25</text>
        </view>
      </view>
    </view>
    <view class="photo" v-if="orderInformation.status == 'unpaid'">
      <view class="_weight">
        <text>称重重量</text>
        <text>{{ orderInformation.actual_weight }}kg</text>
      </view>
      <view class="_weight">
        <text>称重图片</text>
        <!-- <view class="_image"> </view> -->
        <image
          :src="orderInformation.weight_images"
          mode="scaleToFill"
          class="_image"
        />
      </view>
      <view class="photo-bottom">
        <text class="_text-1">需付款</text>
        <view class="price">
          <text style="font-size: 20rpx">￥</text>
          <text>{{ orderInformation.actual_price.split(".")[0] }}</text
          >.
          <text style="font-size: 20rpx">{{
            orderInformation.actual_price.split(".")[1]
          }}</text>
        </view>
      </view>
    </view>
    <view class="address">
      <view class="name-phone">
        <view class="send"> 寄 </view>
        <view class="name"> {{ orderInformation.from_name }} </view>
        <view class="phone"> {{ orderInformation.from_mobile }} </view>
      </view>
      <view class="address-detail">
        {{ orderInformation.from_full_address }}
      </view>
      <view class="name-phone">
        <view class="send"> 收 </view>
        <view class="name"> {{ orderInformation.to_name }} </view>
        <view class="phone"> {{ orderInformation.to_mobile }} </view>
      </view>
      <view class="address-detail _bottom">
        {{ orderInformation.to_full_address }}
      </view>
      <image
        style="height: 4rpx; margin-bottom: 40rpx"
        src="../../static/mine/338.png"
        mode=""
      ></image>

      <view class="_label-list" v-for="item in orderInformation.goods">
        <view class="information">
          <text class="_label">物品信息：</text>
          <text class="_value">{{ item.name }}</text>
        </view>
        <view class="information">
          <text class="_label">件数：</text>
          <text class="_value">{{ item.number }}</text>
        </view>
        <view class="information">
          <text class="_label">重量：</text>
          <text class="_value">{{ item.actual_weight }}kg</text>
        </view>
        <view class="information">
          <text class="_label">类型：</text>
          <text class="_value">{{ item.type_text }}</text>
        </view>
        <view style="display: flex">
          <text class="_label">跨境物流：</text>
          <view class="_value">
            <text
              >{{ orderInformation.transportType.name_cn + "&nbsp;" }}
            </text>
            <text> | {{ orderInformation.containerBase.name }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="num-information">
      <view class="order" style="">
        <text class="_label-1">订单编号</text>
        <view class="num">
          <text>{{ orderInformation.order_no }}</text
          >{{ "&nbsp;" + "|" + "&nbsp;"
          }}<text @click="cope(orderInformation.order_no)">复制</text>
        </view>
      </view>
      <view class="order">
        <text class="_label-1">下单时间</text>
        <view class="num">{{ orderInformation.created_at }} </view>
      </view>
      <view
        class="order"
        v-if="
          (orderInformation.status == 'overseas_undelivered' ||
            orderInformation.status == 'overseas_delivered' ||
            orderInformation.status == 'finished') &&
          orderInformation.status != 'domestic_delivered'
        "
      >
        <text class="_label-1">付款时间</text>
        <view class="num"> {{ orderInformation.paid_at }} </view>
      </view>

      <view
        class="order"
        v-if="
          (orderInformation.status == 'overseas_delivered' &&
            orderInformation.status != 'domestic_delivered') ||
          orderInformation.status == 'finished'
        "
      >
        <text class="_label-1">发货时间</text>
        <view class="num"> 2023-11-24 22:31 </view>
      </view>

      <view class="order" v-if="orderInformation.status == 'finished'">
        <text class="_label-1">签收时间</text>
        <view class="num"> 2023-11-24 22:31 </view>
      </view>
    </view>
    <view class="pay" v-if="orderInformation.status != 'domestic_delivered'">
      <text>已付</text>
      <text style="color: #f83224; font-weight: 600">123.1</text>
    </view>
    <view
      class="footer"
      v-if="
        orderInformation.status == 'domestic_delivered' ||
        orderInformation.status == 'overseas_delivered' ||
        orderInformation.status == 'finished'
      "
    >
      <button class="btn-1" @click="toLogistics">删除</button>
      <button class="btn-1" @click="toLogistics">查看物流</button>
      <button
        class="btn-2"
        @click="toPay"
        v-if="orderInformation.status == 'unpaid'"
      >
        立即付款
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderStauts: 0,
      orderTitle: "",
      orderDetail: "",
      packageId: "",
      orderInformation: {},
    };
  },
  computed: {},
  onLoad(options) {
    this.orderStauts = options.orderStatus;
    this.getDetail();
  },
  created() {},
  methods: {
    cope(str) {
      uni.setClipboardData({
        data: str,
        success() {
          uni.showToast({
            title: "复制成功",
            icon: "none",
          });
        },
      });
    },
    setStatus(num) {
      this.orderStauts = num;
    },
    toLogistics() {
      uni.navigateTo({
        url: "/pageD/logisticsProgress/logisticsProgress",
      });
    },
    toPay() {
      uni.navigateTo({
        url: "/pageD/paymentOrder/paymentOrder",
      });
    },
    getDetail() {
      uni.$u.http.get(`/api/express-order/${this.orderStauts}`).then((res) => {
        this.orderInformation = res;
        if (this.orderInformation.status == "domestic_delivered") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "商品已寄往平台，正在运输中";
          this.orderTitle = "待平台收货";
        } else if (this.orderInformation.status == "unpaid") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "商品已打包称重，等待用户付款";
          this.orderTitle = "待付款";
        } else if (this.orderInformation.status == "overseas_undelivered") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "等待平台发货";
          this.orderTitle = "待发货";
        } else if (this.orderInformation.status == "overseas_delivered") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "商品已发出，很快将发货至您的手中";
          this.orderTitle = "已发货";
        } else if (this.orderStauts == 4) {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#ffffff",
          });
          uni.setNavigationBarTitle({
            title: "拼包详情",
          });
        } else if (this.orderInformation.status == "finished") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "订单签收，交易已完成";
          this.orderTitle = "已完成";
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 24rpx;
  position: relative;

  .title {
    font-size: 44rpx;
    color: #222;
    font-weight: 600;
  }

  .prompt {
    font-size: 24rpx;
    color: rgba(34, 34, 34, 0.5);
    margin-top: 12rpx;
  }
  .packaging {
    border-radius: 16rpx;
    background-color: #fff;
    padding: 30rpx 20rpx;
    .packaging-top {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: #222;
    }
    .packaging-center {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 26rpx;
      background-color: #f5f5f5;
      border-radius: 10rpx;
      padding: 20rpx 0;
      .jiantou {
        width: 130rpx;
        height: 10rpx;
      }
      .packaging-left {
        text-align: center;
        .left-top {
          font-size: 32rpx;
          color: #222;
          font-weight: 600;
        }
        .left-bottom {
          margin-top: 10rpx;
          font-size: 24rpx;
          color: rgba(34, 34, 34, 0.5);
        }
      }
    }
    .packaging-time {
      font-size: 28rpx;
      display: flex;
      align-items: center;
      margin-top: 28rpx;
    }
  }
  .photo {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx 20rpx;
    margin-top: 20rpx;

    ._weight {
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      color: rgba(34, 34, 34, 0.8);
      margin-bottom: 32rpx;

      ._image {
        width: 160rpx;
        height: 90rpx;
        // background-color: #d8d8d8;
        border-radius: 4rpx;
      }
    }

    .photo-bottom {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      border-top: 2rpx solid rgba(151, 151, 151, 0.1);
      padding-top: 24rpx;

      .price {
        color: #f83224;
        font-weight: 600;
      }

      ._text-1 {
        font-size: 26rpx;
      }
    }
  }

  .address {
    padding: 36rpx 34rpx;
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 32rpx;

    .name-phone {
      display: flex;
      align-items: flex-end;

      .send {
        width: 40rpx;
        height: 40rpx;
        background-color: #000;
        color: #fff;
        border-radius: 50%;
        font-size: 22rpx;
        text-align: center;
        line-height: 40rpx;
      }

      .name {
        font-weight: 600;
        font-size: 30rpx;
        color: #222;
        margin-right: 28rpx;
        margin-left: 28rpx;
      }

      .phone {
        font-size: 24rpx;
        color: #777;
      }
    }

    .address-detail {
      font-size: 26rpx;
      color: #555;
      margin-top: 16rpx;
      margin-left: 60rpx;
      padding-bottom: 36rpx;
      border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
      margin-bottom: 34rpx;
    }

    ._bottom {
      border: none;
      margin-bottom: 0;
    }

    ._label-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .information {
        width: 49%;
        margin-bottom: 28rpx;
        font-size: 28rpx;
      }

      ._label {
        color: #666;
        font-size: 28rpx;
      }

      ._value {
        font-size: 28rpx;
        color: #333;
      }
    }
  }

  .num-information {
    background-color: #fff;
    border-radius: 16rpx;
    margin-top: 20rpx;
    padding: 28rpx 20rpx 2rpx 28rpx;

    .order {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      margin-bottom: 28rpx;

      ._label-1 {
        color: #666;
      }

      .num {
        color: #333;
      }
    }
  }

  .pay {
    display: flex;
    padding: 22rpx 28rpx;
    justify-content: space-between;
    margin-top: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
  }

  .footer {
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 146rpx;
    padding-top: 20rpx;

    .btn-1 {
      height: 76rpx;
      padding: 0;
      margin: 0;
      font-size: 28rpx;
      color: #222;
      min-width: 188rpx;
      background-color: #fff;
      border-radius: 38rpx;
      border: 2rpx solid #979797;
      margin-right: 20rpx;
    }

    .btn-2 {
      height: 76rpx;
      padding: 0;
      margin: 0;
      font-size: 28rpx;
      color: #fff;
      min-width: 188rpx;
      background-color: #f83224;
      border-radius: 38rpx;
      margin-right: 20rpx;
    }
  }
}
</style>