VAVABUY/pages/dashboard/parcel_detail.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="订单详情" fixed border autoBack @leftClick="leftClick">
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
        </template>
      </Navbar>
      <view class="content">
        <!-- <view class="tip">
          <trans _t="订单流程" />:&nbsp;
          <trans _t="处理中" />
          <i class="icon-font icon-question2"></i>
        </view> -->
        <parcelList :item="detail" />
        <view class="order_info">
          <view class="order_no">
            <trans _t="订单号" />:
            <view class="_no">{{ detail.orderNo }}</view>
          </view>
          <view class="copy_btn">
            <up-copy :content="detail.orderNo" :notice="t('复制成功')">
              <trans _t="复制" />
            </up-copy>
          </view>
        </view>
      </view>

      <view class="list_of_details">
        <ParcelDetailParticulars
          :mapOptions="detailListMap[0]"
          :datas="
            detail
              ? {
                  ...detail.templateData,
                  act_weight:
                    detail.templateData && detail.templateData.continue_weight
                      ? detail.templateData.continue_weight
                      : 0,
                  estimate_price:
                    detail.templateData && detail.templateData.first_price
                      ? detail.templateData.first_price
                      : '0.00',
                }
              : {}
          "
        ></ParcelDetailParticulars>
      </view>
      <view class="list_of_details" v-if="detail && detail.status > 10">
        <ParcelDetailParticulars
          :mapOptions="detailListMap[1]"
          :datas="detail"
        ></ParcelDetailParticulars>
      </view>
      <view class="list_of_details" v-if="detail && detail.status > 10">
        <ParcelDetailParticulars
          :mapOptions="detailListMap[2]"
          :datas="detail"
        ></ParcelDetailParticulars>
      </view>

      <view class="list_of_details" v-if="detail && !!detail.expressNo">
        <view class="order_footer-delivery-btn"
          ><trans class="menu_text" _t="查看物流"
        /></view>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import ParcelDetailParticulars from "./components/parcel_detail_particulars";
import { SHOP_PACKAGES_DETAIL } from "@/api";
import { ref, nextTick, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import parcelList from "./components/parcel_list";
import { t } from "@/locale";
import { Moneyhtml } from "@/utils";
import { useSystemStore, useTabbarStore } from "@/store";

const useSystem = useSystemStore();
const useTabbar = useTabbarStore();
const orderid = ref("");
const detail = ref({});
const symbol = computed(() => useSystem.getSymbol);
const isOrder = ref(false);

const detailListMap = [
  {
    title: "预付费用明细",
    mapField: [
      { label: "预估费用", key: "estimate_price" },
      { label: "预估运费", key: "", unit: "" },
      { label: "预估运费重", key: "", unit: "", fontColor: "#777" },
      { label: "首重", key: "first_price", unit: "g", fontColor: "#777" },
      { label: "续重", key: "continue_price", unit: "g", fontColor: "#777" },
      { label: "操作费", key: "opt_price", unit: "" },
      { label: "报关费", key: "customs_costs", unit: "" },
      { label: "燃油附加费", key: "fuel_costs", unit: "" },
      { label: "偏远地区费用", key: "area_price", unit: "" },
      { label: "旺季附加费", key: "wj_price", unit: "" },
      { label: "运费优惠", key: "", unit: "", symbol: "-" },
    ],
  },
  {
    title: "实际运费明细",
    mapField: [
      { label: "实际费用", key: "money" },
      { label: "实际运费", key: "postAmt" },
      { label: "实际计费重", key: "act_weight", unit: "g", fontColor: "#777" },
      { label: "实际体积", key: "act_volume", unit: "m³", fontColor: "#777" },
      { label: "首重", key: "first_price", unit: "g", fontColor: "#777" },
      { label: "续重", key: "continue_price", unit: "g", fontColor: "#777" },
      { label: "操作费", key: "opt_price", unit: "" },
      { label: "报关费", key: "customs_costs", unit: "" },
      { label: "燃油附加费", key: "fuel_costs", unit: "" },
      { label: "偏远地区费用", key: "area_price", unit: "" },
      { label: "旺季附加费", key: "wj_price", unit: "" },
    ],
  },
  {
    title: "其他费用明细",
    mapField: [
      { label: "其他费用", key: "other_price" },
      { label: "打包费", key: "pack_price" },
    ],
  },
];

const leftClick = () => {
  if (isOrder.value) {
    uni.switchTab({ url: "/pages/order/index" });
    useTabbar.getPageCur("order");
  } else {
    uni.navigateBack();
  }
};

onLoad((options) => {
  orderid.value = options.orderid;
  isOrder.value = options.isOrder || false;
  nextTick(() => {
    getDetail();
  });
});

const getDetail = async () => {
  try {
    const res = await SHOP_PACKAGES_DETAIL(orderid.value);
    detail.value = res.data;
  } catch (error) {}
};
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  min-height: 100vh;
  background-color: var(--bg);

  .content {
    padding: 24rpx;

    .tip {
      .flex_position(flex-end);
      color: var(--primary);
      .size(28rpx);

      .icon-font {
        .size(48rpx);
      }
    }

    .order_info {
      background-color: var(--light);
      margin-top: 24rpx;
      border-radius: 16rpx;
      padding: 24rpx;
      .ver();

      .order_no {
        flex: 1;
        .flex();
        color: var(--text);
        .size(24rpx);
        line-height: 40rpx;

        ._no {
          font-weight: 600;
          flex: 1;
        }
      }

      .copy_btn {
        border: 1px solid var(--primary);
        border-radius: 40rpx;
        color: var(--primary);
        padding: 0 16rpx;
        .size(24rpx);
        line-height: 40rpx;
      }
    }
  }

  .list_of_details {
    padding: 0 48rpx 40rpx;
  }

  .list_of_details:nth-child(2) {
    :deep(
        .particulars__list
          .particulars__item:first-child
          .particulars__item-right
      ) {
      color: red !important;
    }
  }

  .order_footer-delivery-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 30rpx;
    border-radius: 12rpx;
    border: 1px solid var(--black);
    background-color: var(--black);
    color: var(--light);
    font-size: 30rpx;
  }
}
</style>