325 lines
7.2 KiB
Vue
325 lines
7.2 KiB
Vue
<template>
|
||
<CommonPage show-footer :title="$route.title">
|
||
<n-row gutter="12">
|
||
<n-col :span="24">
|
||
<div flex>
|
||
<n-card w-500 rounded-5 style="background-color: #5579e9">
|
||
<n-statistic label="交易金额（元）" tabular-nums>
|
||
<n-number-animation :from="0" :to="cardData.payments" :precision="2" />
|
||
</n-statistic>
|
||
</n-card>
|
||
<n-card ml-10 w-500 rounded-5 style="background-color: #e74f5b">
|
||
<n-statistic label="订单数量（条）" tabular-nums>
|
||
<n-number-animation :from="0" :to="cardData.count" />
|
||
</n-statistic>
|
||
</n-card>
|
||
<n-card ml-10 w-500 rounded-5 style="background-color: #00b4c3">
|
||
<n-statistic label="赠送豆子（个）" tabular-nums>
|
||
<n-number-animation :from="0" :to="cardData.total_pulse" :precision="2" />
|
||
</n-statistic>
|
||
</n-card>
|
||
<n-card ml-10 w-500 rounded-5 style="background-color: #f1b301">
|
||
<n-statistic label="挂帐（元）" tabular-nums>
|
||
<n-number-animation :from="0" :to="cardData.onAccount" :precision="2" />
|
||
</n-statistic>
|
||
</n-card>
|
||
<n-card ml-10 w-500 rounded-5 style="background-color: #ffa940">
|
||
<n-statistic label="抹零（元）" tabular-nums>
|
||
<n-number-animation :from="0" :to="cardData.zero" :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.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 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'
|
||
import { NEllipsis } from 'naive-ui'
|
||
|
||
const loading = ref(false)
|
||
|
||
const queryData = ref({
|
||
status: '',
|
||
time: null,
|
||
word: '',
|
||
selectKey: null,
|
||
})
|
||
|
||
const songs = ref([
|
||
{
|
||
value: 1,
|
||
label: '未付款',
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '已付款',
|
||
},
|
||
{
|
||
value: 3,
|
||
label: '挂帐中',
|
||
},
|
||
])
|
||
|
||
const selectOptions = ref([
|
||
{
|
||
value: 0,
|
||
label: '商品名称',
|
||
},
|
||
{
|
||
value: 1,
|
||
label: '用户昵称',
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '手机号',
|
||
},
|
||
{
|
||
value: 3,
|
||
label: '订单号',
|
||
},
|
||
])
|
||
|
||
const columns = ref([
|
||
{
|
||
title: '订单号',
|
||
align: 'center',
|
||
key: 'oid',
|
||
},
|
||
{
|
||
title: '用户',
|
||
align: 'center',
|
||
slot: 'nickName',
|
||
render: (row) => h('span', {}, { default: () => row.User.nickName }),
|
||
},
|
||
{
|
||
title: '手机号',
|
||
align: 'center',
|
||
key: 'phone',
|
||
},
|
||
{
|
||
title: '商品名称',
|
||
align: 'center',
|
||
slot: 'goods_name',
|
||
render: (row) => {
|
||
const el = []
|
||
row.OrderGoods.forEach((item) => {
|
||
el.push(
|
||
h(
|
||
NEllipsis,
|
||
{
|
||
style: 'max-width: 100px',
|
||
},
|
||
{
|
||
default: () => `${item.Goods.name}|${item.pay_price}元|X${item.number}`,
|
||
}
|
||
)
|
||
)
|
||
})
|
||
return el
|
||
},
|
||
},
|
||
{
|
||
title: '商品数量',
|
||
align: 'center',
|
||
key: 'count',
|
||
},
|
||
{
|
||
title: '商品总价',
|
||
align: 'center',
|
||
key: 'payments',
|
||
},
|
||
{
|
||
title: '实付金额',
|
||
align: 'center',
|
||
key: 'pay_amount',
|
||
},
|
||
{
|
||
title: '抹零',
|
||
align: 'center',
|
||
key: 'zero',
|
||
},
|
||
{
|
||
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', '挂帐中')
|
||
}
|
||
},
|
||
},
|
||
{
|
||
title: '下单时间',
|
||
align: 'center',
|
||
key: 'add_time',
|
||
},
|
||
{
|
||
title: '挂帐时间',
|
||
align: 'center',
|
||
key: 'on_account_time',
|
||
},
|
||
{
|
||
title: '付款时间',
|
||
align: 'center',
|
||
key: 'payment_time',
|
||
},
|
||
// {
|
||
// title: '操作',
|
||
// align: 'center',
|
||
// slot: 'action',
|
||
// render() {
|
||
// // console.log(row)
|
||
// },
|
||
// },
|
||
])
|
||
|
||
const data = ref([])
|
||
|
||
const cardData = ref({
|
||
total: 0,
|
||
service: 0,
|
||
count: 0,
|
||
})
|
||
|
||
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,
|
||
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['GoodName'] = 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.payments = res.data.payments
|
||
cardData.value.onAccount = res.data.onAccount
|
||
cardData.value.total_pulse = res.data.total_pulse
|
||
cardData.value.count = res.data.total
|
||
} catch (error) {
|
||
$message.error(error.msg)
|
||
throw error
|
||
}
|
||
loading.value = false
|
||
}
|
||
|
||
const clear = () => {
|
||
queryData.value = {
|
||
status: '',
|
||
time: null,
|
||
word: '',
|
||
selectKey: null,
|
||
}
|
||
getList()
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.n-statistic__label) {
|
||
color: #fff !important;
|
||
font-size: 16px;
|
||
}
|
||
:deep(.n-statistic-value__content) {
|
||
color: #fff !important;
|
||
font-size: 16px;
|
||
}
|
||
</style>
|