qimall/addons/CircleDistribution/backend/views/setting/index.php

<?php

use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-dialog-select');

?>
<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>基础设置</span>
            </div>
        </div>
        <div class="form_box">
            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="150px">
                <el-card shadow="never">
                    <div slot="header">
                        <div>
                            <span>分销循环设置</span>
                        </div>
                    </div>
                    <div>
                        <el-row>
                            <el-col :span="16">

                                <el-form-item label="启用分销循环">
                                    <div>
                                        <el-switch v-model="ruleForm.is_enable" :active-value="1" :inactive-value="0">
                                        </el-switch>
                                    </div>
                                    <div class="tips-text" style="line-height: 24px;">
                                        开启分销循环才会按以下设置进行分红
                                    </div>
                                </el-form-item>

                                <el-form-item prop="is_apply" label="成为分销商的条件">
                                    <el-col :span="8" style="width: 100%">
                                        <el-radio-group v-model="ruleForm.is_apply" size="small">
                                            <el-radio :label="0" border>无条件</el-radio>
                                            <el-radio :label="1" border>申请</el-radio>
                                            <el-radio :label="2" border>购买商品</el-radio>
                                        </el-radio-group>
                                    </el-col>
                                    <div class="tips-text" style="line-height: 24px;">
                                        成为分销商的条件，可申请可无条件（即所有人去推荐都有以下分红）
                                    </div>
                                </el-form-item>

                                <el-form-item prop="become_goods_ids">
                                    <template v-if="ruleForm.is_apply == 2">
                                        <el-form-item prop="become_goods_way">
                                            <el-radio-group v-model="ruleForm.become_goods_way" size="small">
                                                <el-radio :label="0">任意商品</el-radio>
                                                <el-radio :label="1">指定商品</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-form-item prop="become_order_status">
                                            <el-radio-group v-model="ruleForm.become_order_status" size="small">
                                                <el-radio :label="0">订单完成</el-radio>
                                                <el-radio :label="1">订单支付</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <template v-if="ruleForm.become_goods_way == 1">
                                            <div style="display:flex;justify-content:space-between;padding-bottom:10px;">
                                                <span style="color: #ff4544;">最多可添加100个商品</span>
                                                <span>
                                                    <com-dialog-select :multiple="true" @selected="becomeGoodsSelect" title="商品选择">
                                                        <el-button type="primary" size="mini">选择商品</el-button>
                                                    </com-dialog-select>
                                                </span>
                                            </div>
                                            <div style="max-height: 300px;overflow-y: auto">
                                                <el-table :data="ruleForm.become_goods_list" :show-header="false" border>
                                                    <el-table-column label="">
                                                        <template slot-scope="scope">
                                                            <div flex>
                                                                <div style="padding-right: 10px;flex-grow: 0">
                                                                    <com-image mode="aspectFill" :src="scope.row.cover_pic"></com-image>
                                                                </div>
                                                                <div style="flex-grow: 1;">
                                                                    <com-ellipsis :line="2">{{scope.row.name}}
                                                                    </com-ellipsis>
                                                                </div>
                                                                <div style="flex-grow: 0;">
                                                                    <el-button @click="deleteBecomeGoods(scope.$index)" type="text" circle size="mini">
                                                                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                                            <img src="resources/img/mall/del.png" alt="">
                                                                        </el-tooltip>
                                                                    </el-button>
                                                                </div>
                                                            </div>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </div>
                                        </template>

                                    </template>
                                </el-form-item>

                                <el-form-item label="推广中心显示">
                                    <div>
                                        <el-switch v-model="ruleForm.is_show_at_center" :active-value="1" :inactive-value="0">
                                        </el-switch>
                                    </div>
                                    <div class="tips-text" style="line-height: 24px;">
                                        推广中心是否显示分销循环分红
                                    </div>
                                </el-form-item>

                                <el-form-item prop="is_check" label="是否需要审核">
                                    <el-col :span="8" style="width: 100%">
                                        <el-radio-group v-model="ruleForm.is_check" size="small">
                                            <el-radio :label="0" border>不需要</el-radio>
                                            <el-radio :label="1" border>需要</el-radio>
                                        </el-radio-group>
                                    </el-col>
                                    <div class="tips-text" style="line-height: 24px;">
                                        申请为分销上是否需要审核
                                    </div>
                                </el-form-item>
                                <el-form-item label="申请协议" prop="protocol" v-if="ruleForm.is_apply==1">
                                    <el-input type="textarea" :rows="4" placeholder="申请协议" v-model="ruleForm.protocol">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="分销层级" prop="level" required>
                                    <el-radio-group v-model="ruleForm.level">
                                        <el-radio :label="1" is_checked="is_check">一级分销</el-radio>
                                    </el-radio-group>
                                </el-form-item>

                                <el-form-item prop="compute_type" label="结算方式">
                                    <el-col :span="19" style="width: 100%">
                                        <el-radio-group v-model="ruleForm.compute_type" size="small">
                                            <el-radio :label="0" border>订单完成后</el-radio>
                                            <el-radio :label="1" border>订单支付后</el-radio>
                                        </el-radio-group>
                                    </el-col>
                                    <div class="tips-text" style="line-height: 24px;">
                                        循环分红佣金结算方式，结算后才能提现，如选择支付后则会员支付后其上级佣金马上结算，进行提现
                                    </div>
                                </el-form-item>
                                <el-form-item prop="computing_method" label="计算方式">
                                    <el-col :span="19" style="width: 100%">
                                        <el-radio-group v-model="ruleForm.computing_method" size="small">
                                            <el-radio :label="0" border>实际支付金额</el-radio>
                                            <el-radio :label="1" border>商品售价</el-radio>
                                            <el-radio :label="2" border>商品利润</el-radio>
                                        </el-radio-group>
                                    </el-col>
                                    <div class="tips-text" style="line-height: 24px;">
                                        如分销循环佣金选的是按百分比来算，则按这里的计算基数计算佣金
                                    </div>
                                </el-form-item>


                                <el-form-item label="循环复购">
                                    <div>
                                        <el-switch v-model="ruleForm.is_circle_repurchase" :active-value="1" :inactive-value="0">
                                        </el-switch>
                                    </div>
                                    <div class="tips-text" style="line-height: 24px;">
                                        开启以后每循环奖励一次后需要进行复购才结算奖励
                                    </div>
                                </el-form-item>

                                <el-form-item label="指定商品" v-if="ruleForm.is_circle_repurchase > 0">
                                    <el-col :span="2">
                                        <com-dialog-select :multiple="true" @selected="goodsSelect" title="指定商品" style="float: right; margin-top: 10px;"><el-button type="primary" plain size="mini">添加商品</el-button></com-dialog-select>
                                    </el-col>
                                    <el-col :span="22">
                                        <div class="goods_box" v-for="(item,key) in ruleForm.thaw_goods_list">
                                            <div>
                                                <com-image mode="aspectFill" :src="item.cover_pic"></com-image>
                                            </div>
                                            <div class="goods_desc">
                                                <span class="ellipsis">{{ item.name }}</span>
                                                <span style="display: flex;justify-content: space-between;">
                                                    <span>￥{{ item.price }}</span>
                                                    <span><el-button type="text" style="padding: 0;" @click="deleteGoods(key)">删除</el-button></span>
                                                </span>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-form-item>

                                <el-form-item prop="compute_type" label="复购结算方式" v-if="ruleForm.is_circle_repurchase > 0">
                                    <el-col :span="19" style="width: 100%">
                                        <el-radio-group v-model="ruleForm.repurchase_compute_type" size="small">
                                            <el-radio :label="0" border>订单完成后</el-radio>
                                            <el-radio :label="1" border>订单支付后</el-radio>
                                        </el-radio-group>
                                    </el-col>
                                    <div class="tips-text" style="line-height: 24px;">
                                        复购后待结算佣金何时结算
                                    </div>
                                </el-form-item>




                            </el-col>
                        </el-row>
                    </div>
                </el-card>
                <el-card style="margin-top: 10px" shadow="never">
                    <div slot="header">
                        <div>佣金设置
                            <el-tooltip class="item" effect="dark" content="需要打开分销循环开关，才能设置对应的分销佣金" placement="top">
                                <i class="el-icon-info"></i>
                            </el-tooltip>
                        </div>
                    </div>
                    <el-col :span="14">
                        <el-form-item label="分销佣金类型" prop="price_type">
                            <el-radio-group v-model="ruleForm.commission.is_percent">
                                <el-radio :label="0">百分比</el-radio>
                                <el-radio :label="1">固定金额</el-radio>
                            </el-radio-group>
                            <div class="tips-text" style="line-height: 24px;">
                                佣金设置:<br />
                                A推荐下级下单<br />
                                直推下级的第一个订单，A拿10%<br />
                                直推下级的第二个订单，A拿20%<br />
                                直推下级的第三个订单，A拿30%<br />
                                直推下级的第四个订单，A拿10%<br />
                                直推下级的第五个订单，A拿20%<br />
                                直推下级的第六个订单，A拿30%<br />
                                以此类推
                            </div>
                        </el-form-item>



                        <el-form-item v-for="(item,index) in ruleForm.commission.list" :key='index' v-if="ruleForm.commission.list.length > 0" label='佣金阶梯' prop="first_score">

                            <el-input type="number" :min="0" v-model="item.value" style="width: 360px;margin-right: 20px;">
                                <template slot="prepend">直推第{{ index+1 }}人/直推第n+{{ index+1 }}人</template>
                                <template slot="append" v-if="ruleForm.commission.is_percent == 0">%</template>
                                <template slot="append" v-if="ruleForm.commission.is_percent == 1">元</template>
                            </el-input>
                            <el-button v-if="ruleForm.commission.list && ruleForm.commission.list.length>1" size="mini" type="danger" icon="el-icon-close" circle @click="delItem(index)" style="margin-left:10px"></el-button>

                        </el-form-item>
                        <el-button type="primary" @click="dirctAddSet" size="small" style="margin-bottom: 10px;marginLeft:60px">+添加佣金阶梯</el-button>





                    </el-col>

                    <el-col :span="14">
                        <el-form-item label="分销积分奖励" prop="score_type">
                            <el-radio-group v-model="ruleForm.score.is_percent">
                                <el-radio :label="0">百分比</el-radio>
                                <el-radio :label="1">固定</el-radio>
                            </el-radio-group>
                        </el-form-item>



                        <el-form-item v-for="(item,index) in ruleForm.score.list" :key='index' v-if="ruleForm.score.list.length > 0" label='积分阶梯' prop="first_score">

                            <el-input type="number" :min="0" v-model="item.value" style="width: 360px;margin-right: 20px;">
                                <template slot="prepend">直推第{{ index+1 }}人/直推第n+{{ index+1 }}人</template>
                                <template slot="append" v-if="ruleForm.score.is_percent == 0">%</template>
                                <template slot="append" v-if="ruleForm.score.is_percent == 1">积分</template>
                            </el-input>
                            <el-button v-if="ruleForm.score.list && ruleForm.score.list.length>1" size="mini" type="danger" icon="el-icon-close" circle @click="delScoreItem(index)" style="margin-left:10px"></el-button>

                        </el-form-item>
                        <el-button type="primary" @click="scoreAddSet" size="small" style="margin-bottom: 10px;marginLeft:60px">+添加积分阶梯</el-button>
                    </el-col>



                </el-card>
            </el-form>
            <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;" @click="store('ruleForm')" size="small">保存
            </el-button>
        </div>

    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {

            return {
                loading: false,
                btnLoading: false,
                cat_show: false,
                show_share_level: false,
                ruleForm: {
                    level: 0,
                    is_apply: 0,
                    is_show_at_center: 1,
                    is_check: 0,
                    is_self_buy: 0,
                    diect: [],
                    commission: {
                        is_percent: 0,
                        list: []
                    },
                    score: {
                        is_percent: 0,
                        list: []
                    },
                    is_show_share_level: 0,
                    rebuy_price_date: 1,
                    is_rebuy: 0,
                    is_team: 0,
                    subsidy_price_date: 1,
                    is_subsidy: 0,
                    computing_method: 0,
                    compute_type: 0,
                    protocol: '',
                    is_circle_repurchase: 0,
                    thaw_goods_ids: [],
                    thaw_goods_list: [],
                    repurchase_compute_type: 0,
                    become_goods_list: [],
                    become_goods_ids: [],
                    become_goods_way: 0,
                    become_order_status: 1,
                },
                rules: {
                    level: [{
                        message: '请选择分销层级',
                        trigger: 'blur',
                        required: true
                    }],
                    is_self_buy: [{
                        message: '请选择分销内购',
                        trigger: 'blur',
                        required: true
                    }],

                }
            }
        },
        mounted: function() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.loading = true;
                request({
                    params: {
                        r: 'circle-distribution/setting/index',
                    },
                    method: 'get'
                }).then(e => {
                    console.log('e:', e);
                    this.loading = false;
                    if (e.data.code == 0) {
                        Object.assign(this.ruleForm, e.data.data);
                        this.ruleForm.commission = e.data.data.commission;
                        this.ruleForm.score = e.data.data.score;

                    }
                }).catch(e => {
                    this.loading = false;
                    this.$message.error(e);
                })
            },
            store(formName) {
                if (this.ruleForm.rebuy_price_date > 28) {
                    this.$message.error('为防止部分月份低于28天，请填写28日及之前');
                    return;
                }
                let title_obj = {};
                this.$nextTick(() => {
                    let elFormItemLabelDom = document.getElementsByClassName("el-form-item__label");
                    for (let i = 0; i < elFormItemLabelDom.length; i++) {
                        let labKey = elFormItemLabelDom[i].getAttribute("for");
                        let labVal = elFormItemLabelDom[i].innerText;
                        title_obj[labKey] = labVal;
                    }
                })
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.btnLoading = true;
                        request({
                            params: {
                                r: 'circle-distribution/setting/index',
                            },
                            method: 'post',
                            data: {
                                basic: this.ruleForm,
                                // title: title_obj,
                            }
                        }).then(e => {
                            this.btnLoading = false;
                            if (e.data.code == 0) {
                                this.$message.success(e.data.msg);
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.$message.error(e);
                            this.btnLoading = false;
                        })
                    } else {
                        this.btnLoading = false;
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            dirctAddSet() {

                let item = {
                    value: 0
                }
                this.ruleForm.commission.list.push(item)

            },
            scoreAddSet() {
                let item_tmp = {
                    value: 0
                }
                this.ruleForm.score.list.push(item_tmp)
            },
            delItem(index) {
                console.log('删除哪一个', index, this.ruleForm.commission.list)

                let commission_list = this.ruleForm.commission.list;
                commission_list.splice(index, 1);
                this.ruleForm.commission.list = commission_list;
            },
            delScoreItem(index) {

                let score_list = this.ruleForm.score.list;
                score_list.splice(index, 1);
                this.ruleForm.score.list = score_list;
            },
            //选择商品
            goodsSelect(param) {
                for (let j in param) {
                    let item = param[j];
                    if (this.ruleForm.thaw_goods_ids.length >= 20) {
                        this.$message.error('指定商品不能大于20个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.ruleForm.thaw_goods_ids) {
                        if (this.ruleForm.thaw_goods_ids[i] == param[j].id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.ruleForm.thaw_goods_ids.push(param[j].id);
                        this.ruleForm.thaw_goods_list.push({
                            id: param[j].id,
                            name: param[j].goods_name,
                            price: param[j].price,
                            cover_pic: param[j].cover_pic,
                        });
                    }
                }
            },
            //删除商品
            deleteGoods(index) {
                this.$confirm('点击确定将删除该商品, 是否继续?', '警告', {
                    type: 'warning'
                }).then(() => {
                    this.ruleForm.thaw_goods_list.splice(index, 1);
                    this.ruleForm.thaw_goods_ids.splice(index, 1);
                })
            },
            becomeGoodsSelect(param) {
                for (let j in param) {
                    let item = param[j];
                    if (this.ruleForm.become_goods_ids.length >= 100) {
                        this.$message.error('指定商品不能大于100个');
                        return;
                    }
                    let flag = true;
                    for (let i in this.ruleForm.become_goods_ids) {
                        if (this.ruleForm.become_goods_ids[i] == item.id) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        if (this.ruleForm.become_goods_ids.indexOf(item.id) == -1) {
                            this.ruleForm.become_goods_ids.push(item.id);
                        }
                        this.ruleForm.become_goods_list.push({
                            id: item.id,
                            name: item.goods_name,
                            cover_pic: item.cover_pic,
                        });
                    }
                }
            },
            deleteBecomeGoods(index) {
                this.ruleForm.become_goods_list.splice(index, 1);
                this.ruleForm.become_goods_ids.splice(index, 1);
            }
        }
    });
</script>
<style>
    .form_box {
        background-color: #f3f3f3;
        padding: 0 0 20px;
    }

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

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

    .goods_desc {
        line-height: 22px;
        width: 70%;
        margin-left: 10px;
    }

    .goods_desc span {
        display: inline-block;
    }

    .goods_box {
        width: 19%;
        border: 1px solid #EBEEF5;
        border-radius: 10px;
        padding: 10px;
        display: flex;
        margin: 10px 0px 10px 15px;
        float: left;
    }

    .ellipsis {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>