fix: 修复bug

pull/6/head
TianYu 2023-05-31 11:06:26 +08:00
parent cceb889154
commit 0125502394
3 changed files with 202 additions and 119 deletions

View File

@ -3,6 +3,7 @@ import App from './App'
import store from './store'
import Cache from './utils/cache'
import util from 'utils/util'
import * as Amount from 'utils/money'
import configs from './config/app.js'
import * as Order from './libs/order';
@ -13,6 +14,10 @@ Vue.prototype.$eventHub = new Vue();
Vue.config.productionTip = false
Vue.prototype.$Order = Order;
Vue.filter('currency', function (value) {
return Amount.toMoney(value)
})
// #ifdef H5
import { parseQuery } from "./utils";
import Auth from './libs/wechat';

View File

@ -1,77 +1,85 @@
<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-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-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>
<image src="../../static/images/money1.png"></image>
<text>总计金额</text>
</view>
<view class="money_right"><text></text>{{orderDetail.totalAmount}}</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>
<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 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 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}}%</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))}}</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>
<view class="item_radius"></view>
<text>{{item.nickname}}</text>
</view>
<text>{{item.payPrice}}</text>
<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>
</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>
<u-action-sheet :actions="performance" @close="show = false" :closeOnClickOverlay="true" :closeOnClickAction="true"
@select="selectClick" :title="title" :show="show"></u-action-sheet>
</view>
</template>
@ -85,35 +93,34 @@
name: "sale_performance",
data() {
return {
activeStyle:{
activeStyle: {
fontSize: '34rpx',
fontFamily: 'PingFang SC',
fontWeight: '400',
color: '#DA2E55'
},
inactiveStyle:{
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
},
],
show: false,
title: '业绩',
active: 0,
performance: [{
fund: '流水明细',
name: '发展会员业绩',
fontSize: '30',
id: 0
},
{
fund: '订单流水',
name: '商品订单业绩',
fontSize: '30',
id: 1
},
],
list: [{
name: '今日',
}, {
@ -123,13 +130,13 @@
}, {
name: '累计'
}],
pageData:{
pageNo:1,
pageSize:10
pageData: {
pageNo: 1,
pageSize: 10
},
orderDetail:{},
orderData:[],
total:0
orderDetail: {},
orderData: [],
total: 0
};
},
@ -145,30 +152,44 @@
}
},
methods: {
selectClick(value){
timestampToTime(timestamp) {
// 10*1000131000
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
},
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)
}
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>
@ -182,18 +203,22 @@
background-repeat: no-repeat;
background-attachment: fixed;
padding: 0 40rpx;
::v-deep .u-sticky{
::v-deep .u-sticky {
background: rgba(255, 255, 255, 0) !important;
display: flex;
justify-content: center;
}
.sale_content{
.sale_content {
display: flex;
flex-direction: column;
.sale_money{
.sale_money {
display: flex;
flex-direction: column;
.money_total{
.money_total {
margin-bottom: 14rpx;
display: flex;
justify-content: space-between;
@ -201,25 +226,28 @@
background: url(../../static/images/money_total.png);
background-size: 100%;
background-repeat: no-repeat;
.money_left{
.money_left {
display: flex;
align-items: center;
text{
text {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
margin-left: 37rpx;
}
image{
margin:10rpx 0 0 10rpx;
image {
margin: 10rpx 0 0 10rpx;
width: 100rpx;
height: 111rpx;
align-self: flex-start;
}
}
.money_right{
.money_right {
display: flex;
align-items: center;
margin-right: 48rpx;
@ -227,7 +255,8 @@
font-family: PingFang SC;
font-weight: 400;
color: #DA2E55;
text{
text {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 400;
@ -236,78 +265,100 @@
}
}
.money_statistics{
.money_statistics {
margin-bottom: 14rpx;
padding: 19rpx 36rpx 15rpx 19rpx;
background: #FFFFFF;
box-shadow: 0px 0px 18rpx 0px rgba(127,127,127,0.08);
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{
.fillet {
width: 23rpx;
height: 20rpx;
position: absolute;
bottom: 10rpx;
right: 10rpx;
}
.money_left{
.money_left {
display: flex;
align-items: center;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
.logo{
.logo {
width: 80rpx;
height: 80rpx;
}
.segmentation{
margin: 0 24rpx 0 18rpx;
width: 6rpx;
height: 43rpx;
.segmentation {
margin: 0 24rpx 0 18rpx;
width: 6rpx;
height: 43rpx;
}
}
.money_right{
.money_right {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 400;
}
}
}
.sale_turnover{
.sale_turnover {
margin-top: 22rpx;
padding: 30rpx 32rpx;
background: #FFFFFF;
box-shadow: 0px 0px 18rpx 0px rgba(127,127,127,0.08);
box-shadow: 0px 0px 18rpx 0px rgba(127, 127, 127, 0.08);
border-radius: 20rpx;
.turnover_title{
.turnover_title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 600;
color: #000000;
}
.turnover_list{
.turnover_list {
display: flex;
flex-direction: column;
.list_item{
.list_item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 29rpx 0;
border-bottom: 1px solid #D8D8D8;
text{
text {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
}
view{
display: flex;
align-items: center;
.item_radius{
.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;

View File

@ -0,0 +1,27 @@
export function toMoney(num) {
if (num) {
if (isNaN(num)) {
return
}
num = typeof num == 'string' ? parseFloat(num) : num //判断是否是字符串如果是字符串转成数字
num = num.toFixed(2) //保留两位
num = parseFloat(num) //转成数字
num = num.toLocaleString() //转成金额显示模式
//判断是否有小数
if (num.indexOf('.') == -1) {
num = num + '.00'
} else {
num = num.split('.')[1].length < 2 ? num + '0' : num
}
return num //返回的是字符串23,245.12保留2位小数
} else {
return (num = '0.00')
}
}
export function toNum(money) {
let num = 0
num = money.split(',').join('')
return num
}