{{scope.row.orderCount}}
<el-pagination
style=“display:flex; justify-content:center; margin:10px”
layout=“total, prev, pager, next, jumper”
:current-page=“currentPage”
@current-change=“currentPageChange”
:page-size=“pageNum”
:total=“total”
background
{{ scope.row.name }}
{{ scope.row.orderSum }}
2. 数据结构概览
data() {
return {
loading: true,
isflag: true, //
isInit: false, // 初始化
noresult: false,
pageNum: 100, // 最大显示个数
currentPage: 1, // 当前页码
total: 0,
goodsId: ‘’, // 商品ID
goodsName: ‘’, // 商品名称
type: ‘’, // 商品类型
priceType: ‘’, // 商品现价
sellPrice: ‘’,
orderList: [],
startTime: null, // 开课时间
orderNumByDay: [],
count: 0, // 统计
paymentStartTime: null, // 支付成功开始时间
paymentEndTime: null, // 支付成功结束时间
goodsTypeOptions: [ // 商品类型选项
{
type: ‘0’,
label: ‘试听课’,
},
{
type: ‘1’,
label: ‘主修课’,
},
{
type: ‘2’,
label: ‘辅修课’,
},
{
type: ‘3’,
label: ‘全部’,
},
],
goodsPriceOptions: [ // 商品价格选项
{
priceType: ‘0’,
label: ‘0元’,
},
{
priceType: ‘1’,
label: ‘非0元’,
},
{
priceType: ‘2’,
label: ‘全部’,
},
],
acount: [ // 下方统计表格数据结构
{
name: ‘统计’,
type: ‘’,
goodsName: ‘’,
priceType: ‘’,
startTime: ‘’,
orderSum: 0,
},
],
search: { // 存放查询结果，便于导出
pageIndex: 1,
pageNum: 100,
goodsId: ‘’,
goodsName: ‘’,
isInit: true,
type: ‘’,
priceType: ‘’,
startTime: ‘’,
paymentStartTime: ‘’,
paymentEndTime: ‘’,
},
time: [],
}
},
二、功能实现
1. 页面初始化数据
思路：在created中初始化页面数据,调用函数getOrderList() 。首次页面加载会显示当前日期的下周一的情况（这里后端已经做了处理，前端只需要计算时间戳，并传参isInit即可，此时currentpage=1默认显示第一页）使用 post请求数据即可。
接口：/admin/statistics/orderStatistics
created() {
this.getOrderList() // 页面初始化
this.isflag = true
this.$ajax.timeout = 600000
},
// methods
async getOrderList() {
// 获取当前日期的下周一时间戳
var myDate = new Date()
myDate.setDate(
myDate.getDay() == 0
-
? myDate.getDate() - 6
- myDate.getDate() - (myDate.getDay() - 1)
) //先获取当前日期的周一
myDate.setHours(0,0,0,0)
var nextmon = myDate.setDate(myDate.getDate() + 7) //+7代表下一个周一
var temp = new Date(nextmon)
temp = temp.toISOString();
this.startTime = temp
this.isInit = true
this.getListAjax()
},
async getListAjax() {
this.commonListAjax(1)
},
2. 清空搜索数据
// 清空按钮
async clearBtn() {
this.time = []
this.goodsId = null
this.goodsName = null
this.type = null
this.priceType = null
this.startTime = null
},
3. 页码更改
结合el-pagination进行绑定currentPageChange() 是页面通用函数
<el-pagination
style=“display:flex; justify-content:center; margin:10px”
layout=“total, prev, pager, next, jumper”
:current-page=“currentPage”
@current-change=“currentPageChange”
:page-size=“pageNum”
:total=“total”
background
// method实现
async currentPageChange(currentPage) {
console.log(currentPage)
this.currentPage = currentPage
this.commonListAjax(currentPage)
},
4. 查询按钮的实现
思路：先做判空的处理，然后调用getListAjax() 函数，间接调用commonListAjax(1) （1表示显示查询结果的第一页，同第一次加载页面初始化时的commonListAjax数据请求操作）。接口：/admin/statistics/orderStatistics。
注意：这里在最后有一个修改search查询数组的操作，主要用来暂存查询结果条件，便于导出。
// 搜索按钮
async searchBtn() {
// console.log(‘search’)
if (this.time == null) this.time = []
if (
this.goodsId || this.goodsName || this.type ||
this.priceType || this.time[0] != undefined || this.startTime != null
) {
this.getListAjax()
// this.isSearched = true;
} else {
this.$message.error(‘请选择商品ID /商品类型 /商品后台名称 /商品现价 /开课日期后再查询’)
}
this.isflag = false
},
在baseData() 中对查询的开始时间和结束时间，以及商品ID进行了处理
baseData() {
let start, end
if (this.time == null) this.time = []
if (this.time[0] == undefined) {
start = null
end = null
} else {
start = this.time[0]
end = this.time[1]
}
let goodsId = null
if (this.goodsId !== null) {
goodsId = Number(this.goodsId)
if (Number.isNaN(goodsId)) {
this.$message.error(‘请输入正确的商品Id’)
return -1
}
}
return {
goodsId,
paymentStartTime: start,
paymentEndTime: end,
}
},
调用接口返回数据之前的判断：（1）如果20001 查询时常有问题 （2） 如果orderResultList为null，说明无查询结果，需要将orderResultList置空（注意，这里不能直接把orderResultList赋值为空对象，这样后面无法拿到对象中的数据，需要对对象中的数据进行赋空）这里使用的方法比较复杂，其实直接使用parse() 和 Stringify（）也可以实现同样的效果。
注意：这里在最后有一个修改search查询数组的操作，主要用来暂存查询结果条件，便于导出。
async commonListAjax(currentPage) {
const tmpData = this.baseData()
if (tmpData === -1) {
this.loading = false
return
}
const { paymentStartTime, paymentEndTime, goodsId } = tmpData
let res = await this.$ajax.post(‘/admin/statistics/orderStatistics’, {
pageIndex: this.currentPage,
pageNum: this.pageNum,
goodsId: this.goodsId,
goodsName: this.good 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 sName,
isInit: this.isInit,
type: this.type,
priceType: this.priceType,
startTime: this.startTime,
paymentStartTime: paymentStartTime,
paymentEndTime: paymentEndTime,
})
this.isInit = false
this.loading = false
let data = res.data.data
if (res.data.retcode == 20001) {
this.$message({
message: ‘查询时间长度不能超过一年’,
type: ‘warning’,
})
console.log(‘一年’)
} else if (data.orderResultList == null) {
this.orderList = []
this.total = data.count
this.acount[0].orderSum = data.orderSum
this.search.pageIndex = this.currentPage
this.search.pageNum = this.pageNum
;(this.search.goodsId = ‘’),
(this.search.goodsName = ‘’),
(this.search.isInit = false), //
(this.search.type = ‘’),
(this.search.priceType = ‘’),
(this.search.startTime = ‘’),
(this.search.paymentStartTime = ‘’),
(this.search.paymentEndTime = ‘’),
(this.noresult = true)
this.$message({
message: ‘无查询结果’,
type: ‘warning’,
})
} else if (data.orderResultList != null) {
this.orderList = data.orderResultList.map(item => {
const time = item[‘startTime’]
item[‘startTime’] = this.format(new Date(time), ‘yyyy-MM-dd’)
return item
})
this.total = data.count
this.acount[0].orderSum = data.orderSum
// 修改search查询数组
