wx-qhb/pageC/myPackage/component/packageCard.vue

<template>
  <view class="card" @click="$emit('toInformation', itemInfo)">
    <view class="top-detail">
      <view class="top-left">
        <view class="_label-1" v-if="itemInfo.mall_order_id > 0">
          {{ i18n.purchase }}
        </view>
        <view class="_label-2" v-else-if="itemInfo.mall_order_id == 0">
          {{ i18n.selfPost }}
        </view>
        <view class="order-num">
          <text>{{ i18n.OrderNumber }}：</text>
          <text style="font-size: 24rpx">{{ itemInfo.order_no }}</text>
        </view>
      </view>
      <view class="top-right">
        {{ itemInfo.status_text }}
      </view>
    </view>
    <view class="content-center">
      <view class="center-left-right">
        <view class="address"> {{ itemInfo.from_province_name || "" }} </view>
        <view class="name"> {{ itemInfo.from_name }} </view>
      </view>
      <image class="arrow" src="../../../static/mine/337.png" mode=""></image>
      <view class="center-left-right">
        <view class="address"> {{ itemInfo.to_province_name || "" }} </view>
        <view class="name"> {{ itemInfo.to_name }} </view>
      </view>
    </view>
    <view class="price" v-if="itemInfo.status == 'unpaid'">
      <text style="font-size: 24rpx; color: #333">{{ i18n.total }}</text>
      <view style="color: #f83224; font-weight: 600">
        <text style="font-size: 20rpx">￥</text>
        <text>{{ itemInfo.gap_price.split(".")[0] }}</text
        >.
        <text style="font-size: 20rpx">{{
          itemInfo.gap_price.split(".")[1]
        }}</text>
      </view>
    </view>
    <view class="card-bottom">
      <view class="package-weight">
        <text>{{ i18n.Parcelweight }}：</text>
        <text>{{ Number(itemInfo.actual_weight) }}kg</text>
      </view>
      <view class="btn-list">
        <button
          class="btn-2"
          v-show="
            itemInfo.status == 'domestic_delivered' ||
            itemInfo.status == 'imperfect' ||
            itemInfo.status == 'overseas_undelivered' ||
            itemInfo.status == 'unpaid' ||
            itemInfo.status == 'group_unpaid' ||
            itemInfo.status == 'domestic_received'
          "
          @click.stop="$emit('freeze', itemInfo)"
        >
          {{ itemInfo.is_frozen == 0 ? i18n.Frozen : i18n.recover }}
        </button>
        <button
          class="btn-2"
          v-show="
            itemInfo.status == 'domestic_delivered' ||
            itemInfo.status == 'overseas_undelivered' ||
            itemInfo.status == 'overseas_delivered' ||
            itemInfo.status == 'packaging'
          "
          @click.stop="$emit('toInformation', itemInfo)"
        >
          {{ i18n.details }}
        </button>
        <button
          class="btn-1"
          v-show="
            itemInfo.status == 'unpaid' || itemInfo.status == 'group_unpaid'
          "
          @click.stop="toPayment"
        >
          {{ i18n.payment }}
        </button>
        <button
          class="btn-1"
          @click.stop="toSending"
          v-show="
            itemInfo.type == 'mall_order' &&
            itemInfo.status == 'domestic_undelivered'
          "
        >
          {{ i18n.mail }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    itemInfo: {
      typeof: Object,
      default: {},
    },
    language: {
      typeof: String,
      default: "",
    },
  },
  computed: {
    orderDetail() {
      if (this.itemInfo.orderStatus == 0) {
        return "待平台收货";
      } else if (this.itemInfo.orderStatus == 1) {
        return "待付款";
      } else if (this.itemInfo.orderStatus == 2) {
        return "待发货";
      } else if (this.itemInfo.orderStatus == 3) {
        return "拼包中";
      } else if (this.itemInfo.orderStatus == 4) {
        return "待寄件";
      }
    },
    i18n() {
      return this.$t("index");
    },
  },
  data() {
    return {};
  },
  methods: {
    toPayment() {
      uni.navigateTo({
        url: `/pageD/paymentOrder/paymentOrder?money=${this.itemInfo.gap_price}&weight=${this.itemInfo.actual_weight}&packageType=${this.itemInfo.goods[0].type_text}&num=${this.itemInfo.goods[0].number}&orderid=${this.itemInfo.id}&type=${this.itemInfo.type}`,
      });
    },
    toSending() {
      uni.navigateTo({
        url: "/pageD/sending/sending?orderId=" + this.itemInfo.id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  padding: 28rpx 20rpx 0;
  background-color: #fff;
  border-radius: 16rpx;
  margin-top: 20rpx;

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

    .top-left {
      display: flex;
      align-items: center;

      ._label-1 {
        padding: 4rpx 8rpx;
        background-color: #ff1515;
        border-radius: 4rpx;
        color: #fff;
        font-size: 20rpx;
        margin-right: 10rpx;
      }

      ._label-2 {
        padding: 4rpx 8rpx;
        background-color: #ff6700;
        border-radius: 4rpx;
        color: #fff;
        font-size: 20rpx;
        margin-right: 10rpx;
      }

      .order-num {
        font-size: 26rpx;
        color: #333333;
      }
    }

    .top-right {
      color: #f83224;
      font-size: 26rpx;
    }
  }

  .content-center {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 44rpx;
    margin-bottom: 40rpx;

    .arrow {
      width: 130rpx;
      height: 10rpx;
    }

    .center-left-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .address {
        font-weight: 600;
      }

      .name {
        font-size: 24rpx;
        color: rgba(34, 34, 34, 0.7);
        margin-top: 10rpx;
      }
    }
  }

  .price {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 28rpx;
  }

  .card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0 28rpx;
    border-top: 2rpx solid rgba(151, 151, 151, 0.2);

    .package-weight {
      font-size: 26rpx;
      color: #444444;
    }

    .btn-list {
      display: flex;

      .btn-1 {
        font-size: 28rpx;
        color: #fff;
        // border: 2rpx solid #f83224;
        background-color: #f83224;
        margin: 0;
        border-radius: 34rpx;
        min-width: 132rpx;
        margin-left: 20rpx;
        height: 68rpx;
        line-height: 68rpx;
      }

      .btn-2 {
        font-size: 28rpx;
        color: #222;
        border: 2rpx solid rgba(151, 151, 151, 0.7);
        background-color: #fff;
        margin: 0;
        border-radius: 34rpx;
        padding: 0;
        min-width: 132rpx;
        margin-left: 20rpx;
        padding: 0 20rpx;
        height: 68rpx;
        line-height: 68rpx;
      }
    }
  }
}
</style>