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"> {{ i18n.origin }} </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"> {{ i18n.destination }} </view>
        </view>
      </view>
      <view class="packaging-time">
        <view class="time">
          <text>{{ i18n.start }}：</text>
          <text>{{
            orderInformation.containerBase.begin_date + "&emsp;"
          }}</text>
        </view>
        <view class="time">
          <text>{{ i18n.cut }}：</text>
          <text>{{ orderInformation.containerBase.end_date }}</text>
        </view>
      </view>
    </view>
    <view class="photo" v-if="orderInformation.status == 'unpaid'">
      <view class="_weight">
        <text>{{ i18n.weighingWeight }}</text>
        <text>{{ orderInformation.actual_weight }}kg</text>
      </view>
      <view class="_weight">
        <text>{{ i18n.weighingImage }}</text>
        <!-- <view class="_image"> </view> -->
        <image
          :src="orderInformation.weight_images"
          mode="scaleToFill"
          class="_image"
        />
      </view>
      <view class="photo-bottom">
        <text class="_text-1">{{ i18n.paymentRequired }}</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"> {{ i18n.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" style="background-color: #f83224; color: #fff">
          {{ i18n.putAway }}
        </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">{{ i18n.item }}：</text>
          <text class="_value">{{ item.name }}</text>
        </view>
        <view class="information">
          <text class="_label">{{ i18n.goodsNum }}：</text>
          <text class="_value">{{ item.number }}</text>
        </view>
        <view class="information">
          <text class="_label">{{ i18n.weight }}：</text>
          <text class="_value">{{ item.actual_weight }}kg</text>
        </view>
        <view class="information">
          <text class="_label">{{ i18n.typeof }}：</text>
          <text class="_value">{{ item.type_text }}</text>
        </view>
        <view style="display: flex">
          <text class="_label">{{ i18n.flow }}：</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">{{ i18n.OrderNumber }}</text>
        <view class="num">
          <text>{{ orderInformation.order_no }}</text
          >{{ "&nbsp;" + "|" + "&nbsp;"
          }}<text @click="cope(orderInformation.order_no)">{{
            i18n.cope
          }}</text>
        </view>
      </view>
      <view class="order">
        <text class="_label-1">{{ i18n.Ordertime }}</text>
        <view class="num">{{ orderInformation.created_at }} </view>
      </view>
      <view class="order" v-if="isShowPayTime">
        <text class="_label-1">{{ i18n.payTime }}</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">{{ i18n.sendTime }}</text>
        <view class="num"> {{ orderInformation.overseas_delivered_at }} </view>
      </view>

      <view class="order" v-if="orderInformation.status == 'finished'">
        <text class="_label-1">{{ i18n.signForTime }}</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"
          ? i18n.pengingPay
          : i18n.paid
      }}</text>
      <text style="color: #f83224; font-weight: 600">{{
        orderInformation.paid_amount
      }}</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'"
      >
        {{ i18n.delete }}
      </button>
      <button class="btn-1" @click="toLogistics">
        {{ i18n.checkLogistics }}
      </button>
      <button
        class="btn-1"
        @click="fillInformation"
        v-if="orderInformation.status == 'domestic_undelivered'"
      >
        {{ i18n.logisticsInformation }}
      </button>
      <button
        class="btn-2"
        @click="toPay"
        v-if="orderInformation.status == 'unpaid'"
      >
        {{ i18n.payment }}
      </button>
    </view>
    <view class="footer" v-else-if="isShowFooter">
      <button
        class="btn-1"
        @click="fillInformation"
        v-if="
          (orderInformation.type == 'group_package' ||
            orderInformation.type == 'express_order') &&
          orderInformation.status == 'domestic_undelivered'
        "
      >
        {{ i18n.logisticsInformation }}
      </button>

      <!-- <button
        class="btn-2"
        @click="toSending"
        v-if="
          orderInformation.type == 'mall_order' &&
          orderInformation.status == 'domestic_undelivered'
        "
      >
        {{ i18n.mail }}
      </button> -->
      <button
        class="btn-2"
        @click="toPay"
        v-if="
          orderInformation.status == 'unpaid' ||
          orderInformation.status == 'group_unpaid'
        "
      >
        {{ i18n.payment }}
      </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: {
    //判断是否显示付款时间
    isShowPayTime() {
      if (
        this.orderInformation.type == "group_package" ||
        this.orderInformation.type == "mall_order"
      ) {
        if (
          this.orderInformation.status == "packaging" ||
          this.orderInformation.status == "group_unpaid" ||
          this.orderInformation.status == "unpaid"
        ) {
          return false;
        } else {
          return true;
        }
      } else if (
        this.orderInformation.status == "domestic_undelivered" ||
        this.orderInformation.status == "domestic_delivered" ||
        this.orderInformation.status == "domestic_received"
      ) {
        return false;
      }
    },
    //是否显示底部按钮
    isShowFooter() {
      if (
        this.orderInformation.type == "mall_order" &&
        this.orderInformation.status == "domestic_undelivered"
      ) {
        return false;
      } else if (
        this.orderInformation.type != "mall_order" &&
        this.orderInformation.status == "domestic_undelivered"
      ) {
        return true;
      } else if (
        this.orderInformation.status == "unpaid" ||
        this.orderInformation.status == "group_unpaid"
      ) {
        return true;
      }
    },
    i18n() {
      return this.$t("index");
    },
  },
  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: this.i18n.saved,
            });
          });
      }
    },
    //去支付
    toPay() {
      uni.navigateTo({
        url: `/pageD/paymentOrder/paymentOrder?money=${this.orderInformation.pay_amount}&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.i18n.toPiattaforma;
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "unpaid") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = this.i18n.peso;
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "overseas_undelivered") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = this.i18n.waitPiattaforma;
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "overseas_delivered") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = this.i18n.prodottoInviato;
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderStauts == 4) {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#ffffff",
          });
          uni.setNavigationBarTitle({
            title: this.i18n.insiemeDetail,
          });
        } else if (
          this.orderInformation.status == "finished" ||
          this.orderInformation.status == "overseas_received"
        ) {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = this.i18n.orderCompleto;
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "domestic_received") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = this.i18n.pesoEmissione;
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "closed") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = this.i18n.orderClose;
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "refunded") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = this.i18n.orderRefund;
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "refunding") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = this.i18n.refunding;
          this.orderTitle = this.orderInformation.status_text;
        } else if (this.orderInformation.status == "domestic_undelivered") {
          //设置顶部标题栏颜色
          uni.setNavigationBarColor({
            frontColor: "#000000",
            backgroundColor: "#f4f4f4",
          });
          this.orderDetail = this.i18n.waitCommity;
          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>