579 lines
14 KiB
Vue
579 lines
14 KiB
Vue
<template>
|
||
<view class="whole" v-if="!loading">
|
||
<view class="vanBox">
|
||
<view class="topBox">
|
||
<image class="avatar" :src="avatar" mode="aspectFill" @click="toPage('/pages/user/info')"></image>
|
||
<view class="box">
|
||
<view class="tit">{{nickname}}({{shenfen[report.role_level]}})<text v-if="userInfo.extend" @click="copyText(userInfo.extend.user_id)"> ID：{{userInfo.extend.user_id}}</text></view>
|
||
<view class="tag" @click="toPage('/pages/user/info')">更新昵称和头像</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="oneBox">
|
||
<view class="one">
|
||
<view class="title">我的钱包</view>
|
||
<view class="right">
|
||
<view class="tit">待结算金额（元）</view>
|
||
<view class="ac">{{acountInfo.wait_settle_amount || '0.00'}}</view>
|
||
</view>
|
||
<!-- <view class="right">
|
||
<view class="tit">可提现金额（元）</view>
|
||
<view class="ac">{{acountInfo.amount || '0.00'}}</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="two flex1">
|
||
<view class="left">
|
||
<view class="tit">账户金额（元）</view>
|
||
<view class="ac">{{acountInfo.amount || '0.00'}}<view class="btn flex" @click="toTixian">提现</view></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<view class="twoBox">
|
||
<view class="title">我的收益</view>
|
||
<view class="cont">
|
||
<view class="one">
|
||
<!-- <up-icon name="info-circle" color="#333" /> -->
|
||
<view class="tit">累计总收益（元）</view>
|
||
<view class="ac">{{acountInfo.total_amount || '0.00'}}</view>
|
||
<view class="txt">今日收益{{acountInfo.today_total_amount || '0.00'}}</view>
|
||
</view>
|
||
<view class="two">
|
||
<!-- <view class="row">
|
||
<view class="tit" @click="toPage('/pages/vip/distribution/profit')">省/赚收益 ></view>
|
||
<view class="num">{{acountInfo.sale_total_amount || '0.00'}}</view>
|
||
<view class="txt">今日{{acountInfo.today_sale_amount || '0.00'}}</view>
|
||
</view> -->
|
||
<view class="row">
|
||
<view class="tit" @click="toPage('/pages/vip/distribution/profit?type=group')">服务费 ></view>
|
||
<view class="num">{{acountInfo.group_service_amount || '0.00'}}</view>
|
||
<view class="txt">今日{{acountInfo.today_group_service_amount || '0.00'}}</view>
|
||
</view>
|
||
<view class="row" v-if="report.role_level != 1">
|
||
<view class="tit" @click="toPage('/pages/vip/distribution/profit?type=company')">津贴 ></view>
|
||
<view class="num">{{acountInfo.allowance_amount || '0.00'}}</view>
|
||
<view class="txt">今日{{acountInfo.today_allowance_amount || '0.00'}}</view>
|
||
</view>
|
||
<!-- <view class="row">
|
||
<view class="tit" @click="toPage('/pages/vip/distribution/activity')">销售活动奖励 ></view>
|
||
<view class="num">{{acountInfo.sale_activity_amount || '0.00'}}</view>
|
||
<view class="txt">今日{{acountInfo.today_sale_activity_amount || '0.00'}}</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="tit" @click="toPage('/pages/vip/distribution/profit')">社群活动奖励 ></view>
|
||
<view class="num">0.00</view>
|
||
<view class="txt">今日0.00</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fourBox">
|
||
<view class="top">
|
||
<view class="item" v-for="(item, index) in dayText" :key="index" :class="chooseTime == index ? 'choose' : ''"
|
||
@click="changeTime(index)">{{item}}
|
||
</view>
|
||
</view>
|
||
<view v-if="chooseTime === 3" class="time">
|
||
<view class="input" @click="openTime(1)">{{start_time}}</view>
|
||
<text>至</text>
|
||
<view class="input" @click="openTime(2)">{{end_time}}</view>
|
||
<text class="btn" @click="getprofitWith">搜索</text>
|
||
</view>
|
||
<view class="cont">
|
||
<view class="row">
|
||
<view class="tit"><text>{{profitWith.group_amount || '0.00'}}</text>元</view>
|
||
<view class="txt">团队销售额</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="tit"><text>{{profitWith.group_refund || '0.00'}}</text>元</view>
|
||
<view class="txt">团队退款额</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="tit"><text>{{profitWith.profit || '0.00'}}</text>元</view>
|
||
<view class="txt">毛收益</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="tit"><text>{{profitWith.refund_profit || '0.00'}}</text>元</view>
|
||
<view class="txt">退款收益</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="threeBox">
|
||
<view class="title flex4" @click="toPage('/pages/vip/distribution/invite')">
|
||
<text>我的团队</text>
|
||
<up-icon name="arrow-right" color="#999" size="14"></up-icon>
|
||
</view>
|
||
<view class="cont">
|
||
<view class="row">
|
||
<view class="tit"><text>{{report.invite_count || 0}}</text>人</view>
|
||
<view class="txt">邀请人数</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="tit"><text>{{report.group_count || 0}}</text>人</view>
|
||
<view class="txt">团队人数</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<up-modal :show="showKnow" :showCancelButton="false" :showConfirmButton="false">
|
||
<view>
|
||
<view class="refTitle">累计总收益</view>
|
||
<view class="mesg">服务费+津贴所有历史累计收益</view>
|
||
<view style="padding: 50rpx 50rpx 0;">
|
||
<view class="iknow" @click="showKnow = false">我知道了</view>
|
||
</view>
|
||
</view>
|
||
</up-modal>
|
||
|
||
<up-datetime-picker
|
||
:show="showTime"
|
||
v-model="currentDate"
|
||
mode="date"
|
||
@confirm="chooseTimes"
|
||
@cancel="showTime = false"
|
||
@close="showTime = false"
|
||
:closeOnClickOverlay="true">
|
||
</up-datetime-picker>
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { reactive, toRefs } from 'vue'
|
||
import { get } from '@/api/request.js'
|
||
import { showToast, copyText, getOldDay, getWeekStartDate, getMonthStartDate, dateTimeStr } from '@/components/common.js'
|
||
import { Style } from '@/utils/list.js'
|
||
import dayjs from 'dayjs'
|
||
|
||
export default {
|
||
setup() {
|
||
const data = reactive({
|
||
acountInfo: {},
|
||
Color: uni.getStorageSync('theme_color') || '#07C160',
|
||
loading: true,
|
||
bgColor: '',
|
||
avatar: '',
|
||
nickname: '',
|
||
showKnow: false,
|
||
report: {},
|
||
userInfo: {},
|
||
shenfen: {
|
||
'0': '合伙人',
|
||
'1': '服务商',
|
||
'2': '店主'
|
||
},
|
||
dayText: ['今天', '本周', '本月', '自定义'],
|
||
chooseTime: 0,
|
||
profitWith: {},
|
||
showTime: false,
|
||
currentDate: '',
|
||
start_time: '',
|
||
end_time: '',
|
||
data_type: '',
|
||
})
|
||
|
||
function toTixian() {
|
||
if(data.acountInfo.account) {
|
||
if(data.acountInfo.account.status == 5) {
|
||
uni.navigateTo({
|
||
url: '/pages/vip/distribution/withdraw'
|
||
})
|
||
} else {
|
||
showToast('您的账户未开通成功')
|
||
}
|
||
} else {
|
||
showToast('您需要先去开户')
|
||
}
|
||
}
|
||
|
||
function getInfo() {
|
||
get(`/api/v1/sales/distributor/show`).then((res) => {
|
||
data.acountInfo = res.data
|
||
})
|
||
}
|
||
|
||
const toPage = (url) => {
|
||
uni.navigateTo({ url })
|
||
}
|
||
|
||
function getInvite() {
|
||
get('/api/v1/sales/distributor/invitationList').then((res) => {
|
||
data.report = res
|
||
data.loading = false
|
||
if(res.role_level == 2) {
|
||
uni.navigateTo({
|
||
url: '/pages/vip/distribution/guide'
|
||
})
|
||
return
|
||
}
|
||
})
|
||
}
|
||
|
||
function getUserInfo() {
|
||
get('/api/v1/user/detail').then((res) => {
|
||
data.userInfo = res.data
|
||
})
|
||
}
|
||
|
||
const changeTime = (index) => {
|
||
data.chooseTime = index
|
||
data.start_time = index == 3 ? getWeekStartDate() : ''
|
||
data.end_time = index == 3 ? getOldDay('y-m-d') : ''
|
||
getprofitWith()
|
||
}
|
||
|
||
const getprofitWith = () => {
|
||
let time = {
|
||
start_date: '',
|
||
end_date: getOldDay('y-m-d')
|
||
}
|
||
if (data.chooseTime === 3) {
|
||
if (!data.start_time || !data.end_time) {
|
||
showToast('请选择开始/结束时间')
|
||
return
|
||
}
|
||
time.start_date = data.start_time
|
||
time.end_date = data.end_time
|
||
} else if (data.chooseTime === 0) {
|
||
time.start_date = time.end_date
|
||
} else if (data.chooseTime === 1) {
|
||
time.start_date = getWeekStartDate()
|
||
} else if (data.chooseTime === 2) {
|
||
time.start_date = getMonthStartDate()
|
||
}
|
||
get('/api/v1/sales/distributor/profitWithDate', time).then((res) => {
|
||
data.profitWith = res.data
|
||
})
|
||
}
|
||
|
||
const openTime = (type) => {
|
||
data.data_type = type
|
||
if (type == 1) {
|
||
data.currentDate = data.start_time ? Date.parse(new Date(data.start_time)) : Date.parse(new Date())
|
||
} else {
|
||
data.currentDate = data.end_time ? Date.parse(new Date(data.end_time)) : Date.parse(new Date())
|
||
}
|
||
data.showTime = true
|
||
}
|
||
|
||
const chooseTimes = (e) => {
|
||
let time = dayjs(e.value).format('YYYY-MM-DD')
|
||
if (data.data_type == 1) {
|
||
data.start_time = time
|
||
} else if (data.data_type == 2) {
|
||
data.end_time = time
|
||
}
|
||
data.showTime = false
|
||
}
|
||
|
||
return {
|
||
dateTimeStr,
|
||
...toRefs(data),
|
||
toTixian,
|
||
getInfo,
|
||
toPage,
|
||
getInvite,
|
||
getUserInfo,
|
||
copyText,
|
||
changeTime,
|
||
getprofitWith,
|
||
openTime,
|
||
chooseTimes
|
||
}
|
||
},
|
||
async onShow() {
|
||
this.bgColor = Style[uni.getStorageSync('theme_index') * 1].bgColor
|
||
this.nickname = uni.getStorageSync('nickname')
|
||
this.avatar = uni.getStorageSync('avatar')
|
||
await this.getInfo()
|
||
await this.getInvite()
|
||
this.getUserInfo()
|
||
this.getprofitWith()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.flex{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.flex1{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.whole{
|
||
padding: 0 0 24rpx;
|
||
box-sizing: border-box;
|
||
.vanBox{
|
||
background: linear-gradient(to bottom , v-bind('bgColor'), #fff);
|
||
padding: 30rpx 24rpx 24rpx;
|
||
}
|
||
.topBox{
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx 0 60rpx;
|
||
.avatar {
|
||
border-radius: 50%;
|
||
width: 104rpx;
|
||
height: 104rpx;
|
||
border: 4rpx solid #ffffff;
|
||
}
|
||
.box{
|
||
flex: 1;
|
||
padding-left: 24rpx;
|
||
.tit{
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
text{
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.tag{
|
||
font-size: 24rpx;
|
||
border-radius: 22px;
|
||
margin-top: 16rpx;
|
||
padding: 2rpx 15rpx;
|
||
display: inline-block;
|
||
color: #666;
|
||
border: 1rpx solid #999;
|
||
}
|
||
}
|
||
}
|
||
.oneBox{
|
||
width: 100%;
|
||
border-radius: 10rpx;
|
||
background-color: v-bind('Color');
|
||
padding: 36rpx;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.title{
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
}
|
||
.one{
|
||
padding: 20rpx 0 40rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.right{
|
||
.tit{
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
.ac{
|
||
font-size: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
.two{
|
||
.left{
|
||
.tit{
|
||
font-size: 28rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.ac{
|
||
font-size: 50rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.btn{
|
||
width: 200rpx;
|
||
height: 66rpx;
|
||
border-radius: 66rpx;
|
||
font-size: 28rpx;
|
||
line-height: 66rpx;
|
||
color: #fff;
|
||
background-color: rgba(255, 255, 255, 0.4);
|
||
margin-left: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
.content{
|
||
padding: 0 24rpx;
|
||
}
|
||
.twoBox{
|
||
background-color: #fff;
|
||
margin-top: 24rpx;
|
||
border-radius: 10rpx;
|
||
.title{
|
||
font-size: 32rpx;
|
||
border-bottom: 1rpx solid #f1f1f1;
|
||
padding: 30rpx 24rpx;
|
||
font-weight: 600;
|
||
}
|
||
.cont{
|
||
padding: 0 24rpx;
|
||
.one{
|
||
padding: 24rpx 0;
|
||
border-bottom: 1rpx solid #f1f1f1;
|
||
.tit{
|
||
font-size: 28rpx;
|
||
}
|
||
.ac{
|
||
font-size: 48rpx;
|
||
color: v-bind('Color');
|
||
font-weight: 600;
|
||
}
|
||
.txt{
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
.two{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.row{
|
||
width: 33.33%;
|
||
padding: 30rpx 0;
|
||
color: #3D3D3D;
|
||
font-size: 24rpx;
|
||
border-bottom: 1rpx solid #f1f1f1;
|
||
.tit{
|
||
font-size: 28rpx;
|
||
}
|
||
.num{
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
margin: 10rpx 0;
|
||
}
|
||
.txt{
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.threeBox{
|
||
background-color: #fff;
|
||
margin-top: 24rpx;
|
||
border-radius: 10rpx;
|
||
.title{
|
||
font-size: 32rpx;
|
||
border-bottom: 1rpx solid #f1f1f1;
|
||
padding: 30rpx 24rpx;
|
||
font-weight: 600;
|
||
}
|
||
.cont{
|
||
padding: 24rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
.row{
|
||
.tit{
|
||
font-size: 28rpx;
|
||
text{
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
.txt{
|
||
font-size: 28rpx;
|
||
color: #888;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.fourBox{
|
||
background-color: #fff;
|
||
margin-top: 24rpx;
|
||
border-radius: 10rpx;
|
||
.top{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
border-bottom: 1rpx solid #f1f1f1;
|
||
padding: 30rpx;
|
||
.item{
|
||
color: #999;
|
||
font-size: 30rpx;
|
||
&.choose{
|
||
color: #2c2c2c;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
.time{
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
.input{
|
||
text-align: center;
|
||
}
|
||
.btn{
|
||
background-color: v-bind('Color');
|
||
color: #fff;
|
||
flex-shrink: 0;
|
||
border-radius: 10px;
|
||
padding: 4rpx 20rpx;
|
||
font-size: 25rpx;
|
||
}
|
||
}
|
||
.cont{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
.row{
|
||
text-align: center;
|
||
width: 50%;
|
||
padding: 24rpx 0;
|
||
.tit{
|
||
font-size: 28rpx;
|
||
margin-bottom: 16rpx;
|
||
text{
|
||
font-weight: 600;
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
.txt{
|
||
font-size: 28rpx;
|
||
color: #888;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.refTitle{
|
||
font-size: 30rpx;
|
||
color: #000;
|
||
padding: 0 0 30rpx;
|
||
font-weight: bold;
|
||
position: relative;
|
||
text-align: center;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.mesg{
|
||
font-size: 28rpx;
|
||
color: #303030;
|
||
line-height: 46rpx;
|
||
height: 200px;
|
||
}
|
||
.iknow{
|
||
width: 100%;
|
||
height: 80rpx;
|
||
background: v-bind('Color');
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 80rpx;
|
||
}
|
||
</style>
|