forked from zhongyuanhaiju/uniapp
531 lines
18 KiB
Vue
531 lines
18 KiB
Vue
<template>
|
|
<page-meta :page-style="themeColor"></page-meta>
|
|
<view class="fenxiao-index">
|
|
<block v-if="info.fenxiao_id > 0">
|
|
<!-- 头部 -->
|
|
<view
|
|
class="fenxiao-index-header"
|
|
:class="{ 'not-level': !levelList.length }"
|
|
:style="{ background: 'url(' + $util.img('public/uniapp/fenxiao/index/header_bg.png') + ') no-repeat top left / 100% 100%' }">
|
|
<view class="member">
|
|
<view class="member-pic">
|
|
<image
|
|
:src="info.headimg ? $util.img(info.headimg) : $util.getDefaultImage().head"
|
|
@error="info.headimg = $util.getDefaultImage().head"
|
|
mode="aspectFill"
|
|
></image>
|
|
<!-- <text class="level-name ">{{ info.level_name }}</text> -->
|
|
</view>
|
|
<view class="member-info">
|
|
<view class="member-info-box">
|
|
<text class="name">{{ info.fenxiao_name }}</text>
|
|
</view>
|
|
<view class="recommend" v-if="info.level_num > 0">{{ info.level_name }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="fenxiao-level-wrap" v-if="levelList.length">
|
|
<image :src="$util.img('public/uniapp/fenxiao/index/level_icon.png')" mode="heightFix" class="level-icon"></image>
|
|
<view class="level-wrap">
|
|
<view class="title">{{ info.level_name }}</view>
|
|
<view class="desc" v-if="parseInt(info.is_apply_upgrade) === 1">提交申请可以提升等级！</view>
|
|
</view>
|
|
<view class="btn" @click="$util.redirectTo('/pages_promotion/fenxiao/apply_upgrade')" v-if="parseInt(info.is_apply_upgrade) === 1">申请升级</view>
|
|
</view>
|
|
</view>
|
|
<view class="fenxiao-team">
|
|
<view class="fenxiao-index-other">
|
|
<view @click="$util.redirectTo('/pages_promotion/fenxiao/team')" class="all-money-item">
|
|
<view class="img-wrap"><image :src="$util.img('public/uniapp/fenxiao/index/team1.png')" mode="aspectFill"></image></view>
|
|
<view class="all-money-tit-wrap">
|
|
<text class="all-money-tit">我的团队</text>
|
|
<text class="all-money-num">{{ teamNum.num }}人</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fenxiao-index-other">
|
|
<view @click="$util.redirectTo('/pages_promotion/fenxiao/child_fenxiao')" class="all-money-item">
|
|
<view class="img-wrap"><image :src="$util.img('public/uniapp/fenxiao/index/team2.png')" mode="aspectFill"></image></view>
|
|
<view class="all-money-tit-wrap">
|
|
<text class="all-money-tit">{{ fenxiaoWords.fenxiao_name }}</text>
|
|
<text class="all-money-num">{{ info.one_child_fenxiao_num }}人</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能列表 -->
|
|
<view class="fenxiao-menu-list">
|
|
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/withdraw_list')">
|
|
<view class="icon-wrap"><image :src="$util.img('public/uniapp/fenxiao/index/tixian.png')" mode="widthFix"></image></view>
|
|
<view class="info">
|
|
<view class="title">{{ fenxiaoWords.withdraw }}明细</view>
|
|
<view class="desc">累计{{ fenxiaoWords.account }}{{ info.total_commission | moneyFormat }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/order')">
|
|
<view class="icon-wrap"><image :src="$util.img('public/uniapp/fenxiao/index/order.png')" mode="widthFix"></image></view>
|
|
<view class="info">
|
|
<view class="title">{{ fenxiaoWords.concept + '订单' }}</view>
|
|
<view class="desc">{{ fenxiaoWords.concept + '订单' }}明细</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/promote_code', { templateId: templateId })">
|
|
<view class="icon-wrap"><image :src="$util.img('public/uniapp/fenxiao/index/code.png')" mode="widthFix"></image></view>
|
|
<view class="info">
|
|
<view class="title">推广海报</view>
|
|
<view class="desc">邀请好友</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/bill')">
|
|
<view class="icon-wrap"><image :src="$util.img('public/uniapp/fenxiao/index/bill.png')" mode="widthFix"></image></view>
|
|
<view class="info">
|
|
<view class="title">账单报表</view>
|
|
<view class="desc">{{ fenxiaoWords.account }}变更明细</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/goods_list', { templateId: templateId })">
|
|
<view class="icon-wrap"><image :src="$util.img('public/uniapp/fenxiao/index/market.png')" mode="widthFix"></image></view>
|
|
<view class="info">
|
|
<view class="title">{{ fenxiaoWords.concept }}商品</view>
|
|
<view class="desc">{{ fenxiaoWords.concept }}商品</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/ranking_list', { type: 'profit' })">
|
|
<view class="icon-wrap"><image :src="$util.img('public/uniapp/fenxiao/index/commission_rank.png')" mode="widthFix"></image></view>
|
|
<view class="info">
|
|
<view class="title">{{ fenxiaoWords.account }}排行</view>
|
|
<view class="desc">您的排名为第{{ profitRanking }}位</view>
|
|
</view>
|
|
</view>
|
|
<view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/ranking_list', { type: 'invited_num' })">
|
|
<view class="icon-wrap"><image :src="$util.img('public/uniapp/fenxiao/index/promoter_rank.png')" mode="widthFix"></image></view>
|
|
<view class="info">
|
|
<view class="title">推广人排行</view>
|
|
<view class="desc">您的排名为{{ invitedNumRanking }}位</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="menu-item" @click="$util.redirectTo('/pages_promotion/fenxiao/level')" v-if="levelList.length">
|
|
<view class="icon-wrap"><image :src="$util.img('public/uniapp/fenxiao/index/team_reward.png')" mode="widthFix"></image></view>
|
|
<view class="info">
|
|
<view class="title">个人业绩</view>
|
|
<view class="desc">{{ fenxiaoWords.concept }}等级说明</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</block>
|
|
<ns-copyright></ns-copyright>
|
|
<view class="empty" v-if="!info.fenxiao_id > 0 && showEmpty">
|
|
<image :src="$util.img('public/uniapp/fenxiao/index/no-fenxiao.png')" mode="widthFix"></image>
|
|
<text>您还不是{{ fenxiaoWords.fenxiao_name }}，请先提交申请</text>
|
|
<view @click="$util.redirectTo('/pages_promotion/fenxiao/apply')" class="color-base-bg">立即加入</view>
|
|
</view>
|
|
<ns-login ref="login"></ns-login>
|
|
<loading-cover ref="loadingCover"></loading-cover>
|
|
<uni-popup ref="taskPopup" type="bottom">
|
|
<view class="deliverytype-popup-layer popup-layer" v-if="levelInfo">
|
|
<view class="head-wrap">
|
|
<text>快速升级技巧</text>
|
|
<text class="iconfont icon-close" @click="$refs.taskPopup.close()"></text>
|
|
</view>
|
|
<view class="equity-content" v-for="(item, index) in levelInfo.task" :key="index">
|
|
<text class="subordinate-consumption">
|
|
{{ item.title }}
|
|
<text class="iconfont icon-wenhao" @click="openTips(item)"></text>
|
|
<text class="incomplete">{{ item.progress == 100 ? '已完成' : '未完成' }}</text>
|
|
</text>
|
|
<view class="circle"><progress :percent="item.progress" activeColor="#E7B667" stroke-width="4" /></view>
|
|
<text class="zero">{{ item.value }}</text>
|
|
<text>/{{ item.condition }}</text>
|
|
<text class="to-complete-box" @click="$util.redirectTo('/pages_promotion/fenxiao/promote')">
|
|
<text class="to-complete">{{ item.progress == 100 ? '已完成' : '去完成' }}</text>
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<uni-popup type="bottom" ref="tips">
|
|
<view class="popup">
|
|
<view class="popup-header">
|
|
<text class="tit">提示</text>
|
|
<text class="iconfont icon-close" @click="$refs.tips.close()"></text>
|
|
</view>
|
|
<view class="popup-body">
|
|
<view>{{ tips }}</view>
|
|
<view v-if="levelInfo">{{ levelInfo.upgrade_type == 1 ? '满足任意一条件即可升级' : '满足全部条件才能进行升级' }}</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import fenxiaoWords from '@/common/js/fenxiao-words.js';
|
|
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
export default {
|
|
components: {
|
|
uniPopup
|
|
},
|
|
data() {
|
|
return {
|
|
info: {
|
|
fenxiao_name: '',
|
|
fenxiao_id: 0
|
|
},
|
|
showEmpty: false,
|
|
teamNum: {
|
|
fenxiao_num: 0,
|
|
member_num: 0
|
|
},
|
|
//初始化获取到的模板id
|
|
templateId: '',
|
|
tips: '',
|
|
profitRanking: 0,
|
|
invitedNumRanking: 0,
|
|
levelList: []
|
|
};
|
|
},
|
|
components: {},
|
|
mixins: [fenxiaoWords],
|
|
onShow() {
|
|
setTimeout(() => {
|
|
if (this.addonIsExist && !this.addonIsExist.fenxiao) {
|
|
this.$util.showToast({
|
|
title: '商家未开启分销',
|
|
mask: true,
|
|
duration: 2000
|
|
});
|
|
setTimeout(() => {
|
|
this.$util.redirectTo('/pages/index/index', {}, 'redirectTo');
|
|
}, 2000);
|
|
return;
|
|
}
|
|
}, 1000);
|
|
|
|
if (this.fenxiaoWords && this.fenxiaoWords.concept) this.$langConfig.title(this.fenxiaoWords.concept + '中心');
|
|
|
|
if (uni.getStorageSync('token')) {
|
|
this.checkFenxiaoIsStart();
|
|
} else {
|
|
setTimeout(() => {
|
|
this.$refs.login.open('/pages_promotion/fenxiao/index');
|
|
});
|
|
}
|
|
|
|
this.getTemplateId();
|
|
},
|
|
onLoad() {
|
|
this.getRanking('invited_num');
|
|
this.getRanking('profit');
|
|
this.getFenxiaoLevel();
|
|
},
|
|
methods: {
|
|
/**
|
|
* 检测分销是否开启
|
|
*/
|
|
checkFenxiaoIsStart() {
|
|
this.$api.sendRequest({
|
|
url: '/fenxiao/api/config/basics',
|
|
success: res => {
|
|
if (res.code == 0 && res.data) {
|
|
if (res.data.level > 0) {
|
|
this.getFenxiaoDetail();
|
|
} else {
|
|
this.$util.showToast({
|
|
title: '商家未开启分销',
|
|
mask: true,
|
|
duration: 2000
|
|
});
|
|
setTimeout(() => {
|
|
this.$util.redirectTo('/pages/member/index');
|
|
}, 2000);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 获取分销商信息
|
|
getFenxiaoDetail() {
|
|
this.$api.sendRequest({
|
|
url: '/fenxiao/api/fenxiao/detail',
|
|
success: res => {
|
|
if (res.data) {
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
this.info = res.data;
|
|
this.getTeamNum();
|
|
this.showEmpty = true;
|
|
} else {
|
|
this.$util.redirectTo('/pages_promotion/fenxiao/apply_upgrade', {}, 'redirectTo');
|
|
}
|
|
},
|
|
fail: res => {
|
|
this.showEmpty = true;
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
}
|
|
});
|
|
},
|
|
//去提现
|
|
goTixian() {
|
|
this.$util.redirectTo('/pages_promotion/fenxiao/withdraw_apply');
|
|
},
|
|
toLevel() {
|
|
this.$util.redirectTo('/pages_promotion/fenxiao/level');
|
|
},
|
|
close() {
|
|
this.$refs.taskPopup.close();
|
|
},
|
|
getTeamNum() {
|
|
this.$api.sendRequest({
|
|
url: '/fenxiao/api/fenxiao/teamnum',
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.teamNum = res.data;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 获取分享海报模板id
|
|
*/
|
|
getTemplateId() {
|
|
this.$api.sendRequest({
|
|
url: '/fenxiao/api/fenxiao/posterTemplateIds',
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.templateId = [...res.data].join();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
moneyFormat(money) {
|
|
if (isNaN(parseFloat(money))) return money;
|
|
return parseFloat(money).toFixed(2);
|
|
},
|
|
openTips(data) {
|
|
this.tips = data.tips;
|
|
this.$refs.tips.open();
|
|
},
|
|
getRanking(type) {
|
|
this.$api.sendRequest({
|
|
url: '/fenxiao/api/fenxiao/ranking',
|
|
data: {
|
|
type: type
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
if (type == 'profit') this.profitRanking = res.data;
|
|
if (type == 'invited_num') this.invitedNumRanking = res.data;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
getFenxiaoLevel() {
|
|
this.$api.sendRequest({
|
|
url: '/fenxiao/api/Level/lists',
|
|
success: res => {
|
|
if (res.code == 0 && res.data) {
|
|
this.levelList = res.data;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
onBackPress(options) {
|
|
if (options.from === 'navigateBack') {
|
|
return false;
|
|
}
|
|
this.$util.redirectTo('/pages/member/index', {}, 'reLaunch');
|
|
return true;
|
|
},
|
|
watch: {
|
|
storeToken: function(nVal, oVal) {
|
|
if (nVal) {
|
|
this.checkFenxiaoIsStart();
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
storeToken() {
|
|
return this.$store.state.token;
|
|
},
|
|
levelInfo() {
|
|
if (this.info && this.info.condition && this.info.condition.last_level) {
|
|
let level = this.info.condition.last_level;
|
|
level.task = [];
|
|
level.complete = 0;
|
|
|
|
if (level.one_fenxiao_order_num > 0) {
|
|
let task = {
|
|
title: '下级消费',
|
|
desc: '下级消费单数满' + level.one_fenxiao_order_num + '单',
|
|
tips: '分销商自己购买和自己推荐的直属会员购买的订单次数',
|
|
condition: level.one_fenxiao_order_num,
|
|
value: this.info.one_fenxiao_order_num,
|
|
progress:
|
|
parseFloat(this.info.one_fenxiao_order_num) > parseFloat(level.one_fenxiao_order_num)
|
|
? 100
|
|
: ((parseFloat(this.info.one_fenxiao_order_num) / parseFloat(level.one_fenxiao_order_num)) * 100).toFixed(2)
|
|
};
|
|
if (task.progress == 100) level.complete += 1;
|
|
level.task.push(task);
|
|
}
|
|
if (level.one_fenxiao_total_order > 0) {
|
|
let task = {
|
|
title: '下级消费',
|
|
desc: '下级消费金额满' + this.moneyFormat(level.one_fenxiao_total_order) + '元',
|
|
tips: '分销商自己购买和推荐的直属会员购买的订单的总额',
|
|
condition: this.moneyFormat(level.one_fenxiao_total_order),
|
|
value: this.info.one_fenxiao_total_order,
|
|
progress:
|
|
parseFloat(this.info.one_fenxiao_total_order) > parseFloat(level.one_fenxiao_total_order)
|
|
? 100
|
|
: ((parseFloat(this.info.one_fenxiao_total_order) / parseFloat(level.one_fenxiao_total_order)) * 100).toFixed(2)
|
|
};
|
|
if (task.progress == 100) level.complete += 1;
|
|
level.task.push(task);
|
|
}
|
|
if (level.one_fenxiao_order_money > 0) {
|
|
let task = {
|
|
title: '下级消费',
|
|
desc: '下级消费产生' + this.fenxiaoWords.account + '总额满' + this.moneyFormat(level.one_fenxiao_order_money) + '元',
|
|
tips: '分销商自己购买和自己推荐的直属会员购买的订单' + this.fenxiaoWords.account + '总额',
|
|
condition: this.moneyFormat(level.one_fenxiao_order_money),
|
|
value: this.info.one_fenxiao_order_money,
|
|
progress:
|
|
parseFloat(this.info.one_fenxiao_order_money) > parseFloat(level.one_fenxiao_order_money)
|
|
? 100
|
|
: ((parseFloat(this.info.one_fenxiao_order_money) / parseFloat(level.one_fenxiao_order_money)) * 100).toFixed(2)
|
|
};
|
|
if (task.progress == 100) level.complete += 1;
|
|
level.task.push(task);
|
|
}
|
|
if (level.order_num > 0) {
|
|
let task = {
|
|
title: '自身消费',
|
|
desc: '自身消费单数满' + level.order_num + '单',
|
|
tips: '分销商自己购买的订单次数',
|
|
condition: level.order_num,
|
|
value: this.info.order_num,
|
|
progress:
|
|
parseFloat(this.info.order_num) > parseFloat(level.order_num) ? 100 : ((parseFloat(this.info.order_num) / parseFloat(level.order_num)) * 100).toFixed(2)
|
|
};
|
|
if (task.progress == 100) level.complete += 1;
|
|
level.task.push(task);
|
|
}
|
|
if (level.order_money > 0) {
|
|
let task = {
|
|
title: '自身消费',
|
|
desc: '自身消费金额满' + this.moneyFormat(level.order_money) + '元',
|
|
tips: '分销商自己购买的订单总额',
|
|
condition: this.moneyFormat(level.order_money),
|
|
value: this.info.order_money,
|
|
progress:
|
|
parseFloat(this.info.order_money) > parseFloat(level.order_money)
|
|
? 100
|
|
: ((parseFloat(this.info.order_money) / parseFloat(level.order_money)) * 100).toFixed(2)
|
|
};
|
|
if (task.progress == 100) level.complete += 1;
|
|
level.task.push(task);
|
|
}
|
|
if (level.one_child_num > 0) {
|
|
let task = {
|
|
title: '邀请好友',
|
|
desc: '邀请好友人数达到' + level.one_child_num + '人',
|
|
tips: '分销商的直属下级会员人数（包含已经申请成为分销商的）',
|
|
condition: level.one_child_num,
|
|
value: this.info.one_child_num,
|
|
progress:
|
|
parseFloat(this.info.one_child_num) > parseFloat(level.one_child_num)
|
|
? 100
|
|
: ((parseFloat(this.info.one_child_num) / parseFloat(level.one_child_num)) * 100).toFixed(2)
|
|
};
|
|
if (task.progress == 100) level.complete += 1;
|
|
level.task.push(task);
|
|
}
|
|
if (level.one_child_fenxiao_num > 0) {
|
|
let task = {
|
|
title: '邀请好友',
|
|
desc: '邀请好友成为分销商人数达到' + level.one_child_fenxiao_num + '人',
|
|
tips: '分销商的直属下级分销商人数',
|
|
condition: level.one_child_fenxiao_num,
|
|
value: this.info.one_child_fenxiao_num,
|
|
progress:
|
|
parseFloat(this.info.one_child_fenxiao_num) > parseFloat(level.one_child_fenxiao_num)
|
|
? 100
|
|
: ((parseFloat(this.info.one_child_fenxiao_num) / parseFloat(level.one_child_fenxiao_num)) * 100).toFixed(2)
|
|
};
|
|
if (task.progress == 100) level.complete += 1;
|
|
level.task.push(task);
|
|
}
|
|
level.task_num = level.upgrade_type == 1 ? 1 : level.task.length;
|
|
return level;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './public/css/index.scss';
|
|
/deep/ .ns-copyright-info {
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
.account-info {
|
|
display: flex;
|
|
padding: 40rpx 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
view {
|
|
color: #fff;
|
|
}
|
|
.solid {
|
|
height: 70rpx;
|
|
width: 2rpx;
|
|
background: #fff;
|
|
border-radius: 2rpx;
|
|
}
|
|
|
|
.account-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
.value {
|
|
font-size: 34rpx;
|
|
font-weight: bold !important;
|
|
margin-bottom: 4rpx;
|
|
line-height: 1.3;
|
|
}
|
|
.title {
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
.account-info {
|
|
width: 100%;
|
|
background: #fff;
|
|
margin: 20rpx 0 0 0;
|
|
color: #333;
|
|
border-radius: 18rpx;
|
|
.solid {
|
|
background: #f2f2f2;
|
|
}
|
|
.account-item {
|
|
.value {
|
|
color: #000000;
|
|
}
|
|
.title {
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
|
|
background: none;
|
|
max-height: unset !important;
|
|
overflow-y: hidden !important;
|
|
}
|
|
/deep/ .uni-popup__wrapper {
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
}
|
|
/deep/ .uni-popup {
|
|
z-index: 8;
|
|
}
|
|
</style>
|