新增订单详情

This commit is contained in:
gyq 2024-03-16 17:47:15 +08:00
parent 7d9e42ddef
commit 5ea9e7951f
10 changed files with 790 additions and 24 deletions

View File

@ -2,7 +2,7 @@ ENV = 'development'
# 接口地址
# VUE_APP_BASE_API = 'http://192.168.2.128:8000' // 刘一帆
# VUE_APP_BASE_API = 'http://192.168.2.98:8000' // 公司测试
# VUE_APP_BASE_API = 'https://405465h7n2.vicp.fun ' // 公司测试
# VUE_APP_BASE_API = 'http://192.168.2.96:8000' // 阿伟
VUE_APP_BASE_API = 'https://cashieradmin.sxczgkj.cn'
# VUE_APP_BASE_API = 'http://192.168.2.16:8000'

View File

@ -56,6 +56,28 @@ export default {
.shop_type_box {
display: flex;
&.disabled {
.item {
background-color: #f9f9f9;
&:hover {
cursor: not-allowed;
}
&.active {
border-color: #ececec;
}
.active_dot {
background-color: #ececec;
}
.s_title {
color: #999;
}
}
}
.item {
$borderColor: #1890FF;
margin-right: 14px;

View File

@ -62,14 +62,15 @@ export function dateAmount(day) {
* 商品销售排行
* @returns
*/
export function dateProduct(day, page) {
export function dateProduct(day, page, size) {
return request({
url: '/api/summary/dateProduct',
method: 'get',
params: {
shopId: localStorage.getItem('shopId'),
day: day,
page: page
page: page,
size: size
}
})
}

View File

@ -31,4 +31,16 @@ export function tbOrderInfoDownload(data) {
},
responseType: 'blob'
})
}
/**
* 通过Id查询订单
* @param {*} id
* @returns
*/
export function tbOrderInfoDetail(id) {
return request({
url: `/api/tbOrderInfo/${id}`,
method: 'get'
})
}

View File

@ -17,15 +17,25 @@
<div class="card_title">支付笔数</div>
</div>
<div class="number">{{ topData.paymentsNumber }}</div>
<div class="row"></div>
<div class="row" ref="cardPayChart" style="padding-bottom: 2px;"></div>
<div class="row">今日支付笔数{{ topData.paymentsNumberToday || 0 }}</div>
</div>
<div class="card">
<div class="header">
<div class="card_title">访问量</div>
</div>
<div class="number">{{ topData.totalVisits }}</div>
<div class="row" ref="cardCountChart"></div>
<div class="row">
<div class="dot"></div> 今日访问 {{ topData.totalVisitsToday || 0 }}
</div>
</div>
<div class="card">
<div class="header">
<div class="card_title">用户数</div>
</div>
<div class="number">{{ topData.totalUser }}</div>
<div class="row"></div>
<div class="row" ref="cardUserChart" style="padding-bottom: 2px;"></div>
<div class="row">今日新增 {{ topData.userToday || 0 }} <i class="icon el-icon-caret-top"></i> </div>
</div>
</div>
@ -52,7 +62,7 @@
<div class="tab_wrap">
<div class="item active">商品销售排行</div>
</div>
<el-radio-group v-model="saleTableActive" @change="dateProduct">
<el-radio-group v-model="saleTableActive" @change="rankChange">
<el-radio-button label="7">近7天</el-radio-button>
<el-radio-button label="30">30</el-radio-button>
</el-radio-group>
@ -63,12 +73,14 @@
<div class="card_title">销售数量</div>
</div>
<div class="number">{{ productCount }}</div>
<div class="product_chart_wrap" ref="productCountChart"></div>
</div>
<div class="card">
<div class="sale_data_header">
<div class="card_title">销售金额</div>
</div>
<div class="number">{{ productSum }}</div>
<div class="product_chart_wrap" ref="productSumChart"></div>
</div>
</div>
<div class="table">
@ -79,8 +91,8 @@
<el-table-column label="金额" prop="amount"></el-table-column>
</el-table>
<div class="head-container" style="padding-top: 20px;display: flex;justify-content: flex-end;">
<el-pagination :total="saleTableTotal" :current-page="saleTablePage" @current-change="paginationChange"
layout="total, prev, pager, next, jumper"></el-pagination>
<el-pagination :total="saleTableTotal" :page-size="saleTableSize" :current-page="saleTablePage"
@current-change="paginationChange" layout="total, prev, pager, next, jumper"></el-pagination>
</div>
</div>
</div>
@ -102,7 +114,7 @@
</template>
<script>
import { summaryGet, summaryTodayGet, dateProduct, dateAmount, datePayType } from '@/api/home'
import { summaryGet, summaryTodayGet, dateProduct, dateAmount, datePayType, summaryDateGet } from '@/api/home'
import echarts from 'echarts'
import { debounce } from '@/utils'
export default {
@ -112,6 +124,9 @@ export default {
topData: '',
saleTab: 'sale',
saleActive: '7',
cardPayChart: null,
cardCountChart: null,
cardUserChart: null,
saleLoading: false,
saleChart: null,
payChartDay: '7',
@ -125,7 +140,10 @@ export default {
saleTableLoading: false,
saleTablePage: 1,
saleTableTotal: 0,
__resizeHandler: null
saleTableSize: 5,
__resizeHandler: null,
productCountChart: null,
productSumChart: null
}
},
mounted() {
@ -133,6 +151,7 @@ export default {
this.dateAmount()
this.dateProduct()
this.datePayType()
this.summaryDateGet()
this.__resizeHandler = debounce(() => {
if (this.saleChart) {
@ -141,10 +160,197 @@ export default {
if (this.payChart) {
this.payChart.resize()
}
if (this.cardPayChart) {
this.cardPayChart.resize()
}
if (this.cardUserChart) {
this.cardUserChart.resize()
}
if (this.productCountChart) {
this.productCountChart.resize()
}
if (this.productSumChart) {
this.productSumChart.resize()
}
}, 100)
window.addEventListener('resize', this.__resizeHandler)
this.initCardUserChart()
},
methods: {
//
initCardPayChart(time = [], data = []) {
this.cardPayChart = echarts.init(this.$refs.cardPayChart)
this.cardPayChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
x: 0,
y: 0,
x2: 0,
y2: 0
},
xAxis: [{
type: 'category',
data: time,
show: false, // 线线
axisTick: {
show: false // 线
},
axisLine: {
show: false, // 线
},
axisLabel: {
show: false, //
},
splitLine: {
show: false // 线
}
}],
color: '#409eff',
yAxis: [
{
type: 'value',
show: false, // 线线
axisTick: {
show: false // 线
},
axisLine: {
show: false, // 线
},
axisLabel: {
show: false, //
},
splitLine: {
show: false // 线
}
}
],
series: [
{
data: data,
type: 'bar',
barWidth: '30%'
}
]
})
},
// 访
initCardCountChart(time = [], data = []) {
this.cardCountChart = echarts.init(this.$refs.cardCountChart)
this.cardCountChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
x: 0,
y: 0,
x2: 0,
y2: 0
},
xAxis: [{
type: 'category',
data: time,
show: false, // 线线
axisTick: {
show: false // 线
},
axisLine: {
show: false, // 线
},
axisLabel: {
show: false, //
},
splitLine: {
show: false // 线
}
}],
color: '#409eff',
yAxis: [
{
type: 'value',
show: false, // 线线
axisTick: {
show: false // 线
},
axisLine: {
show: false, // 线
},
axisLabel: {
show: false, //
},
splitLine: {
show: false // 线
}
}
],
series: [
{
data: data,
type: 'bar',
barWidth: '30%'
}
]
})
},
// 线
initCardUserChart(time = [], data = []) {
this.cardUserChart = echarts.init(this.$refs.cardUserChart)
this.cardUserChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
x: 0,
y: 10,
x2: 0,
y2: 2
},
xAxis: [{
type: 'category',
data: time,
show: false, // 线线
axisTick: {
show: false // 线
},
axisLine: {
show: false, // 线
},
axisLabel: {
show: false, //
},
splitLine: {
show: false // 线
}
}],
color: '#409eff',
yAxis: [
{
type: 'value',
show: false, // 线线
axisTick: {
show: false // 线
},
axisLine: {
show: false, // 线
},
axisLabel: {
show: false, //
},
splitLine: {
show: false // 线
}
}
],
series: [
{
data: data,
type: 'line',
symbol: 'none'
}
]
})
},
//
initSaleChart(time, data) {
this.saleChart = null
@ -260,9 +466,9 @@ export default {
async dateProduct() {
try {
this.saleTableLoading = true
const res = await dateProduct(this.saleTableActive, this.saleTablePage)
const res = await dateProduct(this.saleTableActive, this.saleTablePage, this.saleTableSize)
this.saleTable = res.totalProduct
this.saleTableTotal = res.productCount
this.saleTableTotal = res.total
this.productCount = res.productCount
this.productSum = res.productSum
setTimeout(() => {
@ -300,10 +506,171 @@ export default {
...res1,
...res2
}
let payTime = res1.countDateList.map(item => item.tradeDay)
let payData = res1.countDateList.map(item => item.count)
let countTime = res1.visitsCountList.map(item => item.tradeDay)
let countData = res1.visitsCountList.map(item => item.count)
this.initCardPayChart(payTime, payData)
this.initCardCountChart(countTime, countData)
console.log(this.topData)
} catch (error) {
console.log(error)
}
},
rankChange() {
this.dateProduct()
this.summaryDateGet()
},
//
initProduceChart(p1, p2) {
this.productCountChart = echarts.init(this.$refs.productCountChart)
this.productSumChart = echarts.init(this.$refs.productSumChart)
this.productCountChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
x: 0,
y: 0,
x2: 0,
y2: 0
},
xAxis: [{
boundaryGap: false,
type: 'category',
data: p1[0],
show: false, // 线线
axisTick: {
show: false // 线
},
axisLine: {
show: false, // 线
},
axisLabel: {
show: false, //
},
splitLine: {
show: false // 线
}
}],
color: '#409eff',
yAxis: [
{
type: 'value',
show: false, // 线线
axisTick: {
show: false // 线
},
axisLine: {
show: false, // 线
},
axisLabel: {
show: false, //
},
splitLine: {
show: false // 线
}
}
],
series: [
{
data: p1[1],
type: 'line',
symbol: 'none',
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#409eff' //
}, {
offset: 1,
color: '#409eff' //
}])
}
}
]
})
this.productSumChart.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
x: 0,
y: 0,
x2: 0,
y2: 0
},
xAxis: [{
boundaryGap: false,
type: 'category',
data: p2[0],
show: false, // 线线
axisTick: {
show: false // 线
},
axisLine: {
show: false, // 线
},
axisLabel: {
show: false, //
},
splitLine: {
show: false // 线
}
}],
color: '#409eff',
yAxis: [
{
type: 'value',
show: false, // 线线
axisTick: {
show: false // 线
},
axisLine: {
show: false, // 线
},
axisLabel: {
show: false, //
},
splitLine: {
show: false // 线
}
}
],
series: [
{
data: p2[1],
type: 'line',
symbol: 'none',
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#409eff' //
}, {
offset: 1,
color: '#409eff' //
}])
}
}
]
})
},
//
async summaryDateGet() {
try {
const res = await summaryDateGet(this.saleTableActive)
let p1 = [res.numList.map(item => item.tradeDay), res.numList.map(item => item.count)]
let p2 = [res.amountList.map(item => item.tradeDay), res.amountList.map(item => item.count)]
this.initProduceChart(p1, p2)
} catch (error) {
console.log(error);
}
}
}
}
</script>
@ -344,7 +711,7 @@ export default {
}
.row {
height: 40px;
height: 50px;
color: #555;
font-size: 14px;
display: flex;
@ -358,6 +725,15 @@ export default {
color: rgb(255, 85, 85);
margin-left: 4px;
}
.dot {
$size: 6px;
width: $size;
height: $size;
border-radius: 50%;
background-color: #1890FF;
margin-right: 6px;
}
}
}
}
@ -391,6 +767,10 @@ export default {
font-size: 24px;
height: 60px;
}
.product_chart_wrap {
height: 50px;
}
}
}

View File

@ -0,0 +1,334 @@
<template>
<el-drawer title="订单详情" size="50%" :visible.sync="drawer" direction="rtl" v-loading="loading">
<div class="header">
<div class="title">收银订单</div>
<div class="table">
<div class="item">
<div class="t">订单状态</div>
<div class="b">
<el-tag :type="detail.status == 'closed' ? 'success' : 'warning'">{{
detail.status |
statusFilter
}}</el-tag>
</div>
</div>
<div class="item">
<div class="t">订单金额</div>
<div class="b">
{{ detail.orderAmount }}
</div>
</div>
<div class="item">
<div class="t">订单时间</div>
<div class="b">
{{ detail.createdAt | timeFilter }}
</div>
</div>
</div>
</div>
<div class="container">
<el-tabs v-model="type" @tab-click="getTableData">
<el-tab-pane label="基本信息" name="1">
<div class="info_content">
<div class="item">
<div class="label">会员信息</div>
<div class="row">
<div>会员昵称-</div>
<div>联系电话-</div>
</div>
</div>
<div class="item">
<div class="label">收款详情</div>
<div class="row">
<div>商品金额{{ detail.productAmount }}</div>
<div>打包费{{ detail.packFee || '-' }}</div>
</div>
<div class="row">
<div>订单原价{{ detail.originAmount }}</div>
<div>优惠金额{{ detail.userCouponAmount || '-' }}</div>
<div>实收金额<span style="color: red;">{{ detail.payAmount }}</span> </div>
</div>
<div class="row">
<div>退款金额{{ detail.refundAmount }} <span style="color: #FF9731;cursor: pointer;"
v-if="detail.isRefund" @click="type = '3'">退款详情></span>
</div>
<div>支付方式现金</div>
</div>
</div>
<div class="item">
<div class="label">订单信息</div>
<div class="row">
<div>订单编号{{ detail.orderNo }}</div>
<div>订单类型{{ detail.sendType | sendTypeFilter }}</div>
<div>创建时间{{ detail.createdAt | timeFilter }}</div>
</div>
<div class="row">
<div>设备名称-</div>
<div>支付时间{{ detail.paidTime | timeFilter }}</div>
<div>更新时间{{ detail.updatedAt | timeFilter }}</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="商品信息" name="2">
<el-table :data="detail.detailList">
<el-table-column label="商品">
<template v-slot="scope">
<div class="shop_info">
<el-image :src="scope.row.productImg" style="width: 40px;height: 40px;"></el-image>
<span>{{ scope.row.productName }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="数量">
<template v-slot="scope">
x{{ scope.row.num }}
</template>
</el-table-column>
<el-table-column label="单价">
<template v-slot="scope">
{{ scope.row.price }}/
</template>
</el-table-column>
<el-table-column label="小计">
<template v-slot="scope">
{{ scope.row.priceAmount }}
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="退款详情" name="3" v-if="detail.isRefund">
<div class="refund_wrap">
<div class="row" v-for="item in refoundList" :key="item.id">
<div class="time">{{ item.createdAt | timeFilter }}</div>
<div class="list">
<div class="list_row" v-for="val in item.detailList">
<div class="item">
<el-image :src="val.productImg" style="width: 50px;height: 50px;"></el-image>
<span class="name">{{ val.productName }}</span>
</div>
<div class="item">
<span>退-{{ val.num }}</span>
</div>
<div class="item">
<span>{{ val.priceAmount }}</span>
</div>
<div class="item">
<span>-{{ val.priceAmount }}</span>
</div>
</div>
</div>
<div class="foot">退款-{{item.refundAmount}}</div>
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-drawer>
</template>
<script>
import orderEnum from '../orderEnum';
import dayjs from 'dayjs'
import { tbOrderInfoDetail, tbOrderInfoData } from '@/api/order'
export default {
data() {
return {
orderEnum,
drawer: false,
type: '1',
detail: '',
loading: false,
refoundList: []
}
},
filters: {
orderTypeFilter(t) {
if (t) {
return t && orderEnum.orderType.find(item => item.key == t).label
} else {
return t
}
},
sendTypeFilter(t) {
if (t) {
return orderEnum.sendType.find(item => item.key == t).label
} else {
return t
}
},
statusFilter(t) {
if (t) {
return t && orderEnum.status.find(item => item.key == t).label
} else {
return t
}
},
timeFilter(t) {
if (t) {
return dayjs(t).format('YYYY-MM-DD HH:mm:ss')
} else {
return '-'
}
}
},
methods: {
//
getTableData() {
if (this.type == '3') {
this.tbOrderInfoData()
}
},
// 退
async tbOrderInfoData() {
try {
const res = await tbOrderInfoData({
source: this.detail.id,
page: 0,
pageSize: 500,
orderType: '0'
})
this.refoundList = res.content
} catch (error) {
console.log(error)
}
},
//
async tbOrderInfoDetail(id) {
try {
this.loading = true
const res = await tbOrderInfoDetail(id)
this.detail = res
this.loading = false
} catch (error) {
console.log(error)
}
},
show(obj) {
this.drawer = true
this.type = '1'
this.detail = ''
this.tbOrderInfoDetail(obj.id)
}
}
}
</script>
<style scoped lang="scss">
.shop_info {
display: flex;
span {
margin-left: 6px;
}
}
.header {
padding: 0 20px 0;
.title {
font-size: 20px;
color: #FF9731;
}
.table {
display: flex;
padding: 20px 0;
.item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 14px;
.b {
padding-top: 20px;
}
}
}
}
.container {
padding: 0 20px;
font-size: 14px;
.info_content {
padding: 20px 0;
.item {
border-bottom: 1px dashed #ececec;
padding-bottom: 20px;
&:not(:first-child) {
margin-top: 20px;
}
.label {
position: relative;
padding-left: 20px;
color: #333;
&::after {
content: "";
width: 4px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #1890FF;
}
}
.row {
display: flex;
color: #555;
padding-top: 20px;
div {
width: 33.333%;
}
}
}
}
.refund_wrap {
.row {
border-bottom: 1px dashed #ececec;
padding-bottom: 20px;
&:not(:first-child) {
margin-top: 20px;
}
.time {
font-weight: bold;
color: #333;
}
.list {
.list_row {
display: flex;
padding-top: 10px;
.item {
flex: 1;
display: flex;
color: #555;
.name {
margin-left: 6px;
}
}
}
}
.foot {
color: #333;
display: flex;
justify-content: flex-end;
}
}
}
}
</style>

View File

@ -81,8 +81,10 @@
<div class="row" v-for="item in scope.row.detailList" :key="item.id">
<el-image :src="item.productImg" class="cover" lazy></el-image>
<div class="info">
<div class="name">{{ item.productName }}</div>
<div class="sku">{{ item.productSkuName }}</div>
<div class="name">{{ item.productName }} <span class="refund"
v-if="item.status == 'refunding' || item.status == 'refund'">(退 - {{
item.num }})</span></div>
<div class="sku">{{ item.productSkuName }} </div>
</div>
</div>
</div>
@ -91,6 +93,9 @@
<el-table-column label="订单金额">
<template v-slot="scope">
<div>{{ scope.row.orderType | orderTypeFilter }}</div>
<div class="refund" v-if="scope.row.status == 'refunding' || scope.row.status == 'refund'">
退款-{{
scope.row.refundAmount }}</div>
<div>{{ scope.row.productAmount }}</div>
</template>
</el-table-column>
@ -109,6 +114,11 @@
{{ scope.row.createdAt | timeFilter }}
</template>
</el-table-column>
<el-table-column label="操作">
<template v-slot="scope">
<el-button type="text" @click="$refs.orderDetail.show(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="head-container">
@ -116,6 +126,7 @@
@current-change="paginationChange" @size-change="sizeChange"
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
<orderDetail ref="orderDetail" />
</div>
</template>
@ -125,7 +136,11 @@ import { tbShopPayTypeGet } from '@/api/setting'
import { tbOrderInfoData, tbOrderInfoDownload } from '@/api/order'
import dayjs from 'dayjs'
import { downloadFile } from '@/utils/index'
import orderDetail from './components/orderDetail'
export default {
components: { orderDetail },
data() {
return {
orderEnum,
@ -298,6 +313,11 @@ export default {
}
}
.refund {
color: #FF9731;
font-weight: bold;
}
.table_order_info {
.order_no {
color: #999;

View File

@ -2,7 +2,7 @@
<div class="app-container">
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="商品类型" prop="typeEnum">
<div class="shop_type_box">
<div class="shop_type_box" :class="{ disabled: form.id }">
<div class="item" v-for="(item, index) in shopTypes" :key="index"
:class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
<div class="s_title">{{ item.label }}</div>
@ -116,7 +116,7 @@
</el-table>
<div class="tips" v-if="form.isShowMall">小程序商城必须设置库存数量大于0</div>
</el-form-item>
<el-form-item label="选择规格" v-if="shopTypes[shopTypesActive].typeEnum == 'sku'">
<el-form-item label="选择规格" v-if="shopTypes[shopTypesActive].typeEnum == 'sku' && !form.id">
<el-select v-model="form.specId" placeholder="请选择规格" style="width: 500px;" @change="selectSpecHandle">
<el-option :label="item.name" :value="item.id" v-for="item in specList" :key="item.id"></el-option>
</el-select>
@ -423,10 +423,6 @@ export default {
})
this.selectSpecResult = true
}
if (res.typeEnum == 'sku') {
this.createSkuBody()
}
} catch (error) {
console.log(error)
}
@ -481,6 +477,7 @@ export default {
},
//
changeTypeEnum(index) {
if (this.form.id) return
this.shopTypesActive = index
const typeEnum = this.shopTypes[index].typeEnum
this.form.typeEnum = typeEnum

View File

@ -7,7 +7,7 @@
</el-form-item>
<el-form-item label="选择商品">
<div>
<el-button type="primary" icon="el-icon-plus" @click="$refs.shopListRef.show()">
<el-button type="primary" icon="el-icon-plus" @click="$refs.shopListRef.show([...productIds])">
添加商品
</el-button>
</div>

View File

@ -50,12 +50,12 @@
}" format="HH:mm" value-format="HH:mm">
</el-time-picker>
</el-form-item>
<el-form-item label="结算类型">
<!-- <el-form-item label="结算类型">
<el-radio-group v-model="form.settleType">
<el-radio :label="0">今日</el-radio>
<el-radio :label="1">次日</el-radio>
</el-radio-group>
</el-form-item>
</el-form-item> -->
<el-form-item label="结算时间" prop="settleTime">
<el-time-picker placeholder="请选择结算时间" v-model="form.settleTime" :picker-options="{
selectableRange: '00:00:00 - 23:59:59',