503 行
19 KiB
HTML
503 行
19 KiB
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> |