62 lines
2.3 KiB
Vue
62 lines
2.3 KiB
Vue
<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> |