dengbw
658 lines
28 KiB
PHP
658 lines
28 KiB
PHP
<script>
|
|
Vue.component('v-enroll', {
|
|
props: ['module', 'is_template'],
|
|
data: function () {
|
|
return {
|
|
pickGoods: [],
|
|
params: {
|
|
data: {},
|
|
status: 0,
|
|
filter_rule: {
|
|
goods_type: '',
|
|
status: '',
|
|
search_rule: ''
|
|
},
|
|
sort_rule: {
|
|
open_default: true,
|
|
open_fujin: true,
|
|
open_hot: true,
|
|
},
|
|
}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
require(['laydate'], function (laydate) {
|
|
//日期范围
|
|
laydate.render({
|
|
elem: '#enroll_time_id', range: '~', type: 'datetime'
|
|
, done: function (value, date, endDate) {
|
|
if (endDate.hours == "0" && endDate.minutes == "0" && endDate.seconds == "0") {
|
|
// 改变结束时间默认值
|
|
$(".layui-laydate-footer [lay-type='datetime'].laydate-btns-time").click();
|
|
$(".laydate-main-list-1 .layui-laydate-content li ol li:last-child").click();
|
|
$(".layui-laydate-footer [lay-type='date'].laydate-btns-time").click();
|
|
}
|
|
}
|
|
});
|
|
laydate.render({
|
|
elem: '#enroll_etime_id', range: '~', type: 'datetime'
|
|
, done: function (value, date, endDate) {
|
|
if (endDate.hours == "0" && endDate.minutes == "0" && endDate.seconds == "0") {
|
|
// 改变结束时间默认值
|
|
$(".layui-laydate-footer [lay-type='datetime'].laydate-btns-time").click();
|
|
$(".laydate-main-list-1 .layui-laydate-content li ol li:last-child").click();
|
|
$(".layui-laydate-footer [lay-type='date'].laydate-btns-time").click();
|
|
}
|
|
}
|
|
});
|
|
});
|
|
this.initData();
|
|
},
|
|
updated: function () {
|
|
},
|
|
methods: {
|
|
initData: function () {
|
|
var vm = this;
|
|
if (vm.module.id) {
|
|
$.ajax({
|
|
url: '/topics/topics/get_enroll_setting',
|
|
type: 'get',
|
|
dataType: 'json',
|
|
data: {
|
|
module_id: vm.module.id
|
|
},
|
|
success: function (re) {
|
|
vm.params = re.data.setting;
|
|
vm.pickGoods = re.data.goods;
|
|
$('#enroll_banner').val(re.data.setting.module_banner);
|
|
$("#enroll_banner_url").attr('src', re.data.setting.module_banner_url);
|
|
$('#enroll_time_id').val(re.data.setting.module_time);
|
|
$('#enroll_etime_id').val(re.data.setting.module_etime);
|
|
$("#module_title_img").val(vm.params.module_title_img);
|
|
if (content_html) {
|
|
content_html.setData(re.data.setting.module_content);
|
|
} else {
|
|
setTimeout(function () {
|
|
content_html.setData(re.data.setting.module_content);
|
|
}, 1000);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
save: function () {
|
|
var that = this;
|
|
that.params.module_content = content_html.getData();
|
|
that.params.module_banner = $('#enroll_banner').val();
|
|
that.params.module_time = $('#enroll_time_id').val();
|
|
that.params.module_etime = $('#enroll_etime_id').val();
|
|
that.params.module_title_img = $("#module_title_img").val();
|
|
var save_data = {
|
|
module_id: that.module.id,
|
|
setting: that.params,
|
|
enrolls: that.pickGoods.map(function (item) {
|
|
return {id: item.id, sort: item.sort_order}
|
|
})
|
|
}
|
|
$.ajax({
|
|
url: '/topics/topics/edit_save_enroll',
|
|
type: 'post',
|
|
dataType: 'json',
|
|
data: {save_data: save_data},
|
|
beforeSend: function () {
|
|
layer.load(1, {
|
|
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
|
});
|
|
},
|
|
success: function (re) {
|
|
if (re.code) {
|
|
layer.msg(re.msg, {icon: 1});
|
|
} else {
|
|
layer.msg(re.msg, {icon: 2});
|
|
}
|
|
},
|
|
complete: function () {
|
|
layer.closeAll('loading');
|
|
}
|
|
});
|
|
}
|
|
},
|
|
watch: {
|
|
'module.id': function (newValue, oldValue) {
|
|
this.$nextTick(function () {
|
|
if (newValue != oldValue) {
|
|
this.pickGoods = [];
|
|
}
|
|
this.initData();
|
|
})
|
|
},
|
|
'params.sort_rule': function (newValue, oldValue) {
|
|
if (!newValue) {
|
|
this.params.sort_rule = {}
|
|
}
|
|
},
|
|
'params.module_title': function (newValue, oldValue) {
|
|
if (!newValue) newValue = '报名模块';
|
|
var obj = {};
|
|
obj.module_id = this.module.id;
|
|
obj.module_name = newValue;
|
|
this.$emit('enroll-title', obj);
|
|
}
|
|
},
|
|
computed: {},
|
|
template: '#v-enroll'
|
|
})
|
|
</script>
|
|
<template id="v-enroll">
|
|
<div>
|
|
<div class="form-group">
|
|
<label for="" class="col-sm-2 control-label">报名列表</label>
|
|
<div class="col-sm-2">
|
|
<div class="input-group">
|
|
<button type="button"
|
|
data-open="/receiver/customer?cfrom_id=35&t_id=<?= $info['id'] ?>"
|
|
class="am-btn am-btn-default am-btn-sm">查看报名列表
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="" class="col-sm-2 control-label">模块状态</label>
|
|
<div class="col-sm-2">
|
|
<div class="radio"><label><input type="radio" name="modulestatus"
|
|
value="1" v-model="params.status"> 正常</label></div>
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<div class="radio"><label><input type="radio" name="modulestatus" value="0" v-model="params.status">
|
|
下架</label></div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="" class="col-sm-2 control-label">模块信息</label>
|
|
<div class="col-sm-4">
|
|
<div class="input-group">
|
|
<div class="input-group-addon">标题</div>
|
|
<input type="text" class="form-control" v-model="params.module_title" placeholder=""/>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="input-group">
|
|
<div class="input-group-addon">简介</div>
|
|
<input type="text" class="form-control" placeholder="" v-model="params.module_desc"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label"></label>
|
|
<div class="col-sm-4">
|
|
<div class="input-group">
|
|
<div class="am-form-group am-form-file">
|
|
<button type="button" class="am-btn am-btn-default am-btn-sm"
|
|
data-file="1" data-type="jpg,png,gif,png,jpeg"
|
|
data-uptype="qiniu" data-field="module_title_img"><i class="am-icon-cloud-upload"></i>标题头图<span
|
|
style="color: blue">(700*125)</span>
|
|
</button>
|
|
<input type="hidden" name="module_title_img" id="module_title_img"
|
|
onchange="$(this).next('img').attr('src', $(this).data('srcs') || this.value)"
|
|
value="" class="layui-input">
|
|
<img data-tips-image style="height:auto;max-height:32px;min-width:32px"
|
|
:src="params.module_title_img_url"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="" class="col-sm-2 control-label">人数限制</label>
|
|
<div class="col-sm-2">
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" v-model="params.module_limit_num"/>
|
|
</div>
|
|
</div>
|
|
<span class="f12 clr999 lh-default">0无限制</span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="" class="col-sm-2 control-label">黑名单限制</label>
|
|
<div class="col-sm-2">
|
|
<select class="form-control" v-model="params.user_black">
|
|
<option value="0">否</option>
|
|
<option value="1">是</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<? if (1 == $info['app_id']) { ?>
|
|
<div class="form-group">
|
|
<label for="" class="col-sm-2 control-label">报名按钮悬浮底部</label>
|
|
<div class="col-sm-2">
|
|
<select class="form-control" v-model="params.style">
|
|
<option value="0">否</option>
|
|
<option value="1">是</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<? } ?>
|
|
<div class="form-group">
|
|
<label for="" class="col-sm-2 control-label">报名类型</label>
|
|
<div class="col-sm-2">
|
|
<div class="radio"><label><input type="radio" value="0" v-model="params.module_type"> 仅报名</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<div class="radio"><label><input type="radio" value="1" v-model="params.module_type"> 活动
|
|
<span class="f12 clr999">(前期报名发码，后期核码参与活动)</span></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="" class="col-sm-2 control-label">显示模块</label>
|
|
<div class="col-sm-2">
|
|
<div class="radio"><label><input type="radio" value="0" v-model="params.if_module"> 显示</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<div class="radio"><label><input type="radio" value="1" v-model="params.if_module"> 隐藏</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="" class="col-sm-2 control-label">展示方式</label>
|
|
<div class="col-sm-2">
|
|
<div class="radio"><label><input type="radio" value="0" v-model="params.show_type"> 正常</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<div class="radio"><label><input type="radio" value="1" v-model="params.show_type"> 弹窗</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<? if (6 == $info['app_id'] || 15 == $info['app_id'] || 2 == $info['app_id']) { ?>
|
|
<div class="form-group">
|
|
<label for="" class="col-sm-2 control-label">手机验证码</label>
|
|
<div class="col-sm-2">
|
|
<div class="radio"><label><input type="radio" value="0" v-model="params.if_code"> 开启</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8">
|
|
<div class="radio"><label><input type="radio" value="1" v-model="params.if_code"> 关闭</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<? } ?>
|
|
<div class="form-group">
|
|
<label for="" class="col-sm-2 control-label">
|
|
<template>报名时间</template>
|
|
</label>
|
|
<div class="col-sm-6">
|
|
<div class="input-group" style="width: 100%">
|
|
<input id="enroll_etime_id" type="text" class="form-control" style="width: 70%"
|
|
placeholder="开始日期 ~ 结束日期"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" :style="params.module_type==1 ? 'display: block' : 'display: none'">
|
|
<label for="" class="col-sm-2 control-label">活动(核销)时间</label>
|
|
<div class="col-sm-6">
|
|
<div class="input-group" style="width: 100%">
|
|
<input id="enroll_time_id" type="text" class="form-control" style="width: 70%"
|
|
:value="params.module_time"
|
|
placeholder="开始日期 ~ 结束日期"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" v-if="params.module_type==1">
|
|
<label for="" class="col-sm-2 control-label">适用门店</label>
|
|
<div class="col-sm-10">
|
|
<v-enroll-select :goods.sync="pickGoods"></v-enroll-select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="" class="col-sm-2 control-label"></label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!--选择报名商家-->
|
|
<script>
|
|
Vue.component('v-enroll-select', {
|
|
props: {
|
|
'selectedLimit': {
|
|
type: Number,
|
|
default: 100
|
|
},
|
|
'goods': {
|
|
type: Array,
|
|
default: function () {
|
|
return []
|
|
}
|
|
}
|
|
},
|
|
template: '#v-enroll-select',
|
|
data: function () {
|
|
return {
|
|
inputSearchKeyword: '',
|
|
searchKeyword: '',
|
|
selectedPage: 1,
|
|
selectedItems: this.goods,
|
|
goodsName: '',
|
|
goodsFields: [],
|
|
goodsItems: [],
|
|
goodsPage: [],
|
|
goodsThPage: 0,
|
|
sale_type_list: {},
|
|
sale_type: -1,
|
|
sys_cate_id: 0,
|
|
sysCateList: [],
|
|
edit_shop: [],
|
|
}
|
|
},
|
|
mounted: function () {
|
|
var that = this;
|
|
that.getSysCate();
|
|
},
|
|
methods: {
|
|
startSearch: function () {
|
|
this.selectedPage = 1;
|
|
this.$nextTick(function () {
|
|
this.searchKeyword = this.inputSearchKeyword;
|
|
});
|
|
},
|
|
editOrder: function (item) {
|
|
item.edit_mode = 1;
|
|
var cloneItems = $.extend(true, [], this.selectedItems);
|
|
this.selectedItems = cloneItems;
|
|
},
|
|
changeOrder: function (item, e) {
|
|
item.sort = e.target.value;
|
|
item.edit_mode = 0;
|
|
this.selectedItems.map(function (m) {
|
|
if (m.id == item.id) {
|
|
m.sort = item.sort;
|
|
m.reason = item.reason;
|
|
m.edit_mode = 0;
|
|
}
|
|
});
|
|
this.$emit('update:goods', this.selectedItems)
|
|
},
|
|
hideGoodsModal: function () {
|
|
},
|
|
showGoodsModal: function () {
|
|
this.goodsThPage = 0;
|
|
this.goodsName = '';
|
|
this.changePage(1);
|
|
},
|
|
searchByGoodsName: function () {
|
|
this.changePage(1);
|
|
},
|
|
loadGoods: function () {
|
|
var that = this;
|
|
layer.open({
|
|
type: 1,
|
|
area: ['45%', '80%'], //宽高
|
|
content: $('#goods-modal'),
|
|
title: '选择门店',
|
|
shade: false,
|
|
btn: ['选好了'],
|
|
yes: function (index) {
|
|
layer.close(index);
|
|
}
|
|
});
|
|
$.ajax({
|
|
url: '/common/cooperation_shop_app',
|
|
type: 'post',
|
|
dataType: 'json',
|
|
data: {
|
|
page: that.goodsThPage,
|
|
app_id: <?= $info['app_id'] ?>,
|
|
cate_id: that.sys_cate_id,
|
|
name: that.goodsName
|
|
},
|
|
success: function (json) {
|
|
var goodsItems = json.data.shopList;
|
|
that.goodsPage = json.data.shopPage;
|
|
goodsItems.map(function (_item, _index) {
|
|
for (var index in that.selectedItems) {
|
|
var item = that.selectedItems[index];
|
|
if (item.id == _item.id) {
|
|
goodsItems[_index].selected = 1;
|
|
goodsItems[_index].sort = item.sort;
|
|
goodsItems[_index].reason = item.reason;
|
|
break;
|
|
} else {
|
|
goodsItems[_index].selected = 0;
|
|
}
|
|
}
|
|
goodsItems[_index].edit_mode = 0;
|
|
})
|
|
that.goodsItems = goodsItems;
|
|
}
|
|
});
|
|
},
|
|
beforeShopPage: function () {
|
|
var vm = this;
|
|
if (vm.goodsThPage == 1) {
|
|
alert('已经是第一页了');
|
|
return;
|
|
}
|
|
vm.goodsThPage--;
|
|
return this.loadGoods();
|
|
},
|
|
afterShopPage: function () {
|
|
var vm = this;
|
|
vm.goodsThPage++;
|
|
return this.loadGoods();
|
|
},
|
|
changeSelectedPage: function (page) {
|
|
this.selectedPage = page;
|
|
},
|
|
changePage: function (page) {
|
|
var that = this;
|
|
that.goodsThPage = page;
|
|
return this.loadGoods();
|
|
},
|
|
addItem: function (item, index) {
|
|
item.edit_mode = 0;
|
|
item.reason = '';
|
|
this.selectedItems.push(item);
|
|
this.$set(this.goodsItems[index], 'selected', 1);
|
|
this.$emit('update:goods', this.selectedItems)
|
|
},
|
|
removeItem: function (item, index) {
|
|
var that = this;
|
|
this.selectedItems = this.selectedItems.filter(function (_item) {
|
|
return _item.id != item.id;
|
|
})
|
|
this.goodsItems.map(function (_item, _index) {
|
|
if (item.id == _item.id) {
|
|
that.goodsItems[_index].selected = 0;
|
|
}
|
|
})
|
|
this.$emit('update:goods', this.selectedItems)
|
|
},
|
|
//系统分类
|
|
getSysCate: function () {
|
|
var vm = this;
|
|
$.ajax({
|
|
url: '/common/category_app',
|
|
type: 'post',
|
|
dataType: 'json',
|
|
data: {
|
|
app_id: <?= $info['app_id'] ?>,
|
|
},
|
|
success: function (data) {
|
|
if (data.data) {
|
|
vm.sysCateList = data.data;
|
|
}
|
|
},
|
|
});
|
|
},
|
|
},
|
|
computed: {
|
|
selectTotalCount: function () {
|
|
if (this.searchKeyword) {
|
|
return this.filterItems.length;
|
|
} else {
|
|
return this.selectedItems.length;
|
|
}
|
|
},
|
|
filterItems: function () {
|
|
var that = this;
|
|
var orderedItems = this.selectedItems.filter(function (value, index) {
|
|
return value.name.indexOf(that.searchKeyword) >= 0
|
|
});
|
|
return orderedItems;
|
|
},
|
|
selectedTotalPage: function () {
|
|
var that = this;
|
|
var total = Math.ceil(that.selectedItems.length / that.selectedLimit);
|
|
if (this.searchKeyword) {
|
|
total = Math.ceil(that.filterItems.length / that.selectedLimit);
|
|
}
|
|
return total;
|
|
},
|
|
showItems: function () {
|
|
var that = this;
|
|
var orderedItems = this.selectedItems.sort(function (a, b) {
|
|
if (a.sort == undefined) {
|
|
a.sort = 50;
|
|
}
|
|
var order = Math.floor(b.sort) - Math.floor(a.sort);
|
|
if (order == 0) {
|
|
return b.id - a.id;
|
|
}
|
|
return order;
|
|
}).filter(function (value, index) {
|
|
return value.name.indexOf(that.searchKeyword) >= 0
|
|
});
|
|
var offset = Math.floor((this.selectedPage - 1) * this.selectedLimit);
|
|
var end = offset + this.selectedLimit;
|
|
if (that.selectedItems.length) {
|
|
if (end >= (that.selectedItems.length)) {
|
|
end = undefined;
|
|
}
|
|
}
|
|
if (end < 0) {
|
|
end = undefined;
|
|
}
|
|
return orderedItems.slice(offset, end);
|
|
},
|
|
selectedData: function () {
|
|
var items = [];
|
|
this.selectedItems.map(function (value) {
|
|
items.push({
|
|
id: value.id,
|
|
sort: value.sort,
|
|
reason: value.reason
|
|
});
|
|
})
|
|
return items;
|
|
}
|
|
},
|
|
watch: {
|
|
'goods': function (newValue, oldValue) {
|
|
this.selectedItems = newValue;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<template id="v-enroll-select">
|
|
<div>
|
|
<div>
|
|
<div class="am-form-inline">
|
|
<button type="button" class="btn btn-default btn-stroke btn-sm" @click="showGoodsModal()">选择指定门店
|
|
</button>
|
|
<span class="f12 clr999 lh-default ml5">买家可到已选门店使用，已选
|
|
<strong class="text-danger" v-if="showItems">{{showItems.length}}</strong>个门店</span>
|
|
</div>
|
|
<div class="label-group-wrap label-group-sortable">
|
|
<div class="label-group" v-for="(v,i) in showItems">
|
|
<span class="label label-default sort-shop-list">{{v.name}}</span>
|
|
<a href="javascript:void(0);" @click="removeItem(v)" class="label label-default"><i
|
|
class="fa fa-remove"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="goods-modal" style="display: none;">
|
|
<div class="modal-body">
|
|
<div class="header">
|
|
<form class="form-inline" style="margin-left: 20px;">
|
|
<div class="form-group">
|
|
<div class="input-group">
|
|
<select class="form-control" @change='searchByGoodsName();' v-model="sys_cate_id">
|
|
<template v-for="(v,i) in sysCateList">
|
|
<option :value="v.id">{{v.name}}</option>
|
|
</template>
|
|
</select>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" v-model="goodsName" placeholder="商家名"/>
|
|
<div class="input-group-btn"><a href="javascript:"
|
|
class="btn btn-primary btn-stroke"
|
|
@click="searchByGoodsName()"><i
|
|
class="fa fa-search"></i></a></div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="">
|
|
<div class="vuetable-body-wrapper">
|
|
<table class="vuetable table table-middle table-hover fixed">
|
|
<colgroup>
|
|
<col class="vuetable-col-title" style="width: 50%;">
|
|
<col class="vuetable-col-actions text-right">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th class="vuetable-th-slot-title" style="width: 50%;">门店</th>
|
|
<th class="vuetable-th-slot-actions text-right">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot></tfoot>
|
|
<tbody class="vuetable-body">
|
|
<tr v-for="(v,i) in goodsItems">
|
|
<td class="vuetable-slot" style="width: 36%;">
|
|
<div>
|
|
{{v.name}}
|
|
</div>
|
|
</td>
|
|
<td class="vuetable-slot text-right">
|
|
<button
|
|
type='button'
|
|
v-if="v.selected==0 || !v.selected"
|
|
class="btn btn-sm btn-success"
|
|
@click="addItem(v, i)"
|
|
>添加
|
|
</button>
|
|
<button
|
|
type='button'
|
|
v-if="v.selected==1"
|
|
class="btn btn-sm btn-danger"
|
|
@click="removeItem(v, i)"
|
|
>删除
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix">
|
|
<span class="pull-left text-muted">第{{goodsPage.page}}页(每页{{goodsPage.pageLimit}}条,共{{goodsPage.pageCount}}条)</span>
|
|
<nav class="pull-right" aria-label="Page navigation">
|
|
<ul class="pagination pagination-sm">
|
|
<li>
|
|
<a href="javascript:void(0);" @click="beforeShopPage();" aria-label="上一页">
|
|
<span class="glyphicon glyphicon-menu-left"></span>
|
|
</a>
|
|
</li>
|
|
<li v-if="goodsPage.hasNext">
|
|
<a href="javascript:void(0);" @click="afterShopPage();" aria-label="下一页">
|
|
<span class="glyphicon glyphicon-menu-right"></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|