qimall/addons/LuckyGroup/backend/views/category/add-edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-activity');
ComponentHelper::loadComponentView('com-image');
?>

<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>分类设置</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="是否启用" prop="status">
                    <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" inactive-text="不启用" active-text="启用">
                    </el-switch>
                </el-form-item>

                <!-- <el-form-item label="选择活动:" required>
                    <com-dialog-activity :multiple="true" :extra-search="{from:'lucky_group'}" @selected="activitySelect" title="选择活动">
                        <el-button type="primary">选择活动</el-button>
                    </com-dialog-activity>
                    <el-table max-height="400" :data="activity_list" size="small" stripe border style="width: 100%;margin-top: 20px;">
                        <el-table-column type="index" label="序号" align="center" width="60">
                        </el-table-column>
                        <el-table-column prop="id" label="活动id" align="center" min-width="80">
                        </el-table-column>
                        <el-table-column label="活动名称" min-width="150">
                            <template slot-scope="scope">
                                <div style="display: flex;align-items: center;">
                                    <div>
                                        <div>{{scope.row.title}}</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="num" label="操作" align="center" min-width="80">
                            <template slot-scope="scope">
                                <el-button type="warning" @click="delFun(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item> -->


                <el-form-item prop="pic_path">
                    <label slot="label">
                        <span>分类图片</span>
                        <el-tooltip effect="dark" content="上传图片,建议尺寸:64 * 64" 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="建议尺寸:64 * 64" 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-form-item>

                <el-form-item prop="pic_adv">
                    <label slot="label">
                        <span>分类广告</span>
                        <el-tooltip effect="dark" content="上传图片,建议尺寸:750 * 438" placement="top">
                            <i class="el-icon-info"></i>
                        </el-tooltip>
                    </label>
                    <com-attachment v-model="ruleForm.pic_adv" :multiple="false" :max="1">
                        <el-tooltip class="item" effect="dark" content="建议尺寸:750 * 438" 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_adv ? ruleForm.pic_adv : ''"></com-image>
                        <el-button v-if="ruleForm.pic_adv" class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="ruleForm.pic_adv = ''"></el-button>
                    </div>

                    <!-- <el-button @click="app_share.dialog = true;app_share.type = 'pic_bg'"
                                type="text">查看图例
                    </el-button> -->
                </el-form-item>

                <el-form-item label="广告链接" size="small" prop="adv_link">
                    <el-input v-model="selectedLink" 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="bgcolor">
                    <el-color-picker @active-change="noticeBgColorChange" style="margin-left: 20px;" color-format="rgb" v-model="ruleForm.bgcolor" :predefine="predefineColors">
                    </el-color-picker>
                </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,
                selectedLink: '',
                ruleForm: {
                    title: '',
                    sort: '',
                    status: '',
                    pic_path: '',
                    adv_link: {},
                    pic_adv: '',
                    bgcolor: '',
                    // activity_ids: '',
                },
                activity_list: [],
                formRules: {
                    title: [{
                            required: true,
                            message: '名称不能为空',
                            trigger: 'blur'
                        }
                    ],
                    sort: [{
                        required: true,
                        pattern: /^[0-9]\d{0,8}$/,
                        message: '排序必须在9位整数内',
                        trigger: 'blur'
                    }],

                    status: [{
                        required: true,
                        message: '请选择是否启用分类',
                        trigger: 'blur'
                    }],
                    pic_path: [{
                        required: true,
                        message: '请上传图片',
                        trigger: 'blur'
                    }],
                    pic_adv: [{
                        required: true,
                        message: '请上传详情图',
                        trigger: 'blur'
                    }],
                    // activity_ids: [{
                    //     required: true,
                    //     message: '请选择活动',
                    //     trigger: 'blur'
                    // }],
                },
                predefineColors: [
                    '#000',
                    '#fff',
                    '#888',
                    '#ff4544'
                ],
            };
        },
        methods: {
            noticeBgColorChange(e) {
                this.ruleForm.bgcolor = e;
            },
            // delFun(index) {
            //     this.activity_list.splice(index, 1)
            // },
            // activitySelect(param) {
            //     for (let j in param) {
            //         let item = param[j];
            //         let flag = true;
            //         for (let i in this.activity_list) {
            //             if (this.activity_list[i].id == item.id) {
            //                 flag = false;
            //                 break;
            //             }
            //         }
            //         if (flag) {
            //             this.activity_list.push({
            //                 id: item.id,
            //                 title: item.title,
            //             });
            //         }
            //     }
            // },
            submit(formName) {
                // console.log('submit ==>>> ', this.ruleForm);return null;
                if (!this.ruleForm.adv_link) {
                    this.ruleForm.adv_link = '';
                }
                this.ruleForm.title += '';
                if (this.ruleForm.title.length > 30 || this.ruleForm.title.length < 2) {
                    this.$message.error('分类名称长度在 2-30 字符');
                    return false;
                }

                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'lucky-group/group-category/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: 'lucky-group/group-category/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;
                    }
                });
            },
            linkSelected(list) {
                console.log('linkSelected ====>>>> ', list);
                if (!list.length) {
                    this.ruleForm.adv_link = {};
                    this.selectedLink = '';
                    return false;
                }
                this.ruleForm.adv_link = list[0];
                this.selectedLink = list[0].title + ' [ ' + list[0].route + ' ]';
                return;
            },
            getcategoryInfo() {
                this.loading = true;
                let self = this;
                request({
                    params: {
                        r: 'lucky-group/group-category/storage',
                        id: getQuery('id'),
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    console.log(e);
                    if (e.data.code == 0 && e.data.data.id) {
                        self.ruleForm = e.data.data;
                        if (e.data.data.adv_link) {
                            this.selectedLink = e.data.data.adv_link.title + ' [ ' + e.data.data.adv_link.route + ' ]';
                        }
                        // self.activity_list = Array.isArray(e.data.data.activity_list) ? e.data.data.activity_list : [];
                        // e.data.data.activity_ids && (this.ruleForm.activity_ids = e.data.data.activity_ids);
                        console.log(this.ruleForm.activity_ids, 222222222);
                    }
                }).catch(e => {
                    this.loading = false;
                    this.$alert(e.data.msg, '提示', {
                        confirmButtonText: '确定'
                    })
                });
            },

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