liche/admin/views/app/liche/cms/edit.php

<form id="vue-edit" class="am-form am-form-horizontal" action="/app/liche/cms/<?= $url ?>" data-auto="true"
      method="post" style="width: 90%;padding-top: 10px" onsubmit="return false">
    <input type="hidden" :value="info.id" name="id"/>
    <div class="am-form-group">
        <label class="am-para-label">标题：</label>
        <div class="am-para-input wp60">
            <input type="text" placeholder="输入标题" v-model="info.title" name="title"/>
        </div>
    </div>
    <div class="am-form-group" style="margin-bottom: 0">
        <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>
                <input id="cover" type="hidden" name="cover" value="<?=$info['cover']?>" class="layui-input">
                <?foreach($covers as $val){?>
                    <img data-tips-image style="height:auto;max-height:32px;min-width:32px" src="<?=$val?>"/>
                <?}?>
                <?if(!$covers){?>
                    <img data-tips-image style="height:auto;max-height:32px;min-width:32px" src=""/>
                <?}?>
            </div>
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label">排序：</label>
        <div class="am-para-input wp60 w300">
            <input type="text" style="display: inline;width: 80%" placeholder="输入排序,数值大的排前面" v-model="info.sort"/>
            <span style="color: blue">(数值大的排前面)</span>
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label">推送位置：</label>
        <div class="am-para-inline wp60" style="width:20%">
            <select name="position" v-model="info.position">
                <option value="">请选择</option>
                <template v-for="(v,i) in positions">
                    <option :value="i">{{v}}</option>
                </template>
            </select>
        </div>
    </div>
    <div class="am-form-group" style="margin-bottom: 0" v-if="info.position == 8">
        <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="qrcode"><i
                            class="am-icon-cloud-upload"></i> 选择要上传的文件
                </button>
                <input id="qrcode" type="hidden" name="qrcode" value="<?=$info['qrcode']?>" class="layui-input">
                <img data-tips-image style="height:auto;max-height:32px;min-width:32px" src="<?=$info['qrcode']?build_qiniu_image_url($info['qrcode']):''?>"/>
            </div>
        </div>
    </div>
    <div class="am-form-group" v-if="info.position == 2">
        <label class="am-para-label">线索来源：</label>
        <div class="am-para-input wp60">
            <select name="cfrom_id" v-model="info.cfrom_id" style="width:150px;display:inline" @change="getCfroms()">
                <option value=0>请选择</option>
                <template v-for="(v,i) in cfroms">
                    <option :value="v.id">{{v.title}}</option>
                </template>
            </select>
            <select name="cfrom_id2" v-model="info.cfrom_id2" style="width:150px;display:inline">
                <option value=0>请选择</option>
                <template v-for="(v,i) in cfroms2">
                    <option :value="v.id">{{v.title}}</option>
                </template>
            </select>
        </div>
    </div>
    <div class="am-form-group" v-if="info.position >2 && info.position<8">
        <label class="am-para-label">链接类型：</label>
        <div class="am-para-input pt5">
            <input type="radio" name="type" v-model="info.type" value="1"/>小程序
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label">链接：</label>
        <div class="am-para-input wp60">
            <input type="text" placeholder="输入链接" v-model="info.link" name="link"/>
        </div>
    </div>
    <div class="am-form-group" v-if="info.position == 2">
        <label class="am-para-label">按钮颜色：</label>
        <div class="am-para-input pt5">
            <input type="radio" name="btn_type" v-model="info.btn_type" value="1"/>深色
            <input type="radio" name="btn_type" v-model="info.btn_type" value="2"/>浅色
        </div>
    </div>
    <div v-if="info.position == 2">
        <v-cars-select :target_id.sync="info.target_id" :app_id="app_id"></v-cars-select>
    </div>
    <div class="am-form-group" style="margin-bottom: 0" v-if="info.position == 2">
        <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="bg_img"><i
                            class="am-icon-cloud-upload"></i> 选择图片
                </button>
                <input id="bg-img" type="hidden" name="bg_img" value="<?=$info['bg_img']?>" class="layui-input">
                <?if($info['bg_img_src']){?>
                    <img data-tips-image style="height:auto;max-height:32px;min-width:32px" src="<?=$info['bg_img_src']?>"/>
                <?} else{?>
                    <img data-tips-image style="height:auto;max-height:32px;min-width:32px" src=""/>
                <?}?>
            </div>
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label">简介：</label>
        <div class="am-para-input wp60">
            <textarea id="content" name="content" style="min-height: 150px" v-model="info.content"></textarea>
        </div>
    </div>
    <div class="am-form-group">
        <label class="am-para-label">有效时间：</label>
        <div class="am-para-input wp60">
            <div class="am-para-inline w200">
                <input type="text" placeholder="开始时间" value="<?= $info['s_time'] ?>" autocomplete="off" name="s_time" id="s-time">
            </div>
            <div class="am-para-inline w200">
                <input type="text" placeholder="结束时间" value="<?= $info['e_time'] ?>" autocomplete="off" name="e_time" id="e-time">
            </div>
        </div>
    </div>
    <div class="am-form-group">
        <button class="am-btn ml20 am-btn-sm am-btn-success w100" type="button" @click='saveEdit();'>保存</button>
    </div>
</form>

<template id="v-cars-select">
    <div>
        <div class="am-form-group">
            <label class="am-para-label"><span class="text-danger">*</span>选择车型：</label>
            <div class="am-para-input input-left">
                <img :src='select.img' width="100" height="100" @click="itemsModal"/>
                {{select.title}}
            </div>
        </div>

        <div id="items-modal" style="display: none;">
        <div class="modal-body">
            <table width="100%">
                <tr>
                    <td width="35%" style="font-weight: bold;padding-left: 8px;">车型</td>
                    <td width="35%" style="padding-right: 8px;"><label class="sr-only" for="search">搜品牌</label>
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" style="font-size: 1.2rem;font-weight: bold;"
                                   v-model='itemsTitle' placeholder="品牌名">
                            <div class="input-group-btn">
                                <button type="button" @click='getItems(1);' class="btn btn-default">搜</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
            <div style="border-bottom: 1px solid #ddd;height: 1px;margin-top: 8px;"></div>
            <table class="table table-middle">
                <colgroup>
                    <col width="50%"/>
                    <col width="50%"/>
                </colgroup>
                <tbody>
                <tr>
                    <th>品牌</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(b,i) in itemsList">
                    <td>{{b.name}}</td>
                    <td>
                        <a v-if="b.is_checked==0" href="javascript:void(0);" @click="setItems(i,1)"
                           class="btn btn-primary btn-sm">选择</a>
                        <a v-else-if="b.is_checked==1" href="javascript:void(0);" @click="setItems(i,0)"
                           class="btn btn-default btn-sm">移除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="clearfix">
                <span class="pull-left text-muted">第{{itemsPage.page}}页(每页{{itemsPage.pageLimit}}条,共{{itemsPage.pageCount}}条)</span>
                <nav class="pull-right" aria-label="Page navigation">
                    <ul class="pagination pagination-sm">
                        <li>
                            <a href="javascript:void(0);" @click="beforeItemsPage();" aria-label="上一页">
                                <span class="glyphicon glyphicon-menu-left"></span>
                            </a>
                        </li>
                        <li v-if="itemsPage.hasNext">
                            <a href="javascript:void(0);" @click="afterItemsPage();" aria-label="下一页">
                                <span class="glyphicon glyphicon-menu-right"></span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    </div>
</template>


<script type="text/javascript">
    var editor;
    require(['laydate','ckeditor'], function (laydate) {
        //window.createEditor('[name="content"]');
        editor = CKEDITOR.replace('content');
        //日期范围
        laydate.render({
            elem: '#s-time'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#e-time'
            ,type: 'datetime'
            ,done: function (value, date) {
                if (date.hours == "0" && date.minutes == "0" && date.seconds == "0") {
                    // 改变结束时间默认值
                    $(".layui-laydate-footer [lay-type='datetime'].laydate-btns-time").click();
                    $(".laydate-main-list-0 .layui-laydate-content li ol li:last-child").click();
                    $(".layui-laydate-footer [lay-type='date'].laydate-btns-time").click();
                }
            }
        });
    });

    var vue_obj;
    var vue_goods;
    var loading = false;
    $(function(){
        vue_goods = Vue.component('v-cars-select', {
            props:{
                'app_id': {
                    type: Number,
                    default: 1
                },
                'target_id':{
                    type: Number,
                    default: 0
                }
            },
            template: '#v-cars-select',
            data:function(){
                return {
                    select:[],
                    itemsTitle:'',
                    itemsList:[],
                    itemsPage:[],
                }
            },
            mounted: function (){
                var that = this;
                that.select = {};
                if(that.target_id > 0){
                    that.init_item();
                }else{
                    that.select.img = '/img/visits/add.jpg';
                    that.select.title = '';
                    that.select.id = 0;
                }
                console.log(that.select);
            },
            methods:{
                init_item: function(){
                    var vm = this;
                    if(vm.target_id > 0){
                        $.ajax({
                            url: '/app/liche/cms/get_car',
                            type: 'post',
                            dataType: 'json',
                            data: {
                                id: vm.target_id
                            },
                            success: function (re) {
                                console.dir(re.data.data);
                                vm.select = re.data.data;
                            }
                        });
                    }
                },
                itemsModal: function (index) {
                    //选择商品
                    var vm = this;
                    vm.getItems(1);
                    layer.open({
                        type: 1,
                        area: ['50%', '80%'], //宽高
                        content: $('#items-modal'),
                        title: '选取商品',
                        shade: false,
                        btn: ['选好了'],
                        yes: function (index) {
                            layer.close(index);
                        }
                    });
                },
                getItems: function (page) {
                    var vm = this;
                    var select_list = [];
                    if(vm.select.id > 0){
                        select_list.push(vm.select);
                    }
                    console.dir(select_list)
                    $.ajax({
                        url: '/common/brands',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            page: page,
                            use_items_list: select_list,
                            app_id: vm.app_id,
                            title: vm.itemsTitle,
                            status:1
                        },
                        success: function (re) {
                            vm.itemsList = re.data.itemsList;
                            vm.itemsPage = re.data.itemsPage;
                        }
                    });
                },
                setItems: function (index, checked) {
                    //设置商品是否选中
                    var vm = this;
                    vm.removeItems();
                    if (checked == 1) {
                        vm.itemsList[index]['is_checked'] = checked;
                        var _items = {
                            id: vm.itemsList[index]['id'],
                            title: vm.itemsList[index]['name'],
                            img : '/img/visits/add.jpg'
                        };
                        vm.select = _items;
                        vm.$emit('update:target_id', vm.select.id);
                    }
                },
                removeItems: function (index) {
                    //删除选中商品
                    var vm = this;
                    for (var i = 0; i < vm.itemsList.length; i++) {
                        vm.itemsList[i]['is_checked'] = 0;
                    }
                    vm.select.img = '/img/visits/add.jpg';
                    vm.select.title = '';
                    vm.select.id = 0;
                    vm.$emit('update:target_id', 0);
                },
                beforeItemsPage: function () {
                    var vm = this;
                    if (vm.itemsPage.page == 1) {
                        layer.msg("已经是第一页了");
                        return; }
                    vm.itemsPage.page--;
                    vm.getItems(vm.itemsPage.page);
                },
                afterItemsPage: function () {
                    var vm = this;
                    vm.itemsPage.page++;
                    vm.getItems(vm.itemsPage.page);
                }
            }
        });

        vue_obj = new Vue({
            el: '#vue-edit',
            data: {
                info:[],
                positions:[],
                areas:[],
                covers:[],
                app_id:0,
                cfroms:[],
                cfroms2:[],
            },
            mounted: function(){
                var that = this;
                that.info = <?=json_encode($info, JSON_UNESCAPED_UNICODE)?>;
                that.positions = <?=json_encode($pos_arr, JSON_UNESCAPED_UNICODE)?>;
                that.areas = <?=json_encode($area_arr, JSON_UNESCAPED_UNICODE)?>;
                that.covers = <?=json_encode($covers, JSON_UNESCAPED_UNICODE)?>;
                that.app_id = <?=$app_id?>;
                that.cfroms = <?=$cfroms ? json_encode($cfroms,JSON_UNESCAPED_UNICODE): []?>;
                that.getCfroms()
            },
            methods: {
                getCfroms: function(){
                    var that = this
                    if(that.info.cfrom_id>0){
                        $.get('/app/liche/cms/get_cfroms',{'id':that.info.cfrom_id},function(result){
                            that.cfroms2 = result.data.data
                        }); 
                    }
                },
                saveEdit: function () {
                    if (loading) {
                        return;
                    }
                    loading = true;
                    var vm = this;
                    vm.info.cover = $('#cover').val();
                    vm.info.s_time = $('#s-time').val();
                    vm.info.e_time = $('#e-time').val();
                    vm.info.bg_img = $('#bg-img').val();
                    vm.info.qrcode = $('#qrcode').val();
                    vm.info.content = editor.getData();

                    $.ajax({
                        url: $('#vue-edit').attr('action'),
                        type: 'post',
                        dataType: 'json',
                        data: {
                            info: vm.info
                        },
                        beforeSend: function () {
                            layer.load(1, {
                                shade: [0.1, '#fff'] //0.1透明度的白色背景
                            });
                        },
                        success: function (data) {
                            loading = false;
                            if (data['code']) {
                                layer.msg(data.msg, {
                                    icon: 1,
                                    time: 2000
                                }, function () {
                                    if (data.data.status == 1) {
                                        $.form.reload();
                                    } else {
                                        $.form.reload();
                                    }
                                });
                            } else {
                                layer.msg(data.msg, {icon: 2});
                            }
                        },
                        complete: function () {
                            loading = false;
                            layer.closeAll('loading');
                        }
                    });
                }
            }
        });
    });
</script>