关于函数传值
this.getPurchaseHistoryData(index, num,timeType);第一位是显示的页数，第二是控制首页4上一页-1下一页是2末页是5 第三是是对昨天是1，今天是2，还是一段时间的控制传3，默认是0
1.关于分页：
（1）首页是4上一页是-1下一页是2末页是5，单机查询的时候是1
（2）关于pageRecord 函数 currentRecord表示当前页数，showItemRecord表示共⑤页
（3）current >= showItem和else{}是用来显示页数是怎么显示的（这个我也有点蒙主要看看pag数组里的）
（4）从后台接收总页数 附在allpageRecord
（5）传值的时候将 index传 给pageNumber 显示页码
<body>
<!--内容区-->
<div id="membersShipCard">
<!--店铺收入数据-->
<div class="box-body table-responsive">
<div class="box-header" style="padding-left: 0;">
<h3 class="box-title" style=" line-height: 43px;">店铺收入数据</h3>
<div class="box-tools" style=" left: 128px;">
<ul class="nav navbar-nav">
<li class="dropdown messages-menu">
<a href="javascript:void(0)" class="sidebar-toggle a"
v-on:click="storeRevenue(1)">昨天</a>
</li>
<li class="dropdown messages-menu">
<a href="javascript:void(0)" class="sidebar-toggle"
v-on:click="storeRevenue(2)">今天</a>
</li>
<li class="dropdown messages-menu">
<a href="javascript:void(0)" class="sidebar-toggle"
v-on:click="storeRevenue(4)">总收入</a>
</li>
</ul>
<div class="input-group input-group-sm" style="padding: 7px;width: 150px;">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input placeholder="选择时间" style=" width: 204px;" type="text" class="layui-input" id="shopTime" />
</div>
</div>
</div>
<ul class="dataAll"
style="width: 100%;padding: 25px 50px 25px 50px;display: flex;justify-content: space-around;align-items: center;">
<li class="item">
<label>代金券销售金额 </label>
<div>{{allPriceShop}}</div>
</li>
<li class="item">
<label>核销后支付金额</label>
<div>{{allRealPriceShop}}</div>
</li>
<li class="item">
<label>店铺分成</label>
<div>{{allRestaurantCommissionShop}}</div>
</li>
<li class="item">
<label>搜城分成</label>
<div>{{allOfficialCommissionShop}}</div>
</li>
</ul>
</div>
<!--核销记录-->
<div class="box box-body table-responsive">
<div class="box-header" style="padding-left: 0;">
<h3 class="box-title" style="line-height: 43px;">核销记录</h3>
<div class="box-tools" style=" left: 128px;">
<ul class="nav navbar-nav">
<li class="dropdown messages-menu">
<a href="javascript:void(0)" class="sidebar-toggle"
v-on:click="writeOffRecord(1,1,1)">昨天</a>
</li>
<li class="dropdown messages-menu">
<a href="javascript:void(0)" class="sidebar-toggle"
v-on:click="writeOffRecord(1,1,2)">今天</a>
</li>
</ul>
<div style="display: inline-block">
<form class="form-inline"
style="display: flex;justify-content: space-around;align-items: center;padding: 0px 50px;line-height: 43px;">
<div class="form-group">
<label style="text-align: center;">交易时间</label>
<input autocomplete="off" placeholder="选择时间" id="HX_date" type="text" name="table_search" class="form-control"/>
</div>
<div class="form-group">
<label style="text-align: center;">核销编号</label>
<input autocomplete="off" type="text" placeholder="输入订单编号" class="form-control" v-model="codeHX"/>
</div>
<div class="form-group">
<label style="text-align: center;">手机号</label>
<input autocomplete="off" type="text" placeholder="输入手机号" class="form-control" v-model="mobileHX"/>
</div>
<div class="form-group">
<button type="button" class="btn btn-block btn-primary"
v-on:click="writeOffRecord(1,1,writeOffRecordNum)">查询
</button>
</div>
</form>
</div>
</div>
</div>
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<thead>
<tr>
<th v-for="item in writeOffRecordTitle" style="text-align: center;">{{item.typeName}}</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="11" class="noFound2 disNone"><div>当前暂无记录，您可查看其他的核销记录</div></td>
</tr>
<tr v-for="(item,index) in writeOffRecordData">
<td style="text-align: center;">{{index+1}}</td>
<td style="text-align: center;">{{item.gmtCreate}}</td>
<td style="text-align: center;">{{item.code}}</td>
<td style="text-align: center;">{{item.wxNickName}}</td>
<td style="text-align: center;">{{item.mobile}}</td>
<td style="text-align: center;">{{item.vouchersName}}</td>
<td style="text-align: center;">{{item.amount/100}}</td>
<td style="text-align: center;">{{item.deductionPrice/100}}</td>
<td style="text-align: center;">{{item.price/100}}</td>
<td style="text-align: center;">{{item.usedVouchersNum}}</td>
<td style="text-align: center;">{{item.realPrice/100}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="writeOffRecord" class="main-footer"
style="margin-left: 0;display: flex;justify-content: flex-end;align-items: center; border-top: 0px solid #d2d6de;">
<!--<div v-show="allpage.length >1" style="float: right;margin-right: 10px;" class="pagination">-->
<!--当前第{{current}}页,共{{allpage}}页-->
<!--</div>-->
<ul style="float: right;margin:20px 0" class="pagination">
<li v-on:click="(currentRecord != 1)? writeOffRecord(1,4,writeOffRecordNum):''"><a
href="javascript:void(0);">首页</a>
</li>
<li v-on:click="(currentRecord != 1)? writeOffRecord(currentRecord--,-1,writeOffRecordNum):''"><a
href="javascript:void(0);">上一页</a>
</li>
<li v-for="index in pageRecord" v-on:click="writeOffRecord(index,0,writeOffRecordNum)"
v-bind:class="{'active':currentRecord == index}" v-bind:key="index">
<a href="javascript:void(0);">{{index}}</a>
</li>
<li v-on:click="(allpageRecord != currentRecord) ? writeOffRecord(currentRecord++,2,writeOffRecordNum):''"><a
href="javascript:void(0);">下一页</a>
</li>
<li v-on:click="(allpageRecord != currentRecord)?writeOffRecord(allpageRecord,5,writeOffRecordNum):''"><a
href="javascript:void(0);">末页</a></li>
</ul>
</div>
</div>
<!--</div>-->
<!-- jQuery 3 -->
<script src="/js/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="/js/bootstrap.min.js"></script>
<script th:inline="javascript">
new Vue({
el: "#membersShipCard",
data: {
current: 1,
showItem: 5,
allpage: 1,
currentRecord: 1,
showItemRecord: 5,
allpageRecord: 1,
xm: 0,
saleTitle:[
{typeName: '序号'},
{typeName: '交易时间'},
{typeName: '代金券编号'},
{typeName: '昵称'},
{typeName: '手机号'},
{typeName: '代金券名称'},
{typeName: '代金券价格'},
{typeName: '购买张数'},
{typeName: '官方（搜城天下）抽成（元）'},
{typeName: '店铺抽成（元）'},
],
writeOffRecordTitle:[
{typeName: '序号'},
{typeName: '交易时间'},
{typeName: '核销编号'},
{typeName: '昵称'},
{typeName: '手机号'},
{typeName: '代金券名称'},
{typeName: '消费总金额（元）'},
{typeName: '代金券抵扣金额（元）'},
{typeName: '代金券售卖金额（元）'},
{typeName: '使用张数'},
{typeName: '优惠后支付'},
],
purchaseHistoryData: [],
code: '', //查询
mobile: '', //手机号
beginDate: '',
endDate: '',
allOfficialCommission: '',
allPrice: '',
allRealPrice: '',
allRestaurantCommission: '',
//
timeType:1,//日期
pageStart:0,
pageSize:0,
restaurantId:0,
soldAllNum:0,
cancelAllAmount:0,
soldAllAmount:0,
cancelAllNum:0,
noCancelAllNum:0,
timeNum:0,
//核销
mobileHX:'',
codeHX:'',
writeOffRecordData: [],
writeOffRecordNum:"",
indexNum:1
},
filters: {},
// 数据初始化
mounted: function () {
this.getPurchaseHistoryData(1, 1, 0);
this.storeRevenue(2);
this.writeOffRecord(1,1,0)
var this_ = this;
layui.use('laydate', function () {
var laydate = layui.laydate;
laydate.render({
elem: '#jt_date',//指定元素;
type: 'date',
theme: '3c8dbc',
range: '~',
max: new Date().valueOf(),
done: function (value, date, endDate) {
value = value.split('~');
this_.beginDate = value[0];
this_.endDate = value[1];
if(value==""){
this_.getPurchaseHistoryData(1, 1,2)
}else{
this_.getPurchaseHistoryData(1, 1,3)
}
}
});
//核销
laydate.render({
elem: '#HX_date',//指定元素;
type: 'date',
theme: '3c8dbc',
range: '~',
max: new Date().valueOf(),
done: function (value, date, endDate) {
value = value.split('~');
this_.beginDate = value[0];
this_.endDate = value[1];
if(value==""){
this_.writeOffRecord(1, 1,2)
}else{
this_.writeOffRecord(1, 1,3)
}
}
});
});
},
computed: {
pages: function () {
var pag = [];
var current = this.current;
var showItem = this.showItem;
if (current >= showItem) { //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var middle = this.current - Math.floor(this.showItem / 2),//从哪里开始
i = this.showItem;
if (middle > (this.allpage - this.showItem)) {
middle = (this.allpage - this.showItem) + 1
}
while (i--) {
pag.push(middle++);
}
} else { //当前页数大于显示页数了
var i = Math.min(this.showItem, this.allpage); //显示数据中低的那个
while (i) {
pag.unshift(i--);
}
}
console.log("销售记录"+current,showItem)
return pag
},
pageRecord: function () {
var pag = [];
var currentRecord = this.currentRecord;
var showItemRecord = this.showItemRecord;
if (currentRecord >= showItemRecord) { //如果当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var middle = this.currentRecord - Math.floor(this.showItemRecord / 2),//从哪里开始
a = this.showItemRecord;
console.log("大于"+middle)
if (middle > (this.allpageRecord - this.showItemRecord)) {
middle = (this.allpageRecord - this.showItemRecord) + 1
}
while (a--) {
pag.push(middle++);
}
} else { //当前页数大于显示页数了
var a = Math.min(this.showItemRecord, this.allpageRecord);
console.log("当前页大于显示页数"+a)
while (a) {
pag.unshift(a--);
}
}
console.log(pag)
console.log("最后页码"+currentRecord,showItemRecord)
return pag
}
},
methods: {
getPurchaseHistoryData: function (index, num,timeType ) {
if(this.code!=""||this.mobile!=""){
timeType = 4;
index =1;
}
console.log("show"+index, num,timeType)
if(timeType==null){
timeType:this.timeType
}
if (index==null){
index:this.index
}
var this_ = this;
if (timeType!=null){
this_.timeNum=timeType
}
if (num == 2) {
index = index + 1;
} else if (num == -1) {
index = index - 1;
}
else if (num == 1) {
index = index
this.current = index;
} else if (num == 0) {
if (index == this_.current) return;
this.current = index;
} else if (num == 4) {
this_.current = 1;
index = index;
} else if (num == 5) {
this_.current = this_.allpage;
index = index;
}
var dataStr = { };
if (timeType==3){
dataStr.beginDate = this.beginDate;
dataStr.endDate = this.endDate;
dataStr.timeType = timeType;
}else{
dataStr.beginDate = "";
dataStr.endDate = "";
dataStr.timeType = timeType;
}
dataStr = JSON.stringify({
pageNumber: index,
code: this.code,
mobile: this.mobile,
beginDate: this.beginDate,
endDate: this.endDate,
timeType:timeType,
pageStart:0,
pageSize:0,
restaurantId:this.restaurantId,
});
console.log(dataStr)
// 销售记录
$.ajax({
type: 'post',
contentType: 'application/json',
url: '/v1/business/searchcity/voucherCancle/voucherBuyRecord',
data: dataStr,
success: function (res) {
console.log(res);
if(res.status ==-1999){
$(".noFound").removeClass("disNone")
}else{
$(".noFound").addClass("disNone")
}
this_.purchaseHistoryData = res.data.result;
this_.allpage = res.data.pageCount;
this_.allOfficialCommission = res.data.allOfficialCommission;
this_.allPrice = res.data.allPrice;
this_.allRealPrice = res.data.allRealPrice;
this_.allRestaurantCommission = res.data.allRestaurantCommission;
// yz
this_.soldAllNum = res.data.soldAllNum;
this_.soldAllAmount = res.data.soldAllAmount;
this_.cancelAllNum = res.data.cancelAllNum;
this_.cancelAllAmount = res.data.cancelAllAmount;
this_.noCancelAllNum = res.data.noCancelAllNum;
},
error: function (res) {
alert("获取失败")
}
});
},
//核销记录
//
writeOffRecord:function(index,num,timeSelection){
if(this.codeHX!=""||this.mobileHX!=""){
timeSelection = 4;
index=index;
}
console.log("efgh"+index,num,timeSelection)
var this_ = this;
if (timeSelection!=null){
this_.writeOffRecordNum=timeSelection
}
if(timeSelection==null){
timeSelection:this.timeSelection
}
// if (index==null){
// index:this.index
// }
if (num == 2) {
index = index + 1
} else if (num == -1) {
index = index - 1
}
else if (num == 1) {
this_.currentRecord = 1;
// index= index 注释了
} else if (num == 0) {
if (index == this_.currentRecord) return;
this.currentRecord = index;
} else if (num == 4) {
this_.currentRecord = 1;
index = index;
} else if (num == 5) {
this_.currentRecord = this_.allpageRecord;
index = index;
}
var dataSucc = { };
if (timeSelection==3){
dataSucc.beginDate = this.beginDate;
dataSucc.endDate = this.endDate;
dataSucc.timeType = timeSelection;
}else{
dataSucc.beginDate = "";
dataSucc.endDate = "";
dataSucc.timeType = timeSelection;
}
dataSucc = JSON.stringify({
pageNumber: index,
code: this.codeHX,
mobile: this.mobileHX,
beginDate: this.beginDate,
endDate: this.endDate,
timeType:timeSelection,
pageStart:0,
pageSize:0,
restaurantId:this.restaurantId,
});
console.log(dataSucc)
$.ajax({
type: 'post',
contentType: 'application/json',
url: '/v1/business/searchcity/voucherCancle/voucherCancleRecord',
data: dataSucc,
success: function (res) {
console.log(res);
if (res.status ==-1999){
$(".noFound2").removeClass("disNone")
}else{
$(".noFound2").addClass("disNone")
}
this_.writeOffRecordData=res.data.result;
this_.allpageRecord = res.data.pageCount;
},
error: function (res) {
alert("获取失败")
}
});
},
},
})
</script>
</body>
</html>