VAVABUY/pages/dashboard/order_detail.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="订单详情" fixed border>
        <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>
        <orderList :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>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar"
import navMenu from "@/components/nav_menu";
import { SHOP_ORDER_DETAIL } from "@/api"
import { ref, nextTick } from "vue";
import { onLoad } from "@dcloudio/uni-app"
import orderList from "./components/order_list"
import { t } from "@/locale"

const orderid = ref('');
const detail = ref({})

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

const getDetail = async () => {
  try {
    const res = await SHOP_ORDER_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;
      }
    }
  }
}
</style>