436 lines
14 KiB
Vue
436 lines
14 KiB
Vue
<template>
|
|
<view class="pad-x150" v-if="isLoading">
|
|
<status-nav :ifReturn="true" navBarTitle="分销中心" :marginBottom="0"></status-nav>
|
|
<!-- 分销概况 -->
|
|
<view class="distribution border-box">
|
|
<view class="distribution-msg radius30 pad-all40 border-box">
|
|
<view class="distribution-txt border-box flex">
|
|
<view class="txt">
|
|
<view class="title font30 mar-x20">我的佣金</view>
|
|
<view class="price font60"><text class="font48">￥</text>{{commission}}</view>
|
|
</view>
|
|
<view class="code-btn mar-s10" @tap="openCode">
|
|
<image src="/static/icon/icon-code.png" mode="widthFix" style="width: 87rpx;height: 87rpx;"></image>
|
|
<view class="font24 mar-s10">查看分销码</view>
|
|
</view>
|
|
</view>
|
|
<view class="distribution-profit mar-s40 flex">
|
|
<view class="item">
|
|
<text class="font24">累计收益</text>
|
|
<view class="profit-price font36 mar-s10">￥{{cumulative_income>0?cumulative_income:'0'}}</view>
|
|
</view>
|
|
<view class="line"></view>
|
|
<view class="item">
|
|
<text class="font24">累计提现</text>
|
|
<view class="profit-price font36 mar-s10">￥{{cumulative_withdrawal>0?cumulative_withdrawal:'0'}}</view>
|
|
</view>
|
|
<view class="line"></view>
|
|
<view class="item">
|
|
<text class="font24">我的团队</text>
|
|
<view class="profit-price font36 mar-s10">{{my_team}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 记录导航 -->
|
|
<view class="record-nav border-box pad-zy20 flex">
|
|
<view class="item color-8c radius20 border-box" :class="index==navIndex?'cur':''" v-for="(item,index) in navList" :key="index" @tap="changeNav(index)">{{item}}</view>
|
|
</view>
|
|
|
|
<!-- 记录列表 -->
|
|
<view class="record-list border-box">
|
|
<!-- 团队导航 -->
|
|
<view class="team-nav mar-s30 flex" v-if="navIndex==1">
|
|
<view class="item" v-for="(item,index) in teamNav" :key="index" @tap="changeTeam(index)">
|
|
<view class="txt font30">{{item}}</view>
|
|
<view class="line mar-s15" :class="index==teamIndex?'background-orange':''"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="record-item border-box pad-sx40 flex" v-for="(item,index) in recordList" :key="index">
|
|
<view class="left flex">
|
|
<view class="img radius30" v-if="navIndex!==2">
|
|
<image :src="item.cover==''?logoSrc:item.cover" mode="widthFix"></image>
|
|
</view>
|
|
<view class="txt">
|
|
<view class="font36 mar-x10"><text class="font26" v-if="navIndex==2">￥</text>{{item.name==''?'系统':item.name}}</view>
|
|
<view class="font24 color-99">{{item.created_at}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view class="font24" v-if="navIndex==2">
|
|
<text v-if="item.title=='待审批'">{{item.title}}</text>
|
|
<text class="color-red" v-if="item.title=='已驳回'">{{item.title}}</text>
|
|
<text style="color: #7b7b7b;" v-if="item.title=='已完成'">{{item.title}}</text>
|
|
</view>
|
|
<view class="font24" v-else>{{item.title}}</view>
|
|
<view class="font30 color-red mar-s10" v-if="item.price">{{item.price>0&&navIndex==0?'+'+item.price:item.price}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 到底啦 -->
|
|
<view class="no-more font24" v-if="noMore"><text>—— 到底啦 ——</text></view>
|
|
</view>
|
|
|
|
<!-- 尾部 -->
|
|
<view class="pull-btn border-box" style="background-color: #f5f5f5; padding-top: 28rpx;">
|
|
<view class="btn background-orange font36 radius30 flex" @tap="openWithdrawal">立即提现</view>
|
|
</view>
|
|
<!-- 分销码 -->
|
|
<view class="pull-bg" style="background-color: rgba(0,0,0,.3);" v-show="isShow || withdrawal"></view>
|
|
<view class="vip-box-bg border-box" v-if="isShow">
|
|
<view class="vip-box radius20 background-white font30">
|
|
<view class="title">分销二维码</view>
|
|
<view class="vip-code flex">
|
|
<image :src="codeImg" mode="widthFix"></image>
|
|
</view>
|
|
<view class="submit-btn font36 radius30 color-ff mar-s60 flex" @tap="shareImgEv" style="background-color: #00b809;position: relative;">
|
|
<image src="/static/icon/icon-wechat.png" mode="widthFix"></image>
|
|
<text>分享给朋友</text>
|
|
</view>
|
|
<view class="close-btn" @tap="closeEv">
|
|
<image src="/static/icon/close-btn.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 提现 -->
|
|
<view class="vip-box-bg border-box" v-if="withdrawal">
|
|
<view class="vip-box radius20 background-white font30">
|
|
<view class="title">提现申请</view>
|
|
<view class="vip-list">
|
|
<view class="vip-item mar-s20">
|
|
<view class="tips color-99">提现金额</view>
|
|
<input class="input" type="number" v-model="myPrice" placeholder="请输入提现金额" placeholder-style="color:#000000">
|
|
</view>
|
|
<view class="vip-item mar-s40">
|
|
<view class="tips color-99">姓名</view>
|
|
<input class="input color-99" type="text" v-model="real_name" disabled="true">
|
|
</view>
|
|
<view class="vip-item mar-s40">
|
|
<view class="tips color-99">开户行</view>
|
|
<input class="input color-99" type="number" v-model="deposit_bank" disabled="true">
|
|
</view>
|
|
<view class="vip-item mar-s40">
|
|
<view class="tips color-99">银行卡号</view>
|
|
<input class="input color-99" type="number" v-model="bank_account" disabled="true">
|
|
</view>
|
|
</view>
|
|
<view class="submit-btn font36 background-orange radius30 mar-s60 flex" @tap="submitEv">立即提现</view>
|
|
<view class="close-btn" @tap="closeEv">
|
|
<image src="/static/icon/close-btn.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { base64ToPath } from '@/jsFile/base64-src.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
logoSrc:'/static/img/logo.png', //商城logo
|
|
isShow:false, //分销码弹窗
|
|
withdrawal:false, //提现弹窗
|
|
navList:['返利记录','我的团队','提现记录'], //导航数据
|
|
navIndex:0, //导航当前
|
|
teamNav:['经销商团队','我的消费团'], //团队导航
|
|
teamIndex:0, //团队当前
|
|
recordList:[], //记录列表
|
|
commission:0, //佣金金额
|
|
cumulative_income:0, //累计收益
|
|
cumulative_withdrawal:0, //累计提现
|
|
my_team:0, //我的团队
|
|
codeImg:'', //分销码
|
|
real_name:'', //姓名
|
|
bank_account:'',//卡号
|
|
deposit_bank:'', //银行
|
|
myPrice:'', //提现金额
|
|
page:1,
|
|
size:10,
|
|
noMore:false,
|
|
flag:true,
|
|
isLoading:false,
|
|
shareFlag:true,
|
|
}
|
|
},
|
|
onLoad(op) {
|
|
// 获取分销码
|
|
this.getCodeEv();
|
|
|
|
// 获取列表信息
|
|
this.getRecordList();
|
|
},
|
|
onReachBottom() {
|
|
if(!this.noMor){
|
|
this.page++;
|
|
// 获取列表信息
|
|
this.getRecordList();
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getUserInfo();
|
|
},
|
|
methods: {
|
|
// 获取个人信息
|
|
getUserInfo(){
|
|
this.$requst.post('/api/user/info').then(res=>{
|
|
if(res.code == 0){
|
|
console.log(res,'用户信息');
|
|
this.commission = res.data.commission;
|
|
this.cumulative_income = this.$toolAll.tools.addXiaoShu(res.data.cumulative_income);
|
|
this.cumulative_withdrawal = this.$toolAll.tools.addXiaoShu(res.data.cumulative_withdrawal);
|
|
this.my_team = res.data.my_team;
|
|
}
|
|
})
|
|
},
|
|
// 获取分销码
|
|
getCodeEv(){
|
|
this.$requst.post('/api/user/my-distribution-code').then(res=>{
|
|
if(res.code == 0){
|
|
console.log(res,'分销码');
|
|
this.codeImg = this.$hostHttp + res.data.qr;
|
|
}
|
|
})
|
|
},
|
|
|
|
// 分享到微信
|
|
shareImgEv(id){
|
|
let that = this;
|
|
if(this.shareFlag){
|
|
this.shareFlag = false;
|
|
wx.downloadFile({
|
|
url: this.codeImg,
|
|
success: (res) => {
|
|
this.$toolAll.tools.showToast('正在调起分享...');
|
|
wx.showShareImageMenu({
|
|
path: res.tempFilePath
|
|
})
|
|
},
|
|
fail: (res)=> {
|
|
console.log(res)
|
|
if( res.errMsg.indexOf('deny')!=-1||res.errMsg.indexOf('denied')!=-1 ){
|
|
wx.showToast({
|
|
title: '保存相册失败，请设置权限！',
|
|
icon: 'none',
|
|
duration: 2000,
|
|
})
|
|
this.shareFlag = true;
|
|
}else{
|
|
wx.showToast({
|
|
title: '保存相册失败，请重试！',
|
|
icon: 'none',
|
|
duration: 2000,
|
|
});
|
|
this.shareFlag = true;
|
|
}
|
|
}
|
|
})
|
|
} else {this.$toolAll.tools.showToast('请勿重复点击');}
|
|
},
|
|
|
|
// 获取列表信息
|
|
getRecordList(){
|
|
uni.showLoading({
|
|
title:'加载中'
|
|
})
|
|
if(this.navIndex == 0){
|
|
let params = {
|
|
page:this.page,
|
|
size:this.size,
|
|
type:'commission'
|
|
}
|
|
this.$requst.post('/api/user/data-log-list',params).then(res=>{
|
|
if(res.code==0){
|
|
console.log(res,'返利记录');
|
|
let recordArr = [];
|
|
res.data.forEach(item=>{
|
|
let obj = {
|
|
id:item.id,
|
|
name:item.subAccount==null?'':item.subAccount.nickname,
|
|
cover:item.subAccount==null?'':item.subAccount.headimgurl,
|
|
created_at:item.created_at,
|
|
title:item.name,
|
|
price:this.$toolAll.tools.addXiaoShu(item.num)
|
|
}
|
|
recordArr.push(obj);
|
|
})
|
|
if(recordArr.length==0){
|
|
this.noMor = true;
|
|
}
|
|
this.recordList = this.recordList.concat(recordArr);
|
|
}
|
|
})
|
|
}
|
|
if(this.navIndex == 1){
|
|
if(this.teamIndex == 0){
|
|
let params = {
|
|
page:this.page,
|
|
size:this.size,
|
|
is_distributor:1
|
|
}
|
|
this.$requst.post('/api/user/team-list',params).then(res=>{
|
|
if(res.code==0){
|
|
console.log(res,'经销商团队');
|
|
let recordArr = [];
|
|
res.data.forEach(item=>{
|
|
let obj = {
|
|
id:item.id,
|
|
name:item.nickname,
|
|
cover:item.headimgurl,
|
|
created_at:item.created_at,
|
|
title:'累计返利',
|
|
price:this.$toolAll.tools.addXiaoShu(item.contribution)
|
|
}
|
|
recordArr.push(obj);
|
|
})
|
|
if(recordArr.length==0){
|
|
this.noMor = true;
|
|
}
|
|
this.recordList = this.recordList.concat(recordArr);
|
|
}
|
|
})
|
|
}else{
|
|
let params = {
|
|
page:this.page,
|
|
size:this.size,
|
|
is_distributor:0
|
|
}
|
|
this.$requst.post('/api/user/team-list',params).then(res=>{
|
|
if(res.code==0){
|
|
console.log(res,'我的消费团队');
|
|
let recordArr = [];
|
|
res.data.forEach(item=>{
|
|
let obj = {
|
|
id:item.id,
|
|
name:item.nickname,
|
|
cover:item.headimgurl,
|
|
created_at:item.created_at,
|
|
title:'累计返利',
|
|
price:this.$toolAll.tools.addXiaoShu(item.contribution)
|
|
}
|
|
recordArr.push(obj);
|
|
})
|
|
if(recordArr.length==0){
|
|
this.noMor = true;
|
|
}
|
|
this.recordList = this.recordList.concat(recordArr);
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
if(this.navIndex == 2){
|
|
let params = {
|
|
page:this.page,
|
|
size:this.size
|
|
}
|
|
this.$requst.post('/api/user/withdrawal-commission-log-list',params).then(res=>{
|
|
if(res.code==0){
|
|
console.log(res,'提现列表');
|
|
let recordArr = [];
|
|
res.data.forEach(item=>{
|
|
let obj = {
|
|
id:item.id,
|
|
name:this.$toolAll.tools.addXiaoShu(item.number),
|
|
cover:'',
|
|
created_at:item.created_at,
|
|
title:item.status,
|
|
price:''
|
|
}
|
|
recordArr.push(obj);
|
|
})
|
|
if(recordArr.length==0){
|
|
this.noMor = true;
|
|
}
|
|
this.recordList = this.recordList.concat(recordArr);
|
|
}
|
|
})
|
|
}
|
|
uni.hideLoading();
|
|
this.isLoading = true;
|
|
},
|
|
|
|
|
|
// 打开分销码
|
|
openCode(){
|
|
this.isShow = true;
|
|
},
|
|
// 打开提现
|
|
openWithdrawal(){
|
|
this.$requst.post('/api/user/get-deposit-bank-info').then(res=>{
|
|
if(res.code==0){
|
|
console.log(res,'提现账户信息');
|
|
this.real_name = res.data.real_name;
|
|
this.bank_account =res.data.bank_account;
|
|
this.deposit_bank = res.data.deposit_bank;
|
|
this.withdrawal = true;
|
|
}
|
|
})
|
|
},
|
|
// 发起提现
|
|
submitEv(){
|
|
if(this.checkEmpty() && this.flag){
|
|
let params = {
|
|
commission:this.myPrice,
|
|
username:this.real_name,
|
|
deposit_bank:this.deposit_bank,
|
|
bank_account:this.bank_account
|
|
}
|
|
this.$requst.post('/api/user/commission-withdrawal',params).then(res=>{
|
|
if(res.code==0){
|
|
console.log(res,'提现成功');
|
|
this.withdrawal = false;
|
|
this.getUserInfo();
|
|
}else{
|
|
this.$toolAll.tools.showToast(res.msg);
|
|
}
|
|
setTimeout(()=>{
|
|
this.flag = true;
|
|
},2000)
|
|
})
|
|
}
|
|
},
|
|
// 验证表单
|
|
checkEmpty(){
|
|
let result = false;
|
|
if(!this.myPrice) {
|
|
this.$toolAll.tools.showToast('请填写提现金额');
|
|
} else {
|
|
result = true;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
// 切换导航
|
|
changeNav(index){
|
|
if(index!==this.navIndex){
|
|
this.navIndex = index;
|
|
this.page = 0;
|
|
this.recordList = [];
|
|
// 获取列表信息
|
|
this.getRecordList();
|
|
}
|
|
},
|
|
// 切换团队
|
|
changeTeam(index){
|
|
if(index!==this.teamIndex){
|
|
this.teamIndex = index;
|
|
this.page = 0;
|
|
this.recordList = [];
|
|
// 获取列表信息
|
|
this.getRecordList();
|
|
}
|
|
},
|
|
// 关闭弹窗
|
|
closeEv(){
|
|
this.isShow = false;
|
|
this.withdrawal =false;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|