qimall/addons/Course/backend/views/bannar/add-edit.php

<?php
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-image');
ComponentHelper::loadComponentView('com-pick-link');
?>
<style>
    .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;
    }

    .customize-share-title{
        position: relative;
        width: 80px;
    }

    .del-btn{
        position: absolute;
        right: -12px;
        top: -12px;
    }
</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/bannars'})"  class="text">广告设置</span>/广告设置编辑</div>
            </div>
        </div>
        <div class="form-body">
            <el-form :model="ruleForm"  label-width="80px" v-loading="loading" :rules="formRules" ref="ruleForm" style="margin-left: 25px;">
                <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="navicatLink" placeholder="点击选择链接" readonly size="small">
                        <com-pick-link slot="append" @selected="linkSelected($event)">
                            <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>
                    </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,
                navicatLink: '',
                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个字符内", trigger: 'blur' }
                    ],
                    sort: [
                        { required: true, pattern: /^[0-9]\d{0,8}$/, message: '排序必须在9位整数内', trigger: 'blur' }
                    ],
                    // 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: {
            submit(formName) {
                this.$refs[formName].validate((valid,obj) => {
                    if (valid) {
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'course/bannar/storage',
                            },
                            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: 'course/default/bannars' });
                                },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;
                    }
                });
            },
            linkSelected(e) {
                console.log(e);
                if (!e.length) {
                    this.ruleForm.pic_link = '';
                    return false;
                }
                this.ruleForm.pic_link = e[0];
                this.navicatLink = e[0].title + ' [ ' + e[0].route + ' ]';
                return ;
            },
            getBannarInfo() {
                this.loading = true;
                let _this = this;
                request({
                    params: {
                        r: 'course/bannar/storage',
                        id: getQuery('id'),
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        _this.ruleForm = e.data.data;
                        _this.navicatLink = e.data.data.pic_link.title + ' [ ' + e.data.data.pic_link.route + ' ]';
                    }
                }).catch(e => {
                    this.loading = false;
                    this.$alert(e.data.msg, '提示', {
                      confirmButtonText: '确定'
                    })
                });
            },

        },
        mounted() {
            if (getQuery('id')) {
                this.getBannarInfo();
            }
        }
    })
</script>