qimall/addons/Mch/client/views/goods/goods-model.php

<?php

use common\helpers\ComponentHelper;

$addons_setting = empty($addons_setting) ? [] : $addons_setting;
foreach ($addons_setting as $key => $item) {
    ComponentHelper::loadComponentView($item['components'], Yii::$app->basePath . '/../addons/'. ucfirst($key) .'/backend/views/goods');
}
?>
<style>
    <?= ComponentHelper::loadComponentView('edit', __DIR__ . '/css', [],true, 'css'); ?>
</style>
<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" class="box-card" body-style="background-color: #f3f3f3;padding: 20px 0 0;" class="box-card" v-loading="cardLoading">
        <div slot="header">
            <div flex="cross:center box:first">
                <div><span @click="$navigate({r:'mch/client/goods/index'})" class="text">商品列表</span>/配置模式</div>
            </div>
        </div>

        <div class="goods-box">
            <el-form :model="ruleForm" ref="ruleForm" size="mini" label-width="150px" class="demo-ruleForm">
                <div class="basic">
                    <!-- 分润设置 -->
                    <?php foreach ($addons_setting as $key => $item) {
                        echo '<' . $item['components'] . ' :goods="goods" :level_arr="level" :commission_type_map="commission_type_map" :coupon_type_map="coupon_type_map" :setting="setting.'.$key.'" @change="getData" style="margin-bottom:20px" :extend_data="extend_data.'. $key .' ?? {}"></' . $item['components'] . '>';
                    } ?>
                </div>
            </el-form>
        </div>
    </el-card>

    <div class="bottom-btns" flex="main:center cross:center" style="padding: 15px 0;margin-top: 20px; background-color: #fff;">
        <el-button size="mini" type="primary" @click="submit()">保存</el-button>
    </div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                cardLoading: false,
                setting: {},
                commission_type_map: {},
                coupon_type_map: {},
                goods: {},
                level: {},
                ruleForm: {},
                extend_data: {
                    Boss: {
                        is_show_prize_pool: false,
                        is_show_extra_ratio: false,
                    }
                }
            };
        },
        created() {
            this.goodsId = getQuery('id');
        },
        mounted: function() {
            this.getModelDetail();
        },
        methods: {
            getModelDetail(){
                let self = this;
                self.cardLoading = true;
                request({
                    params: {
                        r: 'mch/client/goods/goods-model',
                        id: getQuery('id')
                    },
                    method: 'get',
                }).then(e => {
                    self.cardLoading = false;
                    if (e.data.code == 0) {
                        self.level = e.data.data.level;
                        if (!isEmpty(e.data.data.setting)) {
                            self.setting = e.data.data.setting;
                            for (let key in self.setting) {
                                // 将空的
                                if (isEmpty(self.setting[key])) self.setting[key] = {};
                            }
                        }
                        self.commission_type_map = e.data.data.commission_type_map;
                        self.coupon_type_map = e.data.data.coupon_type_map;

                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            submit() {
                let self = this;
                self.btnLoading = true;
                self.ruleForm.goods_id = getQuery('id');
                params = Object.assign(self.ruleForm,this.cForm);
                request({
                    params: {
                        r: 'mch/client/goods/goods-model'
                    },
                    method: 'post',
                    data: {
                        form: params
                    }
                }).then(e => {
                    self.btnLoading = false;
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.$message.error(e.data.msg);
                    self.btnLoading = false;
                });
            },
            getData(val,key){
              this.ruleForm[key] = val;
              console.log(this.ruleForm);
            },
        }
    });
</script>