442 lines
13 KiB
Vue
442 lines
13 KiB
Vue
<template>
|
||
<div>
|
||
<c-title :hide="false" :text="page_title" tolink="detailed"></c-title>
|
||
<div class="content-box" v-if="is_show">
|
||
<!--顶部用户信息-->
|
||
<div class="user box-item">
|
||
<div class="user-img">
|
||
<img class="user-img-icon" :src="user.avatar_image" />
|
||
</div>
|
||
<div class="user_name">{{ user.username }}</div>
|
||
<div class="user_id">ID：{{ user.uid }}</div>
|
||
</div>
|
||
<!--可提现金额&团队人数-->
|
||
<div class="money-and-team box-item">
|
||
<div class="team-block" @click="goToPage('withdrawal')">
|
||
<div class="team-block-title">
|
||
可提现(元)<i class="fa fa-angle-right"></i>
|
||
</div>
|
||
<div class="team-block-money">{{ income }}</div>
|
||
</div>
|
||
<div class="team-block" @click="goToPage('myRelationship')">
|
||
<div class="team-block-title">
|
||
团队总数<i class="fa fa-angle-right"></i>
|
||
</div>
|
||
<div class="team-block-money">{{ team_total }}</div>
|
||
</div>
|
||
</div>
|
||
<!--统计信息-->
|
||
<div class="statistics box-item">
|
||
<!--顶部内容-->
|
||
<div class="statistics-top">
|
||
<div class="top-block">
|
||
<div class="top-title">累计收入(元)</div>
|
||
<div class="top-income">{{ total_income }}</div>
|
||
</div>
|
||
<div class="top-block">
|
||
<div class="top-title" @click="goToPage('incomedetails')">
|
||
收入明细<i class="fa fa-angle-right"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--统计列表-->
|
||
<div class="statistic-list">
|
||
<div class="list-box" v-for="(item,index) in statistics" :key="index" @click="detailsGoToPage(item)">
|
||
<div class="box-title">{{ item.title }}</div>
|
||
<div class="box-num">{{ item.num }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--常用工具-->
|
||
<div class="tool-title">常用工具</div>
|
||
<div class="tool-content box-item">
|
||
<div class="tool-block" v-for="(item,index) in tool_list" :key="index" @click="toolGoToPage(item.path_name)">
|
||
<div class="tool-left">
|
||
<img class="tool-icon" :src="require('../../../assets/images/weight_value/' + item.icon)" />
|
||
</div>
|
||
<div class="tool-right">
|
||
<div class="right-title">{{ item.title }}</div>
|
||
<div class="right-desc">{{ item.sub_title }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 海报部分 -->
|
||
<yz-goodsposter v-model="posterShow" :posterData="poster_Data" :defaultImg="poster" :width="`18.875rem`" v-on:finish="uploadImageM"></yz-goodsposter>
|
||
<!-- 海报部分 end -->
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import yzGoodsposter from "components/ui_components/yz_goodsPoster";
|
||
export default {
|
||
components:{
|
||
yzGoodsposter,
|
||
},
|
||
data() {
|
||
return {
|
||
page_title: '',
|
||
page_params: {},
|
||
is_show: false,
|
||
user: {},
|
||
statistics: {},
|
||
income: 0,
|
||
total_income: 0,
|
||
team_total: 0,
|
||
// 常用工具列表
|
||
tool_list:[
|
||
{ title: '我的权重值', sub_title: '查看权重值', icon: '001.png', path_name: 'weight_value' },
|
||
{ title: '我的典藏', sub_title: '我的画作', icon: '002.png', path_name: 'collection_room' },
|
||
{ title: '我的客户', sub_title: '团队客户明细', icon: '003.png', path_name: 'myRelationship' },
|
||
{ title: '分享二维码', sub_title: '生成分享码', icon: '004.png', path_name: 'qrcode' },
|
||
{ title: '团队业绩', sub_title: '团队累计业绩', icon: '005.png', path_name: 'incomedetails' },
|
||
],
|
||
// 海报
|
||
posterShow: false,
|
||
poster: "",
|
||
poster_Data: {
|
||
poster_data: null,
|
||
background: {}
|
||
},
|
||
|
||
};
|
||
},
|
||
activated() {
|
||
let _this = this;
|
||
_this.page_params = Object.assign(_this.$route.params, _this.$route.query);
|
||
_this.getData();
|
||
},
|
||
methods: {
|
||
// 数据获取
|
||
getData() {
|
||
let _this = this;
|
||
let params = {
|
||
team_level_id: _this.page_params.team_level_id
|
||
};
|
||
$http.get("plugin.weight-value.api.index.get-center-data", params, "加载中...").then((res) => {
|
||
if (parseInt(res.result) === 1) {
|
||
let data = res.data;
|
||
let title = data.level_name || '经纪人';
|
||
_this.page_title = document.title = (title + '中心');
|
||
_this.user = data.user;
|
||
_this.statistics = data.statistics;
|
||
_this.income = data.income;
|
||
_this.total_income = data.total_income;
|
||
_this.team_total = data.team_total;
|
||
|
||
_this.is_show = true;
|
||
}
|
||
}).catch((error) => {});
|
||
},
|
||
// 跳转页面
|
||
goToPage(key, params = {}, query = {}) {
|
||
if(key) this.$router.push(this.fun.getUrl(key, params, query));
|
||
},
|
||
// 统计明细跳转处理
|
||
detailsGoToPage(info){
|
||
let _this = this;
|
||
if(info.key_name){
|
||
let query = {
|
||
key_name: info.key_name || '',
|
||
team_level_id: _this.page_params.team_level_id
|
||
};
|
||
this.goToPage('weight_value_detailed',{},query);
|
||
}
|
||
},
|
||
// 工具跳转处理
|
||
toolGoToPage(pathName){
|
||
if(pathName === 'weight_value') this.goToPage('weight_value',{},{ team_level_id: this.page_params.team_level_id});
|
||
else if(pathName === 'qrcode') this.getPoster();
|
||
else this.goToPage(pathName);
|
||
},
|
||
// 生成分享二维码海报
|
||
getPoster(e) {
|
||
let _this = this;
|
||
$http.get("member.qrcode.get-poster", {}, {})
|
||
.then(res => {
|
||
if (parseInt(res.result) === 1) {
|
||
_this.isNewPosterPlugin = res.data.new || false;
|
||
let center_show = !isNaN(parseInt(res.data.center_show)) ? parseInt(res.data.center_show) : 0;
|
||
if (center_show === 0) {
|
||
//0 返回的默认图片
|
||
_this.poster = res.data.image_url;
|
||
_this.posterShow = true;
|
||
} else if (center_show === 1) {
|
||
//前端生成
|
||
_this.poster_Data.background.src = res.data.background_url || res.data.background;
|
||
_this.poster_Data.background.type = "background";
|
||
_this.poster_Data.poster_data = res.data.style_data;
|
||
_this.poster_id = res.data.id;
|
||
_this.posterShow = true;
|
||
} else if (center_show === 2) {
|
||
//部分关注二维码不支持跨域，走老接口
|
||
_this.toastPoster = _this.$toast({
|
||
duration: -1, // 持续展示 toast
|
||
message: "正在为您生成海报中"
|
||
});
|
||
_this.openQrCode_old(e);
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {});
|
||
},
|
||
openQrCode_old(e) {
|
||
if (!this.poster) {
|
||
if (!this.timer) {
|
||
this.getPoster_oldApi(e);
|
||
this.timer = setInterval(() => {
|
||
this.getPoster_oldApi(e);
|
||
}, 3000);
|
||
}
|
||
} else {
|
||
clearInterval(this.timer);
|
||
this.toastPoster.clear();
|
||
}
|
||
},
|
||
getPoster_oldApi(e) {
|
||
$http.get("member.poster").then(
|
||
response => {
|
||
if (response.result === 1) {
|
||
this.poster = response.data.image_url;
|
||
if (this.poster) this.clearPostetInterval();
|
||
} else {
|
||
this.$toast(response.msg);
|
||
this.clearPostetInterval();
|
||
}
|
||
},
|
||
response => {
|
||
this.clearPostetInterval();
|
||
}
|
||
);
|
||
},
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.content-box {
|
||
--item-about-margin-: 15px;
|
||
--item-width-: calc(100% - (var(--item-about-margin-) * 2));
|
||
|
||
background: rgba(255, 220, 47, 0.82);
|
||
width: 100vw;
|
||
padding-top: var(--item-about-margin-);
|
||
min-height: calc(100vh - 40px);
|
||
background: url('../../../assets/images/weight_value/home_bg.jpg') no-repeat;
|
||
background-size: 100% auto;
|
||
|
||
// 公共内容
|
||
.box-item {
|
||
margin-left: var(--item-about-margin-);
|
||
margin-right: var(--item-about-margin-);
|
||
margin-bottom: var(--item-about-margin-);
|
||
width: var(--item-width-);
|
||
background: #fff;
|
||
padding: 15px 20px;
|
||
border-radius: 10px;
|
||
}
|
||
// 顶部用户信息
|
||
.user {
|
||
--user-height-: 30px;
|
||
--user-spacing-: 10px;
|
||
|
||
height: var(--user-height-);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
background: none !important;
|
||
padding: 0!important;
|
||
.user-img {
|
||
width: var(--user-height-);
|
||
height: var(--user-height-);
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin-right: var(--user-spacing-);
|
||
.user-img-icon {
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
}
|
||
}
|
||
.user_name {
|
||
margin-right: var(--user-spacing-);
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
.user_id {
|
||
margin-right: var(--user-spacing-);
|
||
background: #aa9884;
|
||
font-size: 13px;
|
||
padding: 0 10px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
border-radius: 50px;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
// 可提现金额&团队人数
|
||
.money-and-team {
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.team-block {
|
||
width: 50%;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-start;
|
||
.team-block-title{
|
||
font-size: 12px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #606060;
|
||
i{
|
||
width: 20px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
.team-block-money{
|
||
font-weight: bold;
|
||
font-size: 17px;
|
||
}
|
||
}
|
||
}
|
||
// 统计信息
|
||
.statistics {
|
||
.statistics-top {
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
|
||
.top-block {
|
||
text-align: left;
|
||
|
||
.top-title {
|
||
font-size: 12px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #606060;
|
||
|
||
i {
|
||
width: 20px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
text-align: center;
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
|
||
.top-income {
|
||
font-weight: bold;
|
||
font-size: 17px;
|
||
}
|
||
}
|
||
}
|
||
.statistic-list {
|
||
width: calc(100% + 40px);
|
||
position: relative;
|
||
left: -20px;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
.list-box {
|
||
width: calc(100% / 3);
|
||
height: 70px;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.box-title {
|
||
font-size: 12px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #606060;
|
||
}
|
||
.box-num {
|
||
font-weight: bold;
|
||
font-size: 17px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//常用工具
|
||
.tool-title{
|
||
padding: 0 20px;
|
||
padding-bottom: 15px;
|
||
font-weight: bold;
|
||
font-size: 17px;
|
||
text-align: left;
|
||
}
|
||
.tool-content{
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-content: center;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.tool-block{
|
||
--tool-block-height-: 50px;
|
||
|
||
width: 50%;
|
||
height: var(--tool-block-height-);
|
||
margin-bottom: 15px;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
|
||
.tool-left{
|
||
width: var(--tool-block-height-);
|
||
height: var(--tool-block-height-);
|
||
display: inline-flex;
|
||
.tool-icon{
|
||
width: 45% !important;
|
||
height: 45% !important;
|
||
}
|
||
}
|
||
.tool-right{
|
||
text-align: left;
|
||
.right-title{
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
.right-desc{
|
||
font-size: 12px;
|
||
color: #a0a3ae;
|
||
}
|
||
}
|
||
}
|
||
/* 使用选择器重置最后一行的格子下边距为0 */
|
||
.tool-block:nth-child(2n+1):nth-last-child(-n+2),
|
||
.tool-block:nth-child(2n+1):nth-last-child(-n+2)~.tool-block{
|
||
margin-bottom: 0!important;
|
||
}
|
||
}
|
||
}
|
||
</style> |