新增订单详情
This commit is contained in:
parent
7d9e42ddef
commit
5ea9e7951f
|
|
@ -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'
|
||||
|
|
|
|||
22
src/App.vue
22
src/App.vue
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
})
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue