Skip to content

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

1

parent 1f31ed38
Hide whitespace changes
Inline Side-by-side
Showing with 1095 additions and 0 deletions
src/components/UserMan/tinyMerchant/wdCustomSet.vue 0 → 100644
View file @ 73174598
<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="getIconLink(addMsg.HeadImage)" 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="getIconLink(addMsg.BottomImage)" 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.HeadImage=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.HeadImage==''" style="width:100px;height:100px"
src="../../../assets/img/default.png" alt="">
<div v-else class="app-image"
:style="{backgroundImage:'url(' + getIconLink(addMsg.HeadImage) + ')',backgroundSize:'cover'}">
</div>
<button @click="addMsg.HeadImage=''" 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.BottomImage=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.BottomImage==''" style="width:100px;height:100px"
src="../../../assets/img/default.png" alt="">
<div v-else class="app-image"
:style="{backgroundImage:'url(' + getIconLink(addMsg.BottomImage) + ')',backgroundSize:'cover'}">
</div>
<button @click="addMsg.BottomImage=''" 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="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="getIconLink(addMsg.DistributionCommissionImage)" 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="getIconLink(addMsg.DistributionOrderImage)" 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="getIconLink(addMsg.WithdrawDetialsImage)" 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="getIconLink(addMsg.MyTeamImage)" 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="getIconLink(addMsg.PromoteQRCodeImage)" 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.DistributionCommissionImage)"
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(' + getIconLink(addMsg.DistributionCommissionImage) + ')',backgroundSize:'cover'}">
</div>
<div style="margin-top: 8px;">{{addMsg.DistributionCommissionName}}</div>
</span>
<span @click="openIcon(4,addMsg.DistributionOrderName,addMsg.DistributionOrderImage)"
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(' + getIconLink(addMsg.DistributionOrderImage) + ')',backgroundSize:'cover'}">
</div>
<div style="margin-top: 8px;">{{addMsg.DistributionOrderName}}</div>
</span>
<span @click="openIcon(5,addMsg.WithdrawDetialsName,addMsg.WithdrawDetialsImage)"
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(' + getIconLink(addMsg.WithdrawDetialsImage) + ')',backgroundSize:'cover'}">
</div>
<div style="margin-top: 8px;"> {{addMsg.WithdrawDetialsName}}</div>
</span>
<span @click="openIcon(6,addMsg.MyTeamName,addMsg.MyTeamImage)" 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(' + getIconLink(addMsg.MyTeamImage) + ')',backgroundSize:'cover'}">
</div>
<div style="margin-top: 8px;">{{addMsg.MyTeamName}}</div>
</span>
<span @click="openIcon(7,addMsg.PromoteQRCodeName,addMsg.PromoteQRCodeImage)"
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(' + getIconLink(addMsg.PromoteQRCodeImage) + ')',backgroundSize:'cover'}">
</div>
<div style="margin-top: 8px;">{{addMsg.PromoteQRCodeName}}</div>
</span>
</div>
</div>
<div class="title">会员购买</div>
<div class="form-body el-row fxzx">
<el-form label-width="150px" style="padding:20px;">
<el-form-item label="会员购买显示状态" size="small">
<el-switch v-model="addMsg.IsShowVIPBuyPic" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="会员购买图片" size="small">
<div>
<el-button size="mini" @click="openChangeDig(10)">选择文件</el-button>
</div>
<div class="userCommonimg">
<img v-if="addMsg.VipBuyICO" :src="getIconLink(addMsg.VipBuyICO)" alt="" />
<img v-else src="../../../assets/img/default.png" alt="" />
</div>
</el-form-item>
<el-form-item label="会员购买链接" size="small">
<el-input v-model="addMsg.VipBuyUrl" style="width:40%" size="small" placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
</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-size: cover; background-position: center center; width: 8px; height: 13px; border-radius: 0%; margin-left: auto;"
:style="{backgroundImage: 'url('+getIconLink('/Static/customize_jp.png')+')'}" >
</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;">
请输入{{addMsg.WithdrawalAmountName}}
</div>
</div>
<div flex="dir:top main:center"
style="padding: 10px 12px; color: rgb(102, 102, 102); font-size: 12pt;">
<div>说明： {{addMsg.WithdrawalAmountName}}必须不能大于￥80</div>
</div>
<div style="background: rgb(255, 255, 255); padding: 16px 12px;">
{{addMsg.WithdrawalWayName}}
</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.WithdrawalAmountName" 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.WithdrawalWayName" 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);">
{{addMsg.OneDistributionName}}(0)
</div>
</div>
<div flex="main:center">
<div>{{addMsg.TwoDistributionName}}(10)</div>
</div>
<div flex="main:center">
<div>{{addMsg.ThreeDistributionName}}(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-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(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.OneDistributionName" 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.TwoDistributionName" 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.ThreeDistributionName" 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="saveVipMsg('vipMsg')" size="small" type="primary" :disabled="loadingbut" v-if="activeName == 'sixth' ">保存</el-button>
<el-button @click="save" size="small" type="primary" v-if="activeName != 'sixth' ">保存</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>
<el-button @click="getIconMsg(iconMsg)" size="small">恢复默认</el-button>
<div>
<img style="width:80px;height:80px" :src="getIconLink(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: 'first',
addMsg: {},
commonIndex: -1,
HeadImagePath: this.domainManager().ImageUrl + '/Upload/Set/1587968479000.png',
BottomImagePath: this.domainManager().ImageUrl + '/Upload/Set/1587968716000.png',
//分销佣金默认
fenxiaoMoren: this.domainManager().ImageUrl + '/Upload/Set/1587968503000.png',
//分销订单默认
fenxiaoOrder: this.domainManager().ImageUrl + '/Upload/Set/1587968517000.png',
//提现明细默认
tixianMoren: this.domainManager().ImageUrl + '/Upload/Set/1587968599000.png',
//我的团队默认
myTeamMoren: this.domainManager().ImageUrl + '/Upload/Set/1587968613000.png',
//推广二维码默认
tuiguangCode: this.domainManager().ImageUrl + '/Upload/Set/1587968626000.png',
//vip购买默认背景
vipbackground: this.domainManager().ImageUrl + '/Upload/Set/vipbg.png',
imgType: 1,
changeState: false,
iconDig: false,
iconMsg: {
Name: '',
Path: '',
},
viprule: {
BottomRule: [{
required: true,
message: '请输入活动规则',
trigger: 'blur'
}]
},
//防止重复提交
loadingbut:false
}
},
created() {
this.getData();
},
mounted() {},
methods: {
saveVipMsg(formName){
this.$refs[formName].validate((valid) => {
if (valid) {
this.saveVip();
} else {
return false;
}
});
},
openIcon(index, name, path) {
this.commonIndex = index;
this.imgType = index;
this.iconDig = true;
this.iconMsg = {
Name: name,
Path: path,
}
},
//点击栏目下栏目编辑恢复默认
getIconMsg(iconMsg) {
switch (this.commonIndex) {
case 3:
this.addMsg.DistributionCommissionImage = this.fenxiaoMoren;
iconMsg.Path = this.fenxiaoMoren;
this.addMsg.DistributionCommissionName = '分销佣金';
iconMsg.Name = '分销佣金';
break;
case 4:
this.addMsg.DistributionOrderImage = this.fenxiaoOrder;
iconMsg.Path = this.fenxiaoOrder;
this.addMsg.DistributionOrderName = '分销佣金';
iconMsg.Name = '分销佣金';
break;
case 5:
this.addMsg.WithdrawDetialsImage = this.tixianMoren;
iconMsg.Path = this.tixianMoren;
this.addMsg.WithdrawDetialsName = '提现明细';
iconMsg.Name = '提现明细';
break;
case 6:
this.addMsg.MyTeamImage = this.myTeamMoren;
iconMsg.Path = this.myTeamMoren;
this.addMsg.MyTeamName = '我的团队';
iconMsg.Name = '我的团队';
break;
case 7:
this.addMsg.PromoteQRCodeImage = this.tuiguangCode;
iconMsg.Path = this.tuiguangCode;
this.addMsg.PromoteQRCodeName = '推广二维码';
iconMsg.Name = '推广二维码';
break;
}
},
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.url;
} else if (this.imgType == 2) {
this.addMsg.BottomImage = msg.url;
} else if (this.imgType == 3) {
this.addMsg.DistributionCommissionImage = msg.url;
} else if (this.imgType == 4) {
this.addMsg.DistributionOrderImage = msg.url;
} else if (this.imgType == 5) {
this.addMsg.WithdrawDetialsImage = msg.url;
} else if (this.imgType == 6) {
this.addMsg.MyTeamImage = msg.url;
} else if (this.imgType == 7) {
this.addMsg.PromoteQRCodeImage = msg.url;
}else if(this.imgType == 10){
this.addMsg.VipBuyICO = this.getIconLink(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;
if (res.data.resultCode == 1) {
this.addMsg = res.data.data;
}
})
},
UploadImage(file) {
this.UploadFileToTencent(this.FileType().SetImg, file.file, res => {
if (res.resultCode == 1) {}
})
},
},
};
</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;
}
.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__nav-scroll {
background: #fff;
padding: 0 20px;
box-sizing: border-box;
height: 56px;
line-height: 56px;
}
.customSet .vipImgDiv{
width:100%;
height:100%;
position: relative;
}
.customSet .vip_kaitong{
position: absolute;
width:90%;
bottom:50px;
height:150px;
border-radius:4px;
left:50%;
margin-left:-45%;
/* background-color: #cf65cd; */
}
.customSet .vip_yue{
width:70%;
margin:20px auto 10px;
vertical-align: top;
display: flex;
justify-content: space-around;
flex-wrap: nowrap;
color:#fff;
}
.customSet .vip_Month{
font-size:30px;
color:#fff;
}
.customSet .vip_yellow{
color:#fff100;
font-size:30px;
font-weight: bold;
}
.customSet .my_VipBtn{
width:85%;
height:40px;
border:none;
background-color: #FFF100;
color:#510A63;
border-radius: 20px;
margin-left:26px;
}
.customSet .vip_activeRule{
width:100%;
position: absolute;
bottom:15px;
text-align: center;
color:#DD6ADA;
}
.customSet .userCommonimg {
width: 80px;
height: 80px;
border-radius: 0%;
}
.customSet .userCommonimg img {
width: 100%;
height: 100%;
}
</style>
src/router/index.js
View file @ 73174598
......@@ -310,6 +310,12 @@ export default new Router({
path: '/tinyMerchantSet',
name: 'tinyMerchantSet',
component: resolve => require(['@/components/UserMan/tinyMerchant/tinyMerchantSet'], resolve),
},
// 用户管理 微店的自定义设置
{
path: '/wdCustomSet',
name: 'wdCustomSet',
component: resolve => require(['@/components/UserMan/tinyMerchant/wdCustomSet'], resolve),
},
// 商品管理 素材管理
{
......
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