455 lines
9.9 KiB
Vue
455 lines
9.9 KiB
Vue
<template>
|
||
<CommonPage show-footer :title="$route.title">
|
||
<n-row gutter="12">
|
||
<n-col :span="24">
|
||
<div flex>
|
||
<n-card w-200 rounded-5>
|
||
<n-statistic label="交易额(元)" tabular-nums>
|
||
<n-number-animation :from="0" :to="cardData.total" :precision="2" />
|
||
</n-statistic>
|
||
</n-card>
|
||
<n-card ml-10 w-200 rounded-5>
|
||
<n-statistic label="订单数量" tabular-nums>
|
||
<n-number-animation :from="0" :to="cardData.count" />
|
||
</n-statistic>
|
||
</n-card>
|
||
<n-card ml-10 w-200 rounded-5>
|
||
<n-statistic label="赠送豆子" tabular-nums>
|
||
<n-number-animation :from="0" :to="cardData.pulse" />
|
||
</n-statistic>
|
||
</n-card>
|
||
<n-card ml-10 w-200 rounded-5>
|
||
<n-statistic label="总佣金" tabular-nums>
|
||
<n-number-animation :from="0" :to="cardData.commission" :precision="2" />
|
||
</n-statistic>
|
||
</n-card>
|
||
</div>
|
||
</n-col>
|
||
<n-col :span="24" mt-10>
|
||
<div>
|
||
<span>支付方式：</span>
|
||
<n-radio-group v-model:value="queryData.pay_type">
|
||
<n-radio-button
|
||
v-for="song in [
|
||
{
|
||
label: '微信',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '积分',
|
||
value: 2,
|
||
},
|
||
{
|
||
label: '小猪积分',
|
||
value: 3,
|
||
},
|
||
]"
|
||
:key="song.value"
|
||
:value="song.value"
|
||
:label="song.label"
|
||
/>
|
||
</n-radio-group>
|
||
</div>
|
||
</n-col>
|
||
<n-col :span="24" mt-10>
|
||
<div>
|
||
<span>订单状态：</span>
|
||
<n-radio-group v-model:value="queryData.status">
|
||
<n-radio-button
|
||
v-for="song in songs"
|
||
:key="song.value"
|
||
:value="song.value"
|
||
:label="song.label"
|
||
/>
|
||
</n-radio-group>
|
||
</div>
|
||
</n-col>
|
||
<n-col :span="24">
|
||
<div mt-10 flex items-center>
|
||
<div w-100>关键字搜索：</div>
|
||
<n-input-group>
|
||
<n-select
|
||
v-model:value="queryData.selectKey"
|
||
:style="{ width: '25rem' }"
|
||
:options="selectOptions"
|
||
placeholder="请选择"
|
||
/>
|
||
<n-input v-model:value="queryData.word" :style="{ width: '20%' }" />
|
||
</n-input-group>
|
||
</div>
|
||
</n-col>
|
||
<n-col :span="10">
|
||
<div mt-10 flex items-center>
|
||
<span w-100>订单时间：</span>
|
||
<n-date-picker
|
||
v-model:formatted-value="queryData.time"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
type="datetimerange"
|
||
clearable
|
||
/>
|
||
</div>
|
||
</n-col>
|
||
<n-col :span="24">
|
||
<div mt-10>
|
||
<n-button type="primary" @click="getList">搜索</n-button>
|
||
<n-button type="primary" ml-10 @click="exportTable">导出表格</n-button>
|
||
<n-button ml-10 @click="clear">重置</n-button>
|
||
</div>
|
||
</n-col>
|
||
</n-row>
|
||
<n-data-table
|
||
class="mt-5"
|
||
:loading="loading"
|
||
:columns="columns"
|
||
:data="data"
|
||
:pagination="pagination"
|
||
:bordered="false"
|
||
:scroll-x="2000"
|
||
remote
|
||
/>
|
||
</CommonPage>
|
||
</template>
|
||
|
||
<script setup>
|
||
import api from './api'
|
||
import { NButton, NPopconfirm } from 'naive-ui'
|
||
import * as XLSX from 'xlsx'
|
||
|
||
const loading = ref(false)
|
||
|
||
const queryData = ref({
|
||
status: '',
|
||
time: null,
|
||
word: '',
|
||
selectKey: null,
|
||
pay_type: null,
|
||
})
|
||
|
||
const songs = ref([
|
||
{
|
||
value: 1,
|
||
label: '待付款',
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '待核销',
|
||
},
|
||
{
|
||
value: 3,
|
||
label: '已核销',
|
||
},
|
||
{
|
||
value: 4,
|
||
label: '已过期',
|
||
},
|
||
{
|
||
value: 5,
|
||
label: '已销售',
|
||
},
|
||
])
|
||
|
||
const selectOptions = ref([
|
||
{
|
||
value: 0,
|
||
label: '商品名称',
|
||
},
|
||
{
|
||
value: 1,
|
||
label: '用户昵称',
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '手机号',
|
||
},
|
||
{
|
||
value: 3,
|
||
label: '订单号',
|
||
},
|
||
])
|
||
|
||
const columns = ref([
|
||
{
|
||
title: '订单号',
|
||
align: 'center',
|
||
key: 'oid',
|
||
width: 200,
|
||
fixed: 'left',
|
||
},
|
||
{
|
||
title: '用户',
|
||
align: 'center',
|
||
slot: 'user',
|
||
width: 100,
|
||
fixed: 'left',
|
||
render: (row) => {
|
||
return [
|
||
h(
|
||
'div',
|
||
{},
|
||
{
|
||
default: () => row.User.nickName,
|
||
}
|
||
),
|
||
]
|
||
},
|
||
},
|
||
{
|
||
title: '用户电话',
|
||
align: 'center',
|
||
slot: 'phone',
|
||
render: (row) => {
|
||
return [
|
||
h(
|
||
'div',
|
||
{},
|
||
{
|
||
default: () => row.User.phone,
|
||
}
|
||
),
|
||
]
|
||
},
|
||
},
|
||
{
|
||
title: '商品名称',
|
||
align: 'center',
|
||
slot: 'goods_name',
|
||
render: (row) => {
|
||
const el = []
|
||
row.OrderGoods.forEach((item) => {
|
||
el.push(
|
||
h(
|
||
'div',
|
||
{},
|
||
{
|
||
default: () =>
|
||
`${item.Goods.name}|${item.pay_price}元或${item.pay_integral}积分|X${item.number}`,
|
||
}
|
||
)
|
||
)
|
||
})
|
||
return el
|
||
},
|
||
},
|
||
{
|
||
title: '商品数量',
|
||
align: 'center',
|
||
key: 'count',
|
||
},
|
||
{
|
||
title: '订单金额',
|
||
align: 'center',
|
||
slot: 'number',
|
||
render: (row) => h('span', `${row.price}元`),
|
||
},
|
||
{
|
||
title: '积分抵扣',
|
||
align: 'center',
|
||
slot: 'discount_price',
|
||
render: (row) => h('span', `${row.discount_price}`),
|
||
},
|
||
{
|
||
title: '支付方式',
|
||
align: 'center',
|
||
slot: 'pay_type',
|
||
render: (row) => h('span', row.pay_type === 1 ? '微信' : '平台抵扣'),
|
||
},
|
||
{
|
||
title: '订单状态',
|
||
align: 'center',
|
||
slot: 'status',
|
||
render(row) {
|
||
switch (row.status) {
|
||
case 0:
|
||
return h('span', '待付款')
|
||
case 1:
|
||
return h('span', '待核销')
|
||
case 2:
|
||
return h('span', '已核销')
|
||
case 3:
|
||
return h('span', '已过期')
|
||
}
|
||
},
|
||
},
|
||
{
|
||
title: '赠送豆子',
|
||
align: 'center',
|
||
key: 'gift_pulse',
|
||
},
|
||
{
|
||
title: '赠送积分',
|
||
align: 'center',
|
||
key: 'gift_integral',
|
||
},
|
||
{
|
||
title: '推广积分',
|
||
align: 'center',
|
||
key: 'commission_integral',
|
||
},
|
||
{
|
||
title: '分佣类型',
|
||
align: 'center',
|
||
slot: 'commission_type',
|
||
render: (row) => {
|
||
switch (row.commission_type) {
|
||
case 1:
|
||
return h('span', '百分比')
|
||
case 2:
|
||
return h('span', '固定金额')
|
||
}
|
||
},
|
||
},
|
||
{
|
||
title: '分佣比例',
|
||
align: 'center',
|
||
key: 'commission',
|
||
},
|
||
{
|
||
title: '下单时间',
|
||
align: 'center',
|
||
key: 'add_time',
|
||
},
|
||
{
|
||
title: '核销时间',
|
||
align: 'center',
|
||
key: 'cancel_time',
|
||
},
|
||
{
|
||
title: '操作',
|
||
align: 'center',
|
||
slot: 'action',
|
||
fixed: 'right',
|
||
render(row) {
|
||
const el = []
|
||
if (row.status === 1) {
|
||
el.push(
|
||
h(
|
||
NPopconfirm,
|
||
{
|
||
onPositiveClick: async () => {
|
||
await api.verifyOrder({
|
||
oids: [row.oid],
|
||
})
|
||
getList()
|
||
},
|
||
onNegativeClick: () => $message.info('已取消'),
|
||
},
|
||
{
|
||
default: () => `确定核销此${row.oid}订单吗?`,
|
||
trigger: () =>
|
||
h(
|
||
NButton,
|
||
{
|
||
type: 'primary',
|
||
size: 'small',
|
||
text: true,
|
||
},
|
||
{
|
||
default: () => '核销',
|
||
}
|
||
),
|
||
}
|
||
)
|
||
)
|
||
}
|
||
return el
|
||
},
|
||
},
|
||
])
|
||
|
||
const data = ref([])
|
||
|
||
const cardData = ref({
|
||
total: 0,
|
||
service: 0,
|
||
count: 0,
|
||
commission: 0,
|
||
pulse: 0,
|
||
})
|
||
|
||
const pagination = ref({
|
||
page: 1,
|
||
pageSize: 10,
|
||
itemCount: 0,
|
||
showSizePicker: true,
|
||
pageSizes: [10, 20, 50, 100],
|
||
onChange: (page) => {
|
||
pagination.value.page = page
|
||
getList()
|
||
},
|
||
onUpdatePageSize: (pageSize) => {
|
||
pagination.value.pageSize = pageSize
|
||
pagination.value.page = 1
|
||
getList()
|
||
},
|
||
})
|
||
|
||
onMounted(() => {
|
||
getList()
|
||
})
|
||
|
||
const getList = async () => {
|
||
loading.value = true
|
||
try {
|
||
const query_data = {
|
||
Status: queryData.value.status || '',
|
||
PayType: queryData.value.pay_type || '',
|
||
StartTime: queryData.value.time === null ? '' : queryData.value.time[0] || '',
|
||
EndTime: queryData.value.time === null ? '' : queryData.value.time[1] || '',
|
||
}
|
||
switch (queryData.value.selectKey) {
|
||
case 0:
|
||
query_data['GoodsName'] = queryData.value.word
|
||
break
|
||
case 1:
|
||
query_data['UserName'] = queryData.value.word
|
||
break
|
||
case 2:
|
||
query_data['Phone'] = queryData.value.word
|
||
break
|
||
case 3:
|
||
query_data['Oid'] = queryData.value.word
|
||
break
|
||
}
|
||
const res = await api.getOrder({
|
||
pageNum: pagination.value.page,
|
||
pageSize: pagination.value.pageSize,
|
||
...query_data,
|
||
})
|
||
data.value = res.data.data || []
|
||
pagination.value.itemCount = res.data.total
|
||
cardData.value.total = res.data.number
|
||
cardData.value.service = res.data.commission
|
||
cardData.value.count = res.data.total
|
||
cardData.value.commission = res.data.total_commission
|
||
cardData.value.pulse = res.data.total_pulse
|
||
} catch (error) {
|
||
$message.error(error.msg)
|
||
throw error
|
||
}
|
||
loading.value = false
|
||
}
|
||
|
||
const clear = () => {
|
||
queryData.value = {
|
||
status: '',
|
||
time: null,
|
||
word: '',
|
||
selectKey: null,
|
||
pay_type: null,
|
||
}
|
||
getList()
|
||
}
|
||
|
||
const exportTable = () => {
|
||
// 将数据转换为工作簿
|
||
const worksheet = XLSX.utils.json_to_sheet(data.value)
|
||
const workbook = XLSX.utils.book_new()
|
||
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
|
||
|
||
// 生成Excel文件并触发下载
|
||
XLSX.writeFile(workbook, 'table.xlsx')
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|