qimall/addons/Rebate/backend/views/ad/edit.php

<?php
/*
 * @Descripttion: 
 * @copyright: Copyright (c) 2021 广东七件事集团
 * @Author: lun
 * @Date: 2021-12-31 21:04:34
 */
?>
<div id="app" v-cloak>

<el-card v-loading="loading" style="border:0;min-width: 1200px;" shadow="never" body-style="background-color: #f3f3f3;padding: 0 0;">
    <el-form :model="ruleForm"
             ref="ruleForm"
             :rules="rules"
             label-width="172px"
             style="position: relative"
             size="small">
        <el-card shadow="never" class="mt-24">
            <div slot="header">
                <span>广告编辑</span>
            </div>

            <el-form-item prop="title" label="标题">
                <el-col :span="12">
                    <el-input type="text" v-model="ruleForm.title"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item label="广告图片" prop="cover">
                <el-col :span="12">
                    <com-attachment v-model="ruleForm.cover" :multiple="false" :max="1">
                        <el-tooltip class="item" effect="dark" content="建议尺寸:702 * 320" placement="top">
                            <el-button size="mini">选择图片</el-button>
                        </el-tooltip>
                    </com-attachment>

                    <div class="customize-share-title" v-if="ruleForm.cover" >
                        <image mode="aspectFill" width='160px' height='80px' :src="ruleForm.cover ? ruleForm.cover : ''"></image>
                        <el-button v-if="ruleForm.cover" class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="ruleForm.cover = ''"></el-button>
                    </div>
                </el-col>
            </el-form-item>

            <el-form-item label="链接跳转">
                <el-col :span="12">
                    <div flex="box:last">
                    <el-input type="text" placeholder="请选择链接" v-model="ruleForm.link.route" :disabled="true"></el-input>
                    <com-pick-link @selected="selectLink" ignore="navigate">
                        <el-button>选择链接</el-button>
                    </com-pick-link>
                    </div>
                </el-col>
            </el-form-item>

            <el-form-item label="排序" prop="sort">
                <el-col :span="12">
                    <el-input type="age" v-model.number="ruleForm.sort"></el-input>
                </el-col>
            </el-form-item>

            <el-form-item>
                <el-col :span="12">
                    <el-button :loading="submitLoading" size="small" type="primary"
                               @click="submit('ruleForm')">保存
                    </el-button>
                </el-col>
            </el-form-item>
        </el-card>

    </el-form>
</el-card>
</div>

<script>
const app = new Vue({
    el: '#app',
    data() {
        var checkSort = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('排序不能为空'));
            }
            if (value < 0 || value > 999) {
                callback(new Error('排序在 1~999 之间'));
            } else {
                callback();
            }
        };
        return {
            loading: false,
            submitLoading: false,
            ruleForm: {
                title: '',
                cover: '',
                sort: 1,
                link: {
                    url: '',
                    open_type: '',
                    params: '',
                },
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                    { min: 1, max: 12, message: '长度在 1 到 12 个字符', trigger: 'blur' }
                ],
                cover: [
                    { required: true, message: '请上传轮播图', trigger: 'change' },
                ],
                sort: [
                    { validator: checkSort, trigger: 'blur' }
                ],
            }
        };
    },
    created() {
        this.loadData();
    },
    methods: {
        selectLink(e) {
            console.log(e);
            let self = this;
            let link = {};
            e.forEach(function (item) {
                link = {
                    title: item.title,
                    route: item.route,
                    open_type: item.params.open_type,
                    params: item.params,
                }
            })
            self.ruleForm.link = link;
        },
        loadData() {
            this.loading = true;
            request({
                params: {
                    r: 'rebate/ad/edit',
                    id: getQuery('id')
                },
                method: 'get',
            }).then(e => {
                this.loading = false;
                if (e.data.code === 0) {
                    let data = e.data.data

                    if (!isEmpty(data)) {
                        // if(data.link != "") data.link = JSON.parse(data.link);
                        this.ruleForm = data;
                    }
                } else {
                    this.$message.error(e.data.msg);
                }
            }).catch(e => {
            });
        },
        submit(formName) {
            this.ruleForm.title = this.ruleForm.title.toString();
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.submitLoading = true;
                    this.ruleForm.id = getQuery('id');
                    request({
                        params: {
                            r: 'rebate/ad/edit',
                        },
                        method: 'post',
                        data: this.ruleForm,
                    }).then(e => {
                        this.submitLoading = false;
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg);
                            navigateTo({
                                r: 'rebate/ad/index'
                            })
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    },
    computed: {

    }
});
</script>