feat(order): 添加订单管理功能
- 创建新的订单管理页面 OrderManage.vue，支持分页和多条件查询 - 添加订单查询API接口，支持复杂的订单筛选条件 - 在路由中添加订单管理页面路由配置 - 更新导航菜单，将订单查询改为订单管理并指向新页面 - 实现订单列表的表格展示，包含订单号、商品信息、金额、客户信息等 - 添加订单状态、支付状态、PayPal状态的标签显示和筛选功能 - 实现查询表单，支持订单号、PayPal订单ID、客户信息等多维度搜索 - 添加分页组件，支持每页显示数量调整和页码切换 - 实现订单详情查看功能和重置查询条件功能
This commit is contained in:
@@ -11,11 +11,11 @@
|
|||||||
<h1>MT Pay 管理系统</h1>
|
<h1>MT Pay 管理系统</h1>
|
||||||
<div class="nav-menu">
|
<div class="nav-menu">
|
||||||
<router-link
|
<router-link
|
||||||
to="/query"
|
to="/manage/order"
|
||||||
class="nav-item"
|
class="nav-item"
|
||||||
:class="{ active: activeIndex === '/query' || activeIndex.startsWith('/query') }"
|
:class="{ active: activeIndex === '/manage/order' || activeIndex.startsWith('/manage/order') }"
|
||||||
>
|
>
|
||||||
订单查询
|
订单管理
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link
|
<router-link
|
||||||
to="/manage/product"
|
to="/manage/product"
|
||||||
|
|||||||
@@ -42,3 +42,14 @@ export function calculateCurrencyConversion(data) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 查询订单列表（支持分页和多条件查询）
|
||||||
|
*/
|
||||||
|
export function queryOrders(query) {
|
||||||
|
return request({
|
||||||
|
url: '/order/query',
|
||||||
|
method: 'post',
|
||||||
|
data: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -78,6 +78,12 @@ const routes = [
|
|||||||
name: 'OrderQuery',
|
name: 'OrderQuery',
|
||||||
component: OrderQuery
|
component: OrderQuery
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/manage/order',
|
||||||
|
name: 'OrderManage',
|
||||||
|
component: () => import('../views/OrderManage.vue'),
|
||||||
|
meta: { requiresAuth: true }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/manage/product',
|
path: '/manage/product',
|
||||||
name: 'ProductManage',
|
name: 'ProductManage',
|
||||||
|
|||||||
545
src/views/OrderManage.vue
Normal file
545
src/views/OrderManage.vue
Normal file
@@ -0,0 +1,545 @@
|
|||||||
|
<template>
|
||||||
|
<div class="order-manage">
|
||||||
|
<!-- 查询表单 -->
|
||||||
|
<el-card class="search-card" style="margin-bottom: 20px">
|
||||||
|
<el-form :model="queryForm" :inline="true" class="search-form">
|
||||||
|
<el-form-item label="订单号">
|
||||||
|
<el-input
|
||||||
|
v-model="queryForm.orderNo"
|
||||||
|
placeholder="请输入订单号"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="PayPal订单ID">
|
||||||
|
<el-input
|
||||||
|
v-model="queryForm.paypalOrderId"
|
||||||
|
placeholder="请输入PayPal订单ID"
|
||||||
|
clearable
|
||||||
|
style="width: 200px"
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="订单状态">
|
||||||
|
<el-select
|
||||||
|
v-model="queryForm.status"
|
||||||
|
placeholder="请选择状态"
|
||||||
|
clearable
|
||||||
|
style="width: 150px"
|
||||||
|
>
|
||||||
|
<el-option label="待支付" value="PENDING" />
|
||||||
|
<el-option label="已支付" value="PAID" />
|
||||||
|
<el-option label="已发货" value="SHIPPED" />
|
||||||
|
<el-option label="已完成" value="COMPLETED" />
|
||||||
|
<el-option label="已取消" value="CANCELLED" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="支付状态">
|
||||||
|
<el-select
|
||||||
|
v-model="queryForm.paymentStatus"
|
||||||
|
placeholder="请选择支付状态"
|
||||||
|
clearable
|
||||||
|
style="width: 150px"
|
||||||
|
>
|
||||||
|
<el-option label="未支付" value="UNPAID" />
|
||||||
|
<el-option label="已支付" value="PAID" />
|
||||||
|
<el-option label="支付失败" value="FAILED" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="PayPal状态">
|
||||||
|
<el-select
|
||||||
|
v-model="queryForm.paypalStatus"
|
||||||
|
placeholder="请选择PayPal状态"
|
||||||
|
clearable
|
||||||
|
style="width: 150px"
|
||||||
|
>
|
||||||
|
<el-option label="已创建" value="CREATED" />
|
||||||
|
<el-option label="已批准" value="APPROVED" />
|
||||||
|
<el-option label="已完成" value="COMPLETED" />
|
||||||
|
<el-option label="已取消" value="VOIDED" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户姓名">
|
||||||
|
<el-input
|
||||||
|
v-model="queryForm.customerName"
|
||||||
|
placeholder="请输入客户姓名"
|
||||||
|
clearable
|
||||||
|
style="width: 150px"
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="客户电话">
|
||||||
|
<el-input
|
||||||
|
v-model="queryForm.customerPhone"
|
||||||
|
placeholder="请输入客户电话"
|
||||||
|
clearable
|
||||||
|
style="width: 150px"
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="商品名称">
|
||||||
|
<el-input
|
||||||
|
v-model="queryForm.productName"
|
||||||
|
placeholder="请输入商品名称"
|
||||||
|
clearable
|
||||||
|
style="width: 150px"
|
||||||
|
@keyup.enter="handleQuery"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleQuery">
|
||||||
|
<el-icon><Search /></el-icon>
|
||||||
|
查询
|
||||||
|
</el-button>
|
||||||
|
<el-button @click="handleReset">
|
||||||
|
<el-icon><Refresh /></el-icon>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
<!-- 订单列表 -->
|
||||||
|
<el-card>
|
||||||
|
<el-table :data="orderList" v-loading="loading" style="width: 100%">
|
||||||
|
<!-- 订单号 -->
|
||||||
|
<el-table-column label="订单号" prop="orderNo" width="180" show-overflow-tooltip />
|
||||||
|
|
||||||
|
<!-- 商品信息 -->
|
||||||
|
<el-table-column label="商品信息" min-width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div>
|
||||||
|
<div class="product-name">{{ row.productName }}</div>
|
||||||
|
<div class="sku-name">SKU: {{ row.skuName }}</div>
|
||||||
|
<div class="quantity">数量: {{ row.quantity }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<!-- 订单金额 -->
|
||||||
|
<el-table-column label="订单金额" width="150" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div v-if="row.paymentCurrency && row.paymentCurrency !== row.originalCurrency">
|
||||||
|
<div class="original-amount">{{ row.originalAmount }} {{ row.originalCurrency }}</div>
|
||||||
|
<div class="payment-amount">{{ row.paymentAmount }} {{ row.paymentCurrency }}</div>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
{{ row.totalAmount }} {{ row.originalCurrency || row.currency }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<!-- 客户信息 -->
|
||||||
|
<el-table-column label="客户信息" min-width="180">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div>
|
||||||
|
<div>{{ row.customerName }}</div>
|
||||||
|
<div class="customer-phone">{{ row.customerPhone }}</div>
|
||||||
|
<div class="customer-email" v-if="row.customerEmail">{{ row.customerEmail }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<!-- 收货地址 -->
|
||||||
|
<el-table-column label="收货地址" min-width="200" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div>
|
||||||
|
{{ row.shippingCountry }} {{ row.shippingCity }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<!-- 订单状态 -->
|
||||||
|
<el-table-column label="订单状态" width="100" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="getStatusTagType(row.status)" size="small">
|
||||||
|
{{ getStatusText(row.status) }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<!-- 支付状态 -->
|
||||||
|
<el-table-column label="支付状态" width="100" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag :type="getPaymentStatusTagType(row.paymentStatus)" size="small">
|
||||||
|
{{ getPaymentStatusText(row.paymentStatus) }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<!-- PayPal信息 -->
|
||||||
|
<el-table-column label="PayPal信息" min-width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div v-if="row.paypalOrderId">
|
||||||
|
<div class="paypal-order-id">订单ID: {{ row.paypalOrderId }}</div>
|
||||||
|
<el-tag v-if="row.paypalStatus" :type="getPaypalStatusTagType(row.paypalStatus)" size="small" style="margin-top: 4px">
|
||||||
|
{{ row.paypalStatus }}
|
||||||
|
</el-tag>
|
||||||
|
<div v-if="row.payerEmail" class="payer-email">{{ row.payerEmail }}</div>
|
||||||
|
</div>
|
||||||
|
<span v-else class="no-paypal">未关联PayPal订单</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<!-- 创建时间 -->
|
||||||
|
<el-table-column label="创建时间" width="180" align="center">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ formatDateTime(row.createTime) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<!-- 操作 -->
|
||||||
|
<el-table-column label="操作" width="120" align="center" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button type="primary" link size="small" @click="viewOrderDetail(row.id)">
|
||||||
|
查看详情
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页组件 -->
|
||||||
|
<div class="pagination-container" v-if="pagination.total > 0">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="pagination.pageNum"
|
||||||
|
v-model:page-size="pagination.pageSize"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
:total="pagination.total"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handlePageChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { Search, Refresh } from '@element-plus/icons-vue'
|
||||||
|
import { queryOrders } from '../api/order'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const loading = ref(false)
|
||||||
|
const orderList = ref([])
|
||||||
|
|
||||||
|
// 查询表单
|
||||||
|
const queryForm = reactive({
|
||||||
|
orderNo: '',
|
||||||
|
paypalOrderId: '',
|
||||||
|
merchantOrderNo: '',
|
||||||
|
status: '',
|
||||||
|
paymentStatus: '',
|
||||||
|
paypalStatus: '',
|
||||||
|
paypalPaymentStatus: '',
|
||||||
|
customerName: '',
|
||||||
|
customerPhone: '',
|
||||||
|
customerEmail: '',
|
||||||
|
productName: '',
|
||||||
|
payerEmail: '',
|
||||||
|
payerName: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
// 分页信息
|
||||||
|
const pagination = ref({
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
// 查询订单列表
|
||||||
|
const handleQuery = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const query = {}
|
||||||
|
if (queryForm.orderNo && queryForm.orderNo.trim()) {
|
||||||
|
query.orderNo = queryForm.orderNo.trim()
|
||||||
|
}
|
||||||
|
if (queryForm.paypalOrderId && queryForm.paypalOrderId.trim()) {
|
||||||
|
query.paypalOrderId = queryForm.paypalOrderId.trim()
|
||||||
|
}
|
||||||
|
if (queryForm.merchantOrderNo && queryForm.merchantOrderNo.trim()) {
|
||||||
|
query.merchantOrderNo = queryForm.merchantOrderNo.trim()
|
||||||
|
}
|
||||||
|
if (queryForm.status) {
|
||||||
|
query.status = queryForm.status
|
||||||
|
}
|
||||||
|
if (queryForm.paymentStatus) {
|
||||||
|
query.paymentStatus = queryForm.paymentStatus
|
||||||
|
}
|
||||||
|
if (queryForm.paypalStatus) {
|
||||||
|
query.paypalStatus = queryForm.paypalStatus
|
||||||
|
}
|
||||||
|
if (queryForm.paypalPaymentStatus) {
|
||||||
|
query.paypalPaymentStatus = queryForm.paypalPaymentStatus
|
||||||
|
}
|
||||||
|
if (queryForm.customerName && queryForm.customerName.trim()) {
|
||||||
|
query.customerName = queryForm.customerName.trim()
|
||||||
|
}
|
||||||
|
if (queryForm.customerPhone && queryForm.customerPhone.trim()) {
|
||||||
|
query.customerPhone = queryForm.customerPhone.trim()
|
||||||
|
}
|
||||||
|
if (queryForm.customerEmail && queryForm.customerEmail.trim()) {
|
||||||
|
query.customerEmail = queryForm.customerEmail.trim()
|
||||||
|
}
|
||||||
|
if (queryForm.productName && queryForm.productName.trim()) {
|
||||||
|
query.productName = queryForm.productName.trim()
|
||||||
|
}
|
||||||
|
if (queryForm.payerEmail && queryForm.payerEmail.trim()) {
|
||||||
|
query.payerEmail = queryForm.payerEmail.trim()
|
||||||
|
}
|
||||||
|
if (queryForm.payerName && queryForm.payerName.trim()) {
|
||||||
|
query.payerName = queryForm.payerName.trim()
|
||||||
|
}
|
||||||
|
if (queryForm.startTime && queryForm.startTime.trim()) {
|
||||||
|
query.startTime = queryForm.startTime.trim()
|
||||||
|
}
|
||||||
|
if (queryForm.endTime && queryForm.endTime.trim()) {
|
||||||
|
query.endTime = queryForm.endTime.trim()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 添加分页参数
|
||||||
|
query.pageNum = pagination.value.pageNum
|
||||||
|
query.pageSize = pagination.value.pageSize
|
||||||
|
|
||||||
|
const response = await queryOrders(query)
|
||||||
|
if (response.code === '0000' && response.data) {
|
||||||
|
const pageResult = response.data
|
||||||
|
orderList.value = pageResult.records || []
|
||||||
|
|
||||||
|
// 更新分页信息
|
||||||
|
pagination.value.total = pageResult.total || 0
|
||||||
|
pagination.value.pageNum = pageResult.current || 1
|
||||||
|
pagination.value.pageSize = pageResult.size || 10
|
||||||
|
|
||||||
|
if (orderList.value.length === 0) {
|
||||||
|
ElMessage.info('未找到符合条件的订单')
|
||||||
|
} else {
|
||||||
|
ElMessage.success(`查询到 ${pagination.value.total} 条订单，当前第 ${pagination.value.pageNum} 页`)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ElMessage.error(response.message || '查询订单列表失败')
|
||||||
|
orderList.value = []
|
||||||
|
pagination.value.total = 0
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('查询订单列表失败:', error)
|
||||||
|
ElMessage.error('查询订单列表失败')
|
||||||
|
orderList.value = []
|
||||||
|
pagination.value.total = 0
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置查询条件
|
||||||
|
const handleReset = () => {
|
||||||
|
Object.assign(queryForm, {
|
||||||
|
orderNo: '',
|
||||||
|
paypalOrderId: '',
|
||||||
|
merchantOrderNo: '',
|
||||||
|
status: '',
|
||||||
|
paymentStatus: '',
|
||||||
|
paypalStatus: '',
|
||||||
|
paypalPaymentStatus: '',
|
||||||
|
customerName: '',
|
||||||
|
customerPhone: '',
|
||||||
|
customerEmail: '',
|
||||||
|
productName: '',
|
||||||
|
payerEmail: '',
|
||||||
|
payerName: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: ''
|
||||||
|
})
|
||||||
|
pagination.value = {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0
|
||||||
|
}
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 分页大小改变
|
||||||
|
const handleSizeChange = (size) => {
|
||||||
|
pagination.value.pageSize = size
|
||||||
|
pagination.value.pageNum = 1 // 重置到第一页
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 页码改变
|
||||||
|
const handlePageChange = (page) => {
|
||||||
|
pagination.value.pageNum = page
|
||||||
|
handleQuery()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查看订单详情
|
||||||
|
const viewOrderDetail = (orderId) => {
|
||||||
|
router.push(`/order/detail/${orderId}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取订单状态文本
|
||||||
|
const getStatusText = (status) => {
|
||||||
|
const statusMap = {
|
||||||
|
'PENDING': '待支付',
|
||||||
|
'PAID': '已支付',
|
||||||
|
'SHIPPED': '已发货',
|
||||||
|
'COMPLETED': '已完成',
|
||||||
|
'CANCELLED': '已取消'
|
||||||
|
}
|
||||||
|
return statusMap[status] || status
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取订单状态标签类型
|
||||||
|
const getStatusTagType = (status) => {
|
||||||
|
const typeMap = {
|
||||||
|
'PENDING': 'warning',
|
||||||
|
'PAID': 'success',
|
||||||
|
'SHIPPED': 'info',
|
||||||
|
'COMPLETED': 'success',
|
||||||
|
'CANCELLED': 'danger'
|
||||||
|
}
|
||||||
|
return typeMap[status] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取支付状态文本
|
||||||
|
const getPaymentStatusText = (status) => {
|
||||||
|
const statusMap = {
|
||||||
|
'UNPAID': '未支付',
|
||||||
|
'PAID': '已支付',
|
||||||
|
'FAILED': '支付失败'
|
||||||
|
}
|
||||||
|
return statusMap[status] || status
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取支付状态标签类型
|
||||||
|
const getPaymentStatusTagType = (status) => {
|
||||||
|
const typeMap = {
|
||||||
|
'UNPAID': 'warning',
|
||||||
|
'PAID': 'success',
|
||||||
|
'FAILED': 'danger'
|
||||||
|
}
|
||||||
|
return typeMap[status] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取PayPal状态标签类型
|
||||||
|
const getPaypalStatusTagType = (status) => {
|
||||||
|
const typeMap = {
|
||||||
|
'CREATED': 'info',
|
||||||
|
'APPROVED': 'success',
|
||||||
|
'COMPLETED': 'success',
|
||||||
|
'VOIDED': 'danger'
|
||||||
|
}
|
||||||
|
return typeMap[status] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式化日期时间
|
||||||
|
const formatDateTime = (dateTime) => {
|
||||||
|
if (!dateTime) return ''
|
||||||
|
const date = new Date(dateTime)
|
||||||
|
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')
|
||||||
|
const seconds = String(date.getSeconds()).padStart(2, '0')
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 组件挂载时加载订单列表
|
||||||
|
onMounted(() => {
|
||||||
|
handleQuery()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.order-manage {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-card {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-form {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-name {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sku-name {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.original-amount {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 12px;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payment-amount {
|
||||||
|
color: #f56c6c;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-phone {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.customer-email {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paypal-order-id {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #606266;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.payer-email {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-paypal {
|
||||||
|
color: #c0c4cc;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.pagination-container {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container :deep(.el-pagination) {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Reference in New Issue
Block a user