文件

792 行
31 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>
a {
color: #fff;
text-decoration: none;
}
.main > div:nth-child(1) > div {
margin-top: 18px;
}
.main > div:nth-child(1) > div:nth-child(1),
.main > div:nth-child(1) > div:nth-child(2),
.main > div:nth-child(1) > div:nth-child(3) {
width: 720px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.main > div:nth-child(1) > div:nth-child(1) {
width: 180px;
}
.main > div:nth-child(1) > div:nth-child(5) {
display: flex;
flex-direction: row;
justify-content: center;
}
.main > div:nth-child(1) > div:nth-child(6) {
position: absolute;
}
.flexPublicRow {
display: flex;
flex-direction: row;
}
.addActivityCasMain {
height: 350px;
width: 98%;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.addActivityCasMain > div:nth-child(1),
.addActivityCasMain > div:nth-child(2) {
width: 45%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #eee;
position: relative;
}
.addActivityCasA > div:nth-child(1),
.addActivityCasB > div:nth-child(1) {
font-size: 30px;
}
.addActivityCasA > div,
.addActivityCasB > div {
margin-top: 29px;
font-size: 15px;
}
.addActivityCasA > div:nth-child(4),
.addActivityCasB > div:nth-child(5) {
position: absolute;
bottom: 3px;
}
.storesTablePage {
margin-top: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div class="main">
<div>
<!-- 第一行 -->
<div>
<span>是否开启大转盘</span>
<span>
<el-switch
v-model="SwitchValue"
@change="activitySwitch"
active-color="#13ce66"
inactive-color="#909399">
</el-switch>
</span>
</div>
<!-- 第二行 -->
<div class="flexPublicRow">
<div>
<el-input v-model="activityName" placeholder="请输入活动名称" size="mini"></el-input>
</div>
<div>
<template>
<el-select v-model="activityValue" placeholder="活动状态" size="mini">
<el-option
v-for="item in ActiveState"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
<div>
<template>
<el-select v-model="typeValue" placeholder="活动类型" size="mini">
<el-option
v-for="item in ActiveType"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</div>
</div>
<!-- 第三行 -->
<div class="flexPublicRow">
<div>
<el-date-picker
v-model="timeValue"
type="daterange"
value-format="timestamp"
range-separator="至"
start-placeholder="开始日期"
size="mini"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div>
<el-button size="mini" type="primary" @click="activitySearchBtn">搜索</el-button>
</div>
<div>
<el-button size="mini" type="primary" @click="addNewActivity">添加活动</el-button>
</div>
<div>
<a href="winList.html">
<el-button type="primary" size="mini">
中奖纪录
</el-button>
</a>
</div>
</div>
<div>
<!-- v-loading="loading" -->
<template>
<el-table
v-loading="loading"
:data="tableDataS"
border
style="width: 100%">
<el-table-column
label="序号"
type="index"
align="center"
width="80">
</el-table-column>
<el-table-column
label="活动名称"
align="center"
width="180">
<template slot-scope="scope">
<div>{{ scope.row.turntable_name }}</div>
</template>
</el-table-column>
<el-table-column
label="活动时间"
align="center"
prop="start_time"
:formatter="formatDate"
width="220">
<template slot-scope="scope">
<div>{{ scope.row.start_time | formatDateS }}</div>
<div>{{ scope.row.end_time | formatDateS}}</div>
</template>
</el-table-column>
<el-table-column
label="创建时间"
prop="add_time"
:formatter="formatDate"
align="center"
width="220">
</el-table-column>
<el-table-column
label="活动门店"
align="center"
width="200">
<template slot-scope="scope">
<div v-if="scope.row.shop_limit == 0">
<el-link disabled>不限门店</el-link>
</div>
<div v-else-if="scope.row.shop_limit == 1">
<el-link type="primary" @click="seeStoresTableBtn(scope.row.id)">查看</el-link>
</div>
</template>
</el-table-column>
<el-table-column
label="总数量"
align="center"
width="100">
<template slot-scope="scope">
<div>{{ scope.row.prize_total }}</div>
</template>
</el-table-column>
<el-table-column
label="已用数量"
align="center"
width="100">
<template slot-scope="scope">
<div>{{ scope.row.use_num }}</div>
</template>
</el-table-column>
<el-table-column
label="剩余数量"
align="center"
width="100">
<template slot-scope="scope">
<div>{{ scope.row.surplus_num }}</div>
</template>
</el-table-column>
<el-table-column
label="活动类型"
align="center"
width="140">
<template slot-scope="scope">
<div v-if="scope.row.turntable_type == 1">
<span>公众号通知栏</span>
</div>
<div v-else-if="scope.row.turntable_type == 2">
<span>小程序商城首页</span>
</div>
<div v-else-if="scope.row.turntable_type == 3">
<span>线上支付</span>
</div>
<div v-else-if="scope.row.turntable_type == 4">
<span>线下支付</span>
</div>
<div v-else-if="scope.row.turntable_type == 5">
<span>消费任务</span>
</div>
</template>
</el-table-column>
<el-table-column
label="活动状态"
align="center"
width="140">
<template slot-scope="scope">
<el-switch
v-model="scope.row.status"
active-value="1" inactive-value="2"
@change="ActiveStateSwitch(scope.row,scope.row.status,scope.row.id)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" width="370" align="center" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
@click="tableDetailed(scope.row.id)">中奖详细
</el-button>
<el-button
size="mini"
type="primary"
@click="tableEditor(scope.row.id)">编辑
</el-button>
<el-button
size="mini"
type="primary"
@click="addHistory(scope.row.id)">从此活动新建
</el-button>
<el-button
size="mini"
type="info"
@click="tableDelete(scope.row.id)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
<!-- 分页 -->
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
:page-sizes="[8, 20, 40, 60, 80]"
:page-size="pagesize"
:total="dataTotal"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
<!-- 删除确认框 -->
<div>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%">
<span>确定删除吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="sureDelete">确 定</el-button>
</span>
</el-dialog>
</div>
<!-- 门店信息弹出框 -->
<div>
<el-dialog title="查看门店" :visible.sync="seeStoresTable" width="45%">
<div class="storesTableCla">
<el-table
border
:data="storesTableData"
>
<el-table-column property="date" label="序号" width="200px" type="index" align="center">
</el-table-column>
<el-table-column property="name" label="门店名称" min-width="60%" align="center">
<template slot-scope="scope">
<div>
{{scope.row.storetag}}
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="storesTablePage">
<el-pagination
@size-change="storesHandleSizeChanges"
@current-change="storesHandleCurrentChanges"
:current-page="storesCurrentPage"
:page-sizes="[8, 20, 40, 60, 80]"
:page-size="storesPagesize"
:total="dataTotalS"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</el-dialog>
</div>
</div>
</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 {
// 活动状态
ActiveState: [{
value: '1',
label: '未开始'
}, {
value: '2',
label: '进行中'
}, {
value: '3',
label: '已结束'
}],
// 活动类型
ActiveType: [{
value: '1',
label: '公众号通知栏'
}, {
value: '2',
label: '小程序商城首页'
}, {
value: '3',
label: '线上支付'
}, {
value: '4',
label: '线下支付'
}, {
value: '5',
label: '消费任务'
}],
// 活动状态
activityValue: '',
// 活动名搜索输入框
activityName: '',
// 活动名搜索输入框类型
activityNameType: '',
// 活动类型
typeValue: '',
// 开启关闭滑块
SwitchValue: false,
// 滑块状态码
SwitchValueNum: '',
// 时间选择器
timeValue: '',
// 表格真数据
tableDataS: [],
// 查看门店数据
storesTableData: [],
// 列表页分页数据
currentPage: 1,
pagesize: 8,
dataTotal: 1,
// 查看门店分页数据
storesCurrentPage: 1,
storesPagesize: 8,
dataTotalS: 2,
// 删除确认框
dialogVisible: false,
// 临时存储删除ID
deleteIds: '',
// 查看门店显示隐藏
seeStoresTable: false,
// 选择方式弹出框
addActivityBox: false,
// 加载
loading: '',
// 搜索时间戳
timeValueA: '',
timeValueB: '',
// 查看门店ID
stores: '',
SwitchNums: ''
}
},
created() {
this.addActivityBox = false
this.getlist()
},
methods: {
// 获取列表页数据
getlist() {
if (this.timeValue == '') {
this.timeValueA = ''
this.timeValueB = ''
} else {
if (this.timeValue[0] !== '') {
this.timeValueA = this.timeValue[0]
}
if (this.timeValue[1] !== '') {
this.timeValueB = this.timeValue[1]
}
}
this.timeValueA = this.timeValueA / 1000
this.timeValueB = this.timeValueB / 1000
console.log(this.timeValueA)
console.log(this.timeValueB)
this.loading = true
$.ajax({
type: 'post',
url: '{:U("Turntable/turntableList")}',
dataType: 'json',
data: {
title: this.activityName,
status: this.activityValue,
turntable_type: this.typeValue,
start_time: this.timeValueA,
end_time: this.timeValueB,
page: this.currentPage,
page_size: this.pagesize
},
success: (data) => {
var result = data
if (result.data.data == []) {
this.tableDataS = []
return
}
console.log(result)
this.tableDataS = result.data.data
console.log(this.tableDataS)
this.dataTotal = parseInt(result.data.page_info.data_total)
console.log(this.dataTotal)
// loading.close()
this.loading = false
},
error: res => {
this.requestError(res);
}
});
},
requestError(res) {
console.log(res);
this.$confirm("请求发生错误", "错误提示", {
confirmButtonText: '确定',
showCancelButton: false,
type: 'error'
}).then(() => {
}).catch(() => {
})
},
formatDate(row, column) {
let date = new Date(parseInt(row.add_time) * 1000);
let Y = date.getFullYear() + '-';
let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
return Y + M + D + h + m + s;
},
//添加新活动
addNewActivity() {
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.getlist();
},
})
},
// 表格操作里的四个-历史活动新建-编辑-删除-中奖详细
addHistory(id) {
var that = this;
//console.log(index, row);
top.layer.open({
type: 2,
content: "{:U('addHistory')}?id=" + id,
title: "复制新增大转盘",
scrollbar: false,
area: ["calc(100% - 160px)", "calc(100% - 65px)"],
shade: 0,
offset: 'rb',
resize: false,
move: false,
end: function () {
that.getlist();
},
})
},
tableEditor(id) {
var that = this;
//console.log(index, row);
top.layer.open({
type: 2,
content: "{:U('edit')}?id=" + id,
title: "编辑大转盘",
scrollbar: false,
area: ["calc(100% - 160px)", "calc(100% - 65px)"],
shade: 0,
offset: 'rb',
resize: false,
move: false,
end: function () {
that.getlist();
},
})
},
tableDelete(id) {
this.dialogVisible = true
this.deleteIds = id
},
tableDetailed(id) {
top.layer.open({
type: 2,
content: "{:U('winDetails')}?id=" + id,
title: "中奖详情",
scrollbar: false,
area: ["calc(100% - 160px)", "calc(100% - 65px)"],
shade: 0,
offset: 'rb',
resize: false,
move: false,
})
},
// 列表页分页
handleSizeChange: function (val) {
this.pagesize = val;
this.getlist()
},
handleCurrentChange: function (currentPage) {
this.currentPage = currentPage;
this.getlist()
},
// 确认删除
open2() {
this.$message({
message: '删除成功',
type: 'success'
});
},
sureDelete(id) {
$.ajax({
type: 'post',
url: '{:U("Turntable/turntableStatusDel")}',
dataType: 'json',
data: {
turntable_id: this.deleteIds
},
success: (data) => {
console.log(data)
if (data.code === 0) {
this.dialogVisible = false
// this.$forceUpdate()
this.open2()
this.getlist()
}
},
error: res => {
this.requestError(res);
}
})
// this.$forceUpdate()
},
// 查看门店弹出
seeStoresTableBtn(id) {
console.log(id)
this.stores = id
this.seeStoresTable = true
$.ajax({
type: 'post',
url: '{:U("Turntable/turntableShopList")}',
dataType: 'json',
data: {
turntable_id: id,
page: this.storesCurrentPage,
page_size: this.storesPagesize
},
success: (data) => {
console.log(data)
let datas = data
this.storesTableData = datas.data.data
this.dataTotalS = parseInt(datas.data.page_info.data_total)
console.log(this.dataTotalS)
console.log(this.storesTableData)
},
error: res => {
this.requestError(res);
}
})
},
// 查看门店分页
storesHandleSizeChanges(val) {
this.storesPagesize = val;
// this.seeStoresTableBtn()
$.ajax({
type: 'post',
url: '{:U("Turntable/turntableShopList")}',
dataType: 'json',
data: {
turntable_id: this.stores,
page: this.storesCurrentPage,
page_size: this.storesPagesize
},
success: (data) => {
console.log(data)
let datas = data
this.storesTableData = datas.data.data
this.dataTotalS = parseInt(datas.data.page_info.data_total)
console.log(this.dataTotalS)
console.log(this.storesTableData)
},
error: res => {
this.requestError(res);
}
})
},
storesHandleCurrentChanges(currentPage) {
this.storesCurrentPage = currentPage;
$.ajax({
type: 'post',
url: '{:U("Turntable/turntableShopList")}',
dataType: 'json',
data: {
turntable_id: this.stores,
page: this.storesCurrentPage,
page_size: this.storesPagesize
},
success: (data) => {
console.log(data)
let datas = data
this.storesTableData = datas.data.data
// this.dataTotalS = Number(datas.data.page_info.data_total)
console.log(this.dataTotalS)
console.log(this.storesTableData)
},
error: res => {
this.requestError(res);
}
})
},
// 搜索
activitySearchBtn() {
this.getlist()
},
// 活动开关
activitySwitch() {
console.log(this.SwitchValue)
if (this.SwitchValue == true) {
this.SwitchNums = 1
} else if (this.SwitchValue == false) {
this.SwitchNums = 2
}
console.log(this.SwitchNums)
$.ajax({
type: 'post',
url: '{:U("Turntable/turntableStatusInstall")}',
dataType: 'json',
data: {
status: this.SwitchNums
},
success: (data) => {
console.log(data)
this.$message('成功')
},
error: res => {
this.requestError(res);
}
})
},
ActiveStateSwitch(item, statu, id) {
console.log(item)
console.log(statu)
console.log(id)
$.ajax({
type: 'post',
url: '{:U("Turntable/turntableStatusUpdate")}',
dataType: 'json',
data: {
turntable_id: id,
status: statu
},
success: (data) => {
if (data.code == 0) {
if (statu == 2) {
this.$message({
message: '关闭成功',
type: 'success'
})
} else if (statu == 1) {
this.$message({
message: '开启成功',
type: 'success'
})
}
} else {
this.$message({
message: data.msg,
type: 'error'
})
item.status = 2
}
},
error: res => {
this.requestError(res);
}
})
}
},
filters: {
formatDateS: function (value) {
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;
return y + '-' + MM + '-' + d + ' ' ;
}
}
})
</script>
</html>