小于 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>
大约 1 分钟
订单列表
用户订单分页查询
路由配置
export default defineAppConfig({
pages: [
"pages/index/index",
"pages/user/index",
"pages/address/address-list",
"pages/address/address-save",
"pages/order/order-create",
"pages/order/order-list",
],
});
大约 6 分钟
订单横向展示卡片
源码解析
显示订单事件和状态
显示订单商品信息
价格总计和拓展
大约 4 分钟
订单创建
枚举值添加
需要把创建人和编辑人的id替换成自己的id
INSERT INTO mall.dict (id, created_time, edited_time, creator_id, editor_id, key_id, key_en_name, key_name, dict_id, dict_name, dict_en_name, order_num) VALUES ('a268e25b-b3b7-4fc2-880d-5b97e1acab0b', '2024-01-26 11:11:40.133277', '2024-01-26 11:11:40.133277', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', 1, 'ALI_PAY', '支付宝', 1004, '支付方式', 'PAY_TYPE', 0);
INSERT INTO mall.dict (id, created_time, edited_time, creator_id, editor_id, key_id, key_en_name, key_name, dict_id, dict_name, dict_en_name, order_num) VALUES ('1a687b7d-9b24-47b0-aa57-e361812dcdf0', '2024-01-26 11:10:49.521488', '2024-01-26 11:10:49.521488', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', 0, 'WE_CHAT_PAY', '微信支付', 1004, '支付类型', 'PAY_TYPE', 0);
INSERT INTO mall.dict (id, created_time, edited_time, creator_id, editor_id, key_id, key_en_name, key_name, dict_id, dict_name, dict_en_name, order_num) VALUES ('461a361d-073c-4574-aed1-c025e04a81a3', '2024-01-26 11:09:32.434369', '2024-01-26 11:13:54.428416', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', 5, 'REFUNDING', '退款中', 1003, '商品订单状态', 'PRODUCT_ORDER_STATUS', 0);
INSERT INTO mall.dict (id, created_time, edited_time, creator_id, editor_id, key_id, key_en_name, key_name, dict_id, dict_name, dict_en_name, order_num) VALUES ('2a8a7427-9fb6-4ecb-822c-8b22fd493a93', '2024-01-26 11:08:34.090534', '2024-01-26 11:08:37.984915', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', 4, 'CLOSED', '已关闭', 1003, '商品订单状态', 'PRODUCT_ORDER_STATUS', 0);
INSERT INTO mall.dict (id, created_time, edited_time, creator_id, editor_id, key_id, key_en_name, key_name, dict_id, dict_name, dict_en_name, order_num) VALUES ('a1a13655-7328-45c3-8cdd-dc0d41ef5792', '2024-01-26 11:06:10.939935', '2024-01-26 11:06:16.216645', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', 3, 'TO_BE_EVALUATED', '待评价', 1003, '商品订单状态', 'PRODUCT_ORDER_STATUS', 0);
INSERT INTO mall.dict (id, created_time, edited_time, creator_id, editor_id, key_id, key_en_name, key_name, dict_id, dict_name, dict_en_name, order_num) VALUES ('56e8d930-6953-4f6a-875c-34d5c26802a5', '2024-01-26 11:03:49.162351', '2024-01-26 11:04:00.418344', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', 2, 'TO_BE_RECEIVED', '待收货', 1003, '商品订单状态', 'PRODUCT_ORDER_STATUS', 0);
INSERT INTO mall.dict (id, created_time, edited_time, creator_id, editor_id, key_id, key_en_name, key_name, dict_id, dict_name, dict_en_name, order_num) VALUES ('fc930d38-0612-4217-91ab-809a5be03656', '2024-01-26 11:02:08.987958', '2024-01-26 11:02:22.277984', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', 1, 'TO_BE_DELIVERED', '待发货', 1003, '商品订单状态 ', 'PRODUCT_ORDER_STATUS', 0);
INSERT INTO mall.dict (id, created_time, edited_time, creator_id, editor_id, key_id, key_en_name, key_name, dict_id, dict_name, dict_en_name, order_num) VALUES ('5c820b53-6545-45fd-8442-22f7e486fc8e', '2024-01-26 10:56:45.364997', '2024-01-26 11:02:58.744868', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', 0, 'TO_BE_PAID', '待付款', 1003, '商品订单状态', 'PRODUCT_ORDER_STATUS', 0);
INSERT INTO mall.dict (id, created_time, edited_time, creator_id, editor_id, key_id, key_en_name, key_name, dict_id, dict_name, dict_en_name, order_num) VALUES ('1f01fa7b-f162-4376-870d-9207735f658d', '2024-01-16 09:33:09.151337', '2024-01-16 09:33:09.151337', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', 2, 'BUTTON', '按钮', 1002, '菜单类型', 'MENU_TYPE', 2);
INSERT INTO mall.dict (id, created_time, edited_time, creator_id, editor_id, key_id, key_en_name, key_name, dict_id, dict_name, dict_en_name, order_num) VALUES ('416c90b4-42e8-4af1-a3f5-7e321c9c3437', '2024-01-16 09:32:28.555205', '2024-01-16 09:32:28.555205', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', '0f07d638-f1bc-4011-88d8-6dc650ab06a7', 1, 'DIRECTORY', '目录', 1002, '菜单类型', 'MENU_TYPE', 0);
大约 18 分钟
小于 1 分钟
小于 1 分钟
小于 1 分钟
小于 1 分钟
...