feat:订单页面

src/views/hard/components/shop-car.vue

@@ -0,0 +1,62 @@
+<template>
+    <el-dialog title="购物车" v-model="visible" :close-on-click-modal="false" draggable>
+        <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
+            :header-cell-style="tableStyle.headerCellStyle" @sort-change="sortChangeHandle">
+            <el-table-column label="商品名" align="center" prop="productName" />
+            <el-table-column label="商品图片" align="center" prop="code">
+                <template #default="{ row }">
+                    <preview-image v-if="row.productPic" :src="row.productPic" />
+                </template>
+            </el-table-column>
+            <el-table-column label="商品价格" align="center" prop="ticketId">
+                <template #default="{ row }">
+                    <span>{{ displayPrice(row.productPrice) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="商品数量" align="center" prop="productCount" />
+            <el-table-column label="商品总额" align="center" prop="totalPrice">
+                <template #default="{ row }">
+                    <span>{{ displayPrice(row.totalPrice) }}</span>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="visible = false">取消</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts" name="shop-car">
+import { BasicTableProps, useTable } from "/@/hooks/table";
+import * as hardCar from "/@/api/hard/hard-car";
+import { displayPrice } from "/@/utils/formatMoney"
+
+// 定义变量内容
+const visible = ref(false)
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    createdIsNeed: false,
+    queryForm: {},
+    pageList: hardCar.getCarByOrderId
+})
+
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state)
+
+// 打开弹窗
+const openDialog = (id: string) => {
+    visible.value = true
+    if (id) {
+        state.queryForm.orderId = id
+        getDataList()
+    }
+};
+
+// 暴露变量
+defineExpose({
+    openDialog
+});
+</script>