376 lines
8.0 KiB
Vue
376 lines
8.0 KiB
Vue
<template>
|
||
<CommonPage show-footer :title="$route.title">
|
||
<n-row gutter="12">
|
||
<n-col :span="24">
|
||
<div flex>
|
||
<n-card w-500>
|
||
<n-statistic label="订单流水（元）" tabular-nums>
|
||
<n-number-animation :from="0" :to="cardData.total" :precision="2" />
|
||
</n-statistic>
|
||
</n-card>
|
||
<!-- <n-card ml-10 w-500>
|
||
<n-statistic label="订单佣金（元）" tabular-nums>
|
||
<n-number-animation :from="0" :to="Number(cardData.service)" :precision="2" />
|
||
</n-statistic>
|
||
</n-card> -->
|
||
<n-card ml-10 w-500>
|
||
<n-statistic label="订单数量" tabular-nums>
|
||
<n-number-animation :from="0" :to="cardData.count" />
|
||
</n-statistic>
|
||
</n-card>
|
||
<n-card ml-10 w-500>
|
||
<n-statistic label="赠送豆子" tabular-nums>
|
||
<n-number-animation :from="0" :to="cardData.gift_pulse" />
|
||
</n-statistic>
|
||
</n-card>
|
||
</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" 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,
|
||
},
|
||
]"
|
||
: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: '15%' }"
|
||
: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 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="1800"
|
||
remote
|
||
/>
|
||
</CommonPage>
|
||
</template>
|
||
|
||
<script setup>
|
||
import api from './api'
|
||
|
||
const loading = ref(false)
|
||
|
||
const queryData = ref({
|
||
status: '',
|
||
time: null,
|
||
word: '',
|
||
selectKey: null,
|
||
pay_type: null,
|
||
})
|
||
|
||
const cardData = ref({
|
||
total: 0,
|
||
service: 0,
|
||
count: 0,
|
||
gift_pulse: 0,
|
||
})
|
||
|
||
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: '订单号',
|
||
},
|
||
{
|
||
value: 4,
|
||
label: '商家名称',
|
||
},
|
||
])
|
||
|
||
const columns = ref([
|
||
{
|
||
title: '订单号',
|
||
align: 'center',
|
||
key: 'oid',
|
||
width: 200,
|
||
fixed: 'left',
|
||
},
|
||
{
|
||
title: '用户',
|
||
align: 'center',
|
||
slot: 'user',
|
||
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.pay_type === 1 ? `${row.price}元` : `${row.exchange}积分`),
|
||
},
|
||
{
|
||
title: '支付方式',
|
||
align: 'center',
|
||
slot: 'pay_type',
|
||
render: (row) => h('span', row.pay_type === 1 ? '微信' : '积分'),
|
||
},
|
||
{
|
||
title: '商家名称',
|
||
align: 'center',
|
||
slot: 'store_name',
|
||
render: (row) => h('span', row.Store.name),
|
||
},
|
||
// {
|
||
// title: '订单佣金(元)',
|
||
// align: 'center',
|
||
// key: 'commission_number',
|
||
// },
|
||
{
|
||
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: 'add_time',
|
||
},
|
||
{
|
||
title: '核销时间',
|
||
align: 'center',
|
||
key: 'cancel_time',
|
||
},
|
||
{
|
||
title: '操作',
|
||
align: 'center',
|
||
slot: 'action',
|
||
render() {
|
||
// console.log(row)
|
||
},
|
||
},
|
||
])
|
||
|
||
const data = ref([])
|
||
|
||
const pagination = ref({
|
||
page: 1,
|
||
pageSize: 10,
|
||
itemCount: 0,
|
||
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
|
||
case 4:
|
||
query_data['StoreName'] = queryData.value.word
|
||
}
|
||
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.gift_pulse = res.data.gift_pulse
|
||
} catch (error) {
|
||
$message.error(error.msg)
|
||
}
|
||
loading.value = false
|
||
}
|
||
|
||
const clear = () => {
|
||
queryData.value = {
|
||
status: '',
|
||
time: null,
|
||
word: '',
|
||
selectKey: null,
|
||
pay_type: null,
|
||
}
|
||
getList()
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|