|
@@ -0,0 +1,409 @@
|
|
|
+<template>
|
|
|
+ <div class="partner-detail">
|
|
|
+ <h1>剑鱼伙伴</h1>
|
|
|
+ <Row>
|
|
|
+ <Col :lg="6" class="top-col">
|
|
|
+ <Card>
|
|
|
+ <div slot="title" class="top-tit">
|
|
|
+ <div class="avatr">
|
|
|
+ <img src="../../assets/images/login_logo.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="names">卡卡罗特</div>
|
|
|
+ <div class="msg1">183 8923 9821</div>
|
|
|
+ <div class="msg1 msg2">mark.andre@gmail.com</div>
|
|
|
+ </div>
|
|
|
+ <div class="bot-tit">
|
|
|
+ <div class="over-view" @click="tabClick(1)" :class="{active:infor === 1}"><span>概览</span></div>
|
|
|
+ <div class="basic" @click="tabClick(2)" :class="{active:infor === 2}"><span>基本信息<i>已认证</i></span></div>
|
|
|
+ <div class="fund" @click="tabClick(3)" :class="{active:infor === 3}"><span>资金明细</span></div>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ <Col :lg="17">
|
|
|
+ <Card v-if="infor == 1">
|
|
|
+ <div slot="title" class="right-fund">概览</div>
|
|
|
+ <div class="msg-card">
|
|
|
+ <Card>
|
|
|
+ <div class="add-time">
|
|
|
+ <div class="time1"><img src="../../assets/images/riqi.svg" />加入日期</div>
|
|
|
+ <div class="time2">2020.02.02</div>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ <Card>
|
|
|
+ <div class="add-time">
|
|
|
+ <div class="time1"><img src="../../assets/images/riqi.svg" />最后使用日期</div>
|
|
|
+ <div class="time2">2020.02.02</div>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ <Card>
|
|
|
+ <div class="add-time">
|
|
|
+ <div class="time1"><img src="../../assets/images/yongjin.svg" />累计销售额</div>
|
|
|
+ <div class="time2">2020.02.02</div>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ <Card>
|
|
|
+ <div class="add-time">
|
|
|
+ <div class="time1"><img src="../../assets/images/dingdan.svg" />累计销售订单</div>
|
|
|
+ <div class="time2">2020.02.02</div>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ <Card>
|
|
|
+ <div class="add-time">
|
|
|
+ <div class="time1"><img src="../../assets/images/yongjin.svg" />累计佣金</div>
|
|
|
+ <div class="time2">2020.02.02</div>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ <Table ellipsis :loading="loading" :columns="column1" :data="data" stripe style="margin-top: 30px">
|
|
|
+ <template slot-scope="{ row }" slot="opt"></template>
|
|
|
+ </Table>
|
|
|
+ </Card>
|
|
|
+ <Card v-else-if="infor == 2">
|
|
|
+ <div slot="title" class="right-fund">基本信息</div>
|
|
|
+ <div class="infor-card">
|
|
|
+ <div class="con" v-if="types">
|
|
|
+ <span>企业名称</span>
|
|
|
+ <span class="spa2">北京拓普</span>
|
|
|
+ </div>
|
|
|
+ <div class="con" v-else>
|
|
|
+ <span>用户名</span>
|
|
|
+ <span class="spa2">卡卡罗特</span>
|
|
|
+ </div>
|
|
|
+ <Divider />
|
|
|
+ <div class="con">
|
|
|
+ <span>手机</span>
|
|
|
+ <span class="spa2">卡卡罗特</span>
|
|
|
+ </div>
|
|
|
+ <Divider />
|
|
|
+ <div class="con">
|
|
|
+ <span>邮箱</span>
|
|
|
+ <span class="spa2">卡卡罗特</span>
|
|
|
+ </div>
|
|
|
+ <Divider />
|
|
|
+ <div class="con">
|
|
|
+ <span>类型</span>
|
|
|
+ <span class="spa2">卡卡罗特</span>
|
|
|
+ </div>
|
|
|
+ <Divider />
|
|
|
+ <div class="con">
|
|
|
+ <span>渠道</span>
|
|
|
+ <span class="spa2">卡卡罗特</span>
|
|
|
+ </div>
|
|
|
+ <Divider />
|
|
|
+ <div class="con" v-if="types">
|
|
|
+ <span class="spa1">营业执照</span>
|
|
|
+ <img @click="fruit" src="../../assets/images/frut.jpg"/>
|
|
|
+ </div>
|
|
|
+ <Divider v-if="types" />
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ <Card v-else>
|
|
|
+ <div slot="title" class="right-fund">资金明细</div>
|
|
|
+ <Table ellipsis :loading="loading" :columns="column2" :data="data" stripe style="margin-top: 10px">
|
|
|
+ <template slot-scope="{ row }" slot="opt">
|
|
|
+ <Button
|
|
|
+ class="find-btn"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ :to="{path:'/sales/commissionList'}"
|
|
|
+ >详情</Button>
|
|
|
+ </template>
|
|
|
+ </Table>
|
|
|
+ </Card>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ <Modal v-model="preview">
|
|
|
+ <img src="../../assets/images/frut.jpg">
|
|
|
+ <div slot="footer"></div>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ methods: {
|
|
|
+ load(val) {
|
|
|
+ this.loading = val
|
|
|
+ },
|
|
|
+ tabClick(index) {
|
|
|
+ this.infor = index
|
|
|
+ },
|
|
|
+ fruit() {
|
|
|
+ this.preview = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ infor: 1,
|
|
|
+ types: 1,
|
|
|
+ preview: false,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: 'VIP订阅',
|
|
|
+ slat: '¥293.09',
|
|
|
+ _action: 3,
|
|
|
+ money: '¥293.09',
|
|
|
+ aver: '¥293.09'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'VIP订阅',
|
|
|
+ slat: '¥293.09',
|
|
|
+ _action: 3,
|
|
|
+ money: '¥293.09',
|
|
|
+ aver: '¥293.09'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'VIP订阅',
|
|
|
+ slat: '¥293.09',
|
|
|
+ _action: 3,
|
|
|
+ money: '¥293.09',
|
|
|
+ aver: '¥293.09'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'VIP订阅',
|
|
|
+ slat: '¥293.09',
|
|
|
+ _action: 3,
|
|
|
+ money: '¥293.09',
|
|
|
+ aver: '¥293.09'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ column1: [
|
|
|
+ {
|
|
|
+ title: '产品名称',
|
|
|
+ key: 'name',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '累计销售额',
|
|
|
+ key: 'slat',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '累计销售订单',
|
|
|
+ key: '_action',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '累计佣金',
|
|
|
+ key: 'money',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '平均佣金',
|
|
|
+ key: 'money',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ column2: [
|
|
|
+ {
|
|
|
+ title: '订单号',
|
|
|
+ key: 'name',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '类型',
|
|
|
+ key: 'slat',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ key: '_action',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '金额',
|
|
|
+ key: 'money',
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ slot: 'opt',
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.partner-detail {
|
|
|
+ padding-left: 20px;
|
|
|
+ h1 {
|
|
|
+ font-size:24px;
|
|
|
+ color:#3f4047;
|
|
|
+ padding: 10px 0 20px 30px;
|
|
|
+ }
|
|
|
+ .top-col {
|
|
|
+ margin-right: 20px;
|
|
|
+ .ivu-card /deep/ {
|
|
|
+ .ivu-card-head {
|
|
|
+ padding: 28px 0;
|
|
|
+ }
|
|
|
+ .ivu-card-body {
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top-tit {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .avatr {
|
|
|
+ width: 126px;
|
|
|
+ height: 126px;
|
|
|
+ border: 2px solid #f4f5f8;
|
|
|
+ border-radius: 63px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 28px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .names {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1b1c1e;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .msg1 {
|
|
|
+ width: 200px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ color: #7b7e8a;
|
|
|
+ background: url(../../assets/images/shoujihao.svg) no-repeat left center;
|
|
|
+ background-size: 26px 26px;
|
|
|
+ padding-left: 40px;
|
|
|
+ }
|
|
|
+ .msg2 {
|
|
|
+ background: url(../../assets/images/youxiang.svg) no-repeat left center;
|
|
|
+ background-size: 26px 26px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bot-tit {
|
|
|
+ padding: 20px 0;
|
|
|
+ div {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%!important;
|
|
|
+ height: 55px!important;
|
|
|
+ line-height: 55px!important;
|
|
|
+ color: #6f727d!important;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ span {
|
|
|
+ color: #475962;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ width: 200px;
|
|
|
+ background-size: 20px 20px!important;
|
|
|
+ padding-left: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .over-view {
|
|
|
+ span {
|
|
|
+ background: url(../../assets/images/gailan.svg) no-repeat 6px center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .basic {
|
|
|
+ span {
|
|
|
+ background: url(../../assets/images/xinxi.svg) no-repeat 6px center;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ color: #70b603;
|
|
|
+ margin-left: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fund {
|
|
|
+ span {
|
|
|
+ background: url(../../assets/images/mingxi.svg) no-repeat 6px center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background:rgba(247, 248, 250, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-fund {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #575962;
|
|
|
+ }
|
|
|
+ .msg-card {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: initial;
|
|
|
+ align-items: center;
|
|
|
+ .ivu-card {
|
|
|
+ overflow:hidden;
|
|
|
+ width: 220px;
|
|
|
+ }
|
|
|
+ .ivu-card:not(:last-child) {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .add-time {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #1b1c1e;
|
|
|
+ .time1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: initial;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ font-size: 15px;
|
|
|
+ img {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time2 {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .infor-card {
|
|
|
+ margin: 30px auto;
|
|
|
+ width: 500px;
|
|
|
+ .con {
|
|
|
+ padding: 5px 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
+ .spa2 {
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ }
|
|
|
+ .spa1 {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ float: right;
|
|
|
+ width: 192px;
|
|
|
+ height: 197px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // .find-btn {
|
|
|
+ // background: none;
|
|
|
+ // color:#36a3f7;
|
|
|
+ // &:focus {
|
|
|
+ // box-shadow: none;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+}
|
|
|
+</style>
|