订单详情
大约 1 分钟
订单详情
源码
解析请参考订单创建
<template>
<div class="order-details" v-if="order">
<div class="address">
<nut-cell is-link center>
<template #icon>
<location2
color="red"
size="20"
style="margin-right: 10px"
></location2>
</template>
<template #title>
<address-row :address="order.address"></address-row>
</template>
<template #link>
<rect-right></rect-right>
</template>
</nut-cell>
</div>
<div class="product-list">
<product-row
v-for="item in order.items"
:key="item.productSku.values.join(',')"
:product="{
...item.productSku,
description: item.productSku.values.join(','),
brand: item.productSku.product.brand,
}"
>
<template #operation>
<div class="sku-count">x{{ item.skuCount }}</div>
</template>
</product-row>
</div>
<nut-cell-group class="summary">
<nut-cell title="商品总价">
<template #desc>
<div class="value">¥{{ order.payment.productAmount }}</div>
</template>
</nut-cell>
<nut-cell title="配送费">
<template #desc>
<div class="value">¥{{ order.payment.deliveryFee }}</div>
</template>
</nut-cell>
<nut-cell title="优惠券">
<template #desc>
<div class="value">-¥{{ order.payment.couponAmount }}</div>
</template>
</nut-cell>
<nut-cell title="vip优惠">
<template #desc>
<div class="value">-¥{{ order.payment.vipAmount }}</div>
</template>
</nut-cell>
</nut-cell-group>
<div class="pay-cancel-wrapper">
<div class="pay-cancel">
<div class="cancel">取消订单</div>
<nut-button type="danger"
>立即支付 ¥{{ order.payment.payAmount }}</nut-button
>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { ProductOrderDto } from "@/apis/__generated/model/dto";
import { RectRight, Location2 } from "@nutui/icons-vue-taro";
import { api } from "@/utils/api-instance";
import Taro from "@tarojs/taro";
const order = ref<ProductOrderDto["ProductOrderRepository/COMPLEX_FETCHER"]>();
Taro.useLoad(({ id }) => {
api.productOrderController.findById({ id }).then((res) => {
order.value = res;
});
});
</script>
<style lang="scss">
@import "../../app.scss";
page {
background-color: rgba(black, 0.05);
}
.order-details {
.address {
background-color: white;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
.nut-cell {
margin-top: 0;
}
.address-row {
padding: 0;
}
}
.sku-count {
font-size: 28px;
}
.product-list {
background-color: white;
padding: 32px;
border-radius: 12px;
margin-bottom: 30px;
}
.summary {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
.value {
color: rgba(black, 0.9);
font-weight: bold;
}
}
.pay-cancel-wrapper {
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
.pay-cancel {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
width: 700px;
.cancel {
color: rgba(black, 0.7);
}
}
}
}
</style>