303 行
13 KiB
HTML
可执行文件
303 行
13 KiB
HTML
可执行文件
<!DOCTYPE html>
|
||
<html>
|
||
<!--jsy添加-->
|
||
<head>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css"/>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.2.8.2.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/common-upload.css">
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.2.8.2.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
|
||
<title>门店大转盘中奖纪录</title>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<el-container>
|
||
<el-header>
|
||
<!--头部-->
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="120px" size="mini">
|
||
<el-form-item label="">
|
||
<el-input clearable v-model="formInline.name" placeholder="请输入姓名/手机号码" ></el-input>
|
||
</el-form-item>
|
||
<!--<el-form-item label="">-->
|
||
<!--<el-input clearable v-model="formInline.keywords" placeholder="请输入活动名称关键词" ></el-input>-->
|
||
<!--</el-form-item>-->
|
||
<el-form-item label="">
|
||
<el-select clearable v-model="formInline.way" placeholder="发放方式">
|
||
<el-option label="配送" value="1"></el-option>
|
||
<el-option label="自提" value="2"></el-option>
|
||
<el-option label="自动发放" value="3"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
<el-select clearable v-model="formInline.state" placeholder="发放状态">
|
||
<el-option label="待发放" value="1"></el-option>
|
||
<el-option label="已发放" value="2"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="">
|
||
<el-select clearable v-model="formInline.type" placeholder="奖品类型">
|
||
<el-option label="实物" value="1"></el-option>
|
||
<el-option label="门店商品" value="2"></el-option>
|
||
<el-option label="积分" value="3"></el-option>
|
||
<el-option label="余额" value="4"></el-option>
|
||
<el-option label="谢谢惠顾" value="5"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-header>
|
||
<el-header>
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="120px" size="mini">
|
||
<el-form-item label="">
|
||
中奖日期
|
||
<el-date-picker
|
||
v-model="value"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
:default-time = "['00:00:00','23:59:59']"
|
||
value-format="timestamp">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" size="mini" style="width: 80px" @click="query(formInline.name,formInline.keywords,formInline.way,formInline.state,formInline.type,value)">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-header>
|
||
|
||
<el-main>
|
||
<!--表格-->
|
||
<template>
|
||
<el-table
|
||
:data="tableData"
|
||
height="620"
|
||
border
|
||
style="width: 100%"
|
||
:cell-style="rowClass"
|
||
:header-cell-style="headClass">
|
||
<el-table-column
|
||
prop="id"
|
||
label="id">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="turntable_name"
|
||
label="活动名称">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="order_num"
|
||
label="订单号">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="username"
|
||
label="姓名">
|
||
<template slot-scope="scope">
|
||
<p v-if="scope.row.username" >{{scope.row.username}}</p>
|
||
<p v-else>匿名</p>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="phone"
|
||
label="手机号码">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="add_time"
|
||
label="中奖日期">
|
||
<template slot-scope="scope">{{scope.row.add_time|normalTime}}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="prize_name"
|
||
label="奖品">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="delivery_type"
|
||
label="发放方式">
|
||
<template slot-scope="scope">
|
||
<p v-if="scope.row.delivery_type==1">配送</p>
|
||
<p v-if="scope.row.delivery_type==2">自提</p>
|
||
<p v-if="scope.row.delivery_type==3">自动发放</p>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="delivery_status"
|
||
label="发放状态">
|
||
<template slot-scope="scope">
|
||
<p v-if="scope.row.delivery_status==1">待发放</p>
|
||
<p v-if="scope.row.delivery_status==2">已发放</p>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="receive_time"
|
||
label="领取日期">
|
||
<template slot-scope="scope">{{scope.row.receive_time|normalTime}}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="storetag"
|
||
label="领取门店">
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
</el-main>
|
||
|
||
<el-footer>
|
||
<!--分页-->
|
||
<div class="block" style="text-align: center">
|
||
<el-pagination
|
||
background
|
||
:pager-count="5"
|
||
@current-change="changePageNum"
|
||
layout="prev, pager, next"
|
||
:total="Number(data_total)">
|
||
</el-pagination>
|
||
</div>
|
||
</el-footer>
|
||
</el-container>
|
||
</div>
|
||
</body>
|
||
<style>
|
||
|
||
</style>
|
||
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<script type="text/javascript">
|
||
var filters= {
|
||
normalTime: value => {
|
||
if (!value) return '';
|
||
let date = new Date(parseInt(value) * 1000);
|
||
let y = date.getFullYear();
|
||
let MM = date.getMonth() + 1;
|
||
MM = MM < 10 ? ('0' + MM) : MM;
|
||
let d = date.getDate();
|
||
d = d < 10 ? ('0' + d) : d;
|
||
let h = date.getHours();
|
||
h = h < 10 ? ('0' + h) : h;
|
||
let m = date.getMinutes();
|
||
m = m < 10 ? ('0' + m) : m;
|
||
let s = date.getSeconds();
|
||
s = s < 10 ? ('0' + s) : s;
|
||
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
|
||
},
|
||
};
|
||
Object.keys(filters).forEach(key => {
|
||
Vue.filter(key, filters[key]);
|
||
});
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: function () {
|
||
return {
|
||
formInline: {
|
||
name:'',//昵称/手机号码
|
||
keywords: '',//关键词
|
||
way:'',//发放方式
|
||
state:'',//发放状态
|
||
type: '',//奖品类型
|
||
},
|
||
value: null,//时间
|
||
startTime:'',//开始时间
|
||
endTime:'',//结束时间
|
||
tableData: null,//中奖纪录数据
|
||
title:'',//活动名搜索 默认为空
|
||
turntable_id:'',//大转盘活动ID
|
||
grant_type:'',//发放方式：1配送 2自提 3自动发放
|
||
grant_status:'',//发放状态：1未发放 2已发放
|
||
prize_type:'',//奖品类型：1实物 2门店商品 3积分 4余额 5谢谢惠顾'
|
||
start_time:'',//搜索开始时间戳
|
||
end_time:'',//搜索结束时间戳
|
||
page_info:'',//分页数据
|
||
pager:1,//当前页数 默认为1
|
||
page_size:10,//每页记录条数 默认10
|
||
data_total:'1',//总条数
|
||
}
|
||
},
|
||
mounted:function(){
|
||
this.getTestApi();
|
||
},
|
||
methods: {
|
||
// 表头样式设置
|
||
headClass () {
|
||
return 'text-align: center;background:#eef1f6;'
|
||
},
|
||
// 表格样式设置
|
||
rowClass () {
|
||
return 'text-align: center;'
|
||
},
|
||
// 数据刷新
|
||
getTestApi: function () {
|
||
var that= this;
|
||
$.ajax({
|
||
url:"{:U('Turntable/winRecordStoreTurntableList')}",
|
||
type: 'post',
|
||
dataType: 'json',
|
||
data: {
|
||
title:that.title,
|
||
turntable_id:that.turntable_id,
|
||
grant_type:that.grant_type,
|
||
grant_status:that.grant_status,
|
||
prize_type:that.prize_type,
|
||
start_time:that.start_time,
|
||
end_time:that.end_time,
|
||
page:that.pager,
|
||
page_size:that.page_size,
|
||
},
|
||
success: res => {
|
||
// console.log(res);
|
||
that.tableData = res.data.data;
|
||
that.data_total = res.data.page_info.data_total;
|
||
}
|
||
});
|
||
},
|
||
//分页
|
||
changePageNum(pager) {
|
||
this.pager = pager;
|
||
this.getTestApi();
|
||
},
|
||
//查询
|
||
query(name,keywords,way,state,type,value){
|
||
if(this.formInline.name || this.formInline.keywords || this.formInline.way || this.formInline.state || this.formInline.type || this.value){
|
||
this.pager='1';
|
||
}else {
|
||
this.pager=this.pager;
|
||
}
|
||
this.formInline.name=name;
|
||
this.formInline.keywords=keywords;
|
||
this.formInline.way=way;
|
||
this.formInline.state=state;
|
||
this.formInline.type=type;
|
||
if(value!=null){
|
||
this.startTime=value[0]/1000;
|
||
this.endTime=value[1]/1000;
|
||
}else {
|
||
this.startTime='';
|
||
this.endTime='';
|
||
}
|
||
// console.log(name,keywords,way,state,type,this.startTime,this.endTime);
|
||
// return false;
|
||
var that= this;
|
||
$.ajax({
|
||
url:"{:U('Turntable/winRecordStoreTurntableList')}",
|
||
type: 'post',
|
||
dataType: 'json',
|
||
data: {
|
||
title:that.formInline.name,//活动名搜索 默认为空
|
||
turntable_id:that.turntable_id,//大转盘活动ID
|
||
grant_type:that.formInline.way,//发放方式：1配送 2自提 3自动发放
|
||
grant_status:that.formInline.state,//发放状态：1未发放 2已发放
|
||
prize_type:that.formInline.type,//奖品类型：1实物 2门店商品 3积分 4余额 5谢谢惠顾'
|
||
start_time:that.startTime,//搜索开始时间戳
|
||
end_time:that.endTime,//搜索结束时间戳
|
||
page:that.pager,//当前页数 默认为1
|
||
page_size:that.page_size,//每页记录条数 默认10
|
||
},
|
||
success: res => {
|
||
// console.log(res);
|
||
that.tableData = res.data.data;
|
||
that.data_total = res.data.page_info.data_total;
|
||
}
|
||
});
|
||
},
|
||
}
|
||
})
|
||
</script>
|
||
</html> |