qimall/addons/Course/backend/views/course/edit.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');
ComponentHelper::loadComponentView('com-select-cat');
ComponentHelper::loadComponentView('com-rich-text');
ComponentHelper::loadComponentView('com-goods-distribution', dirname(__DIR__) . '/components');
ComponentHelper::loadComponentView('com-image');
?>

<div id="app" v-cloak>
    <el-card class="box-card" v-loading="cardLoading" shadow="never" style="border:0;min-width: 1500px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <span style="color: #409EFF;cursor: pointer" @click="$navigate({r:'course/default/index'})">
                        课程列表
                    </span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>编辑课程</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <template>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <!-- 编辑课程 -->
                <el-tab-pane label="编辑课程" name="course_edit">
                    <template v-if="activeName=='course_edit'">
                        <div class="form-body">
                            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="150px">
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="课程名称" prop="name">
                                            <el-input size="small" v-model="ruleForm.name" size="small" placeholder="课程名称" @input="stringLength"></el-input>
                                        </el-form-item>

                                        <el-form-item label="关联分类" prop="cat_id">
                                            <el-select class="select" size="small" v-model="ruleForm.cat_id" placeholder="请选择">
                                                <el-option key="all" label="请选择分类" value=""></el-option>
                                                <el-option :key="item.id" :label="item.cname" :value="item.id" v-for="(item, index) in cateList"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="观看类型" prop="sell_type">
                                            <el-radio-group v-model="ruleForm.sell_type">
                                                <el-radio :label="1">付费观看 </el-radio>
                                                <el-radio :label="2">指定会员 </el-radio>
                                                <el-radio :label="4">转发观看 </el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item label="" prop="allow_member_levels" v-if="ruleForm.sell_type==2" style="width: 120%;">
                                            <template>
                                                <el-col :span="3"><span>指定身份观看</span></el-col>
                                                <el-col :span="2">
                                                    <el-checkbox :indeterminate="isIndeterminate" :label="0" v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox>
                                                </el-col>
                                                <el-col :span="15">
                                                    <el-checkbox-group v-model="ruleForm.allow_member_levels" @change="handleCheckedCitiesChange">
                                                        <el-checkbox v-for="item in member_level_list" :label="item.level" :key="item.level">{{item.level_name}}</el-checkbox>
                                                    </el-checkbox-group>
                                                </el-col>
                                            </template>
                                        </el-form-item>
                                        <el-form-item label="" prop="price" v-if="ruleForm.sell_type==1">
                                            <div class="demo-input-suffix">
                                                <span>课程售价: </span>
                                                <el-input style="width: 250px; margin-left: 10px;" v-model="ruleForm.price" size="small" placeholder="课程售价" type="number" @focus="handleFocus(1)" @blur="handleBlur(1)"><template slot="prepend">￥</template></el-input>
                                            </div>
                                            <div class="demo-input-suffix" style="margin-top: 15px;">
                                                <span>划线价格: </span>
                                                <el-input style="width: 250px; margin-left: 10px;" v-model="ruleForm.line_off_price" size="small" placeholder="划线价格" type="number" @focus="handleFocus(2)" @blur="handleBlur(2)"><template slot="prepend">￥</template></el-input>
                                            </div>
                                        </el-form-item>

                                        <el-form-item label="" prop="price" v-if="ruleForm.sell_type==4">
                                            <div class="demo-input-suffix">
                                                <span>转发次数: </span>
                                                <el-input style="width: 250px; margin-left: 10px;" v-model="ruleForm.relays" size="small" placeholder="转发次数" type="number" @focus="handleFocus(3)" @blur="handleBlur(1)"><template slot="append">次</template></el-input>
                                                <el-tooltip class="item" effect="dark" content="会员转发课程达到设定次数可以免费观看课程" placement="right-start">
                                                    <i class="el-icon-info"></i>
                                                </el-tooltip>
                                            </div>
                                            <div class="demo-input-suffix" style="margin-top: 15px;">
                                                <span>自定义文字: </span>
                                                <el-input style="width: 250px; margin-left: 10px;" v-model="ruleForm.relay_customize_text" size="small" placeholder="自定义文字" type="text"></el-input>
                                                <el-tooltip class="item" effect="dark" content="转发按钮显示文字" placement="right-start">
                                                    <i class="el-icon-info"></i>
                                                </el-tooltip>
                                            </div>
                                        </el-form-item>

                                        <el-form-item prop="logo">
                                            <label slot="label">
                                                <span>上传封面</span>
                                            </label>
                                            <com-attachment v-model="ruleForm.logo" :multiple="false" :max="1" @selected="selectedImg($event)">
                                                <el-button size="mini">选择图片</el-button>
                                            </com-attachment>
                                            <div class="customize-share-title">
                                                <com-image mode="aspectFill" width='80px' height='80px' :src="ruleForm.logo ? ruleForm.logo : ''"></com-image>
                                                <el-button v-if="ruleForm.logo" class="del-btn" size="mini" type="danger" icon="el-icon-close" circle @click="ruleForm.logo = ''"></el-button>
                                            </div>
                                        </el-form-item>


                                        <el-form-item label="虚拟数据" prop="is_open_vm">
                                            <el-switch v-model="ruleForm.is_open_vm" :active-value="1" :inactive-value="0">
                                            </el-switch>
                                        </el-form-item>

                                        <template v-if="ruleForm.is_open_vm == 1">

                                            <div class="enter flex" style="margin-left: 150px;margin-right: 20px;">
                                                <div class="flex flex-y-center" style="margin-right: 20px;">
                                                    <div class="inp-text" style="height: 40px;border-radius:0;padding-top: 8px;">点赞数</div>
                                                    <el-input v-model="ruleForm.vm_likes" class='inp' style="width: 120px;" type="number" @blur="blurInput"></el-input>
                                                </div>
                                                <div class="flex flex-y-center" style="margin-right: 20px;">
                                                    <div class="inp-text" style="height: 40px;border-radius:0;padding-top: 8px;">分享数</div>
                                                    <el-input v-model="ruleForm.vm_shares" class='inp' style="width: 120px;" type="number" @blur="blurInput"></el-input>
                                                </div>

                                                <div class="flex flex-y-center" style="margin-right: 20px;">
                                                    <div class="inp-text" style="height: 40px;border-radius:0;padding-top: 8px;" type="number">下载数</div>
                                                    <el-input v-model="ruleForm.vm_downloads" class='inp' style="width: 120px;" @blur="blurInput"></el-input>
                                                </div>
                                                <div class="flex flex-y-center" style="margin-right: 20px;">
                                                    <div class="inp-text" style="height: 40px;border-radius:0;padding-top: 8px;" type="number">播放次数</div>
                                                    <el-input v-model="ruleForm.vm_views" class='inp' style="width: 120px;" @blur="blurInput"></el-input>
                                                </div>
                                            </div>


                                        </template>

                                        <el-form-item label="是否允许评论" prop="can_comment">
                                            <el-switch v-model="ruleForm.can_comment" :active-value="1" :inactive-value="0">
                                            </el-switch>
                                        </el-form-item>

                                        <el-form-item label="是否允许下载" prop="can_download">
                                            <el-switch v-model="ruleForm.can_download" :active-value="1" :inactive-value="0">
                                            </el-switch>
                                        </el-form-item>

                                        <el-form-item label="排序" prop="sort">
                                            <el-input size="small" v-model="ruleForm.sort" type="number" placeholder="排序" ></el-input>
                                        </el-form-item>
                                        <el-form-item label="课程介绍" prop="introduce">
                                            <el-input type="textarea" :rows="3" placeholder="请输入课程介绍，文字限制100字" v-model="ruleForm.introduce" maxlength="100" show-word-limit></el-input>
                                        </el-form-item>

                                        <el-form-item label="课程详情" prop="detail">
                                            <com-rich-text v-model="ruleForm.detail"></com-rich-text>
                                        </el-form-item>

                                    </el-col>
                                </el-row>
                            </el-form>
                        </div>
                        <el-button :loading="btnLoading" class="button-item" style="margin-bottom: 15px;" type="primary" @click="submitForm('ruleForm')" size="small">保存
                        </el-button>
                    </template>
                </el-tab-pane>
                <!-- 分销设置 -->
                <el-tab-pane label="分销设置" name="distribution_setting">
                    <template v-if="activeName=='distribution_setting'">
                        <template v-if="distribution_enable==0">
                            <el-button type="danger">
                                请先在分销应用中开启功能
                            </el-button>
                        </template>
                        <div class="form-body" v-if="distribution_enable==1">
                            <el-form :model="distribution_config" size="small" ref="distributionForm" label-width="150px">
                                <div v-loading="cardLoading" class="com-goods-distribution">
                                    <el-form-item label="是否开启分销" prop="is_enable">
                                        <el-switch :active-value="1" :inactive-value="0" v-model="distribution_config.item_setting.is_enable">
                                        </el-switch>
                                    </el-form-item>
                                    <template v-if="distribution_config.item_setting.is_enable">
                                        <el-form-item label="分销佣金类型" prop="is_percent">
                                            <el-radio v-model="distribution_config.item_setting.is_percent" :label="1">固定金额</el-radio>
                                            <el-radio v-model="distribution_config.item_setting.is_percent" :label="0">百分比</el-radio>
                                        </el-form-item>
                                        <el-form-item label="分销佣金" style="padding-right: 274px;">
                                            <div class="box">
                                                <label style="margin-bottom:0;padding:18px 10px;">批量设置</label>
                                                <el-select v-model="selectData" slot="prepend" placeholder="请选择层级">
                                                    <el-option v-for="(item, index) in distributionLevel" :value="item.value" :key="item.index" :label="item.name">{{item.name}}
                                                    </el-option>
                                                </el-select>
                                                <el-input @keyup.enter.native="enter" type="number" style="width: 150px;" v-model="batchShareLevel" @focus="focusInput" @blur="blurInput">
                                                    <span slot="append">{{distribution_config.item_setting.is_percent == 0 ? '%' : '元'}}</span>
                                                </el-input>
                                                <el-button type="primary" size="small" @click="batchAttr">设置</el-button>
                                            </div>
                                            <el-table ref="normal" :data="distribution_level_list" border stripe style="width: 100%;" @selection-change="handleSelectionChange">
                                                <el-table-column type="selection" width="55"></el-table-column>
                                                <el-table-column width="100" label="等级名称" prop="name"></el-table-column>
                                                <el-table-column width="236" :label="item.name" :prop="item.value" :property="item.value" v-for="(item, index) in distributionLevel" :key="index" width="300">
                                                    <template slot-scope="scope">
                                                        <el-input type="number" v-model="scope.row.value[index]" @focus="focusInput" @blur="blurInput">
                                                            <span slot="append">{{distribution_config.item_setting.is_percent == 0 ? '%' : '元'}}</span>
                                                        </el-input>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                        </el-form-item>
                                    </template>
                                </div>
                                <el-form-item>
                                    <el-button type="primary" style="margin-top: 10px" size="small" @click="saveDistribution('distributionForm')">保存分销设置
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </template>
                </el-tab-pane>
                <!-- 经销设置 -->
                <el-tab-pane label="经销设置" name="agent_setting">
                    <template v-if="activeName=='agent_setting'">
                        <template v-if="agent_enable == 0">
                            <el-button type="danger">
                                请先在经销应用中开启功能
                            </el-button>
                        </template>
                        <el-form v-if="agent_enable == 1" ref="agentForm" style="background: #FFF;padding: 10px 30px;" :model="agent_config" v-loading="listLoading">
                            <el-form-item label="是否开启经销" prop="is_enable">
                                <el-switch :active-value="1" :inactive-value="0" v-model="agent_config.item_setting.is_enable">
                                </el-switch>
                            </el-form-item>

                            <template v-if="agent_config.item_setting.is_enable">
                                <el-form-item label="团队佣金类型" prop="is_percent_agent">
                                    <el-radio-group v-model="agent_config.item_setting.is_percent_team">
                                        <el-radio :label="0">百分比</el-radio>
                                        <el-radio :label="1">固定金额</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="团队佣金配置">
                                    <!--普通经销佣金设置 -->
                                    <template>
                                        <template>
                                            <el-col :span="12">
                                                <el-row>
                                                    <el-col :span="4">
                                                        <div class="grid-content bg-purple">经销商等级</div>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div class="grid-content bg-purple-light">提成</div>
                                                    </el-col>
                                                </el-row>

                                                <el-row v-for="(item,index) in agent_config.team_prize_info" :key="index" style="margin-bottom:10px">
                                                    <el-col :span="4">
                                                        {{item.name}}
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <el-input size="small" type="number" v-model="item.agent_team_prize" placeholder="输入数值" @focus="focusInput" @blur="blurInput">
                                                            <template slot="append" v-if="agent_config.item_setting.is_percent_team==0">%</template>
                                                            <template slot="append" v-else>元</template>
                                                        </el-input>
                                                    </el-col>
                                                </el-row>
                                            </el-col>
                                        </template>
                                    </template>
                                </el-form-item>
                                <el-form-item label="平级佣金类型" prop="is_percent_equal">
                                    <el-radio-group v-model="agent_config.item_setting.is_percent_equal">
                                        <el-radio :label="0">百分比</el-radio>
                                        <el-radio :label="1">固定金额</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="平级奖佣金配置">
                                    <template>
                                        <!--平级佣金设置 -->
                                        <template>
                                            <el-col :span="12">
                                                <el-row>
                                                    <el-col :span="4">
                                                        <div class="grid-content bg-purple">经销商等级</div>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div class="grid-content bg-purple-light">提成</div>
                                                    </el-col>
                                                </el-row>
                                                <el-row v-for="(item,index) in agent_config.equal_prize_info" :key="index" style="margin-bottom:10px">
                                                    <el-col :span="4">
                                                        {{item.name}}
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <el-input size="small" type="number" v-model="item.agent_equal_prize" placeholder="输入数值" @focus="focusInput" @blur="blurInput">
                                                            <template slot="append" v-if="agent_config.item_setting.is_percent_equal==0">%</template>
                                                            <template slot="append" v-else>元</template>
                                                        </el-input>
                                                    </el-col>
                                                </el-row>
                                            </el-col>
                                        </template>
                                    </template>
                                </el-form-item>
                                <el-form-item label="越级佣金类型" prop="is_percent_over">
                                    <el-radio-group v-model="agent_config.item_setting.is_percent_over">
                                        <el-radio :label="0">百分比</el-radio>
                                        <el-radio :label="1">固定金额</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="越级佣金配置">
                                    <template>
                                        <!--普通经销佣金设置 -->
                                        <template>
                                            <el-col :span="12">
                                                <el-row>
                                                    <el-col :span="4">
                                                        <div class="grid-content bg-purple">经销商等级</div>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div class="grid-content bg-purple-light">提成</div>
                                                    </el-col>
                                                </el-row>
                                                <el-row v-for="(item,index) in agent_config.over_prize_info" :key="index" style="margin-bottom:10px">
                                                    <el-col :span="4">
                                                        {{item.name}}
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <el-input size="small" type="number" v-model="item.agent_over_prize" placeholder="输入数值" @focus="focusInput" @blur="blurInput">
                                                            <template slot="append" v-if="agent_config.item_setting.is_percent_over==0">%</template>
                                                            <template slot="append" v-else>元</template>
                                                        </el-input>
                                                    </el-col>
                                                </el-row>
                                            </el-col>
                                        </template>
                                    </template>
                                </el-form-item>
                                <el-form-item label="额外佣金类型" prop="is_percent_extra">
                                    <el-radio-group v-model="agent_config.item_setting.is_percent_extra">
                                        <el-radio :label="0">百分比</el-radio>
                                        <el-radio :label="1">固定金额</el-radio>
                                    </el-radio-group>

                                </el-form-item>
                                <el-form-item label="额外佣金配置">
                                    <template>
                                        <!--额外佣金设置 -->
                                        <template>
                                            <el-col :span="12">
                                                <el-row>
                                                    <el-col :span="4">
                                                        <div class="grid-content bg-purple">经销商等级</div>
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <div class="grid-content bg-purple-light">提成</div>
                                                    </el-col>
                                                </el-row>
                                                <el-row v-for="(item,index) in agent_config.extra_prize_info" :key="index" style="margin-bottom:10px">
                                                    <el-col :span="4">
                                                        {{item.name}}
                                                    </el-col>
                                                    <el-col :span="8">
                                                        <el-input size="small" type="number" v-model="item.agent_extra_prize" placeholder="输入数值" @focus="focusInput" @blur="blurInput">
                                                            <template slot="append" v-if="agent_config.item_setting.is_percent_extra==0">%</template>
                                                            <template slot="append" v-else>元</template>
                                                        </el-input>
                                                    </el-col>
                                                </el-row>
                                            </el-col>
                                        </template>
                                    </template>
                                </el-form-item>
                            </template>
                            <el-form-item>
                                <el-button type="primary" style="margin-top: 10px" size="small" @click="saveAgentSetting('agentForm')">保存经销设置
                                </el-button>
                            </el-form-item>

                    </template>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </template>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                activeName: '',
                // activeName: 'course_edit',
                // activeName: 'distribution_setting',
                // activeName: 'agent_setting',
                form: {},
                cardLoading: false,
                btnLoading: false,
                listLoading: false,
                cateList: [],
                ruleForm: {
                    price: 0,
                    sort: 0,
                    line_off_price: 0,
                    vm_likes: 0,
                    vm_shares: 0,
                    vm_downloads: 0,
                    vm_views: 0,
                    logo: '',
                    detail: '',
                    can_comment: 1,
                    is_open_vm: 1,
                    name: '',
                    can_download: 1,
                    introduce: '',
                    allow_member_levels: [],
                    cat_id: '',
                    is_alone: 0,
                    is_alone_agent: 0,
                    sell_type: 1,

                    relays: 1,
                    relay_customize_text: '转发免费观看',
                },
                rules: {
                    name: [{
                        required: true,
                        message: '请输入课程名称',
                        trigger: 'change'
                    }, ],
                    cat_id: [{
                        required: true,
                        message: '请选择课程分类',
                        trigger: 'change'
                    }, ],
                    // logo: [{
                    //     required: true,
                    //     message: '请上传课程封面',
                    //     trigger: 'blur'
                    // }, ],
                    introduce: [{
                        required: true,
                        message: '请输入课程介绍',
                        trigger: 'change'
                    }, ],
                    price: [{
                        required: true,
                        message: '请输入课程售价',
                        trigger: 'change'
                    }],
                    line_off_price: [{
                        required: true,
                        message: '请输入划线价格',
                        trigger: 'change'
                    }],
                    member_price: [{
                        required: true,
                        message: '请输入会员价格',
                        trigger: 'change'
                    }],
                    sell_type: [{
                        required: true,
                        message: '请选择课程观看类型',
                        trigger: 'change'
                    }],
                },
                selectData: '',
                batchShareLevel: 0,
                selectList: [],
                member_level_list: [], // 会员等级列表
                isIndeterminate: false,
                checkAll: false,
                agent_enable: 0,
                agent_config: {
                    item_setting: {
                        is_enable: 0,
                        is_percent_team: 0,
                        is_percent_equal: 0,
                        is_percent_over: 0,
                        is_percent_extra: 0,
                    },
                    team_prize_info: [{
                        level: 1,
                        agent_team_prize: 0,
                    }],
                    equal_prize_info: [{
                        level: 1,
                        agent_equal_prize: 0,
                    }],
                    over_prize_info: [{
                        level: 1,
                        agent_over_prize: 0,
                    }],
                    extra_prize_info: [{
                        level: 1,
                        agent_extra_prize: 0,
                    }],
                },


                distribution_enable: 0,
                distribution_config: {
                    item_setting: {
                        is_enable: 0,
                        is_percent: 0,
                    },
                    // distribution_level_list: [],
                },
                distributionLevel: [],
                distribution_level_list: [],
            };
        },
        mounted() {
            this.loadData();
            if(getQuery('activeName')) {
                this.activeName = getQuery('activeName')
            } else {
                this.activeName = 'course_edit'
            };
        },
        methods: {
            // 标签切换
            handleClick(tab, event) {
                // console.log('handleClick:', tab.name, event);
                if ((tab.name == 'distribution_setting' || tab.name == 'agent_setting') && !getQuery('id')) {
                    this.$alert('请先添加课程再设置分销/经销相关参数', '温馨提示', {
                        confirmButtonText: '确定',
                        center: true,
                        callback: action => {
                            this.activeName = 'course_edit';
                        }
                    });
                } else {
                    this.activeName = tab.name;
                }
            },
            // 会员等级全选
            handleCheckAllChange(val) {
                if (val) {
                    this.ruleForm.allow_member_levels = [];
                }
            },
            // 会员等级选择改变
            handleCheckedCitiesChange(val) {
                if (val.length > 0) {
                    this.checkAll = false
                }
            },

            // 课程设置中，输入框获得焦点时，价格为0则清空输入框
            handleFocus(type) {
                if (1 == type && !parseInt(this.ruleForm.price)) {
                    this.ruleForm.price = '';
                }
                if (2 == type && !parseInt(this.ruleForm.line_off_price)) {
                    this.ruleForm.line_off_price = '';
                }
                if (3 == type && !parseInt(this.ruleForm.relays)) {
                    this.ruleForm.relays = '';
                }
            },
            // 课程设置中，输入框失去焦点时，价格为空则赋值为0
            handleBlur(type) {
                if (1 == type && !this.ruleForm.price) {
                    this.ruleForm.price = 0;
                } else {
                    let price = Math.abs(this.ruleForm.price);
                    this.ruleForm.price = price.toFixed(2);
                }
                if (2 == type && !parseInt(this.ruleForm.line_off_price)) {
                    this.ruleForm.line_off_price = 0;
                } else {
                    this.ruleForm.line_off_price = Math.abs(this.ruleForm.line_off_price);
                }
                if (3 == type && !parseInt(this.ruleForm.relays)) {
                    this.ruleForm.relays = 1;
                } else {
                    this.ruleForm.relays = Math.abs(this.ruleForm.relays);
                }
            },
            loadData() {
                var params = {};
                var id = getQuery('id');
                var self = this;
                request({
                    params: {
                        r: 'course/course/course-edit',
                        id: getQuery('id'),
                    },
                    method: 'get'
                }).then(e => {
                    console.log(e)
                    this.cardLoading = false;
                    if (e.data.code == 0) {
                        self.cateList = e.data.data.cate_list;
                        self.member_level_list = e.data.data.member_level_list;
                        /* 经销初始化 ---- start ----- */
                        self.agent_enable = e.data.data.agent_enable;
                        if (!Array.isArray(e.data.data.agent_config.item_setting)) {
                            self.agent_config.item_setting = e.data.data.agent_config.item_setting;
                        }
                        self.initAgentDetails(e.data.data.agent_levels, e.data.data.agent_details);
                        /* 经销初始化 ---- end ----- */

                        /* 分销初始化 ---- start ----- */
                        self.distribution_enable = e.data.data.distribution_enable;
                        self.distributionLevel = e.data.data.distribution_config.level_names;
                        if (e.data.data.distribution_config.item_setting) {
                            self.distribution_config.item_setting = e.data.data.distribution_config.item_setting;
                        }
                        self.initDistributionDetails(e.data.data.distribution_levels, e.data.data.distribution_details);
                        /* 分销初始化 ---- end ----- */

                        if (id) {
                            self.ruleForm = e.data.data.detail;
                            if (e.data.data.detail.allow_member_levels.length == 1 && e.data.data.detail.allow_member_levels[0] == 0) {
                                self.checkAll = true;
                            }
                            if (!e.data.data.detail.relays) {
                                self.ruleForm.relays = 1;
                            }
                        }
                    }
                }).catch(e => {
                    self.$message({
                        message: '网络错误',
                        type: 'error'
                    });
                });
            },
            // 初始化分销等级设置
            initAgentDetails(agent_levels, agent_details) {
                // console.log(agent_details, agent_details.length);
                let forNumber = agent_levels.length;
                let team_prize_info = [],
                    equal_prize_info = [],
                    extra_prize_info = [],
                    over_prize_info = [];
                let team_prize_obj = {},
                    equal_prize_obj = {},
                    over_prize_obj = {},
                    extra_prize_obj = {};
                for (let level_index = 0; level_index < forNumber; level_index++) {
                    team_prize_obj = {
                        level: agent_levels[level_index].level,
                        name: agent_levels[level_index].name,
                        agent_team_prize: 0
                    };
                    equal_prize_obj = {
                        level: agent_levels[level_index].level,
                        name: agent_levels[level_index].name,
                        agent_equal_prize: 0
                    };
                    over_prize_obj = {
                        level: agent_levels[level_index].level,
                        name: agent_levels[level_index].name,
                        agent_over_prize: 0
                    };
                    extra_prize_obj = {
                        level: agent_levels[level_index].level,
                        name: agent_levels[level_index].name,
                        agent_extra_prize: 0
                    };

                    let forNum = agent_details.length;
                    if (forNum) {
                        for (let detail_index = 0; detail_index < forNum; detail_index++) {
                            // console.log('detail-level: ', agent_details[detail_index].level, 'levels-level: ', agent_levels[level_index].level);
                            if (agent_details[detail_index].level == agent_levels[level_index].level) {
                                team_prize_obj.agent_team_prize = agent_details[detail_index].agent_team_prize;
                                equal_prize_obj.agent_equal_prize = agent_details[detail_index].agent_equal_prize;
                                over_prize_obj.agent_over_prize = agent_details[detail_index].agent_over_prize;
                                extra_prize_obj.agent_extra_prize = agent_details[detail_index].agent_extra_prize;
                            }
                        }
                    }
                    team_prize_info.push(team_prize_obj);
                    equal_prize_info.push(equal_prize_obj);
                    extra_prize_info.push(extra_prize_obj);
                    over_prize_info.push(over_prize_obj);
                }
                this.agent_config.team_prize_info = team_prize_info;
                this.agent_config.equal_prize_info = equal_prize_info;
                this.agent_config.extra_prize_info = extra_prize_info;
                this.agent_config.over_prize_info = over_prize_info;

                console.log('this.ageng_config: ', this.agent_config);
            },
            // 初始化经销等级设置
            initDistributionDetails(distribution_levels, distribution_details) {
                if (distribution_levels.length) {
                    let forNumber = distribution_levels.length;
                    for (let level_index = 0; level_index < forNumber; level_index++) {
                        distribution_levels[level_index].value = [0, 0, 0];
                        let forNum = distribution_details.length;
                        if (forNum) {
                            for (let detail_index = 0; detail_index < forNum; detail_index++) {
                                if (distribution_levels[level_index].level == distribution_details[detail_index].level) {
                                    distribution_levels[level_index].value = [
                                        distribution_details[detail_index].first_prize,
                                        distribution_details[detail_index].second_prize,
                                        distribution_details[detail_index].third_prize,
                                    ];
                                }
                            }
                        }
                    }
                    console.log('distribution_levels: ', distribution_levels);
                    this.distribution_level_list = distribution_levels;
                }
            },
            // 课程相关提交
            submitForm(formName) {
                let self = this;
                this.$refs[formName].validate((valid, obj) => {
                    if (!this.ruleForm.logo) {
                        this.$message.error('请上传封面图片');
                        return false;
                    }
                    if (this.ruleForm.sell_type == 1 && this.ruleForm.price==0) {
                        this.$message.error('付费观看的视频必须设置售价');
                        return false;
                    }

                    // console.log('ruleForm',this.ruleForm);
                    // console.log('member_level_discount',this.member_level_discount);
                    // return null;
                    if (valid) {
                        self.btnLoading = true;
                        var params = {};
                        var formData = {};
                        var id = getQuery('id');
                        formData = self.ruleForm;
                        if (self.checkAll) {
                            formData.allow_member_levels = 0;
                        } else {
                            // console.log('formData.allow_member_levels: ', formData.allow_member_levels);
                            if (!formData.allow_member_levels.length && formData.sell_type == 2) {
                                self.$message.error('请选择可以观看课程的会员身份');
                                return null;
                            }
                            if (!formData.allow_member_levels.length) {
                                formData.allow_member_levels = '';
                            }
                        }
                        request({
                            params: {
                                r: 'course/course/course-edit',
                                id: getQuery('id')
                            },
                            method: 'post',
                            data: self.ruleForm,
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                self.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'course/default/index'
                                })
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    } else {
                        var msg = '';
                        for (let index in obj) {
                            msg = msg + obj[index][0].message + ' ';
                        }
                        this.$message({
                            message: msg,
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            // 课程经销设置提交
            saveAgentSetting(formName) {
                let self = this;
                this.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        self.btnLoading = true;
                        var params = {};
                        var formData = {};
                        request({
                            params: {
                                r: 'course/course/agent-setting',
                                course_id: getQuery('id')
                            },
                            method: 'post',
                            data: self.agent_config,
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                self.$message.success(e.data.msg);
                                navigateTo({
                                    r: 'course/default/index',
                                })
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    }
                });
            },
            // 课程分销设置提交
            saveDistribution(formName) {
                let self = this;
                self.$refs[formName].validate((valid, obj) => {
                    if (valid) {
                        self.btnLoading = true;
                        var params = {};
                        self.distribution_config.distribution_level_list = this.distribution_level_list;
                        request({
                            params: {
                                r: 'course/course/distribution-setting',
                                course_id: getQuery('id')
                            },
                            method: 'post',
                            data: self.distribution_config,
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                navigateTo({
                                    r: 'course/default/index',
                                })
                                self.$message.success(e.data.msg);
                            } else {
                                self.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            self.$message.error(e.data.msg);
                            self.btnLoading = false;
                        });
                    }
                });
            },
            handleSelectionChange(data) {
                // 多选框选中
                this.selectList = data;
            },
            focusInput(event) {
                if (event.target.value == 0) {
                    event.target.value = "";
                }
            },
            blurInput(event) {
                if (event.target.value == "") {
                    event.target.value = 0;
                }
                // console.log('eeeeee: ', event.target.value, parseInt(event.target.value));
                event.target.value = Math.abs(parseInt(event.target.value));
            },
            batchAttr() {
                let that = this;
                // 分销设置
                let form = JSON.parse(JSON.stringify(this.distribution_level_list));
                if (!this.selectList || this.selectList.length === 0) {
                    this.$message.warning('请勾选分销商等级');
                    return;
                }
                if (this.selectData === '') {
                    this.$message.warning('请选择分销层级');
                    return;
                }
                // console.info('this.selectList: ', this.selectList, 'this.selectData: ', this.selectData);
                let index = this.distributionLevel.findIndex(v => v.value == that.selectData);
                let forNum = this.distribution_level_list.length;
                for (i = 0; i < forNum; i++) {
                    let ofIndex = this.selectList.filter(vv => vv.id == this.distribution_level_list[i].id);
                    // console.log('ofIndex: ', ofIndex);
                    if (ofIndex.length > 0) {
                        // this.distribution_level_list[i].value[index] = parseInt(that.batchShareLevel);
                        this.distribution_level_list[i].value.splice(index, 1, Math.abs(parseInt(that.batchShareLevel)));
                    }
                }
            },

            // 课程名称字数限制
            stringLength(name) {
                if (name.length > 20) {
                    this.ruleForm.name = name.substring(0, 12);
                    this.$message.error('课程名称不能超过 20 字符');
                    return false;
                }
            },
            // 选中图片
            selectedImg(e) {
                console.log(e);
                this.ruleForm.logo = e[0].url;
            },
        }
    });
</script>

<style>
    .form-body {
        padding: 20px;
        background-color: #fff;
        margin-bottom: 20px;
        padding-right: 20%;
        min-width: 900px;
    }

    .box {
        border-top: 1px solid #E8EAEE;
        border-left: 1px solid #E8EAEE;
        border-right: 1px solid #E8EAEE;
        padding: 16px;
    }

    .form-body .el-form-item {
        padding-right: 25%;
        min-width: 850px;
    }

    .form-button {
        margin: 0;
    }

    .form-button .el-form-item__content {
        margin-left: 0 !important;
    }

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

    .check-group {
        font-size: 14px !important;
    }

    .check-group .el-col {
        display: flex;
    }

    .check-group .el-input {
        margin: 0 5px;
    }

    .check-group .el-col .el-checkbox {
        display: flex;
        align-items: center;
    }

    .check-group .el-col .el-input {
        width: 100px;
    }

    .check-group .el-col .el-input .el-input__inner {
        height: 30px;
        width: 100px;
    }

    .el-checkbox-group .el-col {
        margin-bottom: 10px;
    }


    .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>