376 lines
11 KiB
Vue
376 lines
11 KiB
Vue
<template>
|
||
<view class="box">
|
||
<u-navbar autoBack :title="performance[active].name" bgColor="rgba(255,255,255,0)" :placeholder="true"
|
||
leftIconSize="40" leftIconColor="#fff" titleStyle="font-size:35rpx;color:#fff">
|
||
<!-- <view slot="right">
|
||
<u-icon name="more-dot-fill" color="#fff" @click="show = true"></u-icon>
|
||
</view> -->
|
||
</u-navbar>
|
||
<u-sticky bgColor="#fff">
|
||
<u-tabs @change="handleChange" :list="list" itemStyle=" padding-left: 46rpx; padding-right: 46rpx; height: 46px;"
|
||
lineColor="#DA2E55" lineWidth="48rpx" lineHeight="10rpx" :activeStyle="activeStyle"
|
||
:inactiveStyle="inactiveStyle"></u-tabs>
|
||
</u-sticky>
|
||
<view class="sale_content">
|
||
<view class="sale_money">
|
||
<view class="money_total">
|
||
<view class="money_left">
|
||
<image src="../../static/images/money1.png"></image>
|
||
<text>总计金额</text>
|
||
</view>
|
||
<view class="money_right"><text>￥</text>{{orderDetail.totalAmount | currency}}</view>
|
||
</view>
|
||
<view class="money_statistics">
|
||
<view class="money_left">
|
||
<image class="logo" src="../../static/images/money2.png"></image>
|
||
<view class="segmentation"
|
||
style="background: linear-gradient(0deg, #FFFFFF 0%, #FFE0C5 47%, #FFFFFF 100%);"></view>
|
||
<text>已发展会员个数</text>
|
||
</view>
|
||
<view class="money_right" style="color: #FF4800;">{{orderDetail.memberCount}}个</view>
|
||
<image class="fillet" src="../../static/images/fillet1.png"></image>
|
||
</view>
|
||
<view class="money_statistics">
|
||
<view class="money_left">
|
||
<image class="logo" src="../../static/images/money3.png"></image>
|
||
<view class="segmentation"
|
||
style="background: linear-gradient(0deg, #FFFFFF 0%, #C8EFFF 47%, #FFFFFF 100%);"></view>
|
||
<text>提成比例</text>
|
||
</view>
|
||
<view class="money_right" style="color: #1082FF;">{{orderDetail.memberCommission | currency}}%</view>
|
||
<image class="fillet" src="../../static/images/fillet2.png"></image>
|
||
</view>
|
||
<view class="money_statistics">
|
||
<view class="money_left">
|
||
<image class="logo" src="../../static/images/money4.png"></image>
|
||
<view class="segmentation"
|
||
style="background: linear-gradient(0deg, #FFFFFF 0%, #CEF0DA 47%, #FFFFFF 100%);"></view>
|
||
<text>预计提成金额</text>
|
||
</view>
|
||
<view class="money_right" style="color: #32A84F;">
|
||
￥{{parseFloat(orderDetail.totalAmount*(parseFloat(orderDetail.memberCommission) / 100)) | currency}}
|
||
</view>
|
||
<image class="fillet" src="../../static/images/fillet3.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="sale_turnover">
|
||
<view class="turnover_title">
|
||
{{performance[active].fund}}
|
||
</view>
|
||
<view class="turnover_list">
|
||
<u-list height="500" @scrolltolower="scrolltolower">
|
||
<u-list-item v-for="(item, index) in orderData" :key="index">
|
||
<view class="list_item">
|
||
<view class="info-wrap">
|
||
<view class="name">
|
||
<view class="item_radius"></view>
|
||
<text>{{item.nickname}}</text>
|
||
</view>
|
||
<text class="extra">
|
||
{{ timestampToTime(item.payTime) }}
|
||
<view>{{ item.grade }}</view>
|
||
</text>
|
||
</view>
|
||
<text>￥{{item.payPrice | currency}}</text>
|
||
</view>
|
||
</u-list-item>
|
||
</u-list>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-action-sheet :actions="performance" @close="show = false" :closeOnClickOverlay="true" :closeOnClickAction="true"
|
||
@select="selectClick" :title="title" :show="show"></u-action-sheet>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
promoterOrderInfo,
|
||
promoterOrderCount
|
||
} from '@/api/member.js';
|
||
|
||
export default {
|
||
name: "sale_performance",
|
||
data() {
|
||
return {
|
||
activeStyle: {
|
||
fontSize: '34rpx',
|
||
fontFamily: 'PingFang SC',
|
||
fontWeight: '400',
|
||
color: '#DA2E55'
|
||
},
|
||
inactiveStyle: {
|
||
fontSize: '30rpx',
|
||
fontFamily: 'PingFang SC',
|
||
fontWeight: '400',
|
||
color: '#fff'
|
||
},
|
||
show: false,
|
||
title: '业绩',
|
||
active: 0,
|
||
performance: [{
|
||
fund: '流水明细',
|
||
name: '发展会员业绩',
|
||
fontSize: '30',
|
||
id: 0
|
||
},
|
||
{
|
||
fund: '订单流水',
|
||
name: '商品订单业绩',
|
||
fontSize: '30',
|
||
id: 1
|
||
},
|
||
],
|
||
list: [{
|
||
name: '今日',
|
||
}, {
|
||
name: '上周',
|
||
}, {
|
||
name: '上月'
|
||
}, {
|
||
name: '累计'
|
||
}],
|
||
pageData: {
|
||
pageNo: 1,
|
||
pageSize: 10
|
||
},
|
||
orderDetail: {},
|
||
orderData: [],
|
||
total: 0
|
||
};
|
||
},
|
||
|
||
async onLoad() {
|
||
try {
|
||
uni.showLoading({
|
||
title: '加载中'
|
||
});
|
||
await this.orderCount(0)
|
||
await this.orderInfo(false)
|
||
} finally {
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
methods: {
|
||
timestampToTime(timestamp) {
|
||
// 时间戳为10位需*1000，时间戳为13位不需乘1000
|
||
var date = new Date(timestamp);
|
||
var Y = date.getFullYear() + "-";
|
||
var M =
|
||
(date.getMonth() + 1 < 10
|
||
? "0" + (date.getMonth() + 1)
|
||
: date.getMonth() + 1) + "-";
|
||
var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
|
||
var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
|
||
var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
|
||
var s = (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
|
||
return Y + M + D + h + m + s;
|
||
},
|
||
selectClick(value) {
|
||
console.log(value)
|
||
this.active = value.id
|
||
},
|
||
async scrolltolower() {
|
||
if (this.total > this.orderData.length) {
|
||
this.pageData.pageNo++
|
||
await this.orderInfo(true)
|
||
}
|
||
},
|
||
async orderInfo(bool = true) {
|
||
const res = await promoterOrderInfo(this.pageData)
|
||
this.orderData = bool ? this.orderData.concat(res.data.list) : this.orderData = res.data.list
|
||
this.total = res.data.total
|
||
},
|
||
async orderCount(index) {
|
||
const res = await promoterOrderCount(index + 1)
|
||
this.orderDetail = res.data
|
||
},
|
||
async handleChange(value) {
|
||
this.pageData.pageNo = 1
|
||
await this.orderCount(value.index)
|
||
await this.orderInfo(false)
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
background: url(../../static/images/sale_bg.png);
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
background-attachment: fixed;
|
||
padding: 0 40rpx;
|
||
|
||
::v-deep .u-sticky {
|
||
background: rgba(255, 255, 255, 0) !important;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.sale_content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.sale_money {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.money_total {
|
||
margin-bottom: 14rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
min-height: 160rpx;
|
||
background: url(../../static/images/money_total.png);
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
.money_left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
text {
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
margin-left: 37rpx;
|
||
}
|
||
|
||
image {
|
||
margin: 10rpx 0 0 10rpx;
|
||
width: 100rpx;
|
||
height: 111rpx;
|
||
align-self: flex-start;
|
||
}
|
||
}
|
||
|
||
.money_right {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 48rpx;
|
||
font-size: 45rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #DA2E55;
|
||
|
||
text {
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #DA2E55;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.money_statistics {
|
||
margin-bottom: 14rpx;
|
||
padding: 19rpx 36rpx 15rpx 19rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 0px 18rpx 0px rgba(127, 127, 127, 0.08);
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
|
||
.fillet {
|
||
width: 23rpx;
|
||
height: 20rpx;
|
||
position: absolute;
|
||
bottom: 10rpx;
|
||
right: 10rpx;
|
||
}
|
||
|
||
.money_left {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
|
||
.logo {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.segmentation {
|
||
margin: 0 24rpx 0 18rpx;
|
||
width: 6rpx;
|
||
height: 43rpx;
|
||
}
|
||
}
|
||
|
||
.money_right {
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sale_turnover {
|
||
margin-top: 22rpx;
|
||
padding: 30rpx 32rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 0px 18rpx 0px rgba(127, 127, 127, 0.08);
|
||
border-radius: 20rpx;
|
||
|
||
.turnover_title {
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 600;
|
||
color: #000000;
|
||
}
|
||
|
||
.turnover_list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.list_item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 29rpx 0;
|
||
border-bottom: 1px solid #D8D8D8;
|
||
|
||
text {
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #000000;
|
||
}
|
||
|
||
.info-wrap {
|
||
.extra {
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
font-size: 26rpx;
|
||
color: #909399;
|
||
}
|
||
|
||
.name {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.item_radius {
|
||
margin-right: 19rpx;
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
background: #FF4106;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|