liche/admin/views/topics/module_button.php

<script>
    Vue.component('v-button', {
        props: ['module', 'is_template'],
        data: function () {
            return {
                params: {'module_jsondata': {}}
            }
        },
        mounted: function () {
            this.initData();
        },
        updated: function () {
        },
        methods: {
            initData: function () {
                var vm = this;
                if (vm.module.id) {
                    $.ajax({
                        url: '/topics/topics/get_button_setting',
                        type: 'get',
                        dataType: 'json',
                        data: {
                            module_id: vm.module.id
                        },
                        success: function (re) {
                            vm.params = re.data.setting;
                            vm.params.app_id = <?= $info['app_id'] ?>;
                            if (re.data.setting.module_jsondata.img) {
                                $("#module_jsondata_img").val(re.data.setting.module_jsondata.img);
                            }
                        }
                    });
                }
            },
            save: function () {
                var vm = this;
                vm.params.module_jsondata.img = $("#module_jsondata_img").val();
                var save_data = {
                    module_id: vm.module.id,
                    setting: vm.params
                };
                $.ajax({
                    url: '/topics/topics/edit_save_button',
                    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) {
                console.log(newValue, oldValue);
                this.initData();
            },
            'params.module_title': function (newValue, oldValue) {
                if (!newValue) newValue = '按钮模块';
                var obj = {};
                obj.module_id = this.module.id;
                obj.module_name = newValue;
                this.$emit('button-title', obj);
            }
        },
        computed: {},
        template: '#v-button'
    })
</script>
<template id="v-button">
    <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="1" v-model="params.status"> 正常</label>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="radio"><label><input type="radio" 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-3">
                <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_descrip"/>
                </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.module_type">普通按钮</label>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="radio"><label><input type="radio" value="1" v-model="params.module_type">图片按钮</label></div>
            </div>
            <div class="col-sm-2">
                <div class="radio"><label><input type="radio" value="2" 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>
            <template v-if="params.module_type==0 || params.module_type==2">
                <div class="col-sm-3">
                    <div class="input-group">
                        <div class="input-group-addon">按钮文案</div>
                        <input type="text" class="form-control" v-model="params.module_jsondata.title"/>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="input-group">
                        <div class="input-group-addon">按钮颜色</div>
                        <input type="text" class="form-control" v-model="params.module_jsondata.color"/>
                    </div>
                </div>
            </template>
            <template v-if="params.module_type==1">
                <div class="col-sm-3">
                    <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_jsondata_img"><i
                                    class="am-icon-cloud-upload"></i> 按钮图片<span
                                    style="color: blue">(700*125)</span>
                        </button>
                        <input type="hidden" name="module_jsondata_img" id="module_jsondata_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_jsondata.img_url"/>
                    </div>
                </div>
            </template>
        </div>
        <template v-if="params.module_type==0 || params.module_type==1">
            <div class="form-group">
                <label for="" class="col-sm-2 control-label"></label>
                <div class="col-sm-6">
                    <div class="input-group">
                        <div class="input-group-addon">{{params.app_id==6 ? 'h5跳转链接': '跳转链接'}}</div>
                        <input type="text" class="form-control" v-model="params.module_jsondata.url"/>
                    </div>
                </div>
            </div>
            <div class="form-group" v-if="params.app_id==6">
                <label for="" class="col-sm-2 control-label"></label>
                <div class="col-sm-8">
                    <div class="input-group">
                        <div class="input-group-addon">小程序跳转链接</div>
                        <input type="text" class="form-control" v-model="params.module_jsondata.url_mini"/>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>