qimall/addons/Course/backend/views/activity/banner.php

<?php defined('YII_ENV') or exit('Access Denied'); ?>

<style>
    .form-body {
        padding: 20px 0;
        background-color: #fff;
        margin-bottom: 20px;
        padding-right: 50%;
    }

    .form-button {
        margin: 0!important;
    }

    .form-button .el-form-item__content {
        margin-left: 0!important;
    }

    .button-item {
        padding: 9px 25px;
    }
    .text {
        cursor: pointer;
        color: #419EFB;
    }
</style>
<section id="app" v-cloak>
    <el-card class="box-card" shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header" class="clearfix">
            <div flex="cross:center box:first">
                <div><span @click="$navigate({r:'course/default/bannar'})" class="text">广告设置</span>/添加广告</div>
                
            </div>
        </div>
        <div class="form-body" >
            <el-form :model="ruleForm"  label-width="80px" v-loading="loading" :rules="formRules" ref="ruleForm">
                <el-form-item label="广告名称" size="small" prop="title">
                    <el-input v-model="ruleForm.title" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" size="small" prop="sort">
                    <el-input v-model="ruleForm.sort" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="跳转链接" size="small" prop="pic_link">
                    <!-- <el-input v-model="ruleForm.pic_link" auto-complete="off" placeholder="(请填写完整)格式：https://www.baidu.com"></el-input> -->
                    <el-input v-model="ruleForm.pic_link" placeholder="点击选择链接" readonly size="small">
                        <com-pick-link slot="append" @selected="linkSelected">
                            <el-button size="small">选择链接</el-button>
                        </com-pick-link>
                    </el-input>
                </el-form-item>
                <el-form-item label="是否启用" prop="is_show">
                    <el-switch
                        v-model="ruleForm.is_show"
                        active-value="1"
                        inactive-value="0"
                        inactive-text="不启用"
                        active-text="启用"
                        >
                    </el-switch>
                </el-form-item>
                <el-form-item prop="pic_path">
                    <label slot="label">
                        <span>广告图片</span>
                        <el-tooltip effect="dark" content="上传图片,建议尺寸:750 * 300" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </label>
                    <com-attachment v-model="ruleForm.pic_path" :multiple="false" :max="1">
                        <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 300" placement="top">
                            <el-button size="mini">选择图片</el-button>
                        </el-tooltip>
                            <!-- <span style="margin-left: 35px; color:red">建议尺寸:750 * 300</span> -->
                    </com-attachment>
                    <div class="customize-share-title">
                        <com-image mode="aspectFill" width='80px' height='80px'
                                    :src="ruleForm.pic_path ? ruleForm.pic_path : ''"></com-image>
                        <el-button v-if="ruleForm.pic_path" class="del-btn" size="mini"
                                    type="danger" icon="el-icon-close" circle
                                    @click="ruleForm.pic_path = ''"></el-button>
                    </div>
                    <!-- <el-button @click="app_share.dialog = true;app_share.type = 'pic_bg'"
                                type="text">查看图例
                    </el-button> -->
                </el-form-item>
                <div flex="dir:right">
                    <div>
                        <el-button class="button-item" type="primary" size="small" :loading=btnLoading @click="submit('ruleForm')">提交</el-button>
                    </div>
                </div>
            </el-form>
        </div>
        
    </el-card>
</section>

<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                ruleForm: {
                    title:'',
                    sort:'',
                    is_show: '',
                    pic_path:'',
                    pic_link: '',
                },
                formRules: {
                    title: [
                        { required: true, pattern:/\S/, message: '名称不能为空', trigger: 'blur' },
                        { min: 1, max: 30, message: "分类名称长度在2-255个字符内" }
                    ],
                    sort: [
                        { required: true, pattern: /^[0-9]\d{0,8}$/, message: '排序必须在9位整数内' }
                    ],
                    // pic_link: [
                    //     { required: true, pattern:/\S/, message: '请填写广告跳转链接', trigger: 'blur' },
                    //     {pattern: /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/, message: '链接格式不合法', trigger: 'blur'}
                    // ],
                    is_show: [{ required: true, message: '请选择是否启用广告', trigger: 'blur' }],
                    pic_path:  [
                        { required: true, message: '请上传图片', trigger: 'blur' }
                    ],
                },
            };
        },
        methods: {
            linkSelected(list) {
                // console.log(list);
                if (!list.length) {
                    this.ruleForm.pic_link = '';
                    return false;
                }
                var link = list[0].value;
                if (list[0].params && list[0].params.length) {
                    var param = list[0].params[0].key + '=' + list[0].params[0].value;
                    link = link + '?' + param;
                }
                this.ruleForm.pic_link = link;
                return ;
            },
            submit(formName) {
                this.$refs[formName].validate((valid, obj) => {
                    // console.log(valid, obj);return null;
                    if (valid) {
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'plugin/course/admin/bannar/create',
                            },
                            data:  this.ruleForm,
                            method: 'post'
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                const h = this.$createElement;
                                this.$message({
                                    message: e.data.msg,
                                    type: 'success'
                                });
                                setTimeout(function(){
                                    navigateTo({ r: 'plugin/course/admin/bannar/index' });
                                },300);
                            } else {
                                this.$message({
                                    message: e.data.msg,
                                    type: 'error'
                                });
                            }
                        }).catch(e => {
                            this.btnLoading = false;
                            this.$message.error(e.data.msg);
                        });
                    }else{
                        var msg = '';
                        for (let index in obj) {
                            msg = msg + '*' + obj[index][0].message + '　';
                        }
                        this.$message({
                            message: msg,
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            // getTopicForm() {
            //     this.loading = true;
            //     let _this = this;
            //     request({
            //         params: {
            //             r: 'mall/topic-type/edit',
            //             id: getQuery('id'),
            //         },
            //         method: 'get'
            //     }).then(e => {
            //         this.loading = false;
            //         if (e.data.code == 0) {
            //             _this.form = e.data.data;
            //         }
            //     }).catch(e => {
            //         this.loading = false;
            //         this.$alert(e.data.msg, '提示', {
            //           confirmButtonText: '确定'
            //         })
            //     });
            // },

        },
        mounted() {
            // this.getTopicForm();
        }
    })
</script>