qimall/backend/modules/admin/views/template/setting.php

<?php
/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * Created by PhpStorm
 * Author: lun
 * Date: 2021-09-02
 * Time: 12:36
 */
?>
<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"
                 :rules="rules"
                 ref="ruleForm"
                 label-width="172px"
                 style="position: relative"
                 size="small">
            <el-card shadow="never" class="mt-24">
                <div slot="header">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{path:'/'}"><span @click="$navigate({r:'admin/template/mall'})">商城模板</span></el-breadcrumb-item>
                        <el-breadcrumb-item>编辑模板设置</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <el-input type="text" v-model="ruleForm.id" style="display: none;"></el-input>
                <el-form-item label="模板标题" prop="title">
                    <el-col :span="12">
                        <el-input type="text" v-model="ruleForm.title" style="width:300px"></el-input>
                    </el-col>
                </el-form-item>

                <el-form-item label="设置永久价格">
                    <el-col :span="12">
                        <el-radio-group v-model="is_set_price" @change="setPrice">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-col>
                </el-form-item>

                <el-form-item label="设置售价">
                    <div v-for="(item,key) in setting">
                        <!-- 永久价格特殊处理 -->
                        <div v-if="key == 0 && item.duration == -1">
                            <el-input placeholder="0.00" style="width:300px" v-model="item.money" type="number" min="0" step="0.01">
                                <template slot="prepend">永久</template>
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                        <div v-else style="margin-top: 10px;">
                            <el-input style="width:150px" type="number" v-model="item.duration" min="1">
                                <template slot="append">月</template>
                            </el-input>
                            <el-input placeholder="0.00" style="width:150px" v-model="item.money" type="number" min="0" step="0.01">
                                <template slot="append">元</template>
                            </el-input>
                            <el-button type="text" @click="handle('delete',key)" style="margin-left: 10px;">删除</el-button>
                        </div>
                    </div>

                    <div v-if="setting.length <= 3"><el-button type="text" @click="handle('add')">+添加规格</el-button> <span style="font-size: 12px; color: #cccbcb;">最多可添加3条</span></div>

                </el-form-item>

                <el-form-item label="模板状态">
                    <el-col :span="12">
                        <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0"></el-switch>
                    </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() {
            return {
                loading: false,
                submitLoading: false,
                del_setting:null,
                is_set_price: 0,
                ruleForm: {
                    id: 0,
                    title: '',
                    status: 0,
                },
                setting: [
                    {
                        "unit":"永久",
                        "money":"0",
                        "duration":"-1",
                    }
                ],
                rules: {
                    title: [
                        {required: true, message: '请输入模板名称', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
                    ],
                }
            };
        },
        created() {
            this.loadData();
        },
        methods: {
            setPrice(event) {
                this.handle('set',event)
            },
            handle(type, data = null) {
                switch (type) {
                    case 'add':// 添加规格
                        this.setting.push({
                            unit:"月",
                            money:"0",
                            duration:"",
                        });
                        break;
                    case 'delete':// 删除规格
                        this.setting.splice(data,1);
                        break;
                    case 'set':// 是否设置永久价格
                        if(data == 0 && this.setting[0].duration == -1) {
                            this.setting.splice(0, 1);
                            if(this.del_setting&&this.setting.length==3){
                                this.setting[3] = this.del_setting;
                            }
                        }
                        if(data == 1 && this.setting[0].duration != -1) {
                            this.setting.unshift({
                                unit:"永久",
                                money:"0",
                                duration:"-1",
                            });
                            if(this.setting.length>=4){
                                this.del_setting = this.setting[4];
                                this.setting.splice(4,1);
                            }
                            console.log(this.del_setting);
                        }
                        break;
                }
            },
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'admin/template/setting',
                        id: getQuery('id')
                    },
                    method: 'get',
                }).then(e => {
                    this.loading = false;
                    if (e.data.code === 0) {
                        this.ruleForm = e.data.data;
                        if (!isEmpty(e.data.data.setting)) {
                            this.setting = JSON.parse(e.data.data.setting);
                            if (this.setting[0].duration == -1) this.is_set_price = 1;
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            settingValidate() {
                let text = "";
                this.setting.forEach(function (item) {
                    if (item.unit === '月') {
                        if (item.duration == "") {
                            text = '月份不能为空';
                        } else if (item.duration <= 0) {
                            text = '月份数值不能小于1';
                        }else if (typeof item.duration ==! 'number' || item.duration%1 !== 0) {
                            text = '月份数值必须为整数';
                        }
                    }
                })
                return text;
            },
            submit(formName) {
                if (this.setting.length == 0) {
                    this.$message.error('售价不能为空');
                    return;
                }
                let text = this.settingValidate();
                if (text) {
                    this.$message.error(text);
                    return;
                }
                this.ruleForm.setting = this.setting;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.submitLoading = true;
                        request({
                            params: {
                                r: 'admin/template/setting',
                            },
                            method: 'post',
                            data: {
                                detail: this.ruleForm
                            },
                        }).then(e => {
                            this.submitLoading = false;
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'admin/template/mall'
                                })
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        },
        computed: {

        }
    });
</script>