wx-qhb/pageD/orderInformation/orderInformation.vue

<template>
  <view class="page">
    <view class="top" v-if="orderInformation.type != 'group_package'">
      <view class="title">
        {{ orderTitle }}
      </view>
      <view class="prompt">
        {{ orderDetail }}
      </view>
    </view>
    <view class="packaging" v-if="orderInformation.type == 'group_package'">
      <view class="packaging-top">
        <view class="">
          {{
            orderInformation.goods[0].type_text +
            "&nbsp;" +
            "|" +
            "&nbsp" +
            orderInformation.containerBase.transport_type_name
          }}
        </view>
        <view style="color: #f83224"> {{ orderInformation.status_text }} </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">
            {{ orderInformation.containerBase.country_name }}
          </view>
          <view class="left-bottom"> 目的地 </view>
        </view>
      </view>
      <view class="packaging-time">
        <view class="time">
          <text>开始时间：</text>
          <text>{{
            orderInformation.containerBase.begin_date + "&emsp;"
          }}</text>
        </view>
        <view class="time">
          <text>截止时间：</text>
          <text>{{ orderInformation.containerBase.end_date }}</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.gap_price.split(".")[0] }}</text
          >.
          <text style="font-size: 20rpx">{{
            orderInformation.gap_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_cn }}</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 != 'domestic_undelivered' &&
          orderInformation.status != 'domestic_delivered' &&
          orderInformation.status != 'domestic_received'
        "
      >
        <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"> {{ orderInformation.domestic_delivered_at }} </view>
      </view>

      <view class="order" v-if="orderInformation.status == 'finished'">
        <text class="_label-1">签收时间</text>
        <view class="num"> {{ orderInformation.overseas_received_at }} </view>
      </view>
    </view>

    <view
      class="pay"
      v-if="
        orderInformation.status != 'group_unpaid' &&
        orderInformation.status != 'unpaid'
      "
    >
      <text>{{
        orderInformation.status == "group_unpaid" ||
        orderInformation.status == "unpaid"
          ? "待付"
          : "已付"
      }}</text>
      <text style="color: #f83224; font-weight: 600">{{
        orderInformation.actual_price || orderInformation.estimated_price
      }}</text>
    </view>
    <view
      class="footer"
      v-if="
        orderInformation.status == 'domestic_delivered' ||
        orderInformation.status == 'overseas_delivered' ||
        orderInformation.status == 'finished'
      "
    >
      <button
        class="btn-1"
        @click="toLogistics"
        v-if="orderInformation.status == 'finished'"
      >
        删除
      </button>
      <button class="btn-1" @click="toLogistics">查看物流</button>
      <button
        class="btn-1"
        @click="fillInformation"
        v-if="orderInformation.status == 'domestic_undelivered'"
      >
        填写物流信息
      </button>
      <button
        class="btn-2"
        @click="toPay"
        v-if="orderInformation.status == 'unpaid'"
      >
        立即付款
      </button>
    </view>
    <view
      class="footer"
      v-else-if="
        orderInformation.status == 'domestic_undelivered' ||
        orderInformation.status == 'unpaid' ||
        orderInformation.status == 'group_unpaid'
      "
    >
      <button
        class="btn-1"
        @click="fillInformation"
        v-if="
          orderInformation.type == 'mall_order' &&
          orderInformation.status == 'domestic_undelivered'
        "
      >
        填写物流信息
      </button>

      <button
        class="btn-2"
        @click="toSending"
        v-if="
          (orderInformation.type == 'group_package' ||
            orderInformation.type == 'express_order') &&
          orderInformation.status == 'domestic_undelivered'
        "
      >
        去寄件
      </button>
      <button
        class="btn-2"
        @click="toPay"
        v-if="
          orderInformation.status == 'unpaid' ||
          orderInformation.status == 'group_unpaid'
        "
      >
        立即付款
      </button></view
    >
    <Fill :show="show" @close="close" />
  </view>
</template>

<script>
import Fill from "./component/fill.vue";
export default {
  components: {
    Fill,
  },
  data() {
    return {
      orderStauts: 0,
      orderTitle: "",
      orderDetail: "",
      packageId: "",
      orderInformation: {},
      show: false,
    };
  },
  computed: {},
  onLoad(options) {
    this.orderStauts = options.orderStatus;
    this.getDetail();
  },
  onShow() {
    this.getDetail();
  },
  created() {},
  methods: {
    cope(str) {
      uni.setClipboardData({
        data: str,
        success() {
          uni.showToast({
            title: "复制成功",
            icon: "none",
          });
        },
      });
    },

    //去寄件
    toSending() {
      uni.navigateTo({
        url: "/pageD/sending/sending?orderId=" + this.orderInformation.id,
      });
    },

    setStatus(num) {
      this.orderStauts = num;
    },
    //查看物流进度
    toLogistics() {
      uni.navigateTo({
        url: "/pageD/logisticsProgress/logisticsProgress",
      });
    },

    //填写物流信息
    fillInformation() {
      this.show = true;
    },

    //关闭弹窗
    close(value) {
      this.show = false;
      if (value.expressCode) {
        uni.$u.http
          .post(`/api/express-order/delivery/${this.orderInformation.id}`, {
            domestic_logistics_company_code: value.expressCode,
            domestic_logistics_no: value.expressNum,
          })
          .then((res) => {
            this.getDetail();
            uni.showToast({
              title: "已保存",
            });
          });
      }
    },
    //去支付
    toPay() {
      uni.navigateTo({
        url: `/pageD/paymentOrder/paymentOrder?money=${this.orderInformation.gap_price}&weight=${this.orderInformation.goods[0].actual_weight}&packageType=${this.orderInformation.goods[0].type_text}&num=${this.orderInformation.goods[0].number}&orderid=${this.orderInformation.id}&type=${this.orderInformation.type}`,
      });
    },
    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 = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "unpaid") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "商品已打包称重，等待用户付款";
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "overseas_undelivered") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "等待平台发货";
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "overseas_delivered") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "商品已发出，很快将发货至您的手中";
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderStauts == 4) {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#ffffff",
          });
          uni.setNavigationBarTitle({
            title: "拼包详情",
          });
        } else if (
          this.orderInformation.status == "finished" ||
          this.orderInformation.status == "overseas_received"
        ) {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "订单签收，交易已完成";
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "domestic_received") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "等待中转称重发出";
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "closed") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "订单关闭";
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "refunded") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "订单已退款";
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "refunding") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "订单正在申请退款";
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "domestic_undelivered") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = "商品等待发货中";
          this.orderTitle = this.orderInformation.status_text;
        }
      });
    },
  },
};
</script>

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

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