qimall/backend/modules/mall/views/member-label/edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-image');
?>
<div id="app" v-cloak>
    <el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1200px;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>{{cate_name}}设置</span>
            </div>
        </div>
        <div class="form_box">
            <template>
                <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="150px"
                         @submit.native.prevent>
                    <el-card style="margin-top: 10px" shadow="never">
                        <el-col :span="50">
                            <el-form-item label="标签名称" style='display: flex;' prop="name">
                                <el-input v-model="ruleForm.name" placeholder="请输入标签名称,最多20个字"></el-input>
                            </el-form-item>
                            <el-form-item :label="content" style='display: flex;' v-if="ruleForm.cate_id!=2&&ruleForm.cate_id!=3" prop="condition.num">

                                <el-input v-model="ruleForm.condition.num" placeholder="">
                                    <template slot="append">/ {{unit}}</template>
                                </el-input>
                                <span>具体值输入整数：如：1；内容是范围，请按如下格式输入：10-100；</span>
                            </el-form-item>
                            <el-form-item :label="content" style='display: flex;' v-if="ruleForm.cate_id==2||ruleForm.cate_id==3">
                                <el-select v-model="ruleForm.condition.num" placeholder="请选择">
                                    <el-option
                                            v-for="item in level_arr"
                                            :key="item.level"
                                            :label="item.name"
                                            :value="item.level">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="标签颜色" style='display: flex;'>
                                <el-color-picker v-model="ruleForm.color"></el-color-picker>
                            </el-form-item>
                            <el-form-item label="是否启用" style='display: flex;'>
                                <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0">
                                </el-switch>
                            </el-form-item>
                        </el-col>
                        <el-col>
                            <el-button :loading="btnLoading" class="button-item" type="primary"
                                       style="margin-top: 24px;" @click="store('ruleForm')" size="small">保存
                            </el-button>
                        </el-col>

                    </el-card>
            </template>
        </div>

    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                btnLoading: false,
                ruleForm: {
                    id: '',
                    cate_id: 0,
                    name: '',
                    color: '',
                    condition: {
                        num: '',
                        name:""
                    },
                    status: 1,

                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入标签名称',
                        trigger: 'change'
                    },
                        {
                            validator: (rule, value, callback) => {
                                if (value.length > 20 || value.length < 0) {
                                    callback('最大长度在1-20个字内');
                                }
                                callback();
                            }
                        },
                    ],
                },

                content: "",
                unit: "",
                route: "",
                cate_name: "",
                level_arr: [{
                    level: '选项1',
                    name: '黄金糕'
                }, {
                    level: '选项2',
                    name: '双皮奶'
                },],
            }
        },
        mounted: function () {
            this.ruleForm.id = getQuery('id');
            this.ruleForm.cate_id = getQuery('cate_id');
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                let id = getQuery('id');
                request({
                    params: {
                        r: 'mall/member-label/edit',
                        id: getQuery('id'),
                        cate_id: getQuery('cate_id')
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if (id) {
                            this.ruleForm = e.data.data.detail;
                        }
                        this.content = e.data.data.content;
                        this.unit = e.data.data.unit;
                        this.route = e.data.data.route;
                        this.cate_name = e.data.data.cate_name;
                        this.level_arr = e.data.data.level_arr;
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },

            //进行验证
            store(formName) {
                let formData = JSON.stringify(this.dataForm);
                //进行验证
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'mall/member-label/edit',
                            },
                            method: 'post',
                            data: {
                                form: this.ruleForm,
                            }
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'mall/member-label/' + this.route
                                })
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e);
                            this.btnLoading = false;
                        })
                    } else {
                        this.btnLoading = false;
                        return false;
                    }
                });
            },
        }
    });
</script>
<style>
    .inp-text {
        color: #afacac;
    }

    .form_box {
        background-color: #f3f3f3;
        padding: 0 0 20px;
    }

    .button-item {
        margin-top: 12px;
        padding: 9px 25px;
    }

    .margin-button-20px {
        margin-bottom: 20px;
    }

    .time_last_consume {
        padding-top: 20px;
    }

    .el-input-group__append {
        background-color: #fff;
        color: #353535;
    }

    .el-form-item > div {
        margin: 0 !important;
    }

    .title {
        display: flex;
        align-items: center;
        font-size: 12px;
        padding-left: 50px;
        margin-bottom: 16px;
    }

    .title-one {
        padding-left: 29px;
        font-size: 15px;
        margin-right: 10px;
    }

    .segmentation {
        padding: 0 10px;
        font-size: 20px;
    }

    .inp {
        width: 140px;
    }

    .inp .el-input__inner {
        border-radius: 4px 0 0 4px;
    }

    .inp2 {
        width: 60px;
    }

    .inp-text {
        background: #EFEFEF;
        border: 1px solid #E3E2E5;
        font-size: 15px;
        padding: 0px 15px;
        border-radius: 0 4px 4px 0;
        height: 32px;
    }


    /* flex公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    .flex-y-bottom {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: end;
        -webkit-align-items: flex-end;
        -ms-flex-align: end;
        -ms-grid-row-align: flex-end;
        align-items: flex-end;
    }
</style>