Merge remote-tracking branch 'origin/feature/mall_product' into feature/mall_product

pull/6/head
tangqian 2023-05-31 12:00:29 +08:00
commit 160f9d306f
4 changed files with 210 additions and 125 deletions

View File

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

View File

@ -840,12 +840,14 @@
// } // }
query.select(idView).boundingClientRect(); query.select(idView).boundingClientRect();
query.exec(function(res) { query.exec(function(res) {
var top = res[0].top; if(Array.isArray(res) && res.length > 0 && res[0]){
var height = res[0].height; var top = res[0].top;
topArr.push(top); var height = res[0].height;
heightArr.push(height); topArr.push(top);
that.$set(that, 'topArr', topArr); heightArr.push(height);
that.$set(that, 'heightArr', heightArr); that.$set(that, 'topArr', topArr);
that.$set(that, 'heightArr', heightArr);
}
}); });
}; };
}, },

View File

@ -1,77 +1,85 @@
<template> <template>
<view class="box"> <view class="box">
<u-navbar autoBack :title="performance[active].name" bgColor="rgba(255,255,255,0)" :placeholder="true" leftIconSize="40" <u-navbar autoBack :title="performance[active].name" bgColor="rgba(255,255,255,0)" :placeholder="true"
leftIconColor="#fff" titleStyle="font-size:35rpx;color:#fff"> leftIconSize="40" leftIconColor="#fff" titleStyle="font-size:35rpx;color:#fff">
<!-- <view slot="right"> <!-- <view slot="right">
<u-icon name="more-dot-fill" color="#fff" @click="show = true"></u-icon> <u-icon name="more-dot-fill" color="#fff" @click="show = true"></u-icon>
</view> --> </view> -->
</u-navbar> </u-navbar>
<u-sticky bgColor="#fff"> <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> </u-sticky>
<view class="sale_content"> <view class="sale_content">
<view class="sale_money"> <view class="sale_money">
<view class="money_total"> <view class="money_total">
<view class="money_left"> <view class="money_left">
<image src="../../static/images/money1.png" ></image> <image src="../../static/images/money1.png"></image>
<text>总计金额</text> <text>总计金额</text>
</view> </view>
<view class="money_right"><text></text>{{orderDetail.totalAmount}}</view> <view class="money_right"><text></text>{{orderDetail.totalAmount | currency}}</view>
</view> </view>
<view class="money_statistics"> <view class="money_statistics">
<view class="money_left"> <view class="money_left">
<image class="logo" src="../../static/images/money2.png" ></image> <image class="logo" src="../../static/images/money2.png"></image>
<view class="segmentation" style="background: linear-gradient(0deg, #FFFFFF 0%, #FFE0C5 47%, #FFFFFF 100%);"></view> <view class="segmentation"
style="background: linear-gradient(0deg, #FFFFFF 0%, #FFE0C5 47%, #FFFFFF 100%);"></view>
<text>已发展会员个数</text> <text>已发展会员个数</text>
</view> </view>
<view class="money_right" style="color: #FF4800;">{{orderDetail.memberCount}}</view> <view class="money_right" style="color: #FF4800;">{{orderDetail.memberCount}}</view>
<image class="fillet" src="../../static/images/fillet1.png" ></image> <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="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>
<view class="sale_turnover"> <view class="sale_turnover">
<view class="turnover_title"> <view class="turnover_title">
{{performance[active].fund}} {{performance[active].fund}}
</view> </view>
<view class="turnover_list"> <view class="turnover_list">
<u-list <u-list height="500" @scrolltolower="scrolltolower">
height="500" <u-list-item v-for="(item, index) in orderData" :key="index">
@scrolltolower="scrolltolower" <view class="list_item">
> <view class="info-wrap">
<u-list-item <view class="name">
v-for="(item, index) in orderData" <view class="item_radius"></view>
:key="index" <text>{{item.nickname}}</text>
> </view>
<view class="list_item"> <text class="extra">
<view> {{ timestampToTime(item.payTime) }}
<view class="item_radius"></view> <view>{{ item.grade }}</view>
<text>{{item.nickname}}</text> </text>
</view> </view>
<text>{{item.payPrice}}</text> <text>{{item.payPrice | currency}}</text>
</view> </view>
</u-list-item> </u-list-item>
</u-list> </u-list>
</view> </view>
</view> </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> </view>
</template> </template>
@ -85,35 +93,34 @@
name: "sale_performance", name: "sale_performance",
data() { data() {
return { return {
activeStyle:{ activeStyle: {
fontSize: '34rpx', fontSize: '34rpx',
fontFamily: 'PingFang SC', fontFamily: 'PingFang SC',
fontWeight: '400', fontWeight: '400',
color: '#DA2E55' color: '#DA2E55'
}, },
inactiveStyle:{ inactiveStyle: {
fontSize: '30rpx', fontSize: '30rpx',
fontFamily: 'PingFang SC', fontFamily: 'PingFang SC',
fontWeight: '400', fontWeight: '400',
color: '#fff' color: '#fff'
}, },
show:false, show: false,
title:'业绩', title: '业绩',
active:0, active: 0,
performance: [ performance: [{
{ fund: '流水明细',
fund:'流水明细', name: '发展会员业绩',
name:'发展会员业绩', fontSize: '30',
fontSize:'30', id: 0
id:0 },
}, {
{ fund: '订单流水',
fund:'订单流水', name: '商品订单业绩',
name: '商品订单业绩', fontSize: '30',
fontSize:'30', id: 1
id:1 },
}, ],
],
list: [{ list: [{
name: '今日', name: '今日',
}, { }, {
@ -123,13 +130,13 @@
}, { }, {
name: '累计' name: '累计'
}], }],
pageData:{ pageData: {
pageNo:1, pageNo: 1,
pageSize:10 pageSize: 10
}, },
orderDetail:{}, orderDetail: {},
orderData:[], orderData: [],
total:0 total: 0
}; };
}, },
@ -145,30 +152,44 @@
} }
}, },
methods: { 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) console.log(value)
this.active = value.id this.active = value.id
}, },
async scrolltolower() { async scrolltolower() {
if(this.total>this.orderData.length){ if (this.total > this.orderData.length) {
this.pageData.pageNo++ this.pageData.pageNo++
await this.orderInfo(true) await this.orderInfo(true)
} }
}, },
async orderInfo(bool=true){ async orderInfo(bool = true) {
const res = await promoterOrderInfo(this.pageData) const res = await promoterOrderInfo(this.pageData)
this.orderData = bool? this.orderData.concat(res.data.list):this.orderData = res.data.list this.orderData = bool ? this.orderData.concat(res.data.list) : this.orderData = res.data.list
this.total = res.data.total this.total = res.data.total
}, },
async orderCount(index){ async orderCount(index) {
const res = await promoterOrderCount(index+1) const res = await promoterOrderCount(index + 1)
this.orderDetail = res.data this.orderDetail = res.data
}, },
async handleChange(value){ async handleChange(value) {
this.pageData.pageNo = 1 this.pageData.pageNo = 1
await this.orderCount(value.index) await this.orderCount(value.index)
await this.orderInfo(false) await this.orderInfo(false)
} }
} }
}; };
</script> </script>
@ -182,18 +203,22 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
padding: 0 40rpx; padding: 0 40rpx;
::v-deep .u-sticky{
::v-deep .u-sticky {
background: rgba(255, 255, 255, 0) !important; background: rgba(255, 255, 255, 0) !important;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.sale_content{
.sale_content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.sale_money{
.sale_money {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.money_total{
.money_total {
margin-bottom: 14rpx; margin-bottom: 14rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -201,25 +226,28 @@
background: url(../../static/images/money_total.png); background: url(../../static/images/money_total.png);
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
.money_left{
.money_left {
display: flex; display: flex;
align-items: center; align-items: center;
text{ text {
font-size: 30rpx; font-size: 30rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: #000000; color: #000000;
margin-left: 37rpx; margin-left: 37rpx;
} }
image{
margin:10rpx 0 0 10rpx; image {
margin: 10rpx 0 0 10rpx;
width: 100rpx; width: 100rpx;
height: 111rpx; height: 111rpx;
align-self: flex-start; align-self: flex-start;
} }
} }
.money_right{
.money_right {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 48rpx; margin-right: 48rpx;
@ -227,7 +255,8 @@
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: #DA2E55; color: #DA2E55;
text{
text {
font-size: 30rpx; font-size: 30rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
@ -236,78 +265,100 @@
} }
} }
.money_statistics{
.money_statistics {
margin-bottom: 14rpx; margin-bottom: 14rpx;
padding: 19rpx 36rpx 15rpx 19rpx; padding: 19rpx 36rpx 15rpx 19rpx;
background: #FFFFFF; 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; border-radius: 20rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
.fillet{
.fillet {
width: 23rpx; width: 23rpx;
height: 20rpx; height: 20rpx;
position: absolute; position: absolute;
bottom: 10rpx; bottom: 10rpx;
right: 10rpx; right: 10rpx;
} }
.money_left{
.money_left {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: #000000; color: #000000;
.logo{
.logo {
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
} }
.segmentation{
margin: 0 24rpx 0 18rpx; .segmentation {
width: 6rpx; margin: 0 24rpx 0 18rpx;
height: 43rpx; width: 6rpx;
height: 43rpx;
} }
} }
.money_right{
.money_right {
font-size: 30rpx; font-size: 30rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
} }
} }
} }
.sale_turnover{
.sale_turnover {
margin-top: 22rpx; margin-top: 22rpx;
padding: 30rpx 32rpx; padding: 30rpx 32rpx;
background: #FFFFFF; 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; border-radius: 20rpx;
.turnover_title{
.turnover_title {
font-size: 32rpx; font-size: 32rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 600; font-weight: 600;
color: #000000; color: #000000;
} }
.turnover_list{
.turnover_list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.list_item{
.list_item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
padding: 29rpx 0; padding: 29rpx 0;
border-bottom: 1px solid #D8D8D8; border-bottom: 1px solid #D8D8D8;
text{
text {
font-size: 30rpx; font-size: 30rpx;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: #000000; 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; margin-right: 19rpx;
width: 10rpx; width: 10rpx;
height: 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
}