VAVABUY/pages/dashboard/warehouse_detail.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="订单详情" border autoBack fixed @leftClick="leftClick">
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
        </template>
      </Navbar>
      <view class="content">
        <parcelList :item="detail" />
        <view class="order_info">
          <view class="text_box">
            <trans class="title" _t="体积"></trans>
            <text>{{ detail?.volume }}m³</text>
          </view>
          <view class="text_box">
            <trans class="title" _t="重量"></trans>
            <text>{{ detail?.weight }}kg</text>
          </view>
          <view class="term_box" v-if="detail.epdate">
            <trans class="title" _t="仓储期"></trans>
            <view class="term_value">
              <text
                v-if="getExpireDaysFromTimestamp(detail.epdate)"
                :class="
                  getExpireDaysFromTimestamp(detail.epdate) < 10 ? 'red' : ''
                "
              >
                {{ getExpireDaysFromTimestamp(detail.epdate) }}
                <trans _t="天" />
              </text>
              <trans _t="已过期" v-else />
              <!-- <view @click="openRenewal">续期</view> -->
            </view>
          </view>
          <view class="dashed"></view>

          <view class="text_box">
            <trans class="title" _t="实付"></trans>
            <view class="price_box">
              <text class="currency">{{ symbol.symbol }}</text>
              <rich-text
                class="texts"
                :nodes="Moneyhtml(orderDetiail?.amount)"
              ></rich-text>
            </view>
          </view>
          <view class="text_box">
            <trans class="title" _t="支付方式"></trans>
            <text>{{ orderDetiail?.payType }}</text>
          </view>
          <view class="text_box">
            <trans class="title" _t="订单状态"></trans>
            <text>{{ orderDetiail?.status_txt }}</text>
          </view>
          <view class="text_box">
            <trans class="title" _t="平台订单号"></trans>
            <up-copy
              :content="orderDetiail?.orderNo"
              :notice="t('复制成功')"
              class="right_value"
            >
              <up-icon name="file-text" size="16px"></up-icon>
              <text>{{ orderDetiail?.orderNo }}</text>
            </up-copy>
          </view>
          <view class="text_box">
            <trans class="title" _t="订单时间"></trans>
            <text>{{ useGlobal().$format(orderDetiail?.payDate) }}</text>
          </view>
          <view class="text_box">
            <trans class="title" _t="入库时间"></trans>
            <text>{{ useGlobal().$format(orderDetiail?.indate) }}</text>
          </view>

          <view class="dashed"></view>

          <view class="check_box" v-if="orderDetiail.checkStatus > 0">
            <trans class="title" _t="专业质检"></trans>
            <image-grid :images="orderDetiail?.checkImg" class="checkImg" />
            <view class="checkRemark">
              <text>{{ orderDetiail?.checkRemark }}</text>
            </view>
          </view>

          <view class="popup_cancle btn_pack" @click="toPack">
            <trans class="menu_text" _t="打包" />
          </view>
          <view class="popup_cancle" @click="onClose">
            <trans class="menu_text" _t="返回" />
          </view>
        </view>
      </view>
    </view>

    <renewalModel ref="renewal" />
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import { SHOP_STOCKS_INFO } 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,
  useGlobal,
  Toast,
  getExpireDaysFromTimestamp,
} from "@/utils";
import { useSystemStore, useTabbarStore } from "@/store";
import ImageGrid from "@/components/ImageGrid.vue";
import renewalModel from "./components/renewalModel.vue";

const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol);

const orderid = ref("");
const detail = ref({});
const orderDetiail = ref({});
const renewal = ref(null);
const useTabbar = useTabbarStore();

onLoad((options) => {
  orderid.value = options.id;
  nextTick(() => {
    getDetail();
  });
});

const openRenewal = () => {
  renewal.value.open();
};
const getDetail = async () => {
  try {
    const res = await SHOP_STOCKS_INFO(orderid.value);
    detail.value = res.data.info;
    orderDetiail.value = res.data.order;
  } catch (error) {}
};
const onClose = () => {
  uni.navigateBack();
};
const toPack = () => {
  uni.navigateTo({ url: `/pages/dashboard/pack?ids=${orderid.value}` });
};
const leftClick = () => {
  uni.switchTab({ url: "/pages/order/index" });
  useTabbar.getPageCur("order");
};
</script>
<style lang="less" scoped>
@import url("@/style.less");

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

  .content {
    padding: 24rpx;

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

      // .ver();
      .term_box {
        .flex_position(space-between);
        .size(24rpx);
        padding: 10rpx 20rpx;
        border: var(--bor);
        border-radius: 16rpx;
        color: var(--text-01);

        .title {
        }

        .term_value {
          .ver();
          color: var(--black);

          .red {
            color: var(--red);
          }

          view {
            font-weight: 500;
            .size(24rpx);
            cursor: pointer;
            padding: 5rpx 20rpx;
            margin-left: 10rpx;
            border: 1rpx solid var(--black);
            border-radius: 14rpx;
          }
        }
      }

      .text_box {
        .flex_position(space-between, flex-end);
        margin: 8rpx 0;
        .size(24rpx);

        .price_box {
          .flex_position(end, flex-end);
          color: var(--black);
          .size(28rpx);

          .currency {
            margin-right: 10rpx;
          }
        }

        .title {
          color: var(--text-01);
        }

        .currency,
        .texts {
          color: var(--red);
          .size(28rpx);
          font-weight: 500;
        }

        .right_value {
          .flex();
        }
      }

      .check_box {
        background-color: var(--bor-color);
        padding: 20rpx;
        border-radius: 20rpx;

        .checkImg {
          margin: 20rpx 0;
        }

        .checkRemark {
          .size(24rpx);
          font-weight: 500;
          margin-left: 10rpx;
        }
      }

      .popup_cancle {
        &.btn_pack {
          background-color: var(--black);
          color: var(--light);
        }

        background-color: var(--white);
        color: var(--black);
        .flex_center();
        border-radius: 20rpx;
        margin-top: 15rpx;
        padding: 28rpx 0;
        border: 1px solid var(--black);
      }
    }
  }
}
</style>