feat:添加admin相关接口
This commit is contained in:
@@ -0,0 +1,584 @@
|
||||
<template>
|
||||
<div class="order-list-container">
|
||||
<!-- 搜索和操作栏 -->
|
||||
<el-card class="filter-container" shadow="never">
|
||||
<!-- <el-form :inline="true" :model="queryParams" class="search-form">
|
||||
<el-form-item label="订单号">
|
||||
<el-input v-model="queryParams.order_no" placeholder="请输入订单号" clearable style="width: 200px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户ID">
|
||||
<el-input v-model="queryParams.user_id" placeholder="请输入用户ID" clearable style="width: 150px" />
|
||||
</el-form-item>
|
||||
<el-form-item label="订单状态">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 150px">
|
||||
<el-option label="待支付" value="0" />
|
||||
<el-option label="已支付" value="1" />
|
||||
<el-option label="已完成" value="2" />
|
||||
<el-option label="已取消" value="3" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="创建时间">
|
||||
<el-date-picker
|
||||
v-model="queryParams.dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<el-icon><Search /></el-icon>查询
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form> -->
|
||||
<div class="action-bar">
|
||||
<el-button type="primary" @click="handleAdd">
|
||||
<el-icon><Plus /></el-icon>新增订单
|
||||
</el-button>
|
||||
<el-button type="success" @click="fetchOrderList">
|
||||
<el-icon><Refresh /></el-icon>刷新
|
||||
</el-button>
|
||||
<!-- <el-button type="danger" :disabled="!selectedRows.length" @click="handleBatchDelete">
|
||||
<el-icon><Delete /></el-icon>批量删除
|
||||
</el-button> -->
|
||||
<!-- <el-button type="success">
|
||||
<el-icon><Download /></el-icon>导出订单
|
||||
</el-button> -->
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 订单列表 -->
|
||||
<el-card class="table-container" shadow="never">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="orderList"
|
||||
@selection-change="handleSelectionChange"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="id" label="订单ID" width="100" />
|
||||
<el-table-column prop="name" label="订单名称" min-width="180" />
|
||||
<el-table-column prop="userId" label="用户ID" width="100" />
|
||||
<el-table-column prop="commodityId" label="商品ID" width="100" />
|
||||
<el-table-column label="表名" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small">{{ row.table || '未知' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="订单金额" width="120">
|
||||
<template #default="{ row }">
|
||||
<span class="amount">¥{{ (row.price / 100).toFixed(2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="续费价格" width="120">
|
||||
<template #default="{ row }">
|
||||
<span class="renew-price">¥{{ (row.renewPrice / 100).toFixed(2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" width="80">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.payNum }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="订单状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getStatusType(row.state)">
|
||||
{{ getStatusText(row.state) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="支付方式" width="100">
|
||||
<template #default="{ row }">
|
||||
<span>{{ row.payType || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="过期时间" width="170">
|
||||
<template #default="{ row }">
|
||||
<span>{{ formatDate(row.expireTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" width="170">
|
||||
<template #default="{ row }">
|
||||
<span>{{ formatDate(row.CreatedAt) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="handleView(row)">查看</el-button>
|
||||
<el-button type="warning" link @click="handleEdit(row)">编辑</el-button>
|
||||
<!-- <el-button type="danger" link @click="handleDelete(row)">删除</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
v-model:current-page="queryParams.page"
|
||||
v-model:page-size="queryParams.count"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
background
|
||||
class="pagination"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 订单详情对话框 -->
|
||||
<el-dialog
|
||||
v-model="detailDialogVisible"
|
||||
title="订单详情"
|
||||
width="800px"
|
||||
>
|
||||
<el-descriptions :column="2" border v-if="orderDetail">
|
||||
<el-descriptions-item label="订单ID">{{ orderDetail.id }}</el-descriptions-item>
|
||||
<el-descriptions-item label="订单名称">{{ orderDetail.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="用户ID">{{ orderDetail.userId }}</el-descriptions-item>
|
||||
<el-descriptions-item label="商品ID">{{ orderDetail.commodityId }}</el-descriptions-item>
|
||||
<el-descriptions-item label="表名">{{ orderDetail.table }}</el-descriptions-item>
|
||||
<el-descriptions-item label="数量">{{ orderDetail.payNum }}</el-descriptions-item>
|
||||
<el-descriptions-item label="订单金额">¥{{ (orderDetail.price / 100).toFixed(2) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="续费价格">¥{{ (orderDetail.renewPrice / 100).toFixed(2) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="订单状态">
|
||||
<el-tag :type="getStatusType(orderDetail.state)">
|
||||
{{ getStatusText(orderDetail.state) }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="支付方式">{{ orderDetail.payType || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="过期时间">{{ formatDate(orderDetail.expireTime) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">{{ formatDate(orderDetail.CreatedAt) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="更新时间">{{ formatDate(orderDetail.UpdatedAt) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="参数信息">{{ orderDetail.args || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="备注" :span="2">{{ orderDetail.note || '无' }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 订单表单对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogType === 'add' ? '新增订单' : '编辑订单'"
|
||||
width="700px"
|
||||
>
|
||||
<el-form
|
||||
ref="orderFormRef"
|
||||
:model="orderForm"
|
||||
:rules="orderRules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="订单名称" prop="name">
|
||||
<el-input v-model="orderForm.name" placeholder="请输入订单名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="所属表" prop="table">
|
||||
<el-input v-model="orderForm.table" placeholder="请输入所属表" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户ID" prop="user_id">
|
||||
<el-input-number v-model="orderForm.user_id" :min="1" placeholder="请输入用户ID" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商品ID" prop="commodity_id">
|
||||
<el-input-number v-model="orderForm.commodity_id" :min="0" placeholder="请输入商品ID" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="购买数量" prop="pay_num">
|
||||
<el-input-number v-model="orderForm.pay_num" :min="1" placeholder="请输入数量" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="价格(分)" prop="price">
|
||||
<el-input-number v-model="orderForm.price" :min="0" placeholder="请输入价格(分)" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="续费价格(分)" prop="renew_price">
|
||||
<el-input-number v-model="orderForm.renew_price" :min="0" placeholder="请输入续费价格(分)" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="过期时间" prop="expire_time">
|
||||
<el-input-number v-model="orderForm.expire_time" :min="0" placeholder="请输入过期时间(时间戳)" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="优惠码ID" prop="discount_code_id">
|
||||
<el-input-number v-model="orderForm.discount_code_id" :min="0" placeholder="请输入优惠码ID" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="代金券ID" prop="coupon_id">
|
||||
<el-input-number v-model="orderForm.coupon_id" :min="0" placeholder="请输入代金券ID (必填)" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="订单状态" prop="state">
|
||||
<el-radio-group v-model="orderForm.state">
|
||||
<el-radio :label="0">待支付</el-radio>
|
||||
<el-radio :label="1">已支付</el-radio>
|
||||
<el-radio :label="2">已失效</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付方式" prop="pay_type">
|
||||
<el-input v-model="orderForm.pay_type" placeholder="请输入支付类型" />
|
||||
</el-form-item>
|
||||
<el-form-item label="订单参数" prop="args">
|
||||
<el-input v-model="orderForm.args" placeholder="请输入订单参数" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="note">
|
||||
<el-input v-model="orderForm.note" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { Plus, Delete, Search, Download, Refresh } from '@element-plus/icons-vue'
|
||||
import { getOrderList, getOrderDetail, createOrder, updateOrder, deleteOrder } from '@/api/admin/order'
|
||||
|
||||
// 查询参数
|
||||
const queryParams = reactive({
|
||||
|
||||
page: 1,
|
||||
count: 10
|
||||
})
|
||||
|
||||
// 订单表单
|
||||
const orderForm = reactive({
|
||||
order_id: undefined,
|
||||
name: '',
|
||||
table: '',
|
||||
user_id: undefined,
|
||||
commodity_id: 0,
|
||||
pay_num: 1,
|
||||
price: 0,
|
||||
renew_price: 0,
|
||||
expire_time: 0,
|
||||
discount_code_id: 0,
|
||||
coupon_id: 0,
|
||||
state: 0,
|
||||
pay_type: '',
|
||||
args: '',
|
||||
note: ''
|
||||
})
|
||||
|
||||
const orderRules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入订单名称', trigger: 'blur' }
|
||||
],
|
||||
table: [
|
||||
{ required: true, message: '请输入所属表', trigger: 'blur' }
|
||||
],
|
||||
user_id: [
|
||||
{ required: true, message: '请输入用户ID', trigger: 'blur' },
|
||||
{ type: 'number', message: '用户ID必须是数字', trigger: 'blur' }
|
||||
],
|
||||
coupon_id: [
|
||||
{ required: true, message: '请输入代金券ID', trigger: 'blur' },
|
||||
{ type: 'number', message: '代金券ID必须是数字', trigger: 'blur' }
|
||||
],
|
||||
pay_num: [
|
||||
{ required: true, message: '请输入购买数量', trigger: 'blur' }
|
||||
],
|
||||
price: [
|
||||
{ required: true, message: '请输入价格', trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
|
||||
// 状态数据
|
||||
const loading = ref(false)
|
||||
const orderList = ref([])
|
||||
const orderDetail = ref(null)
|
||||
const total = ref(0)
|
||||
const selectedRows = ref([])
|
||||
const dialogVisible = ref(false)
|
||||
const detailDialogVisible = ref(false)
|
||||
const dialogType = ref('add')
|
||||
const orderFormRef = ref(null)
|
||||
|
||||
// 获取订单列表
|
||||
const fetchOrderList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getOrderList(queryParams)
|
||||
console.log('订单列表数据:', res.data)
|
||||
if (res.data.code === 200) {
|
||||
orderList.value = res.data.data.list || []
|
||||
total.value = res.data.data.all_count || 0
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取订单列表失败:', error)
|
||||
ElMessage.error('获取订单列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return '-'
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||||
const day = String(date.getDate()).padStart(2, '0')
|
||||
const hours = String(date.getHours()).padStart(2, '0')
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0')
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`
|
||||
}
|
||||
|
||||
// 获取订单状态类型
|
||||
const getStatusType = (status) => {
|
||||
const statusMap = {
|
||||
0: 'warning', // 待支付
|
||||
1: 'success', // 已支付
|
||||
2: 'info', // 已失效
|
||||
}
|
||||
return statusMap[status] || 'info'
|
||||
}
|
||||
|
||||
// 获取订单状态文本
|
||||
// state 0:未支付 1:已支付 2:已失效
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
0: '待支付',
|
||||
1: '已支付',
|
||||
2: '已失效'
|
||||
}
|
||||
return statusMap[status] || '未知'
|
||||
}
|
||||
|
||||
// 查询
|
||||
const handleQuery = () => {
|
||||
queryParams.page = 1
|
||||
fetchOrderList()
|
||||
}
|
||||
|
||||
// 重置查询
|
||||
const resetQuery = () => {
|
||||
queryParams.order_no = ''
|
||||
queryParams.user_id = ''
|
||||
queryParams.status = ''
|
||||
queryParams.dateRange = []
|
||||
queryParams.page = 1
|
||||
fetchOrderList()
|
||||
}
|
||||
|
||||
// 选择项变化
|
||||
const handleSelectionChange = (selection) => {
|
||||
selectedRows.value = selection
|
||||
}
|
||||
|
||||
// 分页
|
||||
const handleSizeChange = (size) => {
|
||||
queryParams.count = size
|
||||
fetchOrderList()
|
||||
}
|
||||
|
||||
const handleCurrentChange = (page) => {
|
||||
queryParams.page = page
|
||||
fetchOrderList()
|
||||
}
|
||||
|
||||
// 新增订单
|
||||
const handleAdd = () => {
|
||||
dialogType.value = 'add'
|
||||
dialogVisible.value = true
|
||||
Object.assign(orderForm, {
|
||||
order_id: undefined,
|
||||
name: '',
|
||||
table: '',
|
||||
user_id: undefined,
|
||||
commodity_id: 0,
|
||||
pay_num: 1,
|
||||
price: 0,
|
||||
renew_price: 0,
|
||||
expire_time: 0,
|
||||
discount_code_id: 0,
|
||||
coupon_id: 0,
|
||||
state: 0,
|
||||
pay_type: '',
|
||||
args: '',
|
||||
note: ''
|
||||
})
|
||||
orderFormRef.value?.resetFields()
|
||||
}
|
||||
|
||||
// 查看订单详情
|
||||
const handleView = async (row) => {
|
||||
try {
|
||||
const res = await getOrderDetail({ order_id: row.id })
|
||||
if (res.data.code === 200) {
|
||||
orderDetail.value = res.data.data
|
||||
detailDialogVisible.value = true
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取订单详情失败:', error)
|
||||
ElMessage.error('获取订单详情失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 编辑订单
|
||||
const handleEdit = (row) => {
|
||||
dialogType.value = 'edit'
|
||||
dialogVisible.value = true
|
||||
Object.assign(orderForm, {
|
||||
order_id: row.id,
|
||||
name: row.name,
|
||||
table: row.table,
|
||||
user_id: row.userId,
|
||||
commodity_id: row.commodityId,
|
||||
pay_num: row.payNum,
|
||||
price: row.price,
|
||||
renew_price: row.renewPrice,
|
||||
expire_time: row.expireTime ? new Date(row.expireTime).getTime() / 1000 : 0,
|
||||
discount_code_id: 0, // 从详情接口获取
|
||||
coupon_id: 0, // 从详情接口获取
|
||||
state: row.state,
|
||||
pay_type: row.payType || '',
|
||||
args: row.args || '',
|
||||
note: row.note || ''
|
||||
})
|
||||
}
|
||||
|
||||
// 删除订单
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(`确认删除订单 ${row.name} 吗？`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
try {
|
||||
const res = await deleteOrder({ id: row.id })
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('删除成功')
|
||||
fetchOrderList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('删除失败:', error)
|
||||
ElMessage.error(error.response?.data?.message || '删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = () => {
|
||||
if (selectedRows.value.length === 0) {
|
||||
ElMessage.warning('请至少选择一条记录')
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm(`确认删除选中的 ${selectedRows.value.length} 条记录吗？`, '警告', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
ElMessage.success('批量删除成功')
|
||||
fetchOrderList()
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 提交表单
|
||||
const submitForm = () => {
|
||||
orderFormRef.value?.validate(async (valid) => {
|
||||
if (valid) {
|
||||
try {
|
||||
// 准备提交的数据
|
||||
const submitData = {
|
||||
name: orderForm.name,
|
||||
table: orderForm.table,
|
||||
user_id: Number(orderForm.user_id),
|
||||
commodity_id: Number(orderForm.commodity_id),
|
||||
pay_num: Number(orderForm.pay_num),
|
||||
price: Number(orderForm.price),
|
||||
renew_price: Number(orderForm.renew_price),
|
||||
expire_time: Number(orderForm.expire_time),
|
||||
discount_code_id: Number(orderForm.discount_code_id),
|
||||
coupon_id: Number(orderForm.coupon_id),
|
||||
state: Number(orderForm.state),
|
||||
pay_type: orderForm.pay_type || '',
|
||||
args: orderForm.args || '',
|
||||
note: orderForm.note || ''
|
||||
}
|
||||
|
||||
// 如果是编辑，添加order_id
|
||||
if (dialogType.value === 'edit') {
|
||||
submitData.order_id = Number(orderForm.order_id)
|
||||
}
|
||||
|
||||
console.log('提交订单数据:', submitData)
|
||||
|
||||
let res
|
||||
if (dialogType.value === 'add') {
|
||||
res = await createOrder(submitData)
|
||||
} else {
|
||||
res = await updateOrder(submitData)
|
||||
}
|
||||
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success(dialogType.value === 'add' ? '新增成功' : '修改成功')
|
||||
dialogVisible.value = false
|
||||
fetchOrderList()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('操作失败:', error)
|
||||
ElMessage.error(error.response?.data?.message || '操作失败')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化
|
||||
onMounted(() => {
|
||||
fetchOrderList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.order-list-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filter-container {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.user-id {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: #f56c6c;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.renew-price {
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 24px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user