683 行
26 KiB
HTML
可执行文件
683 行
26 KiB
HTML
可执行文件
<!DOCTYPE html>
|
|
<html>
|
|
<!--[1.4.13]-->
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
|
<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>
|
|
<style>
|
|
[v-cloak]{
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app" v-cloak>
|
|
<div class="main" v-loading="loadings1">
|
|
<!-- 功能按钮 -->
|
|
<div class="main-functions">
|
|
<div>
|
|
<el-select v-model="values1" placeholder="活动类型" @change="redtype" size="small">
|
|
<el-option
|
|
v-for="(item,index) in options1"
|
|
:key="index"
|
|
:label="item"
|
|
:value="index"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div>
|
|
<el-select v-model="values2" placeholder="红包状态" @change="statussele" size="small">
|
|
<el-option
|
|
v-for="(item,index) in options2"
|
|
:key="index"
|
|
:label="item"
|
|
:value="index">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div>
|
|
<el-date-picker
|
|
size="small"
|
|
@change="timechange"
|
|
value-format="yyyy-MM-d"
|
|
v-model="valuea1"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
</div>
|
|
<div>
|
|
<el-button type="primary" size="small" @click="searchs">搜索</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button type="primary" size="small" @click="Jumps">添加红包</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<div class="main-forms" v-loading="loadings2"
|
|
:element-loading-text="loadingtitle"
|
|
element-loading-spinner="el-icon-loading"
|
|
>
|
|
<el-table
|
|
size="small"
|
|
:data="tableDatas"
|
|
border
|
|
height="532px"
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="id"
|
|
label="序号"
|
|
align="center"
|
|
width="80">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="活动名称"
|
|
align="center"
|
|
width="140">
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="活动起止时间"
|
|
align="center"
|
|
width="200">
|
|
<template slot-scope="scope">
|
|
<div>
|
|
{{ scope.row.starttimes }} — {{ scope.row.endtimes }}
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="addtimes"
|
|
label="创建时间"
|
|
align="center"
|
|
width="140">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="money"
|
|
label="总金额"
|
|
align="center"
|
|
width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="lessmoney"
|
|
label="剩余金额"
|
|
align="center"
|
|
width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="number"
|
|
label="总红包数"
|
|
align="center"
|
|
width="110">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="lessnumber"
|
|
label="剩余红包数"
|
|
align="center"
|
|
width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="reward_types"
|
|
label="红包类型"
|
|
align="center"
|
|
width="130">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="types"
|
|
label="活动类型"
|
|
align="center"
|
|
width="130">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="statusa"
|
|
label="活动状态"
|
|
align="center"
|
|
width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="是否开启"
|
|
align="center"
|
|
width="110">
|
|
<template slot-scope="scope">
|
|
<div @click="switchsclick(scope.row.id,scope.row.status)">
|
|
<el-switch
|
|
:value="scope.row.switchnumber"
|
|
>
|
|
</el-switch>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="操作"
|
|
align="center"
|
|
fixed="right"
|
|
width="120">
|
|
<template slot-scope="scope">
|
|
<div class="slots">
|
|
<div>
|
|
<el-button type="text" size="mini" @click="dialogVisibles(scope.row.id)">领取记录
|
|
</el-button>
|
|
</div>
|
|
<div>
|
|
<el-button type="text" style="color: #999;" size="mini" @click="opens(scope.row.id)">删除</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<div class="main-paging">
|
|
<el-pagination
|
|
@size-change="handleSizeChange1"
|
|
@current-change="handleCurrentChange1"
|
|
:current-page.sync="currentPage1"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
:page-size="limits1"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="sumcount">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 领取详情 -->
|
|
<div>
|
|
<el-dialog
|
|
:visible.sync="dialogVisible"
|
|
width="1250px"
|
|
>
|
|
<div slot="title" class="dialogs-nav">
|
|
<div>中奖详情</div>
|
|
</div>
|
|
<div class="dialogs-content">
|
|
<div class="dialog-function">
|
|
<div>领取日期</div>
|
|
<div>
|
|
<el-date-picker
|
|
size="small"
|
|
value-format="yyyy-MM-d"
|
|
v-model="valueas1"
|
|
@change="changevalueas1"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
</div>
|
|
<div>
|
|
<el-select v-model="dialogselects" placeholder="领取门店" @change="downid"
|
|
size="small"
|
|
>
|
|
<el-option
|
|
v-for="(item,index) in dialogselect"
|
|
:key="index"
|
|
:label="item.storetag"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<!-- 搜索 -->
|
|
<div>
|
|
<el-button type="primary" @click="searcha"
|
|
size="small"
|
|
>搜索
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<div v-loading="loadingss1">
|
|
<el-table
|
|
size="small"
|
|
:data="tabledetails"
|
|
border
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="id"
|
|
label="序号"
|
|
align="center"
|
|
width="128">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="会员"
|
|
align="center"
|
|
width="180">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="nickname"
|
|
label="昵称"
|
|
align="center"
|
|
width="180">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="mobile_phone"
|
|
label="手机号"
|
|
align="center"
|
|
width="180">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="money"
|
|
label="领取金额"
|
|
align="center"
|
|
width="180">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="addtime"
|
|
label="领取时间"
|
|
align="center"
|
|
width="180">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="storename"
|
|
label="领取门店"
|
|
align="center"
|
|
width="180">
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!-- 分页 -->
|
|
<div class="dialog-paging">
|
|
<el-pagination
|
|
@size-change="handleSizeChanges"
|
|
@current-change="handleCurrentChanges"
|
|
:current-page.sync="currentPage2"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
:page-size="limitsa1"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="sumcounts">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
|
<script type="text/javascript">
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: function () {
|
|
return {
|
|
loadings1: true,//列表数据loading加载动画
|
|
loadings2: false,//点击开关的加载动画
|
|
loadingtitle: '',//开关提示文字
|
|
currentPage1: 1,//红包列表当前页数
|
|
options1: ['公众号通知栏', '线下支付', '小程序商城首页', '线上支付'],//红包类型
|
|
options2: ['未开始', '进行中', '已结束'],//红包状态
|
|
values1: '',//红包类型选项栏数据
|
|
values2: '',//红包状态选项栏数据
|
|
valuea1: '',//选择日期
|
|
dialogVisible: false,//红包领取记录弹窗
|
|
valueas1: '',//领取红包详情选择日期
|
|
dialogselect: [],//领取红包下拉选择
|
|
dialogselects: '',//领取红包选项栏数据
|
|
sumcount: 0,//列表总条数
|
|
pages1: 1,//红包列表当前页数
|
|
limits1: 10,//红包列表每页数
|
|
redtypes: 0,//红包列表筛选红包类型
|
|
statusselect: '',//红包列表筛选红包状态
|
|
startvalues: '',//筛选开始时间
|
|
endvalues: '',//筛选结束时间
|
|
status1: 0,//红包开关参数
|
|
redids: 0,//红包开关传参id
|
|
deleteid: 0,//删除红包的id
|
|
tableDatas: [], // 红包列表数据
|
|
tabledetails: [], // 领取详情数据
|
|
receiveids: '',//领取详情的红包id
|
|
loadingss1: false,//领取详情页的loading
|
|
storeids: '',//领取详情的领取门店
|
|
startdowntime: '',//领取详情开始时间
|
|
enddowntime: '',//领取详情结束时间
|
|
sumcounts: 0,//领取详情总条数
|
|
currentPage2: 1,//领取详情当前页数
|
|
pagesa1: 1,//领取详情当前页
|
|
limitsa1: 10,//领取详情每页数
|
|
}
|
|
},
|
|
watch: {
|
|
// 红包列表时间选择
|
|
valuea1(val) {
|
|
if (val == null) {
|
|
this.startvalues = ''// 开始时间
|
|
this.endvalues = '' // 结束时间
|
|
}
|
|
},
|
|
// 领取详情时间选择
|
|
valueas1(val) {
|
|
if (val == null) {
|
|
this.startdowntime = ''// 开始时间
|
|
this.enddowntime = '' // 结束时间
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 页面跳转
|
|
Jumps() {
|
|
var that = this;
|
|
top.layer.open({
|
|
type: 2,
|
|
content: "{:U('desss')}",
|
|
title: "添加红包-",
|
|
scrollbar: false,
|
|
area: ["calc(100% - 160px)", "calc(100% - 65px)"],
|
|
shade: 0,
|
|
offset: 'rb',
|
|
resize: false,
|
|
move: false,
|
|
end: function () {
|
|
that.redlist();
|
|
},
|
|
})
|
|
},
|
|
// 筛选
|
|
redtype(e) {
|
|
// 红包类型
|
|
this.redtypes = parseInt(e + 1)
|
|
},
|
|
statussele(e) {
|
|
// 活动状态
|
|
this.statusselect = e
|
|
},
|
|
// 筛选时间
|
|
timechange(e) {
|
|
this.startvalues = e[0]
|
|
this.endvalues = e[1]
|
|
},
|
|
// 搜索按钮
|
|
searchs() {
|
|
this.pages1 = ''
|
|
this.redlist();
|
|
},
|
|
// 红包列表
|
|
redlist() {
|
|
$.ajax({
|
|
url: '{:u("PlugReward/redlist")}',
|
|
type: 'post',
|
|
data: {
|
|
page: this.pages1,//当前页
|
|
limit: this.limits1,//每页数
|
|
type: this.redtypes,// 活动类型
|
|
status: this.statusselect, // 红包状态
|
|
starttime: this.startvalues,//开始时间
|
|
endtime: this.endvalues // 结束时间
|
|
},
|
|
dataType: 'json',
|
|
success: res => {
|
|
this.sumcount = parseInt(res.count)//总条数
|
|
this.tableDatas = res.data//列表数据
|
|
this.tableDatas.forEach(res => {
|
|
// 红包类型
|
|
if (res.reward_type == 1) {
|
|
res.reward_types = '固定金额'
|
|
} else if (res.reward_type == 2) {
|
|
res.reward_types = '随机金额'
|
|
} else if (res.reward_type == 3) {
|
|
res.reward_types = '梯度金额'
|
|
}
|
|
// 活动类型
|
|
if (res.type == 1) {
|
|
res.types = '公众号通知栏'
|
|
} else if (res.type == 2) {
|
|
res.types = '线下支付'
|
|
} else if (res.type == 3) {
|
|
res.types = '小程序商城首页'
|
|
} else if (res.type == 4) {
|
|
res.types = '线上支付'
|
|
}
|
|
// 活动状态
|
|
if (res.status == 0) {
|
|
res.statusa = '未开始'
|
|
} else if (res.status == 1) {
|
|
res.statusa = '进行中'
|
|
} else if (res.status == 2) {
|
|
res.statusa = '已结束'
|
|
}
|
|
// 开始时间
|
|
res.starttimes = new Date(parseInt(res.starttime * 1000)).getFullYear() + '.'
|
|
+ parseInt(new Date(parseInt(res.starttime * 1000)).getMonth() + 1) + '.'
|
|
+ new Date(parseInt(res.starttime * 1000)).getDate()
|
|
// 结束时间
|
|
res.endtimes = new Date(parseInt(res.endtime * 1000)).getFullYear() + '.'
|
|
+ parseInt(new Date(parseInt(res.endtime * 1000)).getMonth() + 1) + '.'
|
|
+ new Date(parseInt(res.endtime * 1000)).getDate()
|
|
// 创建时间
|
|
res.addtimes = new Date(parseInt(res.addtime * 1000)).getFullYear() + '.'
|
|
+ parseInt(new Date(parseInt(res.addtime * 1000)).getMonth() + 1) + '.'
|
|
+ new Date(parseInt(res.addtime * 1000)).getDate()
|
|
if (res.status == 0) {
|
|
res.switchnumber = false
|
|
} else if (res.status == 1) {
|
|
res.switchnumber = true
|
|
}
|
|
})
|
|
this.loadings1 = false // 关闭列表数据加载loading
|
|
}
|
|
})
|
|
},
|
|
// 开关
|
|
switchajax() {
|
|
$.ajax({
|
|
url: '{:u("PlugReward/redSwitch")}',
|
|
type: 'post',
|
|
data: {id: this.redids, status: this.status1},
|
|
datatype: 'json',
|
|
success: res => {
|
|
this.redlist();
|
|
setTimeout(() => {
|
|
this.loadings2 = false
|
|
if (res.status == 0) {
|
|
this.$message({
|
|
showClose: true,
|
|
message: res.msg
|
|
});
|
|
} else if (res.status == 1) {
|
|
this.$message({
|
|
showClose: true,
|
|
message: res.msg,
|
|
type: 'success'
|
|
});
|
|
}
|
|
}, 1000)
|
|
}
|
|
})
|
|
},
|
|
// 开关点击
|
|
switchsclick(item1, item2) {
|
|
this.redids = item1
|
|
if (item2 == 0) {
|
|
this.loadingtitle = '开启中'
|
|
this.status1 = 0
|
|
this.switchajax();
|
|
} else if (item2 == 1) {
|
|
this.loadingtitle = '关闭中'
|
|
this.status1 = 1
|
|
this.switchajax();
|
|
}
|
|
this.loadings2 = true
|
|
},
|
|
// 删除的接口
|
|
delectajax() {
|
|
$.ajax({
|
|
url: '{:u("PlugReward/redDelete")}',
|
|
type: 'post',
|
|
data: {id: this.deleteid},
|
|
dataType: 'json',
|
|
success: res => {
|
|
this.redlist();
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
});
|
|
}
|
|
})
|
|
},
|
|
// 删除弹窗
|
|
opens(e) {
|
|
this.deleteid = e//删除红包的id
|
|
this.$confirm('您确认要删除该红包吗?', '信息', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.delectajax()
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
});
|
|
});
|
|
},
|
|
// 红包列表分页
|
|
handleSizeChange1(e) {
|
|
this.limits1 = e;
|
|
this.currentPage1 = 1
|
|
this.pages1 = 1
|
|
this.redlist();
|
|
},
|
|
handleCurrentChange1(e) {
|
|
this.pages1 = e
|
|
this.redlist();
|
|
},
|
|
// 领取记录按钮
|
|
dialogVisibles(e) {
|
|
this.receiveids = e
|
|
this.dialogVisible = true //详情弹窗
|
|
this.loadingss1 = true //loading
|
|
this.receiveajax()
|
|
this.selectdown();
|
|
},
|
|
// 店铺选项接口
|
|
selectdown() {
|
|
$.ajax({
|
|
url: '{:u("PlugReward/mananger")}',
|
|
type: 'post',
|
|
data: {},
|
|
dataType: 'json',
|
|
success: res => {
|
|
this.dialogselect = res
|
|
}
|
|
})
|
|
},
|
|
// 店铺选项监听
|
|
downid(e) {
|
|
this.storeids = e
|
|
},
|
|
// 领取详情时间
|
|
changevalueas1(e) {
|
|
this.startdowntime = e[0]
|
|
this.enddowntime = e[1]
|
|
},
|
|
// 领取详情搜索
|
|
searcha() {
|
|
this.receiveajax();
|
|
},
|
|
// 领取记录接口
|
|
receiveajax() {
|
|
$.ajax({
|
|
url: '{:u("PlugReward/reward_details")}',
|
|
type: 'post',
|
|
data: {
|
|
id: this.receiveids,
|
|
page: this.pagesa1,//当前页
|
|
limit: this.limitsa1,//每页数
|
|
storeid: this.storeids,
|
|
starttime: this.startdowntime,//开始时间
|
|
endtime: this.enddowntime//结束时间
|
|
},
|
|
dataType: 'json',
|
|
success: res => {
|
|
this.tabledetails = res.data
|
|
this.sumcounts = parseInt(res.count) //总条数
|
|
this.loadingss1 = false//关闭loading
|
|
}
|
|
})
|
|
},
|
|
// 分页
|
|
handleSizeChanges(e) {
|
|
this.limitsa1 = e
|
|
this.currentPage2 = 1
|
|
this.pagesa1 = 1
|
|
this.receiveajax();
|
|
},
|
|
handleCurrentChanges(e) {
|
|
this.pagesa1 = e
|
|
this.receiveajax();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.redlist();
|
|
}
|
|
})
|
|
</script>
|
|
<style scoped>
|
|
.main {
|
|
width: 98%;
|
|
padding: 0 1%;
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* 功能按钮 */
|
|
.main-functions {
|
|
display: flex;
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.main-functions > div {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
/* 表格 */
|
|
.main-forms {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.slots {
|
|
display: flex;
|
|
}
|
|
|
|
.slots > div:nth-child(1) {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* 分页 */
|
|
.main-paging {
|
|
margin: 40px 0 0 30%;
|
|
font-size: 32px;
|
|
}
|
|
|
|
/* 领取记录详情 */
|
|
/* 领取弹窗头部背景色 */
|
|
.el-dialog__header {
|
|
background-color: #D7D7D7;
|
|
}
|
|
|
|
/* 领取日期 功能按钮 */
|
|
.dialog-function {
|
|
display: flex;
|
|
line-height: 50px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.dialog-function > div:nth-child(1) {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.dialog-function > div:nth-child(3) {
|
|
margin: 0 30px;
|
|
}
|
|
|
|
/* 领取详情分页 */
|
|
.dialog-paging {
|
|
margin: 20px 0 0 300px;
|
|
}
|
|
</style>
|
|
</html> |