文件

751 行
32 KiB
HTML
可执行文件

<!doctype html>
<html>
<!--[1.6.48]-->
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>促销活动</title>
<link rel="stylesheet" href="__PUBLIC__/vue/element-ui.css">
<style>
[v-cloak] {
display: none;
}
.content-table {
width: 100%;
height: 50px;
text-indent: 35px;
line-height: 50px;
border-bottom: 1px solid #e5e5e5;
color: #409EFF;
font-weight: bold;
font-size: 15px;
margin-bottom: 20px;
margin-top: 10px;
}
.center-content {
margin: 10px 0px 10px 30px;
}
[v-cloak] {
display: none;
}
.table-title {
width: 100%;
height: 30px;
text-indent: 20px;
line-height: 30px;
border-bottom: 1px solid #e5e5e5;
font-weight: bold;
font-size: 14px;
margin-bottom: 10px;
}
.form-body {
width: 90%;
padding: 10px 100px;
}
.may {
background: #66b1ff;
}
.may_not {
background: #c2ccd1;
}
.tip {
padding: 8px 16px;
background-color: #ecf8ff;
border-radius: 4px;
border-left: 5px solid #50bfff;
margin: 20px 0;
}
.el-dialog__body{
color: rgb(96, 98, 102);
font-size: 14px;
padding: 3px 10px;
}
</style>
</head>
<body>
<div id="app" v-cloak style="width: 100%">
<div class="content-table">促销活动</div>
<div class="tip" style="font-size: 14px;color: #409EFF;">
<p>1.促销活动只能有一个活动是开启状态,请注意活动截止时间</p>
<p>2.搜索为创建活动的时间,如果选择起始时间,即此时间后的所有活动,如果选择截止时间,即此时间前的所有时间,两者全选即此时间段内的所有活动</p>
</div>
<div class="center-content">
<el-form ref="form">
<el-date-picker
v-model="search_start_time"
type="datetime"
size="small"
placeholder="创建时间"
value-format="yyyy-MM-dd HH:mm:ss"
align="right">
</el-date-picker>
<span style="color:#c6c6c6">-</span>
<el-date-picker
v-model="search_end_time"
type="datetime"
size="small"
placeholder="创建时间"
value-format="yyyy-MM-dd HH:mm:ss"
align="right">
</el-date-picker>
<el-button type="primary" plain @click="get_promotion" size="small">搜索</el-button>
</el-form>
</div>
<div class="center-content">
<el-button type="primary" size="medium" @click="new_add = true">新增活动</el-button>
</div>
<div class="center-content">
<el-table border :data="promotion" style="width: 50%">
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column property="addtime" label="创建时间"></el-table-column>
<el-table-column property="start_time" label="起始时间"></el-table-column>
<el-table-column property="end_time" label="截止时间"></el-table-column>
<el-table-column label="状态" width="80">
<template slot-scope="scope">
<el-switch
v-model="scope.row.type"
active-value="1"
inactive-value="0"
@change="set_type(scope.row.id,scope.row.type)">
</el-switch>
</template>
</el-table-column>
<el-table-column property="right" label="操作" width="90">
<template slot-scope="scope">
<el-button type="text" size="small" @click="get_edit_data(scope.row.id)">编辑</el-button>
<el-button type="text" size="small" @click="delete_promotion(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="promotion_size_change"
@current-change="promotion_current_change"
:pager-count="5"
:page-sizes="[10,20,30,40,50,60,70,80,90,100]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
<!-- 创建活动 -->
<el-dialog :modal-append-to-body="false" :visible.sync="new_add" :fullscreen="true" @close="close_dialog">
<div class="tip">
<p>捆绑数量乘以预售笔数等于该商品的预售库存,预售库存不能大于商品中库存,请设置合理的预售笔数和捆绑数量</p>
<p>限制购买指用户限制购买的次数,0为不限制</p>
</div>
<el-form ref="form" label-width="120px">
<div class="table-title">促销时间</div>
<div class="form-body">
<el-form-item label="促销起始时间">
<el-col :span="12">
<el-date-picker
v-model="start_time"
type="datetime"
placeholder="选择起始时间"
value-format="yyyy-MM-dd HH:mm:ss"
align="right">
</el-date-picker>
</el-col>
</el-form-item>
<el-form-item label="促销截止时间">
<el-col :span="12">
<el-date-picker
v-model="end_time"
type="datetime"
placeholder="选择截止时间"
value-format="yyyy-MM-dd HH:mm:ss"
align="right">
</el-date-picker>
</el-col>
</el-form-item>
</div>
<div class="table-title">促销商品</div>
<div class="form-body">
<div style="margin-bottom: 10px;">
<el-button type="primary" size="small" icon="el-icon-goods" @click="open_goods">普通商品</el-button>
<el-button type="primary" size="small" icon="el-icon-goods" @click="open_sku">规格商品</el-button>
</div>
<template>
<el-table
border
:data="goods_list"
style="width: 100%">
<el-table-column type="index" label="序号" width="50"></el-table-column>
<el-table-column property="goods_name" label="商品"></el-table-column>
<el-table-column property="goods_num" label="库存"></el-table-column>
<el-table-column property="retail_price" label="门店价"></el-table-column>
<el-table-column property="store_promotion_price" label="门店促销价">
<template slot-scope="scope">
<el-input v-model="goods_list[scope.$index].store_promotion_price"
onkeyup="value=value.replace(/[^\d.]/g,'')"></el-input>
</template>
</el-table-column>
<el-table-column property="online_price" label="商城价"></el-table-column>
<el-table-column property="xcx_promotion_price" label="商城促销价">
<template slot-scope="scope">
<el-input v-model="goods_list[scope.$index].xcx_promotion_price"
onkeyup="value=value.replace(/[^\d.]/g,'')"></el-input>
</template>
</el-table-column>
<el-table-column label="捆绑数量">
<template slot-scope="scope">
<el-input
v-if="scope.row.can_exchange_weigh == 1"
v-model="goods_list[scope.$index].bundle_number"
@input.native.prevent="input_bundle_number(scope.$index,scope.row.goods_id,scope.row.sku_id,scope.row.bundle_number)"
onkeyup="value=value.replace(/[^\d]/g,'')">
</el-input>
<el-input v-else
v-model="goods_list[scope.$index].bundle_number"
@input.native.prevent="input_bundle_number(scope.$index,scope.row.goods_id,scope.row.sku_id,scope.row.bundle_number)"
onkeyup="value=value.replace(/[^\d.]/g,'')">
</el-input>
</template>
</el-table-column>
<el-table-column property="presell_singular" label="预售笔数">
<template slot-scope="scope">
<el-input v-model="goods_list[scope.$index].presell_singular" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
</template>
</el-table-column>
<el-table-column property="limit_num" label="限制购买">
<template slot-scope="scope">
<el-input v-model="goods_list[scope.$index].limit_num" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="80" style="border-right: none;">
<template slot-scope="scope">
<el-button type="text" size="small" @click="remove_goods(scope.$index)">移除</el-button>
</template>
</el-table-column>
</el-table>
</template>
</div>
<el-form-item>
<el-button type="primary" size="medium" plain style="margin-top: 20px;" @click="create">立即保存</el-button>
</el-form-item>
</el-form>
<!-- 普通商品 -->
<el-dialog :modal-append-to-body="false" :visible.sync="goods" :modal="false" top="10vh">
<el-form ref="form" style="margin-bottom: 10px;">
<el-input style="width:200px"
type="text"
size="small"
placeholder="名称 | 货号 | 条码"
v-model="goods_keyword">
</el-input>
<el-button type="primary" plain @click="get_goods_data()" size="small">搜索</el-button>
</el-form>
<el-table border :data="goods_data" height="580px">
<el-table-column property="index" label="序号" width="50"></el-table-column>
<el-table-column property="goods_name" label="商品"></el-table-column>
<el-table-column property="retail_price" label="店内价" width="200"></el-table-column>
<el-table-column property="online_price" label="商城价" width="200"></el-table-column>
<el-table-column label="操作" width="55">
<template slot-scope="scope">
<el-button
type="primary"
icon="el-icon-check"
size="mini"
circle
@click="close_goods(scope.$index)">
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="goods_data_size_change"
@current-change="goods_data_current_change"
:pager-count="5"
:total="totalg"
:current-page="pageg"
:page-sizes="[10,20,30,40,50,60,70,80,90,100]"
:page-size="limitg"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</el-dialog>
<!-- 规格商品 -->
<el-dialog :modal-append-to-body="false" :visible.sync="sku" :modal="false" top="10vh">
<el-form ref="form" style="margin-bottom: 10px;">
<el-input style="width:200px"
type="text"
size="small"
placeholder="名称 | 货号 | 条码"
v-model="sku_keyword">
</el-input>
<el-button type="primary" plain @click="get_sku_data()" size="small">搜索</el-button>
</el-form>
<el-table border :data="sku_data" height="580px">
<el-table-column property="index" label="序号" width="50"></el-table-column>
<el-table-column property="goods_name" label="商品"></el-table-column>
<el-table-column property="retail_price" label="店内价" width="200"></el-table-column>
<el-table-column property="online_price" label="商城价" width="200"></el-table-column>
<el-table-column label="操作" width="55">
<template slot-scope="scope">
<el-button
type="primary"
icon="el-icon-check"
size="mini"
circle
@click="close_sku(scope.$index)">
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sku_data_size_change"
@current-change="sku_data_current_change"
:pager-count="5"
:total="totals"
:current-page="pages"
:page-sizes="[10,20,30,40,50,60,70,80,90,100]"
:page-size="limits"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</el-dialog>
</el-dialog>
</div>
</body>
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
<script src="__PUBLIC__/vue/element-ui.js"></script>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {
promotion: [], // 活动数组
search_start_time: '', // 活动搜索条件
search_end_time: '', // 活动搜索条件
page: 1, // 活动分页
limit: 10, // 活动每页显示条数
total: 0, // 活动总数 int类型
new_add: false, // 创建活动
start_time: '', // 活动起始时间
end_time: '', // 活动截止时间
goods_list: [], // 促销商品
goods: false, // 选择商品
goods_data: [], // 所有商品
goods_keyword: '', // 商品名称|货号|条码搜索
pageg: 1, // 商品分页
limitg: 10, // 商品每页显示的条数
totalg: 0, // 商品总数 int类型
sku: false, // 规格
sku_data: [], // 规格商品
sku_keyword: '', // 商品名称|货号|条码搜索
pages: 1, // 商品分页
limits: 10, // 商品每页显示的条数
totals: 0, // 规格总数 int类型
id: '', // 促销ID
}
},
methods: {
/* 获取促销活动 */
get_promotion() {
var that = this;
$.ajax({
url: "{:U('get_promotion')}",
type: "post",
data: {page: that.page, limit: that.limit,search_start_time: that.search_start_time,search_end_time: that.search_end_time},
success: function (res) {
if (res.status == 1) {
that.promotion = res.promotion;
that.total = res.count;
}
}
})
},
/* 切换每页数量 */
promotion_size_change(val) {
this.limit = val;
this.page = 1;
this.get_promotion();
},
/* 切换页数 */
promotion_current_change(val) {
this.page = val;
this.get_promotion();
},
/* 打开普通商品列表 */
open_goods(){
this.get_goods_data();
this.goods = true;
},
/* 获取普通商品 */
get_goods_data() {
var that = this;
$.ajax({
url: "{:U('get_goods_data')}",
type: "post",
data: {page: that.pageg, limit: that.limitg, goods_keyword: that.goods_keyword},
success: function (res) {
if (res.status == 1) {
that.goods_data = res.goods_data;
that.totalg = res.count;
}
}
})
},
/* 切换每页数量 */
goods_data_size_change(val) {
this.limitg = val;
this.pageg = 1;
this.get_goods_data();
},
/* 切换页数 */
goods_data_current_change(val) {
this.pageg = val;
this.get_goods_data();
},
/* 选择促销 普通商品 */
close_goods(index) {
var that = this;
var goods_list = that.goods_list;
var goods_data = that.goods_data;
goods_list.unshift(JSON.parse(JSON.stringify(goods_data[index])));
that.goods_list = goods_list;
},
/* 打开规格商品列表 */
open_sku(){
this.get_sku_data();
this.sku = true;
},
/* 获取规格商品 */
get_sku_data() {
var that = this;
$.ajax({
url: "{:U('get_sku_data')}",
type: "post",
data: {page: that.pages, limit: that.limits, sku_keyword: that.sku_keyword},
success: function (res) {
if (res.status == 1) {
that.sku_data = res.sku_data;
that.totals = res.count;
}
}
})
},
/* 切换每页数量 */
sku_data_size_change(val) {
this.limits = val;
this.pages = 1;
this.get_sku_data();
},
/* 切换页数 */
sku_data_current_change(val) {
this.pages = val;
this.get_sku_data();
},
/* 选择促销 规格商品 */
close_sku(index) {
var that = this;
var goods_list = that.goods_list;
var sku_data = that.sku_data;
goods_list.unshift(JSON.parse(JSON.stringify(sku_data[index])));
that.goods_list = goods_list;
},
/* 移除商品 */
remove_goods(index) {
var that = this;
var goods_list = that.goods_list;
that.$confirm('确定移除该商品吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
if(goods_list[index].id){
$.ajax({
url:"{:U('remove_goods')}",
type:"post",
data:{id:goods_list[index].id},
success:function (res) {
if(res.status == 1){
goods_list.splice(index, 1);
that.goods_list = goods_list;
}else{
that.$message({
showClose: true,
message: '移除失败',
type: 'warning'
});
}
}
})
}else{
goods_list.splice(index, 1);
that.goods_list = goods_list;
}
});
},
/* 捆绑数量监听事件 */
input_bundle_number(index, goods_id, sku_id, bundle_number) {
var that = this;
var goods_list = that.goods_list;
for (var i = 0; i < goods_list.length; i++) {
if (sku_id) {
if (i != index && goods_list[i].goods_id == goods_id && goods_list[i].sku_id == sku_id && goods_list[i].bundle_number == bundle_number) {
that.$message({
showClose: true,
message: '第' + (index + 1) + '商品已捆绑数量以存在,请重新设置',
type: 'warning'
});
goods_list[i].types = 1;
} else {
goods_list[i].types = '';
}
} else {
if (i != index && goods_list[i].goods_id == goods_id && goods_list[i].bundle_number == bundle_number) {
that.$message({
showClose: true,
message: '第' + (index + 1) + '商品已捆绑数量以存在,请重新设置',
type: 'warning'
});
goods_list[i].types = 1;
} else {
goods_list[i].types = '';
}
}
}
that.goods_list = goods_list;
},
/* 保存活动 */
create() {
var that = this;
var start_time = that.start_time;
if (!start_time) {
that.$message({
showClose: true,
message: '促销起始时间设置不正确',
type: 'error'
});
return false
}
var end_time = that.end_time;
if (!end_time) {
that.$message({
showClose: true,
message: '促销截止时间设置不正确',
type: 'error'
});
return false;
}
var goods_list = that.goods_list;
if (!goods_list) {
that.$message({
showClose: true,
message: '请选择促销商品',
type: 'error'
});
return false;
}
for (var i = 0; i < goods_list.length; i++) {
if (!goods_list[i].store_promotion_price || goods_list[i].store_promotion_price < 0) {
that.$message({
showClose: true,
message: '第' + (i + 1) + '条店内促销价设置不正确',
type: 'error'
});
return false;
}
if (!goods_list[i].xcx_promotion_price || goods_list[i].xcx_promotion_price < 0) {
that.$message({
showClose: true,
message: '第' + (i + 1) + '条商城促销价设置不正确',
type: 'error'
});
return false;
}
if (!goods_list[i].bundle_number || goods_list[i].bundle_number < 0) {
that.$message({
showClose: true,
message: '第' + (i + 1) + '条捆绑数量设置不正确',
type: 'error'
});
return false;
}
if (!goods_list[i].presell_singular || goods_list[i].presell_singular < 0) {
that.$message({
showClose: true,
message: '第' + (i + 1) + '条预售笔数未设置',
type: 'error'
});
return false;
}
if (goods_list[i].presell_singular * goods_list[i].bundle_number > goods_list[i].goods_num) {
that.$message({
showClose: true,
message: '第' + (i + 1) + '条超出商品库存',
type: 'error'
});
return false;
}
if (goods_list[i].limit_num < 0) {
that.$message({
showClose: true,
message: '第' + (i + 1) + '条限制购买设置不合理',
type: 'error'
});
return false;
}
if (goods_list[i].types == 1) {
that.$message({
showClose: true,
message: '第' + (i + 1) + '捆绑数量设置重复,请修改',
type: 'error'
});
return false;
}
}
$.ajax({
url: "{:U('create')}",
type: "post",
data: {start_time: start_time, end_time: end_time, goods_list: goods_list, id: that.id},
success: function (res) {
if (res.status == 1) {
that.$message({
showClose: true,
message: res.msg,
type: 'success',
});
that.id = res.promotion.id;
that.start_time = res.promotion.start_time;
that.end_time = res.promotion.end_time;
that.goods_list = res.goods_list;
} else {
that.$message({
showClose: true,
message: res.msg,
type: 'warning',
onclose: function () {
window.location.reload();
}
});
}
}
})
},
/* 活动状态 */
set_type(id,type){
var that = this;
$.ajax({
url:"{:U('set_type')}",
type:"post",
data:{id:id,type:type},
success:function(res){
if(res.status == 1){
that.$message({
showClose: true,
message: res.msg,
type: 'success',
});
}else{
that.$message({
showClose: true,
message: res.msg,
type: 'warning',
});
}
}
});
that.get_promotion();
},
/* 编辑活动 */
get_edit_data(id) {
var that = this;
$.ajax({
url: "{:U('get_edit_data')}",
type: "post",
data: {id: id},
success: function (res) {
if (res.status == 1) {
that.id = res.promotion.id;
that.start_time = res.promotion.start_time;
that.end_time = res.promotion.end_time;
that.goods_list = res.goods_list;
that.new_add = true;
} else {
that.$message({
showClose: true,
message: res.msg,
type: 'error',
});
return false;
}
}
})
},
/* 删除活动 */
delete_promotion(id){
var that = this;
that.$confirm('确定删除该活动吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
$.ajax({
url:"{:U('delete')}",
type:"post",
data:{id:id},
success:function (res) {
if(res.status == 1){
that.get_promotion();
that.$message({
showClose: true,
message: res.msg,
type: 'success',
});
}else{
that.$message({
showClose: true,
message: res.msg,
type: 'error',
});
}
}
})
});
},
/* 关闭对话框 */
close_dialog(){
this.start_time = ''; // 活动起始时间
this.end_time = ''; // 活动截止时间
this.goods_list = new Array(); // 促销商品
this.id = ''; // 促销ID
this.get_promotion();
},
},
created: function () {
this.get_promotion();
},
})
</script>
</html>