539 行
21 KiB
HTML
可执行文件
539 行
21 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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* 领取记录详情 */
|
|
.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>
|
|
</head>
|
|
<body>
|
|
<div id="app" v-cloak>
|
|
<div class="main" v-loading="rewardLoading">
|
|
<!-- 功能按钮 -->
|
|
<div class="main-functions">
|
|
<div>
|
|
<el-select v-model="search_type" placeholder="活动类型" clearable size="small">
|
|
<el-option
|
|
v-for="(item,index) in typeList"
|
|
:key="index.type"
|
|
:label="item.name"
|
|
:value="item.type"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div>
|
|
<el-select v-model="search_state" placeholder="红包状态" clearable size="small">
|
|
<el-option
|
|
v-for="(item,index) in stateList"
|
|
:key="index"
|
|
:label="item"
|
|
:value="index+1">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div>
|
|
<el-date-picker
|
|
size="small"
|
|
value-format="yyyy-MM-d"
|
|
v-model="search_time"
|
|
clearable
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="创建开始日期"
|
|
end-placeholder="创建结束日期">
|
|
</el-date-picker>
|
|
</div>
|
|
<div>
|
|
<el-button type="primary" size="small" @click="searchData">搜索</el-button>
|
|
</div>
|
|
<if condition="$authArr['addReward']">
|
|
<div>
|
|
<el-button type="primary" size="small" @click="addReward">添加红包</el-button>
|
|
</div>
|
|
</if>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<div class="main-forms" v-loading="switchLoading"
|
|
:element-loading-text="loadingTitle"
|
|
element-loading-spinner="el-icon-loading">
|
|
<el-table
|
|
size="small"
|
|
:data="rewardList"
|
|
border
|
|
style="width: 100%">
|
|
<el-table-column prop="id" label="ID" align="center" min-width="60"></el-table-column>
|
|
<el-table-column prop="name" label="活动名称" align="center" min-width="140"></el-table-column>
|
|
<el-table-column prop="range_time" label="活动起止时间" align="center" min-width="200"></el-table-column>
|
|
<el-table-column prop="add_time" label="创建时间" align="center" min-width="150"></el-table-column>
|
|
<el-table-column prop="money" label="总金额" align="center" min-width="120"></el-table-column>
|
|
<el-table-column prop="less_money" label="剩余金额" align="center" min-width="120"></el-table-column>
|
|
<el-table-column prop="number" label="总红包数" align="center" min-width="110"></el-table-column>
|
|
<el-table-column prop="less_number" label="剩余红包数" align="center" min-width="120"></el-table-column>
|
|
<el-table-column prop="reward_type" label="红包类型" align="center" min-width="130"></el-table-column>
|
|
<el-table-column prop="type" label="活动类型" align="center" min-width="130"></el-table-column>
|
|
<el-table-column prop="status_msg" label="活动状态" align="center" min-width="120"></el-table-column>
|
|
<el-table-column label="是否开启" align="center" min-width="110">
|
|
<template slot-scope="scope">
|
|
<div>
|
|
<el-switch @change="switchClick(scope.row.id,scope.row.status)"
|
|
v-model="scope.row.status"
|
|
active-value="1"
|
|
:disabled="redSwitchDis"
|
|
inactive-value="0"
|
|
>
|
|
</el-switch>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" fixed="right" width="120">
|
|
<template slot-scope="scope">
|
|
<div class="slots">
|
|
<if condition="$authArr['getRewardRecordList']">
|
|
<el-button type="text" size="mini" @click="dialogVisibles(scope.row.id)">领取记录
|
|
</el-button>
|
|
</if>
|
|
<if condition="$authArr['redDelete']">
|
|
<el-button type="text" style="color: #999;" size="mini"
|
|
@click="deleteAjax(scope.row.id)">
|
|
删除
|
|
</el-button>
|
|
</if>
|
|
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<el-pagination
|
|
@size-change="handleRewardSizeChange"
|
|
@current-change="handleRewardCurrentChange"
|
|
:current-page="rewardPage"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
:page-size="rewardLimit"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="rewardCount">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
<!-- 领取详情 -->
|
|
<div>
|
|
<el-dialog title="中奖详情" :close-on-click-modal="false"
|
|
:visible.sync="dialogVisible"
|
|
width="1000px">
|
|
<div class="dialogs-content">
|
|
<div class="dialog-function">
|
|
<div>领取日期</div>
|
|
<div>
|
|
<el-date-picker
|
|
size="small"
|
|
value-format="yyyy-MM-d"
|
|
v-model="record_search_time"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期">
|
|
</el-date-picker>
|
|
</div>
|
|
<div>
|
|
<el-select v-model="record_search_store" placeholder="领取门店"
|
|
size="small"
|
|
>
|
|
<el-option
|
|
v-for="(item,index) in storeList"
|
|
:key="index"
|
|
:label="item.store_name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<!-- 搜索 -->
|
|
<div>
|
|
<el-button type="primary" @click="recordPage=1;getRecordList()"
|
|
size="small"
|
|
>搜索
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
<!-- 表格 -->
|
|
<div v-loading="recordLoading">
|
|
<el-table size="small"
|
|
:data="recordList"
|
|
border
|
|
style="width: 100%">
|
|
<el-table-column
|
|
prop="id"
|
|
label="ID"
|
|
align="center"
|
|
min-width="80">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="name"
|
|
label="会员"
|
|
align="center"
|
|
min-width="120">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="nickname"
|
|
label="昵称"
|
|
align="center"
|
|
min-width="140">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="mobile_phone"
|
|
label="手机号"
|
|
align="center"
|
|
min-width="140">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="money"
|
|
label="领取金额"
|
|
align="center"
|
|
min-width="100">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="addtime"
|
|
label="领取时间"
|
|
align="center"
|
|
min-width="180">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="store_name"
|
|
label="领取门店"
|
|
align="center"
|
|
min-min-width="140">
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<!-- 分页 -->
|
|
<div class="dialog-paging">
|
|
<el-pagination
|
|
@size-change="handleRecordSizeChange"
|
|
@current-change="handleRecordCurrentChange"
|
|
:current-page="recordPage"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
:page-size="recordLimit"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="recordCount">
|
|
</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 {
|
|
redSwitchDis: "{$authArr['redSwitch']}" == 1 ? false : true,//是否有开启关闭的权限
|
|
rewardLoading: true,//列表数据loading加载动画
|
|
switchLoading: false,//点击开关的加载动画
|
|
loadingTitle: '',//开关提示文字
|
|
rewardList: [], // 红包列表数据
|
|
rewardCount: 0,//红包列表总条数
|
|
rewardPage: 1,//红包列表当前页数
|
|
rewardLimit: 10,//红包列表每页数
|
|
typeList: [{
|
|
name: '公众号通知栏',
|
|
type: 1
|
|
}, {
|
|
name: '线下支付',
|
|
type: 2
|
|
}, {
|
|
name: '小程序商城首页',
|
|
type: 3
|
|
}, {
|
|
name: '线上支付',
|
|
type: 4
|
|
}],//红包类型
|
|
stateList: ['未开始', '进行中', '已结束'],//红包状态
|
|
search_type: '',//红包类型选项栏数据
|
|
search_state: '',//红包状态选项栏数据
|
|
search_time: [],//选择日期
|
|
dialogVisible: false,//红包领取记录弹窗
|
|
storeList: [],//领取红包详情门店列表
|
|
record_search_time: [],//领取红包详情选择日期
|
|
record_search_store: '',//领取红包选项栏数据
|
|
recordList: [], // 领取详情数据
|
|
reward_id: '',//领取详情的红包id
|
|
recordLoading: false,//领取详情页的loading
|
|
recordCount: 0,//领取详情总条数
|
|
recordPage: 1,//领取详情当前页
|
|
recordLimit: 10,//领取详情每页数
|
|
}
|
|
},
|
|
methods: {
|
|
// 页面跳转
|
|
addReward() {
|
|
var that = this;
|
|
top.layer.open({
|
|
type: 2,
|
|
content: "{:U('add')}",
|
|
title: "添加红包",
|
|
scrollbar: false,
|
|
area: ["calc(100% - 160px)", "calc(100% - 65px)"],
|
|
shade: 0,
|
|
offset: 'rb',
|
|
resize: false,
|
|
move: false,
|
|
end: function () {
|
|
that.getRewardList();
|
|
},
|
|
})
|
|
},
|
|
//搜索
|
|
searchData() {
|
|
this.rewardPage = 1;
|
|
this.getRewardList();
|
|
},
|
|
// 红包列表
|
|
getRewardList() {
|
|
console.log(this.search_time);
|
|
$.ajax({
|
|
url: '{:U("Reward/getRewardList")}',
|
|
type: 'post',
|
|
data: {
|
|
page: this.rewardPage,//当前页
|
|
limit: this.rewardLimit,//每页数
|
|
type: this.search_type,// 活动类型
|
|
status: this.search_state, // 红包状态
|
|
start_time: this.search_time ? this.search_time[0] : '',//开始时间
|
|
end_time: this.search_time ? this.search_time[1] : '', // 结束时间
|
|
},
|
|
dataType: 'json',
|
|
success: res => {
|
|
this.rewardCount = parseInt(res.count)//总条数
|
|
this.rewardList = res.data//列表数据
|
|
this.rewardLoading = false // 关闭列表数据加载loading
|
|
},
|
|
error: res => {
|
|
this.requestError(res);
|
|
}
|
|
})
|
|
},
|
|
requestError(res) {
|
|
console.log(res);
|
|
this.$confirm("请求发生错误", "错误提示", {
|
|
confirmButtonText: '确定',
|
|
showCancelButton: false,
|
|
type: 'error'
|
|
}).then(() => {
|
|
}).catch(() => {
|
|
})
|
|
},
|
|
// 开关
|
|
redSwitch(id, status) {
|
|
$.ajax({
|
|
url: '{:U("Reward/redSwitch")}',
|
|
type: 'post',
|
|
data: {
|
|
id: id,
|
|
status: status
|
|
},
|
|
datatype: 'json',
|
|
success: res => {
|
|
this.switchLoading = false;
|
|
this.getRewardList();
|
|
if (res.status == 1) {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'success'
|
|
});
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: res.msg
|
|
});
|
|
}
|
|
},
|
|
error: res => {
|
|
this.requestError(res);
|
|
}
|
|
})
|
|
},
|
|
// 开关点击
|
|
switchClick(id, status) {
|
|
if (status == 1) {
|
|
this.loadingTitle = '开启中';
|
|
this.redSwitch(id, status);
|
|
} else {
|
|
this.loadingTitle = '关闭中';
|
|
this.redSwitch(id, status);
|
|
}
|
|
this.switchLoading = true
|
|
},
|
|
// 删除的接口
|
|
deleteAjax(id) {
|
|
this.$confirm('您确认要删除该红包吗?', '信息', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
$.ajax({
|
|
url: '{:U("Reward/redDelete")}',
|
|
type: 'post',
|
|
data: {id: id},
|
|
dataType: 'json',
|
|
success: res => {
|
|
if (res.status == 1) {
|
|
this.getRewardList();
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
});
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: res.msg
|
|
});
|
|
}
|
|
|
|
},
|
|
error: res => {
|
|
this.requestError(res);
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
|
|
});
|
|
|
|
},
|
|
// 红包列表分页
|
|
handleRewardSizeChange(e) {
|
|
this.rewardLimit = e;
|
|
this.rewardPage = 1
|
|
this.getRewardList();
|
|
},
|
|
handleRewardCurrentChange(e) {
|
|
this.rewardPage = e
|
|
this.getRewardList();
|
|
},
|
|
// 领取记录按钮
|
|
dialogVisibles(e) {
|
|
this.reward_id = e
|
|
this.record_search_store = '';
|
|
this.dialogVisible = true //详情弹窗
|
|
this.recordLoading = true //loading
|
|
this.getRecordList()
|
|
this.getStore();
|
|
},
|
|
// 店铺选项接口
|
|
getStore() {
|
|
$.ajax({
|
|
url: '{:U("Reward/getStoreList")}',
|
|
type: 'post',
|
|
data: {},
|
|
dataType: 'json',
|
|
success: res => {
|
|
this.storeList = res
|
|
},
|
|
error: res => {
|
|
this.requestError(res);
|
|
}
|
|
})
|
|
},
|
|
// 领取记录接口
|
|
getRecordList() {
|
|
$.ajax({
|
|
url: '{:U("Reward/getRewardRecordList")}',
|
|
type: 'post',
|
|
data: {
|
|
id: this.reward_id,
|
|
page: this.recordPage,//当前页
|
|
limit: this.recordLimit,//每页数
|
|
store_id: this.record_search_store,
|
|
start_time: this.record_search_time[0],//开始时间
|
|
end_time: this.record_search_time[1]//结束时间
|
|
},
|
|
dataType: 'json',
|
|
success: res => {
|
|
this.recordList = res.data
|
|
this.recordCount = parseInt(res.count) //总条数
|
|
this.recordLoading = false//关闭loading
|
|
},
|
|
error: res => {
|
|
this.requestError(res);
|
|
}
|
|
})
|
|
},
|
|
// 分页
|
|
handleRecordSizeChange(e) {
|
|
this.recordLimit = e
|
|
this.recordPage = 1
|
|
this.getRecordList();
|
|
},
|
|
handleRecordCurrentChange(e) {
|
|
this.recordPage = e
|
|
this.getRecordList();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getRewardList();
|
|
}
|
|
})
|
|
</script>
|
|
</html> |