Skip to content

E
ElectricitySheep
Commit 72696b9b authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

update

parent 1fe2099a
Hide whitespace changes
Inline Side-by-side
Showing with 1220 additions and 142 deletions
src/assets/css/common.css
View file @ 72696b9b
......@@ -82,3 +82,12 @@
.blue{
color:#409EFF;
}
.cred{
color: rgb(245, 108, 108);
}
.el-form-item{
position: relative;
}
.center{
text-align:center;
}
src/components/UserMan/baseSet.vue
View file @ 72696b9b
<template>
<div class="baseSet">
<div v-loading="loading" class="baseSet">
<div class="head-title">
<span @click="goUrl" class="point">基础设置</span>
</div>
......@@ -11,151 +11,191 @@
<span>分销设置</span>
</div>
<div>
<el-form-item label="分销层级" prop="name">
<el-radio v-model="val" label="1">关闭</el-radio>
<el-radio v-model="val" label="2">一级分销</el-radio>
<el-radio v-model="val" label="2">二级分销</el-radio>
<el-radio v-model="val" label="2">三级分销</el-radio>
<el-form-item label="分销层级" prop="DistributorTier">
<el-radio v-model="addMsg.DistributorTier" :label="0">关闭</el-radio>
<el-radio v-model="addMsg.DistributorTier" :label="1">一级分销</el-radio>
<el-radio v-model="addMsg.DistributorTier" :label="2">二级分销</el-radio>
<el-radio v-model="addMsg.DistributorTier" :label="3">三级分销</el-radio>
</el-form-item>
<el-form-item class="discount commonLabel" label="分销内购" prop="name">
<el-form-item class="nocommonLabel" label="分销内购" prop="InPurchasing">
<el-tooltip class="item" effect="dark" content="开启分销内购，分销商自己购买商品，享受一级佣金，上级享受二级佣金，上上级享受三级佣金" placement="top">
<i class="elzk el-tooltip el-icon-info"></i>
<i class="topelzk elzk el-tooltip el-icon-info"></i>
</el-tooltip>
<el-switch
v-model="addMsg.name"
v-model="addMsg.InPurchasing"
active-color="#409EFF"
active-value="100"
inactive-value="0">
:active-value="1"
:inactive-value="2">
</el-switch>
</el-form-item>
<el-form-item label="成为下线的条件" prop="ReferralsCondition">
<el-radio v-for="(item,index) in ReferralsList" v-model="addMsg.ReferralsCondition" :key="index" :label="item.Id">{{item.Name}}</el-radio>
</el-form-item>
<el-form-item label="申请成为分销商" prop="ApplyFor">
<el-radio v-for="(item,index) in EnumList" v-model="addMsg.ApplyFor" :key="index" :label="item.Id">{{item.Name}}</el-radio>
</el-form-item>
<el-form-item label="成为分销商的条件" prop="DistributorCondition">
<el-radio v-for="(item,index) in conditionList" v-model="addMsg.DistributorCondition" :key="index" :label="item.Id">{{item.Name}}</el-radio>
</el-form-item>
</div>
</el-card>
<el-form-item label="会员等级" prop="name">
<el-select style="width:293px;" size="small" v-model="addMsg.name" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="等级名称" prop="name">
<el-input style="width:293px;" size="small" v-model="addMsg.name"></el-input>
</el-form-item>
<el-form-item class="discount commonLabel" label="折扣" prop="name">
<el-tooltip class="item" effect="dark" content="请输入0.1~10之间的数字" placement="top-start">
<el-card class="box-card" style="margin-top:10px">
<div slot="header" class="clearfix">
<span>分销佣金设置</span>
<el-tooltip class="item" effect="dark" content="需要开启分销层级，才能设置对应的分销佣金" placement="top">
<i class="elzk el-tooltip el-icon-info"></i>
</el-tooltip>
<el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入内容" v-model="addMsg.name" class="input-with-select">
<el-button slot="append">折</el-button>
</el-input>
</el-form-item>
<el-form-item label="会员状态" prop="name">
<el-switch
v-model="addMsg.name"
active-color="#409EFF"
active-value="100"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item label="会员图标" prop="name">
<el-button @click="openChangeDig" size="small">选择文件</el-button>
<div><img style="width:80px;height:80px" src="../../assets/img/default.png" alt=""></div>
</el-form-item>
<el-form-item label="会员背景色" prop="name">
<el-button @click="openChangeDig" size="small">选择文件</el-button>
<div><img style="width:80px;height:80px" src="../../assets/img/default.png" alt=""></div>
</el-form-item>
<el-form-item label="累计金额自动升级">
<el-switch
v-model="addMsg.name"
active-color="#409EFF"
active-value="100"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item class="commonLabel" label="升级条件" prop="name">
<el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入内容" v-model="addMsg.name" class="input-with-select">
<template slot="prepend">累计完成订单金额满</template>
<el-button slot="append">元</el-button>
</el-input>
</el-form-item>
<el-form-item label="会员是否可购买">
<el-switch
v-model="addMsg.name"
active-color="#409EFF"
active-value="100"
inactive-value="0">
</el-switch>
</el-form-item>
<el-form-item class="commonLabel" label="购买价格" prop="name">
<el-input style="width:293px;" type="number" min="0.1" size="small" placeholder="请输入购买价格" v-model="addMsg.name" class="input-with-select">
<el-button slot="append">元</el-button>
</el-input>
</el-form-item>
<el-form-item label="h会员权益(多条)">
<div style="width:700px;">
<el-table class="setTable"
:data="tableData"
border
style="margin-bottom:20px">
<el-table-column
prop="ID"
width="180px"
label="权益标题">
<template slot-scope="scope">
<el-input style="width:159px" size="small" v-model="val" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
<el-table-column
prop="address"
width="180px"
label="权益图标">
<template slot-scope="scope">
<el-button @click="openChangeDig" size="small">选择图片</el-button>
<img style="margin-left: 10px;width:50px;height:50px" src="../../assets/img/default.png" alt="">
</template>
</el-table-column>
<el-table-column
prop="address"
width="500px"
label="权益内容">
<template slot-scope="scope">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="val">
</el-input>
</template>
</el-table-column>
<el-table-column
prop="address"
width="80px"
label="操作">
<template>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<img style="width:32px;height:32px" src="../../assets/img/userman/del.png" alt="">
</el-tooltip>
</template>
</el-table-column>
</el-table>
</div>
<div>
<i class="el-icon-plus" style="font-weight: bolder;margin-left:5px;color:#409EFF"></i>
<span style="color: rgb(53, 53, 53);font-size: 14px;">新增权益</span>
</div>
</el-form-item>
<el-form-item label="会员规则" prop="name">
</div>
<div>
<el-form-item v-if="addMsg.DistributorTier==1 || addMsg.DistributorTier==2 || addMsg.DistributorTier==3" label="分销佣金类型" prop="DistributorTier">
<el-radio v-model="addMsg.DistributorCommissionType" :label="1">百分比</el-radio>
<el-radio v-model="addMsg.DistributorCommissionType" :label="2">固定金额</el-radio>
</el-form-item>
<el-form-item v-if="addMsg.DistributorTier==1 || addMsg.DistributorTier==2 || addMsg.DistributorTier==3" class="commonLabel" label="一级佣金" >
<el-input style="width:293px;" type="number" min="1" size="small" placeholder="请输入" v-model="addMsg.OneCommission" class="input-with-select">
<el-button slot="append">
<span v-if="addMsg.DistributorCommissionType==1">%</span>
<span v-if="addMsg.DistributorCommissionType==2">元</span>
</el-button>
</el-input>
</el-form-item>
<el-form-item v-if="addMsg.DistributorTier==2 || addMsg.DistributorTier==3" class="commonLabel" label="二级佣金">
<el-input style="width:293px;" type="number" min="1" size="small" placeholder="请输入" v-model="addMsg.TwoCommission" class="input-with-select">
<el-button slot="append">
<span v-if="addMsg.DistributorCommissionType==1">%</span>
<span v-if="addMsg.DistributorCommissionType==2">元</span>
</el-button>
</el-input>
</el-form-item>
<el-form-item v-if="addMsg.DistributorTier==3" class="commonLabel" label="三级佣金">
<el-input style="width:293px;" type="number" min="1" size="small" placeholder="请输入" v-model="addMsg.ThreeCommission" class="input-with-select">
<el-button slot="append">
<span v-if="addMsg.DistributorCommissionType==1">%</span>
<span v-if="addMsg.DistributorCommissionType==2">元</span>
</el-button>
</el-input>
</el-form-item>
<el-form-item v-if="addMsg.DistributorTier==1 || addMsg.DistributorTier==2 || addMsg.DistributorTier==3" label="佣金是否提完" prop="IsCommissionResidue">
<el-radio v-model="addMsg.IsCommissionResidue" :label="1">是</el-radio>
<el-radio v-model="addMsg.IsCommissionResidue" :label="2">否</el-radio>
</el-form-item>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="box-card" style="margin-top:10px">
<div slot="header" class="clearfix">
<span>分销商等级设置</span>
<el-tooltip class="item" effect="dark" content="需要开启分销层级，才能设置对应的分销佣金" placement="top">
<i class="elzk el-tooltip el-icon-info"></i>
</el-tooltip>
</div>
<div>
<el-form-item label="分销商等级入口">
<el-switch
v-model="addMsg.GradeEntrance"
active-color="#409EFF"
:active-value="1"
:inactive-value="2">
</el-switch>
<p style="margin-left:-60px" class="blue f12">
<span @click="czjfDig=true" class="point">查看图例</span>
</p>
</el-form-item>
</div>
</el-card>
<el-card class="box-card" style="margin-top:10px">
<div slot="header" class="clearfix">
<span>提现设置</span>
</div>
<div>
<el-form-item class="nocommonLabel" label="提现方式" prop="WithdrawWayList">
<el-tooltip class="item" effect="dark" content="自动打款支付，需要申请相应小程序的相应功能，例如：微信需要申请企业付款到零钱功能" placement="top">
<i class="topelzk elzk el-tooltip el-icon-info"></i>
</el-tooltip>
<el-checkbox-group v-model="addMsg.WithdrawWayList">
<el-checkbox v-for="item in WithdrawWayList" :label="item.Id" :key="item.id">{{item.Name}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item class="commonLabel" label="最少提现额度" prop="MinimumWithdrawalLimit">
<el-input v-model="addMsg.MinimumWithdrawalLimit" style="width:293px;" type="number" min="1" size="small" placeholder="请输入" class="input-with-select">
<el-button slot="append">元</el-button>
</el-input>
</el-form-item>
<el-form-item class="discount commonLabel" label="每次提现上限" prop="DailyWithdrawalLimit">
<el-tooltip class="item" effect="dark" content="-1元表示不限制每日提现金额" placement="top-start">
<i class=" elzk el-tooltip el-icon-info"></i>
</el-tooltip>
<el-input v-model="addMsg.DailyWithdrawalLimit" style="width:293px;" type="number" min="1" size="small" placeholder="请输入" class="input-with-select">
<el-button slot="append">元</el-button>
</el-input>
</el-form-item>
<el-form-item class="discount commonLabel" label="提现手续费" prop="WithdrawFee">
<el-tooltip class="item" effect="dark" content="0表示不设置提现手续费" placement="top-start">
<i class=" elzk el-tooltip el-icon-info"></i>
</el-tooltip>
<el-input v-model="addMsg.WithdrawFee" style="width:293px;" type="number" min="1" size="small" placeholder="请输入" class="input-with-select">
<el-button slot="append">%</el-button>
</el-input>
<p>提现手续费额外从提现中扣除</p>
<p>例如：<span class="cred">10%</span>的提现手续费：</p>
<p>提现<span class="cred">100</span>元，扣除手续费<span class="cred">10</span>元， 实际到手<span class="cred">90</span>元</p>
</el-form-item>
</div>
</el-card>
<el-card class="box-card" style="margin-top:10px">
<div slot="header" class="clearfix">
<span>页面设置</span>
</div>
<div>
<el-form-item label="申请协议">
<el-input style="width:293px"
type="textarea"
:rows="2"
placeholder="申请协议"
v-model="addMsg.ApplicationProtocol">
</el-input>
</el-form-item>
<el-form-item label="用户须知">
<el-input style="width:293px"
type="textarea"
:rows="2"
placeholder="用户须知"
v-model="addMsg.UserNotes">
</el-input>
</el-form-item>
<el-form-item label="待审核页面背景图片">
<el-button @click="openChangeDig(1)" size="small">选择图片</el-button>
<div class="app-gallery-item">
<img style="width:100px;height:100px" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.BackgroundImagePath" alt="">
</div>
</el-form-item>
<el-form-item label="首页背景图片" >
<el-button @click="openChangeDig(2)" size="small">选择图片</el-button>
<div class="app-gallery-item">
<img style="width:100px;height:100px" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.IndexImagePath" alt="">
</div>
</el-form-item>
</div>
</el-card>
</el-form>
</div>
<div style="margin-top:20px">
<el-button size="small" type="primary" @click="dialogVisible = false">保存</el-button>
<el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
</div>
<!-- 选择文件 -->
<el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
<ChooseImg></ChooseImg>
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
<!-- 查看图例 -->
<el-dialog title="查看分销商等级入口示例" :visible.sync="czjfDig" width="600px">
<div class="center">
<img style="width:280px" src="../../assets/img/userman/is_show_share_level.png" alt="">
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" size="small" @click="czjfDig = false">我知道了</el-button>
</span>
</el-dialog>
</div>
</template>
......@@ -167,36 +207,127 @@ import ChooseImg from "@/components/global/ChooseImg.vue";
},
data() {
return {
loading:false,
czjfDig:false,
checkedCities:[],
currentPage4:3,
changeState:false,
val:'',
addMsg:{},
addMsg:{
Id:0,
DistributorTier:2,
InPurchasing:1,
ReferralsCondition:3,
ApplyFor:1,
DistributorCondition:3,
DistributorCommissionType:1,
OneCommission:0,
TwoCommission:0,
ThreeCommission:0,
GradeEntrance:1,
WithdrawWay:[1],
MinimumWithdrawalLimit:50,
DailyWithdrawalLimit:0,
WithdrawFee:0,
WithdrawWayList:[],
ApplicationProtocol:'',
UserNotes:'',
BackgroundImage:'',
BackgroundImagePath:'',
IndexImage:'',
IndexImagePath:'',
IsCommissionResidue:1,
},
dialogVisible:false,
value:'',
options:[],
tableData:[
{ID:'111'}
],
msg:{
pageIndex:1,
pageSize:15,
},
total:0,
rules: {
name: [
{ required: true, message: '新手机号', trigger: 'blur' }
],
},
DistributorTier:[
{ required: true, message: '请选择分销层级', trigger: 'change' }
],
ReferralsCondition:[
{ required: true, message: '请选择成为下线条件', trigger: 'change' }
],
ApplyFor:[
{ required: true, message: '请选择申请为分销商', trigger: 'change' }
],
DistributorCondition:[
{ required: true, message: '请选择成为分销商条件', trigger: 'change' }
],
DistributorCommissionType:[
{ required: true, message: '请选择分销佣金类型', trigger: 'change' }
],
WithdrawWay: [
{ type: 'array', required: true, message: '请至少选择一个提现方式', trigger: 'change' }
],
MinimumWithdrawalLimit: [
{ required: true, message: '请输入最少提现额度', trigger: 'blur' }
],
DailyWithdrawalLimit: [
{ required: true, message: '请输入每日提现上限', trigger: 'blur' }
],
WithdrawFee: [
{ required: true, message: '请输入提现手续费', trigger: 'blur' }
],
},
conditionList:[],
EnumList:[],
ReferralsList:[],
WithdrawWayList:[],
imgType:1,
};
},
created() {
this.ApplyForEnumList();
this.ConditionEnumList();
this.ReferralsEnumList();
this.WithdrawWayEnumList();
this.getData();
},
methods: {
openChangeDig(){
Save(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
let cmd="/api/user/SetDistributorBasicsInfo";
this.apipost(cmd,this.addMsg,
res => {
if (res.data.resultCode === 1) {
this.Success(res.data.message);
this.getData();
} else {
this.Error(res.data.message);
}
},
null
);
} else {
return false;
}
});
},
SelectId(msg){
if(this.imgType==1){
this.addMsg.BackgroundImage=msg.selectId;
this.addMsg.BackgroundImagePath=msg.url;
}else{
this.addMsg.IndexImage=msg.selectId;
this.addMsg.IndexImagePath=msg.url;
}
this.changeState=false;
},
openChangeDig(val){
this.changeState=true;
this.imgType=val;
},
goUrl(){
this.$router.push({
......@@ -210,9 +341,49 @@ import ChooseImg from "@/components/global/ChooseImg.vue";
this.msg.pageIndex = val;
this.getList();
},
getList(){
getData(){
this.loading=true;
this.apipost("/api/user/GetDistributorBasicsInfo", {}, res => {
this.loading=false;
if(res.data.resultCode==1){
this.addMsg=res.data.data;
}
})
},
WithdrawWayEnumList(){
this.apipost("/api/user/GetDistrbutorWithdrawWayEnumList", {}, res => {
if(res.data.resultCode==1){
this.WithdrawWayList=res.data.data;
}
})
},
ApplyForEnumList(){
this.apipost("/api/user/GetDistributorApplyForEnumList", {}, res => {
if(res.data.resultCode==1){
this.EnumList=res.data.data;
}
})
},
ConditionEnumList(){
this.apipost("/api/user/GetDistributorConditionEnumList", {}, res => {
if(res.data.resultCode==1){
this.conditionList=res.data.data;
}
})
},
ReferralsEnumList(){
this.apipost("/api/user/GetDistrbutorReferralsEnumList", {}, res => {
if(res.data.resultCode==1){
this.ReferralsList=res.data.data;
}
})
},
},
mounted() {
......@@ -222,12 +393,42 @@ import ChooseImg from "@/components/global/ChooseImg.vue";
</script>
<style>
.baseSet .app-gallery-item{
width: 100px;
height: 100px;
border: 1px solid #e3e3e3;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 10px;
position: relative;
}
.baseSet .el-form-item .topelzk{
top: 12px!important;
}
.baseSet .el-form-item .elzk {
position: absolute;
left: -25px;
top: 8px;
}
.baseSet .el-checkbox-group{
display: inline-block;
}
.baseSet .nocommonLabel .el-form-item__label{
margin-top: 0px;
padding-right: 30px;
}
.baseSet .commonLabel .el-form-item__label{
margin-top: -4px;
}
.baseSet .discount .el-form-item__label{
padding-right: 30px;
margin-top: -4px;
}
.baseSet .blue{
color:#409EFF;
}
.baseSet .content{
background: #fff;
margin-top:10px;
box-sizing: border-box;
}
......
src/components/UserMan/customSet.vue 0 → 100644
View file @ 72696b9b
<template>
<div class="customSet" v-loading="loading">
<el-tabs v-model="activeName">
<el-tab-pane label="分销申请" name="first">
<div style="display: flex;">
<div class="mobile">
<div class="screen">
<div flex="main:center cross:center" class="top-bar">
<div>{{addMsg.DistributionApplication}}</div>
</div>
<div class="content">
<div class="el-scrollbar" style="height: 100%;">
<div class="el-scrollbar__wrap" style="margin-bottom: -8px; margin-right: -8px;">
<div class="el-scrollbar__view">
<div>
<div class="el-image" style="display: block; width: 100%; height: 150px;">
<img :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.HeadImagePath" class="el-image__inner">
</div>
<div style="background: rgb(255, 255, 255); height: 40px; padding: 0px 14px;">
<div flex="cross:center" style="color: rgb(53, 53, 53); height: 100%; border-bottom: 1px solid rgb(226, 226, 226);">
<span>欢迎加入</span>
<span style="color: rgb(255, 69, 68);">XX商城</span>
<span>，请填写申请信息</span>
</div>
</div>
<div class="apply-form">
<div flex="dir:left cross:center" class="apply-form-info">
<div style="width: 100px;">邀请人</div>
<div style="color: rgb(255, 69, 68);">雪人</div>
<div>(请核对)</div>
</div>
</div>
<div class="apply-form">
<div flex="dir:left cross:center" class="apply-form-info">
<div class="apply-after" style="width: 100px;">姓名</div>
<div style="color: rgb(204, 204, 204);">请填写真实姓名</div>
</div>
</div>
<div class="apply-form">
<div flex="dir:left cross:center" class="apply-form-info">
<div class="apply-after" style="width: 100px;">手机号码</div>
<div style="color: rgb(204, 204, 204);">请填写手机号码</div>
</div>
</div>
<div class="apply-form">
<div flex="dir:left cross:center" class="apply-form-info" style="border-style: none;">
<div class="circle"></div>
<div style="margin-left: 10px;">我已阅读并同意</div>
<div style="color: rgb(71, 112, 177);">《{{addMsg.ApplicationAgreement}}》</div>
</div>
</div>
</div>
<div class="apply-btn" :style="{borderRadius: addMsg.ButtonFilletPX+'px',backgroundColor:addMsg.ButtonColor , color:addMsg.ButtonTextColor}">
{{addMsg.ButtonText}}
</div>
<div class="el-image" style="display: block; width: 100%;">
<img :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.BottomImagePath" class="el-image__inner">
</div>
</div>
</div>
<div class="el-scrollbar__bar is-horizontal">
<div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
</div>
<div class="el-scrollbar__bar is-vertical">
<div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%">
<div class="title">图片</div>
<el-form style="padding:20px 0;background:#fff" ref="addMsg" :model="addMsg" label-width="100px">
<el-form-item label="头部图片">
<el-button @click="openChangeDig(1)" size="mini">选择文件</el-button>
<el-button @click="addMsg.HeadImagePath=HeadImagePath" size="mini" type="primary">恢复默认</el-button>
<div style="position: relative;margin-top:10px;width:80px;cursor: move;">
<img @click="openChangeDig(1)" v-if="addMsg.HeadImagePath==''" style="width:100px;height:100px" src="../../assets/img/default.png" alt="">
<div v-else class="app-image" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.HeadImagePath + ')',backgroundSize:'cover'}"></div>
<button @click="addMsg.HeadImagePath=''" type="button" class="el-button del-btn el-button--danger el-button--mini is-circle"><i class="el-icon-close"></i></button>
</div>
</el-form-item>
<el-form-item label="底部图片">
<el-button @click="openChangeDig(2)" size="mini">选择文件</el-button>
<el-button @click="addMsg.BottomImagePath=BottomImagePath" size="mini" type="primary">恢复默认</el-button>
<div style="position: relative;margin-top:10px;width:80px;cursor: move;">
<img @click="openChangeDig(2)" v-if="addMsg.BottomImagePath==''" style="width:100px;height:100px" src="../../assets/img/default.png" alt="">
<div v-else class="app-image" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.BottomImagePath + ')',backgroundSize:'cover'}"></div>
<button @click="addMsg.BottomImagePath=''" type="button" class="el-button del-btn el-button--danger el-button--mini is-circle"><i class="el-icon-close"></i></button>
</div>
</el-form-item>
</el-form>
<div class="hr"></div>
<div class="title">文字</div>
<el-form style="padding:20px 0;background:#fff" ref="addMsg" :model="addMsg" label-width="50px">
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">分销申请</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.DistributionApplication" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">分销申请协议</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.ApplicationAgreement" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
</el-form>
<div class="hr"></div>
<div class="title">按钮</div>
<el-form style="padding:20px 0;background:#fff" ref="addMsg" :model="addMsg" label-width="100px">
<el-form-item label="按钮圆角">
<el-slider style="width:70%;display:inline-block"
v-model="addMsg.ButtonFilletPX"
show-input>
</el-slider>
<span style="position:relative;top:-16px;margin-left:5px">px</span>
</el-form-item>
<el-form-item label="按钮文本">
<el-input v-model="addMsg.ButtonText" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item class="flexForm" style="margin-right:100px" label="填充颜色">
<el-color-picker size="small" v-model="addMsg.ButtonColor"></el-color-picker>
<el-input v-model="addMsg.ButtonColor" style="width:105px" size="small" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item class="flexForm" label="文本颜色">
<el-color-picker size="small" v-model="addMsg.ButtonTextColor"></el-color-picker>
<el-input v-model="addMsg.ButtonTextColor" style="width:105px" size="small" placeholder="请输入"></el-input>
</el-form-item>
</el-form>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="分销中心" name="second">
<div style="display: flex;">
<div class="mobile">
<div class="screen">
<div flex="main:center cross:center" class="top-bar">
<div>分销中心</div>
</div>
<div class="content">
<div>
<div class="content-block head-block">
<div flex="dir:left cross:center" style="padding-bottom: 10px; border-bottom: 1px solid rgb(255, 255, 255);">
<div>
<div class="app-image" style="background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=480194109,2955193021) center center / cover rgb(227, 227, 227); width: 60px; height: 60px; border-radius: 999px; display: inline-block; border: 2px solid rgb(255, 255, 255);">
</div>
</div>
<div style="margin-left: 20px; color: rgb(255, 255, 255);">
<div>用户昵称</div>
<div style="margin-top: 10px;">{{addMsg.ReferrerName}}：用户昵称</div>
</div>
</div>
<div flex="dir:left cross:center" style="margin-top: 10px; color: rgb(255, 255, 255); justify-content: space-between;">
<div>
<div>{{addMsg.CommissionForWithdrawalName}}</div>
<div>10元</div>
</div>
<div style="border-radius: 28px; height: 28px; padding: 0px 10px; border: 1px solid rgb(255, 255, 255); line-height: 28px; text-align: center;">
{{addMsg.WithdrawDepositName}}
</div>
</div>
</div>
<div flex="dir:left box:mean cross:center" style="background-color: rgb(255, 255, 255); margin-bottom: 8px; height: 80px;">
<div class="text-center" style="border-right: 1px solid rgb(226, 226, 226);">
<div style="color: rgb(34, 175, 25);">{{addMsg.CommissionWithdrawnName}}</div>
<div>1000元</div>
</div>
<div class="text-center">
<div style="color: rgb(255, 143, 18);">{{addMsg.OutstandingCommissionName}}</div>
<div>1000元</div>
</div>
</div>
</div>
<div class="content-block menu-block">
<div flex="dir:left cross:center" style="flex-wrap: wrap;">
<div flex="dir:top cross:center main:center" class="text-center" style="border-right: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226); width: 125px; height: 110px;">
<img :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.DistributionCommissionImagePath" style="width: 35px; height: 35px;">
<div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
{{addMsg.DistributionCommissionName}}
</div>
</div>
<div flex="dir:top cross:center main:center" class="text-center" style="border-right: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226); width: 125px; height: 110px;">
<img :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.DistributionOrderImagePath" style="width: 35px; height: 35px;">
<div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
{{addMsg.DistributionOrderName}}
</div>
</div>
<div flex="dir:top cross:center main:center" class="text-center" style="border-right: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226); width: 125px; height: 110px;">
<img :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.WithdrawDetialsImagePath" style="width: 35px; height: 35px;">
<div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
{{addMsg.WithdrawDetialsName}}
</div>
</div>
<div flex="dir:top cross:center main:center" class="text-center" style="border-right: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226); width: 125px; height: 110px;">
<img :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.MyTeamImagePath" style="width: 35px; height: 35px;">
<div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
{{addMsg.MyTeamName}}
</div>
</div>
<div flex="dir:top cross:center main:center" class="text-center" style="border-right: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226); width: 125px; height: 110px;">
<img :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+addMsg.PromoteQRCodeImagePath" style="width: 35px; height: 35px;">
<div style="transform: scale(0.8); font-size: 16px; padding-top: 8px; color: rgb(102, 102, 102);">
{{addMsg.PromoteQRCodeName}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%">
<div class="title">栏目</div>
<div class="form-body el-row fxzx">
<div flex="dir-left" style="border-radius: 3px; width: 70%; margin-left: 2.5%;">
<span @click="openIcon(3,addMsg.DistributionCommissionName,addMsg.DistributionCommissionImagePath)" flex="dir:top main:center cross:center" style="cursor: pointer; height: 100px; width: 100px; border: 1px solid rgb(227, 227, 227); margin-left: -1px;">
<div class="app-image" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.DistributionCommissionImagePath + ')',backgroundSize:'cover'}"></div>
<div style="margin-top: 8px;">{{addMsg.DistributionCommissionName}}</div>
</span>
<span @click="openIcon(4,addMsg.DistributionOrderName,addMsg.DistributionOrderImagePath)" flex="dir:top main:center cross:center" style="cursor: pointer; height: 100px; width: 100px; border: 1px solid rgb(227, 227, 227); margin-left: -1px;">
<div class="app-image" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.DistributionOrderImagePath + ')',backgroundSize:'cover'}"></div>
<div style="margin-top: 8px;">{{addMsg.DistributionOrderName}}</div>
</span>
<span @click="openIcon(5,addMsg.WithdrawDetialsName,addMsg.WithdrawDetialsImagePath)" flex="dir:top main:center cross:center" style="cursor: pointer; height: 100px; width: 100px; border: 1px solid rgb(227, 227, 227); margin-left: -1px;">
<div class="app-image" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.WithdrawDetialsImagePath + ')',backgroundSize:'cover'}"></div>
<div style="margin-top: 8px;"> {{addMsg.WithdrawDetialsName}}</div>
</span>
<span @click="openIcon(6,addMsg.MyTeamName,addMsg.MyTeamImagePath)" flex="dir:top main:center cross:center" style="cursor: pointer; height: 100px; width: 100px; border: 1px solid rgb(227, 227, 227); margin-left: -1px;">
<div class="app-image" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.MyTeamImagePath + ')',backgroundSize:'cover'}"></div>
<div style="margin-top: 8px;">{{addMsg.MyTeamName}}</div>
</span>
<span @click="openIcon(7,addMsg.PromoteQRCodeName,addMsg.PromoteQRCodeImagePath)" flex="dir:top main:center cross:center" style="cursor: pointer; height: 100px; width: 100px; border: 1px solid rgb(227, 227, 227); margin-left: -1px;">
<div class="app-image" :style="{backgroundImage:'url(http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + addMsg.PromoteQRCodeImagePath + ')',backgroundSize:'cover'}"></div>
<div style="margin-top: 8px;">{{addMsg.PromoteQRCodeName}}</div>
</span>
</div>
</div>
<div class="title">文字</div>
<el-form style="padding:20px 0;background:#fff" ref="addMsg" :model="addMsg" label-width="50px">
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">推荐人</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.ReferrerName" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">可提现佣金</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.CommissionForWithdrawalName" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">提现</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.WithdrawDepositName" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">已提现佣金</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.CommissionWithdrawnName" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">未结算佣金</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.OutstandingCommissionName" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">分销商</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.DistributorName" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
</el-form>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="分销佣金" name="third">
<div style="display:flex">
<div class="mobile">
<div class="screen">
<div flex="main:center cross:center" class="top-bar">
<div>分销佣金</div>
</div>
<div class="content" style="font-size: 13pt;">
<div class="content-block head-block" style="padding: 0px 12px; height: 73px;">
<div flex="dir:left box:left cross:center" style="height: 100%; color: rgb(255, 255, 255); justify-content: space-between;">
<div>
<div>分销佣金</div>
<div style="padding-top: 10px;">3500元</div>
</div>
<div style="border-radius: 28px; border: 1px solid rgb(255, 255, 255); height: 28px; width: 84px; line-height: 28px; text-align: center;">
提现明细
</div>
</div>
</div>
<div flex="dir:left cross:center" style="margin: 10px 0px; padding: 0px 12px; height: 48px; background: rgb(255, 255, 255);">
<div>可提现佣金</div>
<div style="margin-left: auto;">0元</div>
</div>
<div flex="dir:left cross:center" style="margin-bottom: 2px; padding: 0px 12px; height: 48px; background: rgb(255, 255, 255);">
<div>已提现佣金</div> <div style="margin-left: auto;">0元</div>
</div>
<div flex="dir:left cross:center" style="padding: 0px 12px; height: 48px; background: rgb(255, 255, 255);">
<div>{{addMsg.CommissionTobePaidName}}</div>
<div style="margin-left: auto;">0元</div>
</div>
<div flex="dir:left cross:center" style="margin: 10px 0px; padding: 0px 12px; height: 48px; background: rgb(255, 255, 255);">
<div>{{addMsg.UserNotesName}}</div>
<div class="app-image" style="background-image: url(http://wx.weibaoge.cn/web/statics/img/mall/customize_jp.png;); background-size: cover; background-position: center center; width: 8px; height: 13px; border-radius: 0%; margin-left: auto;">
</div>
</div>
<div flex="main:center" style="margin: 20px auto; color: rgb(255, 255, 255);">
<div flex="main:center" style="background-color: rgb(255, 69, 68); width: 351px; border-radius: 40px; height: 40px; line-height: 40px;">
{{addMsg.IWantToWithdrawName}}
</div>
</div>
</div>
</div>
</div>
<div style="width:100%">
<div class="title">文字</div>
<el-form style="padding:20px 0;background:#fff" ref="addMsg" :model="addMsg" label-width="50px">
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">待打款佣金</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.CommissionTobePaidName" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">用户须知</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.UserNotesName" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">我要提现</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.IWantToWithdrawName" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
</el-form>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="申请提现" name="fourth">
<div style="display:flex">
<div class="mobile">
<div class="screen">
<div flex="main:center cross:center" class="top-bar">
<div>申请提现</div>
</div>
<div class="content" style="font-size: 13pt;">
<div>
<div flex="dir:top main:center" style="border-top: 1px solid rgb(226, 226, 226); color: rgb(53, 53, 53); padding: 0px 8px; height: 80px; background: rgb(255, 255, 255);">
<div style="font-size: 15pt; margin-bottom: 8px;">账户剩余金额：￥13</div>
<div flex="dir:left cross:center" style="color: rgb(153, 153, 153);">
<div>今日剩余提现金额: ￥1000</div>
<div style="font-size: 11pt; border-radius: 17px; padding: 1px 5px; border: 1px solid rgb(153, 153, 153); margin-left: 8px;">
规则
</div>
</div>
</div>
<div flex="dir:left cross:center" style="background: rgb(255, 255, 255); color: rgb(102, 102, 102); height: 80px; padding: 0px 12px; font-size: 13pt; border-top: 1px solid rgb(226, 226, 226); border-bottom: 1px solid rgb(226, 226, 226);">
<div style="color: rgb(255, 69, 68); font-size: 30pt;">￥</div>
<div style="padding-left: 20px; color: rgb(205, 205, 205); font-size: 19pt;">
请输入100
</div>
</div>
<div flex="dir:top main:center" style="padding: 10px 12px; color: rgb(102, 102, 102); font-size: 12pt;">
<div>说明： 100必须不能大于￥80</div>
</div>
<div style="background: rgb(255, 255, 255); padding: 16px 12px;"></div>
<div flex="dir:left cross:center" style="margin-bottom: 10px; padding-left: 8px; padding-bottom: 10px; background: rgb(255, 255, 255);">
<div flex="dir:left cross:center" style="margin-left: 10px; padding: 0px 16px; height: 34px; border: 1px solid rgb(255, 69, 68); border-radius: 19px;">
<img src="../../assets/img/userman/wx.png" style="width:20px;height:20px" alt="">
<div>微信</div>
</div>
<div flex="dir:left cross:center" style="margin-left: 10px; padding: 0px 16px; height: 34px; border: 1px solid rgb(226, 226, 226); border-radius: 19px;">
<img src="../../assets/img/userman/icon-share-ant.png" style="width:20px;height:20px" alt="">
<div>支付宝</div>
</div>
</div>
<div flex="dir:left cross:center" style="background: rgb(255, 255, 255); height: 44px; padding: 0px 12px;">
<div style="min-width: 84px;">微信号</div>
<div style="color: rgb(205, 205, 205);">请填写正确的微信号</div>
</div>
<div flex="dir:left cross:center" style="background: rgb(255, 255, 255); height: 44px; padding: 0px 12px;">
<div style="min-width: 84px;">账号</div>
<div style="color: rgb(205, 205, 205);">请输入正确的账号</div>
</div>
<div flex="main:center" style="margin: 20px auto; color: rgb(255, 255, 255);">
<div flex="main:center" style="background-color: rgb(255, 69, 68); width: 351px; border-radius: 40px; height: 40px; line-height: 40px;">
提交申请
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%">
<div class="title">文字</div>
<el-form style="padding:20px 0;background:#fff" ref="addMsg" :model="addMsg" label-width="50px">
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">提现金额</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.val" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">提现方式</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.val" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
</el-form>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="分销商" name="five">
<div style="display: flex;">
<div class="mobile">
<div class="screen">
<div flex="main:center cross:center" class="top-bar">
<div>我的团队</div>
</div>
<div class="content">
<div flex="dir:left box:mean cross:center" style="height: 50px; border: 1px solid rgb(226, 226, 226); background: rgb(255, 255, 255);">
<div flex="main:center">
<div flex="cross:center" style="height: 50px; border-bottom: 1px solid rgb(255, 69, 68); color: rgb(255, 69, 68);">
一级分销名称(0)
</div>
</div>
<div flex="main:center">
<div>二级分销名称(10)</div>
</div>
<div flex="main:center">
<div>三级分销名称(0)</div>
</div>
</div>
<div flex="dir:top" style="margin-bottom: 10px;">
<div flex="dir:left cross:center" style="background: rgb(255, 255, 255); padding: 10px; height: 80px;">
<div class="app-image" style="background-image: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3740798461,1728086832); background-size: cover; background-position: center center; width: 50px; height: 50px; border-radius: 0%;"></div>
<div flex="dir:top main:center" style="width: 100%; margin-left: 12px;">
<div flex="dir:left cross:center">
<div style="font-size: 13pt;">张三</div>
<div style="margin-left: auto;">推广20人</div>
</div>
<div style="color: rgb(102, 102, 102); padding-top: 8px;">注册时间：2012-01-12</div>
</div>
</div>
<div flex="dir:left cross:center" style="color: rgb(102, 102, 102); background: rgb(255, 255, 255); border-top: 1px solid rgb(226, 226, 226); padding: 0px 12px; height: 40px;">
<div>消费200.00元</div>
<div style="margin-left: auto;">2个订单</div>
</div>
</div>
<div flex="dir:top" style="margin-bottom: 10px;">
<div flex="dir:left cross:center" style="background: rgb(255, 255, 255); padding: 10px; height: 80px;">
<div class="app-image" style="background-image: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3740798461); background-size: cover; background-position: center center; width: 50px; height: 50px; border-radius: 0%;">
</div>
<div flex="dir:top main:center" style="width: 100%; margin-left: 12px;">
<div flex="dir:left cross:center">
<div style="font-size: 13pt;">张三</div>
<div style="margin-left: auto;">推广20人</div>
</div>
<div style="color: rgb(102, 102, 102); padding-top: 8px;">注册时间：2012-01-12</div>
</div>
</div>
<div flex="dir:left cross:center" style="color: rgb(102, 102, 102); background: rgb(255, 255, 255); border-top: 1px solid rgb(226, 226, 226); padding: 0px 12px; height: 40px;">
<div>消费200.00元</div>
<div style="margin-left: auto;">2个订单</div>
</div>
</div>
<div flex="dir:left main:center cross:center" style="margin: 16px 0px; color: rgb(153, 153, 153);">
<div flex="cross:center">
<div style="height: 1px; width: 84px; background: rgb(153, 153, 153);"></div>
<div style="margin: 0px 10px;">没有更多了</div>
<div style="height: 1px; width: 84px; background: rgb(153, 153, 153);"></div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%">
<div class="title">文字</div>
<el-form style="padding:20px 0;background:#fff" ref="addMsg" :model="addMsg" label-width="50px">
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">一级分销名称</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.val" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">二级分销名称</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.val" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
<el-form-item label="">
<div flex="dir:left cross:center" class="share-text">
<div class="default">三级分销名称</div>
<img style="width:12px;height:12px;margin-right:8px" src="../../assets/img/userman/customize_jp.png" alt="">
<el-input v-model="addMsg.val" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</div>
</el-form-item>
</el-form>
</div>
</div>
</el-tab-pane>
<div style="padding-left:410px;padding-top:20px">
<el-button @click="save" size="small" type="primary">保存</el-button>
</div>
</el-tabs>
<!-- 选择文件 -->
<el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
<ChooseImg @SelectId="SelectId" ref="mychild"></ChooseImg>
</el-dialog>
<!-- 栏目编辑 -->
<el-dialog title="栏目编辑" :visible.sync="iconDig" width="400px">
<el-form :model="iconMsg" :rules="iconMsg" ref="iconMsg" label-width="100px">
<el-form-item label="名称" prop="Name">
<el-input style="width:234px" size="small" v-model="iconMsg.Name">
</el-input>
</el-form-item>
<el-form-item label="图标" prop="Password2">
<el-button @click="openChangeDig(imgType)" size="small">选择文件</el-button>
<div>
<img style="width:80px;height:80px" :src="'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com'+iconMsg.Path" alt="">
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="iconDig = false">取 消</el-button>
<el-button size="small" type="primary" @click="SelectIcon">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import ChooseImg from "@/components/global/ChooseImg.vue";
export default {
name: "customSet",
components: {
ChooseImg
},
data(){
return{
activeName:'second',
addMsg:{},
HeadImagePath:'',
BottomImagePath:'',
imgType:1,
changeState:false,
iconDig:false,
iconMsg:{
Name:'',
Path:'',
}
}
},
created(){
this.getData();
this.GetPageList1();
this.GetPageList2();
},
mounted(){},
methods:{
openIcon(index,name,path){
this.imgType=index;
this.iconDig=true;
this.iconMsg={
Name:name,
Path:path,
}
},
save(){
this.apipost("/api/user/SetDistributorCustomInfo",this.addMsg, res => {
this.loading=false;
if (res.data.resultCode === 1) {
this.Success(res.data.message);
this.getData();
} else {
this.Error(res.data.message);
}
})
},
SelectIcon(){
if(this.imgType==3){
this.addMsg.DistributionCommissionName=this.iconMsg.Name;
}
else if(this.imgType==4){
this.addMsg.DistributionOrderName=this.iconMsg.Name;
}
else if(this.imgType==5){
this.addMsg.WithdrawDetialsName=this.iconMsg.Name;
}
else if(this.imgType==6){
this.addMsg.MyTeamName=this.iconMsg.Name;
}
else if(this.imgType==7){
this.addMsg.PromoteQRCodeName=this.iconMsg.Name;
}
this.iconDig=false;
},
SelectId(msg){
if(this.imgType==1){
this.addMsg.HeadImage=msg.selectId;
this.addMsg.HeadImagePath=msg.url;
}
else if(this.imgType==2){
this.addMsg.BottomImage=msg.selectId;
this.addMsg.BottomImagePath=msg.url;
}
else if(this.imgType==3){
this.addMsg.DistributionCommissionImage=msg.selectId;
this.addMsg.DistributionCommissionImagePath=msg.url;
}
else if(this.imgType==4){
this.addMsg.DistributionOrderImage=msg.selectId;
this.addMsg.DistributionOrderImagePath=msg.url;
}
else if(this.imgType==5){
this.addMsg.WithdrawDetialsImage=msg.selectId;
this.addMsg.WithdrawDetialsImagePath=msg.url;
}
else if(this.imgType==6){
this.addMsg.MyTeamImage=msg.selectId;
this.addMsg.MyTeamImagePath=msg.url;
}
else if(this.imgType==7){
this.addMsg.PromoteQRCodeImage=msg.selectId;
this.addMsg.PromoteQRCodeImagePath=msg.url;
}
if(this.imgType>2){
this.iconMsg.Path=msg.url;
}
this.changeState=false;
},
openChangeDig(index){
this.imgType=index;
this.changeState=true;
},
getData(){
this.loading=true;
this.apipost("/api/user/GetDistributorCustomInfo", {}, res => {
this.loading=false;
console.log("fff",res);
if(res.data.resultCode==1){
this.addMsg=res.data.data;
}
})
},
GetPageList1(){
let msg={
Id:1,
Name:'',
Type:1,
Recycled:1,
pageIndex:1,
pageSize:15,
GroupId:0,
}
this.apipost("/api/product/GetMaterialInfoPageList",msg, res => {
this.total=res.data.data.count;
let data=res.data.data.pageData;
this.HeadImagePath=data[0].Path;
})
},
GetPageList2(){
let msg={
Id:2,
Name:'',
Type:1,
Recycled:1,
pageIndex:1,
pageSize:15,
GroupId:0,
}
this.apipost("/api/product/GetMaterialInfoPageList",msg, res => {
this.total=res.data.data.count;
let data=res.data.data.pageData;
this.BottomImagePath=data[0].Path;
})
},
UploadImage(file) {
this.UploadFileToTencent(this.FileType().SetImg, file.file, res => {
if (res.resultCode == 1) {
console.log("1111",res);
}
})
},
},
};
</script>
<style>
.customSet .fxzx .app-image{
background-position: center center;
width: 50px!important;
height: 50px!important;
border-radius: 0%;
}
.customSet .form-body {
padding: 20px 0;
background-color: #fff;
margin-bottom: 20px;
}
.customSet .content-block.menu-block {
background-color: #fff;
}
.customSet .text-center {
text-align: center;
}
.customSet .content-block.head-block {
padding: 10px 12px;
background-color: #ff4544;
}
.customSet .flexForm .el-form-item__label{
position: relative;
top:-5px;
}
.customSet .flexForm .el-input{
position: relative;
top:-12px;
}
.customSet .flexForm{
display: inline-block;
}
.customSet .share-text .default {
width: 10%;
min-width: 100px;
}
.customSet .share-text {
/* margin: 16px 0; */
}
.hr{
width:100%;
height:20px;
background: #f3f3f3;
}
.customSet .del-btn {
position: absolute;
right: -8px;
top: -8px;
padding: 4px 4px !important;
}
.customSet .app-image{
background-position: center center;
width: 80px;
height: 80px;
border-radius: 0%;
}
.customSet .title {
padding: 18px 20px;
border-bottom: 1px solid #F3F3F3;
background-color: #fff;
}
.customSet .apply-btn {
height: 40px;
line-height: 40px;
margin: 12px;
text-align: center;
}
.customSet .circle {
height: 13px;
width: 13px;
border-radius: 50%;
border: 1px solid #e2e2e2;
}
.customSet .apply-form-info {
color: #353535;
height: 100%;
border-bottom: 1px solid #e2e2e2;
}
.customSet .apply-form {
background: #FFFFFF;
height: 44px;
padding: 0 14px;
}
.customSet .el-image__error, .customSet .el-image__inner, .customSet .el-image__placeholder {
width: 100%;
height: 100%;
}
.customSet .el-image__inner {
vertical-align: top;
}
.customSet .el-image {
position: relative;
display: inline-block;
overflow: hidden;
}
.customSet .screen .content {
position: absolute;
top: 60px;
bottom: 0;
width: 100%;
}
.customSet .top-bar div {
position: absolute;
text-align: center;
width: 378px;
font-size: 16px;
font-weight: 600;
height: 64px;
line-height: 88px;
}
.customSet .top-bar {
width: 375px;
height: 64px;
position: relative;
background: url('../../assets/img/userman/head.png') center no-repeat;
}
.customSet .screen {
border: 2px solid #F3F5F6;
height: 670px;
width: 379px;
margin: 0 auto;
position: relative;
background-color: #F7F7F7;
}
.customSet .mobile {
width: 404px;
height: 736px;
border-radius: 30px;
background-color: #fff;
padding: 33px 12px;
margin-right: 10px;
}
.customSet .el-tabs__content{
/* background: #fff; */
}
.customSet .el-tabs__nav-scroll{
background: #fff;
padding: 0 20px;
box-sizing: border-box;
height: 56px;
line-height: 56px;
}
</style>
src/components/UserMan/usersList.vue
View file @ 72696b9b
......@@ -196,7 +196,7 @@
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogVisible = false">取 消</el-button>
<el-button size="small" @click="czjfDig = false">取 消</el-button>
<el-button size="small" type="primary" @click="czsubmitForm('addMsg')">确 定</el-button>
</span>
</el-dialog>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment