dengbw
555 lines
25 KiB
PHP
555 lines
25 KiB
PHP
<div class="am-form am-form-horizontal" style="width: 98%;padding-top: 10px">
|
||
<div id="vue-edit">
|
||
<div class="am-g">
|
||
<div class="col-sm-12" style="margin-bottom: 20px;">
|
||
<div class="col-sm-2">
|
||
<div class="my-panel">
|
||
<div class="text-center">
|
||
状态
|
||
</div>
|
||
<div class="text-center" style="padding-top: 5px;">
|
||
<select v-if="info.id==0" id="status" v-model="info.status">
|
||
<template v-for="(v,i) in status_list">
|
||
<option :value="v.id">{{v.name}}</option>
|
||
</template>
|
||
</select>
|
||
<select v-else id="status" disabled="disabled" v-model="info.status">
|
||
<template v-for="(v,i) in status_list">
|
||
<option :value="v.id">{{v.name}}</option>
|
||
</template>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="info.id>0" class="am-form-inline"
|
||
style="text-align:right;padding-right: 10px;padding-top: 35px;">
|
||
<div class="am-form-group ml10">
|
||
<a href="javascript:void(0)" class="am-btn am-btn-sm am-btn-default"
|
||
@click="editType(1)" v-if="info.editType==1">取消编辑</a>
|
||
<a href="javascript:void(0)" class="am-btn am-btn-sm am-btn-default"
|
||
@click="editType(1)" v-else>编辑状态</a>
|
||
</div>
|
||
<div class="am-form-group ml10" v-if="info.editType==1">
|
||
<a href="javascript:void(0)" class="am-btn am-btn-sm am-btn-success"
|
||
@click="saveStatus()">保存状态</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="am-u-lg-12">
|
||
<div class="am-panel am-panel-default">
|
||
<div class="am-panel-hd">
|
||
<span style="font-size: 20px">活动信息</span>
|
||
<span style="float:right;margin-top:5px">
|
||
<a href="javascript:" @click="editType(2)"><i class="fa fa-edit"></i></a></span>
|
||
</div>
|
||
<div class="am-panel-bd am-g">
|
||
<div class="am-form-group">
|
||
<label class="am-para-label">活动专题：</label>
|
||
<div class="am-para-input">
|
||
<div class="am-form-inline">
|
||
<div class="am-form-group" style="width: 30%">
|
||
<input type="text" v-model="info.z_title" disabled="disabled">
|
||
</div>
|
||
<div class="am-form-group ml10">
|
||
<a href="javascript:void(0)" class="am-btn am-btn-sm am-btn-default"
|
||
@click="topicsModal">选择</a>
|
||
</div>
|
||
<div class="am-form-group">
|
||
<span class="f12 clr999 lh-default ml10">注：活动页面只能从现有的专题中选择</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="am-form-group">
|
||
<label class="am-para-label">活动品牌：</label>
|
||
<div class="am-para-input">
|
||
<div class="am-g" style="margin-left: 3px;">
|
||
<label class="mr10" style="margin-top: 7px" v-for="(v,i) in auto_brands">
|
||
<input type="checkbox" :value="v.id" v-model="info.brand_id"/> {{v.name}}
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="am-form-group">
|
||
<label class="am-para-label">活动标题：</label>
|
||
<div class="am-para-input" style="width: 80%">
|
||
<input type="text" v-model="info.title">
|
||
</div>
|
||
</div>
|
||
<div class="am-form-group">
|
||
<label class="am-para-label">活动封面：</label>
|
||
<div class="am-para-input">
|
||
<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="cover"><i class="am-icon-cloud-upload"></i> 上传封面
|
||
</button>
|
||
<span class="f12 clr999 lh-default ml5">建议尺寸宽度690</span>
|
||
<input type="hidden" name="cover" id="cover_id"
|
||
onchange="$(this).next('img').attr('src', $(this).data('srcs') || this.value)"
|
||
value="<?= $info['img'] ?>" class="layui-input">
|
||
<img data-tips-image style="height:auto;max-height:32px;min-width:32px"
|
||
src="<?= $info['img_url'] ?>"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="am-form-group">
|
||
<label class="am-para-label">海报图片：</label>
|
||
<div class="am-para-input">
|
||
<p><a href="javascript:void(0);" class="am-btn am-btn-default am-btn-sm"
|
||
data-file="999" data-type="jpg,png,gif,png,jpeg" data-uptype="qiniu"
|
||
data-mark="goods">上传图片</a></p>
|
||
<div class="photo-upload">
|
||
<div class="photo-upload-item" v-for="(v,i) in goods.imgs_url">
|
||
<img :src="v.src" class="img-thumbnail" :data-value="v.value" data-tips-image
|
||
style="width:100px;height:100px;">
|
||
<span class="photo-upload-item-remove"><i class="fa fa-remove"
|
||
@click="removeImgs(i);"></i></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="am-form-group">
|
||
<label class="am-para-label">分享描述：</label>
|
||
<div class="am-para-input" style="width: 80%">
|
||
<input type="text" v-model="info.share_title">
|
||
</div>
|
||
</div>
|
||
<div class="am-form-group">
|
||
<label class="am-para-label">活动时间：</label>
|
||
<div class="am-para-input" style="width: 50%">
|
||
<input id="time_id" value="<?= $info['time'] ?>" type="text" placeholder="开始日期 ~ 结束日期"
|
||
autocomplete="off"/>
|
||
</div>
|
||
</div>
|
||
<div class="am-form-group">
|
||
<label class="am-para-label">备注：</label>
|
||
<div class="am-para-input" style="width: 80%">
|
||
<textarea rows="3" v-model="info.remark"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="am-form-group">
|
||
<label class="am-para-label">规则：</label>
|
||
<div class="am-para-input" style="width: 80%">
|
||
<textarea rows="3" v-model="info.rule"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="am-form-group">
|
||
<label class="am-para-label">背景色：</label>
|
||
<div class="am-para-input" style="width: 15%">
|
||
<input type="text" v-model="info.bg_color">
|
||
</div>
|
||
</div>
|
||
<div class="am-form-group">
|
||
<label class="am-para-label">按扭色：</label>
|
||
<div class="am-para-input" style="width: 15%">
|
||
<input type="text" v-model="info.btn_color">
|
||
</div>
|
||
</div>
|
||
<div class="am-form-group">
|
||
<label class="am-para-label">配置KPI：</label>
|
||
<div class="am-para-input">
|
||
<div v-for="(v,i) in info.kpi_list" class="am-form-inline" style="padding-bottom: 10px;">
|
||
<div class="am-form-group">{{v.title}}</div>
|
||
<div class="am-form-group" style="width: 10%">
|
||
<input type="text" v-model="v.num">
|
||
</div>
|
||
<div class="am-form-group">{{v.num_tag}}</div>
|
||
<div class="am-form-group" style="width: 10%;margin-left: 15px;">
|
||
<input type="text" v-model="v.score">
|
||
</div>
|
||
<div class="am-form-group">{{v.score_tag}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="am-form-group" v-if="info.editType==2">
|
||
<label class="am-para-label"></label>
|
||
<div class="am-para-input" style="width: 60%">
|
||
<a href="javascript:void(0)" class="am-btn am-btn-sm am-btn-success"
|
||
@click="saveEdit()">保存活动信息</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="topics-modal" style="display: none;">
|
||
<div class="modal-body">
|
||
<div class="header">
|
||
<form class="form-inline">
|
||
<div class="form-group">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control" v-model="topicsName" placeholder="专题名"/>
|
||
<div class="input-group-btn">
|
||
<a href="javascript:" class="btn btn-primary btn-stroke"
|
||
@click="searchByTopicsName()">
|
||
<i class="fa fa-search"></i></a></div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div style="padding-top: 10px;">
|
||
<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 topicsList">
|
||
<td class="vuetable-slot" style="width: 50%;">
|
||
<div>
|
||
{{v.title}}
|
||
</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="addTopicsItem(v)">添加
|
||
</button>
|
||
<button type='button' v-if="v.selected==1" class="btn btn-sm btn-danger"
|
||
@click="removeTopicsItem(v)">删除
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="clearfix">
|
||
<span class="pull-left text-muted">第{{topicsPage.page}}页(每页{{topicsPage.pageLimit}}条,共{{topicsPage.pageCount}}条)</span>
|
||
<nav class="pull-right" aria-label="Page navigation">
|
||
<ul class="pagination pagination-sm">
|
||
<li>
|
||
<a href="javascript:void(0);" @click="beforeTopicsPage();" aria-label="上一页">
|
||
<span class="glyphicon glyphicon-menu-left"></span>
|
||
</a>
|
||
</li>
|
||
<li v-if="topicsPage.hasNext">
|
||
<a href="javascript:void(0);" @click="afterTopicsPage();" aria-label="下一页">
|
||
<span class="glyphicon glyphicon-menu-right"></span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
require(['laydate'], function (laydate) {
|
||
//日期范围
|
||
laydate.render({
|
||
elem: '#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();
|
||
}
|
||
}
|
||
});
|
||
});
|
||
var layer_open;
|
||
var vue_obj;
|
||
$(document).ready(function () {
|
||
vue_obj = new Vue({
|
||
el: '#vue-edit',
|
||
data: {
|
||
info: {},
|
||
goods: {"imgs_url": [], "imgs": []},
|
||
status_list: [],
|
||
topicsName: '',
|
||
topicsList: [],
|
||
topicsPage: [],
|
||
topicsThPage: 0,
|
||
auto_brands: [],
|
||
},
|
||
mounted() {
|
||
var that = this;
|
||
that.info = <?=json_encode($info)?>;
|
||
that.status_list = <?=json_encode($status_list)?>;
|
||
that.goods = <?=json_encode($posters)?>;
|
||
that.init_auto_brands();
|
||
},
|
||
computed: {},
|
||
created: function () {
|
||
},
|
||
updated: function () {
|
||
},
|
||
methods: {
|
||
init_auto_brands: function () {
|
||
var vm = this;
|
||
$.ajax({
|
||
url: '/auto/brand/json_lists',
|
||
type: 'post',
|
||
dataType: 'json',
|
||
data: {status: 1},
|
||
beforeSend: function () {
|
||
},
|
||
success: function (data) {
|
||
if (1 == data.code) {
|
||
vm.auto_brands = data.data.list;
|
||
}
|
||
},
|
||
complete: function () {
|
||
}
|
||
});
|
||
},
|
||
removeImgs: function (index) {
|
||
var vm = this;
|
||
vm.goods.imgs_url.splice(index, 1);
|
||
vm.goods.imgs.splice(index, 1);
|
||
},
|
||
editType: function (index) {
|
||
var vm = this;
|
||
if (index == 1) {
|
||
if (vm.info.editType == 1) {
|
||
$("#status").attr("disabled", "disabled");
|
||
vm.info.editType = 0;
|
||
} else {
|
||
$("#status").removeAttr("disabled");
|
||
vm.info.editType = 1;
|
||
}
|
||
} else if (index == 2) {
|
||
if (vm.info.editType == 2) {
|
||
vm.info.editType = 0;
|
||
} else {
|
||
vm.info.editType = 2;
|
||
}
|
||
} else {
|
||
vm.info.editType = 0;
|
||
}
|
||
},
|
||
//选择活动专题
|
||
topicsModal: function () {
|
||
var that = this;
|
||
layer.open({
|
||
type: 1,
|
||
area: ['45%', '80%'], //宽高
|
||
content: $('#topics-modal'),
|
||
title: '选择活动专题',
|
||
shade: false,
|
||
btn: ['选好了'],
|
||
yes: function (index) {
|
||
layer.close(index);
|
||
}
|
||
});
|
||
$.ajax({
|
||
url: '/app/licheb/sytactivity/get_topics',
|
||
type: 'post',
|
||
dataType: 'json',
|
||
data: {
|
||
page: that.topicsThPage,
|
||
title: that.topicsName,
|
||
},
|
||
success: function (json) {
|
||
var topicsList = json.data.topicsList;
|
||
that.topicsPage = json.data.topicsPage;
|
||
topicsList.map(function (_item, _index) {
|
||
if (that.info.z_id == _item.id) {
|
||
topicsList[_index].selected = 1;
|
||
} else {
|
||
topicsList[_index].selected = 0;
|
||
}
|
||
})
|
||
that.topicsList = topicsList;
|
||
}
|
||
});
|
||
},
|
||
beforeTopicsPage: function () {
|
||
var vm = this;
|
||
if (vm.topicsThPage == 1) {
|
||
alert('已经是第一页了');
|
||
return;
|
||
}
|
||
vm.topicsThPage--;
|
||
return this.topicsModal();
|
||
},
|
||
afterTopicsPage: function () {
|
||
var vm = this;
|
||
vm.topicsThPage++;
|
||
return this.topicsModal();
|
||
},
|
||
addTopicsItem: function (item) {
|
||
var vm = this;
|
||
vm.info['z_id'] = item.id;
|
||
vm.info['z_title'] = item.title;
|
||
this.topicsList.map(function (_item, _index) {
|
||
if (item.id == _item.id) {
|
||
_item.selected = 1;
|
||
} else {
|
||
_item.selected = 0;
|
||
}
|
||
})
|
||
},
|
||
removeTopicsItem: function (item) {
|
||
var vm = this;
|
||
vm.info['z_id'] = 0;
|
||
vm.info['z_title'] = '';
|
||
this.topicsList.map(function (_item, _index) {
|
||
if (item.id == _item.id) {
|
||
vm.topicsList[_index].selected = 0;
|
||
}
|
||
})
|
||
},
|
||
saveEdit: function () {
|
||
var vm = this;
|
||
vm.info.time = $('#time_id').val();
|
||
vm.info.img = $('#cover_id').val();
|
||
vm.info.posters = vm.goods.imgs;
|
||
$.ajax({
|
||
url: vm.info.edit_url,
|
||
type: 'post',
|
||
dataType: 'json',
|
||
data: {
|
||
info: vm.info
|
||
},
|
||
beforeSend: function () {
|
||
layer.load(1, {
|
||
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
||
});
|
||
},
|
||
success: function (data) {
|
||
if (data['code']) {
|
||
layer.msg(data.msg, {
|
||
icon: 1,
|
||
time: 2000
|
||
}, function () {
|
||
if (data['data']['type'] == 'add') {
|
||
window.location.href = "#/app/licheb/sytactivity/get?id=" + data['data']['id'] + "?spm=<?= $_GET['spm'] ?>";
|
||
} else {
|
||
$.form.reload();
|
||
}
|
||
});
|
||
} else {
|
||
layer.msg(data.msg, {icon: 2});
|
||
}
|
||
},
|
||
complete: function () {
|
||
layer.closeAll('loading');
|
||
},
|
||
});
|
||
},
|
||
saveStatus: function () {
|
||
var vm = this;
|
||
$.ajax({
|
||
url: '/app/licheb/sytactivity/edit_status',
|
||
type: 'post',
|
||
dataType: 'json',
|
||
data: {
|
||
info: vm.info
|
||
},
|
||
beforeSend: function () {
|
||
layer.load(1, {
|
||
shade: [0.1, '#fff'] //0.1透明度的白色背景
|
||
});
|
||
},
|
||
success: function (data) {
|
||
if (data['code']) {
|
||
layer.msg(data.msg, {
|
||
icon: 1,
|
||
time: 2000
|
||
}, function () {
|
||
$.form.reload();
|
||
});
|
||
} else {
|
||
layer.msg(data.msg, {icon: 2});
|
||
}
|
||
},
|
||
complete: function () {
|
||
layer.closeAll('loading');
|
||
},
|
||
});
|
||
},
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<style type="text/css">
|
||
|
||
.label-width {
|
||
width: 150px
|
||
}
|
||
|
||
.my-ul ul li {
|
||
padding: 10px;
|
||
}
|
||
|
||
.my-panel {
|
||
padding: 10px;
|
||
border: 1px solid #ddd;
|
||
height: 90px;
|
||
}
|
||
|
||
.auto-content {
|
||
width: min-content;
|
||
min-width: 50%;
|
||
}
|
||
|
||
.btn-group .disabled {
|
||
background-color: #eee;
|
||
opacity: 1;
|
||
}
|
||
|
||
.photo-upload {
|
||
position: relative;
|
||
font-size: 0;
|
||
}
|
||
|
||
.photo-upload:after {
|
||
content: "";
|
||
display: table;
|
||
clear: both;
|
||
}
|
||
|
||
.photo-upload-item {
|
||
position: relative;
|
||
float: left;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
font-size: 12px; /*display:inline-block;width:120px;*/
|
||
}
|
||
|
||
.photo-upload-item > img {
|
||
}
|
||
|
||
.photo-upload-item-check,
|
||
.photo-upload-item-remove {
|
||
opacity: 0;
|
||
position: absolute;
|
||
top: -8px;
|
||
right: -8px;
|
||
width: 24px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
border: 1px solid #fff;
|
||
background-color: #eee;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.photo-upload-item:hover .photo-upload-item-remove {
|
||
opacity: 1;
|
||
transition: all .4s ease
|
||
}
|
||
|
||
.photo-upload-item-check {
|
||
opacity: 1;
|
||
background-color: #36f;
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" type="text/css" href="/static/css/appitem/font-awesome.min.css?v=1581252500">
|
||
<link rel="stylesheet" type="text/css" href="/static/css/appitem/AdminLTE.min.css?v=1581252500">
|
||
<link rel="stylesheet" type="text/css" href="/static/css/appitem/hd.css?v=1581252500">
|