qimall/backend/modules/mall/views/freight/free-shipping-edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-district');
ComponentHelper::loadComponentView('com-district-single');
?>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" class="box-card" body-style="background-color: #f3f3f3;padding: 10px 0 0;" class="box-card" v-loading="cardLoading">
        <div slot="header">
            <div flex="cross:center box:first">
                <div><span @click="$navigate({r:'mall/freight/free-shipping-rules'})" class="text">包邮规则</span>/添加规则</div>
            </div>
        </div>
        <div class="form-body">
            <el-form :model="form" :rules="rules" size="small" ref="form" label-width="120px">
                <el-form-item label="包邮规则名称" prop="name">
                    <el-input size="small" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="包邮设置" prop="rule_type">
                    <el-radio-group v-model="form.rule_type">
                        <el-radio :label="1">满足其一即可</el-radio>
                        <el-radio :label="2">两个同时满足</el-radio>
                    </el-radio-group>
                    <el-form-item label="包邮金额" prop="money" label-width="80px">
                        <el-input size='small' type="number"  v-model.number="form.money" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
                        <p class="tips-text">订单金额满XXX包邮</p>
                    </el-form-item>
                    <el-form-item label="包邮商品" prop="num" label-width="80px">
                        <el-input size='small' type="number"  v-model.number="form.num" onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
                        <p class="tips-text">订单商品数量满XXX包邮</p>
                    </el-form-item>
                </el-form-item>
                
                <el-form-item label="选择地区" prop="type">
                    <el-radio name="select_com" :disabled="form.id ? true : false" :label="0" v-model="form.select_com">多选地区</el-radio>
                    <el-radio name="select_com" :disabled="form.id ? true : false" :label="1" v-model="form.select_com">单选地区</el-radio>
                </el-form-item>
                <el-form-item label="包邮地区" prop="rule" required style="margin: 0;">
                    <el-card shadow="never" style="margin-bottom: 12px;height: 400px!important;overflow: scroll" v-if="form.rule.length>0" >
                        <div flex="dir:left box:last">
                            <div>
                                <div flex="dir:left" style="flex-wrap: wrap">
                                    <div>区域：</div>
                                    <el-tag style="margin:5px;border:0" type="info"
                                            v-for="(item, index) in form.rule" :key="item.id">
                                        {{item.name}}
                                    </el-tag>
                                </div>
                            </div>
                            <div style="text-align: right">
                                <el-button type="text" @click="editDistrict(form.rule)" size="small" circle>
                                    <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                        <img src="resources/img/mall/edit.png" alt="">
                                    </el-tooltip>
                                </el-button>
                                <el-button type="text" @click="space" size="small" circle>
                                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                        <img src="resources/img/mall/del.png" alt="">
                                    </el-tooltip>
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                    <el-button size="small" type="text" @click="openDistrict" v-if="form.rule.length<=0"><i
                                class="el-icon-plus">新增规则</i>
                    </el-button>
                </el-form-item>

                <el-button class="button-item" :loading="btnLoading" type="primary" @click="submit('form')" size="small">保存</el-button>
            </el-form>
        </div>
    </el-card>
    <el-dialog title="包邮地区选择" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false">
        <div style="margin-bottom: 1rem;">
                <com-district v-if="form.select_com == 0" :rule="rule" @selected="selectDistrict" :level="3" :edit="rule"></com-district>
                <com-district-single v-if="form.select_com == 1" :rule="rule" ref="editSingle" :edit="rule" @selected="selectDistrict" :level="3"></com-district-single>
            <div style="text-align: right;margin-top: 1rem;">
                <el-button type="primary" @click="districtConfirm">
                    确定选择
                </el-button>
            </div>
        </div>
    </el-dialog>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                edit: false,
                btnLoading: false,
                cardLoading: false,
                dialogVisible: false,
                rule: [],
                form: {
                    rule_type: 2,
                    money: 0,
                    num: 0,
                    name: '',
                    select_com: 0,
                    rule: []
                },
                rules: {
                    money: [
                        {type: 'number', message: '请输入数字', trigger: 'change', required: true},
                        {type: 'number', message: '请输入数字', trigger: 'blur', required: true},
                    ],
                    num: [
                        {type: 'number', message: '请输入商品数量', trigger: 'change', required: true},
                        {type: 'number', message: '请输入商品数量', trigger: 'blur', required: true},
                    ],
                    rule: [
                        {message: '请选择包邮地区', trigger: 'blur', required: true}
                    ],
                    name: [
                        {message: '请填写包邮规则名称', trigger: 'blur', required: true},
                        {message: '请填写包邮规则名称', trigger: 'change', required: true}
                    ]
                }
            };
        },
        mounted() {
            if (getQuery('id')) {
                this.getDetail(getQuery('id'));
                this.edit = true;
            }
        },
        methods: {
            space() {
                this.form.rule = [];
            },

            goBack() {
                window.history.go(-1);
            },

            selectDistrict(e) {
                let list = [];
                for (let i in e) {
                    let obj = {
                        id: e[i].id,
                        name: e[i].name
                    };
                    list.push(obj);
                }
                this.rule = list;
            },
            openDistrict() {
                if(this.form.select_com == 1 && this.$refs['editSingle'] !== undefined){
                    this.$refs['editSingle'].backList = []
                }
                this.dialogVisible = true;
                this.rule = this.form.rule;
            },
            editDistrict(row) {
                this.title = '编辑规则';
                this.dialogVisible = true;
                this.rule = row;
                if (this.form.select_com == 1) {
                    setTimeout(()=>{
                        this.$refs['editSingle'].backList = this.form.rule
                    },800)
                }
            },
            districtConfirm() {
                this.form.rule = JSON.parse(JSON.stringify(this.rule));
                this.dialogVisible = false;
                this.$refs['form'].validate((valid) => {
                    return false;
                })
            },
            submit(formName) {
                this.btnLoading = true;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let rule = JSON.stringify(this.form.rule) 
                        let InitDataPara = {}
                        // 对象深拷贝
                        InitDataPara = JSON.parse(JSON.stringify(this.form))
                        InitDataPara.rule = rule

                        request({
                            params: {
                                r: 'mall/freight/free-shipping-edit',
                                id: getQuery('id')
                            },
                            method: 'post',
                            data: {
                                form: InitDataPara
                            }
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'mall/freight/free-shipping-rules',
                                });
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.btnLoading = false;
                            this.$message.error(e.data.msg);
                        });
                    } else {
                        console.log('error submit!!');
                        this.btnLoading = false;
                        return false;
                    }
                })
            },
            getDetail(id) {
                this.cardLoading = true;
                request({
                    params: {
                        r: 'mall/freight/free-shipping-edit',
                        id: id
                    },
                    method: 'get'
                }).then(e => {
                    this.cardLoading = false;
                    if (e.data.code == 0) {
                        this.form = Object.assign(this.form, e.data.data.detail);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.cardLoading = false;
                });
            }
        }
    });
</script>