RRDJ_APP/application/admin/view/shopro/commission/config/index.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>
    #indexPage {
        border-radius: 10px 10px 0px 0px;
        color: #444;
        font-weight: 500;
        position: relative;
    }

    .el-form-item {
        padding: 0 0 0 100px;
    }

    .el-form-item {
        margin-bottom: 16px;
    }

    .become-register-row {
        display: flex;
        font-size: 13px;
    }

    .become-register-row-title {
        background: #f9f9f9;
        border: none;
    }


    .become-register-row-item {
        width: 260px;
        min-width: 260px;
        padding: 0 20px;
        line-height: 44px;
    }

    .become-register-row-item-center {
        width: 240px;
        min-width: 240px;
    }

    .become-register-row-title .become-register-row-item {
        line-height: 40px;
    }

    .become-register-row-item-last {
        width: 130px;
        min-width: 130px;
        display: flex;
        align-items: center;
    }

    .become_register-contaoner {
        display: flex;
    }

    .become_register_add-button {
        cursor: pointer;
        color: #7438D5;
        width: 60px;
        margin-top: 16px;
        font-size: 13px;
    }

    .become_register_add-button i {
        margin-right: 6px;
    }

    .become_register_delete {
        color: #FF5959;
        cursor: pointer;
    }

    .become-register-row-frist {
        width: 90px;
        color: rgba(0, 0, 0, 0);
    }

    #draggableHandle {
        cursor: move;
        margin-left: 18px;
        font-size: 16px;
    }

    .seat-item {
        display: none;
        padding: 0 20px;
        color: #7438D5;
        height: 44px;
        line-height: 44px;
    }

    .sortable-ghost .seat-item {
        display: block;
    }

    .sortable-ghost .become_register-contaoner {
        display: none;
    }

    .apply_protocol-select {
        color: #7438D5;
        cursor: pointer;
        margin-left: 20px;
    }

    .shopro-submit-container {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: calc(100% - 30px);
        height: 60px;
        padding: 0 16px;
        position: fixed;
        bottom: 0px;
        right: 16px;
        background: #fff;
    }

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

    .shopro-default-button {
        width: 88px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
        border-radius: 5px;
        color: #7438D5;
    }

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

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

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

    .el-form-item__label,
    .el-radio__label,
    .el-input,
    .el-select-dropdown__item {
        font-size: 13px;
    }

    .form-group-area {
        padding-bottom: 10px;
        background: #f00;
        background: #FFFFFF;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .shopro-goods-header {
        height: 40px;
        display: flex;
        align-items: center;
        background: #f9f9f9;
    }

    .shopro-goods-body {
        height: 50px;
        display: flex;
        align-items: center;
        border-top: 1px solid #e6e6e6;
    }

    .shopro-goods-title {
        width: 280px;
        min-width: 280px;
        display: flex;
        height: 50px;
        align-items: center;
        padding: 0 20px;
    }

    .shopro-goods-stock {
        width: 120px;
        min-width: 120px;
    }

    .shopro-goods-opt {
        width: 160px;
        min-width: 160px;
    }

    .shopro-goods-image {
        width: 36px;
        height: 36px;

        border: 1px solid #E6E6E6;
        box-sizing: border-box;
        border-radius: 2px;
        margin-right: 12px
    }

    .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;
    }
    .shopro-form-group-title-href,.shopro-form-group-title-href:hover,.shopro-form-group-title-href:focus{
        color: #7438D5;
    }
    .shopro-form-group-title-agreement{
        height: 38px;
        line-height: 38px;
        background: #F1EBFA;
        font-size: 12px;
        color: #444;
        padding: 0 20px;
        margin:0 20px 20px 32px;
        width: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 4px;
    }
    .shopro-form-group-title-agreement i{
        color: #7438D5;
    }
    .shopro-form-group-title-1{
        margin-bottom: 10px;
    }
    .shopro-goods-id{
        width: 70px;
        padding: 0 10px;
        text-align: center;
        flex-shrink: 0;
    }
    .form-group-area-last{
        padding-bottom: 20px;
    }
    .become-register-row-item-esp{
        line-height: 32px;
        display: flex;
        align-items: center;
    }
    .el-dialog{
        width: 900px;
    }
    .el-dialog__wrapper{
        background: rgba(43, 43, 43, 0.05);
        backdrop-filter: blur(2px);
    }
    .configis-upgrade-image{
        width: 900px;
        height: 580px;
        background: #FFFFFF;
        border-radius: 4px;
        position: relative;
    }
    .configis-upgrade-image img{
        width: 100%;
        height: 100%;
    }
    .el-dialog__body{
        padding: 0;
    }
    .el-dialog__header{
        height: 0;
        padding: 0;
    }
    .configis-upgrade-button{
        position: absolute;
        bottom: 162px;
        right: 360px;
    }
    .configis-upgrade-button-upgrade{
        width: 110px;
        height: 34px;
        background: #8322FF;
        border-radius: 2px;
        justify-content: center;
        font-weight: bold;
        font-size: 12px;
        color: #FFFFFF;
        margin-left: 42px;
        cursor: pointer;
    }
    .configis-upgrade-button-upgrade .icon-right{
        margin-left: 12px;
        width: 18px;
        height: 18px;
    }
    .configis-upgrade-button-refresh{
        color: #86818E;
        font-size: 12px;
        cursor: pointer;
    }
    .configis-upgrade-button-refresh .el-icon-refresh-right{
        margin-right: 6px;
        font-size: 14px;
    }
    .configis-upgrade-close{
        position: absolute;
        top: 53px;
        right: 58px;
        font-size: 20px;
        color: #7F7A87;
        cursor: pointer;
    }

    [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>
<script src="__CDN__/assets/addons/shopro/libs/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/vuedraggable.js"></script>
<div id="indexPage" v-cloak v-loading="isAjax">
    <el-form :model="configData" ref="configData" label-width="148px" v-if="configData">
        <div class="form-group-area">
            <div class="shopro-form-group-title shopro-form-group-title-1">
                <div class="shopro-form-group-title-line"></div>基础设置
            </div>
            <div class="shopro-form-group-title-agreement" v-if="tipshow">
                <div>
                    设置分销时，请先了解<a class="shopro-form-group-title-href" href="https://www.spp.gov.cn/flfg/gfwj/201311/t20131122_64638.shtml" target="_blank" rel="noopener noreferrer">《关于办理组织领导传销活动刑事案件适用法律若干问题的意见》</a>
                </div>
                <i class="el-icon-close" @click="tipClose"></i>
            </div>
            <el-form-item label="分销层级：">
                <el-radio-group v-model="configData.commission_level">
                    <el-radio label="0">关闭</el-radio>
                    <el-radio label="1">一级</el-radio>
                    <el-radio label="2">二级</el-radio>
                    <el-radio label="3">三级</el-radio>
                </el-radio-group>
                <div class="title-tip">
                    默认佣金比例请到 分销等级 进行设置
                </div>
            </el-form-item>
            <el-form-item label="分销内购：">
                <el-radio-group v-model="configData.self_buy">
                    <el-radio label="0">关闭</el-radio>
                    <el-radio label="1">开启</el-radio>
                </el-radio-group>
                <div class="title-tip">
                    内购优惠开启后，分销商自己购买时，下单可以给自己返佣
                </div>
            </el-form-item>
            <el-form-item label="分销商锁定下线条件：">
                <el-radio-group v-model="configData.invite_lock">
                    <el-radio label="share">点击分享链接</el-radio>
                    <el-radio label="pay">首次支付</el-radio>
                    <el-radio label="agent" :disabled="configData.become_agent.type=='child_user_count_1'">成为子分销商</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="分销商审核：">
                <el-radio-group v-model="configData.agent_check">
                    <el-radio label="0">不需要</el-radio>
                    <el-radio label="1">需要</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="越级升级：">
                <el-radio-group v-model="configData.upgrade_jump">
                    <el-radio label="0">不允许</el-radio>
                    <el-radio label="1">允许</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="升级审核：">
                <el-radio-group v-model="configData.upgrade_check">
                    <el-radio label="0">不需要</el-radio>
                    <el-radio label="1">需要</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="升级进度：">
                <el-radio-group v-model="configData.upgrade_display">
                    <el-radio label="0">不显示</el-radio>
                    <el-radio label="1">显示</el-radio>
                </el-radio-group>
            </el-form-item> -->
        </div>
        <div class="form-group-area">
            <div class="shopro-form-group-title">
                <div class="shopro-form-group-title-line"></div>默认分销商设置
            </div>
            <el-form-item label="成为分销商条件：">
                <el-radio-group v-model="configData.become_agent.type" @change="changeBecomeAgentType">
                    <el-radio label="apply">自助申请</el-radio>
                    <el-radio label="goods">购买任意商品</el-radio>
                    <el-radio label="consume">消费累计</el-radio>
                    <!-- <el-radio label="child_user_count_1" :disabled="configData.invite_lock=='agent'">邀请下级用户</el-radio> -->
                </el-radio-group>
            </el-form-item>
            <el-collapse-transition>
                <div v-if="configData.become_agent.type!='apply'">
                    <el-form-item label="选择商品：" v-if="configData.become_agent.type=='goods'">
                        <div class="display-flex">
                            <div class="goods-add" style="margin: 5px 0;" @click="addGoods">{{configData.become_agent.value?'重新选择':'选择商品'}}
                            </div>
                            <!-- <div style="margin-left: 20px;">{{configData.become_agent.value}}</div> -->
                        </div>
                        <div style="max-width: 632px;border: 1px solid #e6e6e6;margin-top: 9px;" v-if="configData.become_agent.value">
                            <div class="shopro-goods-header">
                                <div class="shopro-goods-id">ID</div>
                                <div class="shopro-goods-title">商品信息</div>
                                <div class="shopro-goods-stock">库存</div>
                                <div class="shopro-goods-opt">操作</div>
                            </div>
                            <div>
                                <div class="shopro-goods-body" v-if="goods" v-for="(goods,gindex) in goodsDetail">
                                    <div class="shopro-goods-id">
                                        {{goods.id}}
                                    </div>
                                    <div class="shopro-goods-title">
                                        <div class="shopro-goods-image">
                                            <el-image v-if="goods.image" :src="Fast.api.cdnurl(goods.image)"
                                                fit="contain">
                                                <div slot="error" class="image-slot">
                                                    <i class="el-icon-picture-outline"></i>
                                                </div>
                                            </el-image>
                                        </div>
                                        <div>
                                            <div class="ellipsis-item" style="width: 180px;height: 20px;line-height: 20px;">{{goods.title}}</div>
                                            <div style="height: 20px;line-height: 20px;">￥{{goods.price}}</div>
                                        </div>
                                    </div>
                                    <div class="shopro-goods-stock">
                                        {{goods.stock}}
                                    </div>
                                    <div class="shopro-goods-opt">
                                        <span class="become_register_delete" @click="deleteGoods(gindex)">删除</span>
                                    </div>
                                </div>
                                <div style="padding: 0 20px;" v-if="!goodsDetail">
                                    商品不存在或已下架
                                </div>
                            </div>
                            <!-- <div class="shopro-goods-body" v-if="!configData.become_agent.value">
                                <div class="shopro-goods-add-button" @click="addGoods">
                                    <i class="el-icon-plus"></i>选择商品
                                </div>
                            </div> -->
                        </div>
                    </el-form-item>
                    <el-form-item label="消费累计金额：" v-if="configData.become_agent.type=='consume'">
                        <div class="display-flex" style="width: 320px;height: 40px;">
                            <el-input v-model="configData.become_agent.value" size="small" type="number" v-enter-number>
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item label="邀请下级用户满：" v-if="configData.become_agent.type=='child_user_count_1'">
                        <div class="display-flex" style="width: 320px;height: 40px;">
                            <el-input v-model="configData.become_agent.value" size="small" type="number">
                                <template slot="append">人</template>
                            </el-input>
                        </div>
                    </el-form-item>
                </div>
            </el-collapse-transition>
            <el-form-item label="完善资料：">
                <el-radio-group v-model="needAgentForm" @change="changeAgentForm">
                    <el-radio label="0" :disabled="configData.become_agent.type=='apply'">不需要</el-radio>
                    <el-radio label="1">需要</el-radio>
                </el-radio-group>
                <div class="title-tip">
                    成为分销商条件如果选择自助申请，完善资料必须选择需要
                </div>
            </el-form-item>
            <el-collapse-transition>
                <div v-if="needAgentForm == 1">
                    <el-form-item label="表单背景图：">
                        <div class="bgimage-add-container" @click="bgimageAdd">
                            <el-image v-if="configData.agent_form.background_image"
                                :src="Fast.api.cdnurl(configData.agent_form.background_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="!configData.agent_form.background_image">
                                <i class="el-icon-plus"></i>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="表单内容：">
                        <div style="max-width: 632px;">
                            <div style="border: 1px solid #e6e6e6;">
                                <div class="become-register-row become-register-row-title">
                                    <div class="become-register-row-item">表单类型</div>
                                    <div class="become-register-row-item become-register-row-item-center">表单名称</div>
                                    <div class="become-register-row-item become-register-row-item-last">操作</div>
                                </div>
                                <draggable :list="configData.agent_form.content" v-bind="$attrs"
                                    :options="defaultOption"
                                    :style="{borderTop: configData.agent_form.content && configData.agent_form.content.length>0?'1px solid #e6e6e6':''}">
                                    <div class="become-register-row"
                                        v-for="(item,rindex) in configData.agent_form.content">
                                        <div class="seat-item">
                                            可放在此处
                                        </div>
                                        <div class="become_register-contaoner">
                                            <div class="become-register-row-item become-register-row-item-esp">
                                                <el-select v-model="item.type" size="small">
                                                    <el-option v-for="item in become_register_options" :key="item.value" :label="item.label" :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </div>
                                            <div class="become-register-row-item become-register-row-item-center become-register-row-item-esp">
                                                <el-input v-model="item.name" size="small"></el-input>
                                            </div>
                                            <div class="become-register-row-item become-register-row-item-last">
                                                <span class="become_register_delete"
                                                    @click="becomeRegisterDelete(rindex)">删除</span>
                                                <i id="draggableHandle" class="el-icon-rank"></i>
                                                <!-- <img
                                                    src="/assets/addons/shopro/img/commission/move.png"> -->
                                            </div>
                                        </div>
                                    </div>
                                </draggable>
                            </div>
                            <div>
                                <div class="become_register_add-button" @click="becomeRegisterAdd">
                                    <i class="el-icon-plus"></i>追加
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item label="申请协议：">
                        <el-radio-group v-model="needApplyProtocol" @change="changeApplyProtocol">
                            <el-radio label="0">不显示</el-radio>
                            <el-radio label="1">显示</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-collapse-transition>
                        <div v-if="needApplyProtocol == 1">
                            <el-form-item label="协议内容：">
                                <div class="display-flex">
                                    <div style="width: 150px;line-height: 32px;">
                                        <el-input v-model="configData.apply_protocol.name" size="small"></el-input>
                                    </div>
                                    <div class="apply_protocol-select" @click="chooseRichText">选择</div>
                                </div>
                            </el-form-item>
                        </div>
                    </el-collapse-transition>
                </div>
            </el-collapse-transition>
        </div>
        <div class="form-group-area form-group-area-last">
            <div class="shopro-form-group-title">
                <div class="shopro-form-group-title-line"></div>结算条件
            </div>
            <el-form-item label="商品结算方式：">
                <el-radio-group v-model="configData.commission_price_type">
                    <el-radio label="goods_price">商品价</el-radio>
                    <el-radio label="pay_price">实际支付价</el-radio>
                </el-radio-group>
                <div class="title-tip">
                    商品价: 商品实际售价/规格价，实际支付价: 实际支付的费用(不含运费)
                </div>
            </el-form-item>
            <el-form-item label="佣金结算方式：">
                <el-radio-group v-model="configData.commission_event">
                    <el-radio label="payed">支付后结算</el-radio>
                    <el-radio label="confirm">确认收货结算</el-radio>
                    <el-radio label="finish">订单完成结算</el-radio>
                    <el-radio label="admin">手动打款</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="退款扣除佣金：">
                <el-radio-group v-model="configData.refund_commission_reward">
                    <el-radio label="0">不扣除</el-radio>
                    <el-radio label="1">扣除</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="退款扣除分销业绩：">
                <el-radio-group v-model="configData.refund_commission_order">
                    <el-radio label="0">不扣除</el-radio>
                    <el-radio label="1">扣除</el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
    </el-form>
    <div class="shopro-submit-container">
        <div class="shopro-default-button" @click="formRestore">重置</div>
        <div class="shopro-submit-button" @click="formSubmit">保存</div>
    </div>
    <el-dialog
        :visible.sync="configis_upgrade">
        <div class="configis-upgrade-image">
            <img src="/assets/addons/shopro/img/commission/upgrade-config.png">
            <div class="configis-upgrade-close" @click="operation('close')"><i class="el-icon-error"></i></div>
            <div class="configis-upgrade-button display-flex">
                <div class="configis-upgrade-button-refresh" @click="operation('refresh')"><i class="el-icon-refresh-right"></i>刷新</div>
                <div class="configis-upgrade-button-upgrade display-flex" @click="operation('upgrade')">去升级
                    <img class="icon-right" src="/assets/addons/shopro/img/commission/icon-right.png">
                </div>
            </div>
        </div>
    </el-dialog>
</div>