RRDJ_APP/application/admin/view/shopro/commission/level/add.html

<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
<style>
    #detailPage {
        border-radius: 10px;
        color: #444;
        font-weight: 500;
        padding: 0px 10px 60px;
        position: relative;
    }

    .el-form-item__label,
    .el-form-item__content {
        line-height: 32px;
    }

    .el-form-item {
        margin-bottom: 14px;
        /* padding-left: 50px; */
    }

    .title-tip {
        color: #999;
        line-height: 12px;
        font-size: 12px;
        font-weight: 400;
        margin-top: 10px;
    }

    .commission-rate,
    .level-name {
        width: 200px;
    }

    .upgrade-condition-item {
        display: inline-block;
        margin-bottom: 10px;
        padding: 0 10px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        margin-right: 14px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
    }

    .upgrade-type-container {
        margin-bottom: 20px;
    }

    .upgrade-type-title {
        margin-right: 20px;
    }

    .upgrade-condition-item-active {
        border-color: #7438D5;
        color: #7438D5;
    }

    .condition-delete {
        margin-left: 20px;
        cursor: pointer;
        display: inline-block;
        color: #FE7C76;
        font-size: 20px;
    }

    .goods-header {
        background: #f9f9f9;
        height: 40px;
        line-height: 40px;
    }

    .goods-item-1 {
        width: 280px;
        padding: 0 20px;
    }

    .goods-item-2 {
        width: 100px;
        padding: 0 20px;
    }

    .goods-item-3 {
        width: 100px;
    }

    .goods-delete {
        cursor: pointer;
        color: #FF5959;
    }

    .goods-image {
        width: 40px;
        height: 40px;
        margin-right: 20px;
        border: 1px solid #e6e6e6;
    }

    .goods-add {
        width: 80px;
        height: 30px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
        background: #7438D5;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .el-image {
        width: 100%;
        height: 100%;
    }

    .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .shopro-submit-container {
        display: flex;
        justify-content: flex-end;
        position: fixed;
        right: 40px;
        bottom: 0px;
        height: 60px;
    }

    .shopro-submit-button {
        width: 88px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: #7438D5;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        border-radius: 5px;
    }

    .goods-title,
    .goods-price {
        line-height: 13px;
    }

    .goods-price {
        color: #7438D5;
    }

    .goods-title {
        margin-bottom: 13px;
    }

    .goods-body-item {
        border-top: 1px solid #e6e6e6;
        height: 50px;
        line-height: 50px;
    }

    .active-icon {
        width: 22px;
        height: 22px;
        position: absolute;
        right: -1px;
        top: -1px;
    }

    .shopro-level-item {
        width: 70px;
        height: 32px;
        line-height: 32px;
        border-radius: 4px;
        border: 1px solid #e6e6e6;
        margin-right: 12px;
        text-align: center;
        font-size: 13px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .shopro-level-item-active {
        border-color: #7438D5;
        color: #7438D5;
    }

    .shopro-level-item-disable {
        background: #eee;
        border-color: #e6e6e6;
        cursor: auto;
    }

    .el-dialog__body {
        padding: 10px 20px;
    }

    .el-dialog__footer {
        padding: 0;
    }

    .bgimage-add-container {
        border: 1px solid #e6e6e6;
        width: 80px;
        height: 80px;
        border-radius: 5px;
    }

    .bgimage-add {
        width: 80px;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #999;
    }

    .shopro-goods-add-button {
        cursor: pointer;
        color: #7438D5;
        font-size: 13px;
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
    }

    .shopro-goods-add-button i {
        margin-right: 6px;
    }

    .child-agent-count-add {
        width: 80px;
        height: 32px;
        background: #FFFFFF;
        border: 1px solid #7438D5;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #7438D5;
        margin-bottom: 14px;
        cursor: pointer;
    }

    .child-agent-count-add i {
        margin-right: 6px;
    }

    .child-agent-count-item {
        margin-bottom: 14px;
    }

    .child-agent-count-select {
        width: 150px;
    }

    .child-agent-count-man {
        margin-left: 30px;
    }

    .child-agent-count-input {
        width: 90px;
        margin-left: 20px;
    }

    .level-tip {
        margin-bottom: 20px;
        border-radius: 5px;
        background-color: #F1EBFA;
        padding: 16px;
    }
    .el-input-group__append{
        line-height: 30px;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/shopro.js"></script>
<div id="detailPage" v-cloak>
    <el-form :model="formData" ref="formData" label-width="168px" v-if="formData">
        <div class="level-tip">
            新增或编辑等级后，请及时在分销商品中完善对应的佣金规则
        </div>
        <div>
            <div class="shopro-form-group-title">
                <div class="shopro-form-group-title-line"></div>等级佣金比例
            </div>
            <el-form-item label="等级权重：" prop="level">
                <div class="display-flex" style="width: 410px;flex-wrap: wrap;">
                    <tempalte v-if="optType=='edit'">
                        <div class="shopro-level-item shopro-level-item-disable" v-if="formData.level!=1">
                            一级
                        </div>
                        <div class="shopro-level-item shopro-level-item-active" v-else>
                            <img class="active-icon" src="/assets/addons/shopro/img/goods/active.png">
                            一级
                        </div>
                    </tempalte>
                    <tempalte v-if="optType=='add'">
                        <div class="shopro-level-item shopro-level-item-disable">
                            一级
                        </div>
                    </tempalte>
                    <template v-for="(levelItem,levelIndex) in levelList" v-if="levelIndex>0 && formData.level!=1">
                        <div class="shopro-level-item" v-if="existLevel.includes(Number(levelItem.value))"
                            :class="[(existLevel.includes(Number(levelItem.value)) && formData.level!=levelItem.value)?'shopro-level-item-disable':'',formData.level==levelItem.value?'shopro-level-item-active':'']">
                            <img class="active-icon"
                                v-if="existLevel.includes(Number(levelItem.value)) && formData.level==levelItem.value"
                                src="/assets/addons/shopro/img/goods/active.png">
                            {{levelItem.title}}
                        </div>
                        <div class="shopro-level-item" v-else
                            :class="formData.level==levelItem.value?'shopro-level-item-active':''"
                            @click="selectLevel(levelIndex)">
                            <img class="active-icon"
                                v-if="formData.level==levelItem.value?'shopro-level-item-active':''"
                                src="/assets/addons/shopro/img/goods/active.png">
                            {{levelItem.title}}
                        </div>
                    </template>
                </div>
            </el-form-item>
            <el-form-item label="等级名称：" prop="name">
                <div class="level-name">
                    <el-input v-model="formData.name" placeholder="请输入等级名称" maxlength="6" size="small" show-word-limit>
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item label="等级徽章：" prop="image">
                <div class="bgimage-add-container" @click="bgimageAdd">
                    <el-image v-if="formData.image" :src="Fast.api.cdnurl(formData.image)" fit="contain">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                    <div class="bgimage-add" v-if="!formData.image">
                        <i class="el-icon-plus"></i>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="一级(自购)佣金比例：" prop="commission_1">
                <div class="commission-rate">
                    <el-input v-model="formData.commission_rules.commission_1" type="number" placeholder="如不填写默认为0"
                        size="small">
                        <template slot="append">%</template>
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item label="二级佣金比例：" prop="commission_2">
                <div class="commission-rate">
                    <el-input v-model="formData.commission_rules.commission_2" type="number" placeholder="如不填写默认为0"
                        size="small">
                        <template slot="append">%</template>
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item label="三级佣金比例：" prop="commission_3">
                <div class="commission-rate">
                    <el-input v-model="formData.commission_rules.commission_3" type="number" placeholder="如不填写默认为0"
                        size="small">
                        <template slot="append">%</template>
                    </el-input>
                </div>
            </el-form-item>
        </div>
        <div v-if="formData.level!=1">
            <div class="shopro-form-group-title">
                <div class="shopro-form-group-title-line"></div>添加升级条件
            </div>
            <el-form-item label="升级方式：" prop="upgrade_type">
                <div>
                    <el-radio-group v-model="formData.upgrade_type">
                        <el-radio :label="0">满足以下任意条件</el-radio>
                        <el-radio :label="1">满足以下全部条件</el-radio>
                    </el-radio-group>
                </div>
            </el-form-item>
            <el-form-item>
                <div>
                    <div>
                        <div class="upgrade-condition-item" :class="upgrade.selected?'upgrade-condition-item-active':''"
                        v-for="(upgrade,upgradeIndex) in upgradeCondition" v-if="upgradeIndex<4" @click="selectCondition(upgradeIndex)">
                            <img class="active-icon" v-if="upgrade.selected"
                                src="/assets/addons/shopro/img/goods/active.png">
                            <span>{{upgrade.title}}</span>
                        </div>
                    </div>
                    <div>
                        <div class="upgrade-condition-item" :class="upgrade.selected?'upgrade-condition-item-active':''"
                        v-for="(upgrade,upgradeIndex) in upgradeCondition" v-if="upgradeIndex>3 && upgradeIndex<8" @click="selectCondition(upgradeIndex)">
                            <img class="active-icon" v-if="upgrade.selected"
                                src="/assets/addons/shopro/img/goods/active.png">
                            <span v-if="upgradeIndex!=4">{{upgrade.title}}</span>
                            <el-popover placement="bottom" trigger="hover"
                                content="包含直推分销金额和内购分销金额">
                                <span v-if="upgradeIndex==4" slot="reference">{{upgrade.title}}</span>
                            </el-popover>
                        </div>
                    </div>
                    <div>
                        <div class="upgrade-condition-item" :class="upgrade.selected?'upgrade-condition-item-active':''"
                        v-for="(upgrade,upgradeIndex) in upgradeCondition" v-if="upgradeIndex>7 && upgradeIndex<12" @click="selectCondition(upgradeIndex)">
                            <img class="active-icon" v-if="upgrade.selected"
                                src="/assets/addons/shopro/img/goods/active.png">
                                <span v-if="upgradeIndex!=8">{{upgrade.title}}</span>
                                <el-popover placement="bottom" trigger="hover"
                                    content="包含直推分销订单和内购分销订单">
                                    <span v-if="upgradeIndex==8" slot="reference">{{upgrade.title}}</span>
                                </el-popover>
                        </div>
                    </div>
                    <div>
                        <div class="upgrade-condition-item" :class="upgrade.selected?'upgrade-condition-item-active':''"
                        v-for="(upgrade,upgradeIndex) in upgradeCondition" v-if="upgradeIndex>11 && upgradeIndex<15" @click="selectCondition(upgradeIndex)">
                            <img class="active-icon" v-if="upgrade.selected"
                                src="/assets/addons/shopro/img/goods/active.png">
                            <span>{{upgrade.title}}</span>
                        </div>
                    </div>
                    <div>
                        <div class="upgrade-condition-item" :class="upgrade.selected?'upgrade-condition-item-active':''"
                        v-for="(upgrade,upgradeIndex) in upgradeCondition" v-if="upgradeIndex>14" @click="selectCondition(upgradeIndex)">
                            <img class="active-icon" v-if="upgrade.selected"
                                src="/assets/addons/shopro/img/goods/active.png">
                            <span>{{upgrade.title}}</span>
                        </div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item :label="upgrade.title+'：'" v-if="upgrade.selected"
                v-for="(upgrade,uindex) in upgradeCondition" :prop="upgrade.key">
                <div class="display-flex"
                    v-if="upgrade.key!='child_agent_level' && upgrade.key!='child_agent_level_1'">
                    <div class="commission-rate">
                        <el-input v-model="upgrade.value" type="number" size="small">
                            <template slot="append"
                                v-if="upgrade.key=='total_consume' || upgrade.key=='child_order_money' || upgrade.key=='child_order_money_1' || upgrade.key=='child_order_money_2' || upgrade.key=='order_money'">元</template>
                            <template slot="append"
                                v-if="upgrade.key=='child_agent_count' || upgrade.key=='child_agent_count_1' || upgrade.key=='child_agent_count_2' || upgrade.key=='child_user_count' || upgrade.key=='child_user_count_1' || upgrade.key=='child_user_count_2'">人</template>
                            <template slot="append"
                                v-if="upgrade.key=='order_count' || upgrade.key=='child_order_count_1' || upgrade.key=='child_order_count_2' || upgrade.key=='child_order_count'">单</template>
                        </el-input>
                    </div>
                    <i class="condition-delete el-icon-circle-close" @click="conditionDelete(uindex)"></i>
                </div>
                <div
                    v-if="upgrade.key=='child_agent_level' || upgrade.key=='child_agent_level_1'">
                    <div>
                        <div class="display-flex child-agent-count-item" v-for="(countItem,cindex) in upgrade.value">
                            <div class="child-agent-count-select">
                                <el-select v-model="countItem.level" placeholder="请选择分销商等级" no-data-text="等级已选择完毕" size="small">
                                    <el-option v-for="item in levelOptions" :key="item.level"
                                        :label="item.name+'(等级'+item.level+')'" :value="item.level"
                                        v-if="Number(item.level)<=Number(formData.level) && Number(item.level)!=Number(editId)">
                                    </el-option>
                                </el-select>
                            </div>
                            <div class="child-agent-count-man">满</div>
                            <div class="child-agent-count-input">
                                <el-input v-model="countItem.count" type="number" size="small">
                                    <template slot="append">人</template>
                                </el-input>
                            </div>
                            <i class="condition-delete el-icon-circle-close" @click="childAgentCountDelete(uindex,cindex)"></i>
                        </div>
                    </div>
                    <div class="child-agent-count-add" @click="childAgentCountAdd(uindex)"
                        v-if="!formData.level || upgrade.value.length<selectLevelOptionsLength">
                        <i class="el-icon-plus"></i>添加</div>
                </div>
            </el-form-item>
        </div>
    </el-form>
    <div class="shopro-submit-container">
        <div class="shopro-submit-button" @click="formSubmit('formData')">确定</div>
    </div>
    <el-dialog title="提示" :visible.sync="deleteDialog" width="400" :before-close="deleteDialogClose">
        <div class="display-flex" style="justify-content: space-between;">
            <div>分销商移入其他等级</div>
            <el-select v-model="moveLevel" placeholder="请选择" size="small">
                <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="deleteDialogClose('define')">确 定</el-button>
        </span>
    </el-dialog>
</div>