You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
501 lines
17 KiB
501 lines
17 KiB
<template>
|
|
<view class="page1">
|
|
|
|
<view style="width: 100%;margin: 20rpx auto;background: #fff;">
|
|
<view class="box">
|
|
<view style="width: 60%;">
|
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
|
|
<uni-icons type="cart" size="24" color="red"></uni-icons>
|
|
</view>
|
|
销售金额
|
|
</view>
|
|
<view style="width: 37%;">
|
|
<text style="display: inline-block;width: 100%;text-align: right;">{{shopInfo.totalAmount}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="box">
|
|
<view style="width: 60%;">
|
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
|
|
<uni-icons type="cart" size="24" color="red"></uni-icons>
|
|
</view>
|
|
销售总件数
|
|
</view>
|
|
<view style="width: 37%;">
|
|
<text style="display: inline-block;width: 100%;text-align: right;">{{shopInfo.totalJCount}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 10rpx;background: #eee;"></view>
|
|
<view class="box">
|
|
<view style="width: 60%;">
|
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
|
|
<uni-icons type="wallet" size="24" color="red"></uni-icons>
|
|
</view>
|
|
销售利润
|
|
</view>
|
|
<view style="width: 37%;">
|
|
<text style="display: inline-block;width: 100%;text-align: right;">{{shopInfo.totalProfit==null?0:shopInfo.totalProfit}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="box" @tap="showDayPrice = true">
|
|
<view style="width: 60%;">
|
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
|
|
<uni-icons type="wallet" size="24" color="red"></uni-icons>
|
|
</view>
|
|
实际利润
|
|
</view>
|
|
<view style="width: 37%;">
|
|
<text style="display: inline-block;width: 100%;text-align: right;">{{((shopInfo.totalProfit == null?0:shopInfo.totalProfit)-shopInfo.returnTotalAmount+shopInfo.saleReturnCost).toFixed(2)}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 10rpx;background: #eee;"></view>
|
|
<view class="box">
|
|
<view style="width: 60%;">
|
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
|
|
<uni-icons type="refreshempty" size="24" color="red"></uni-icons>
|
|
</view>
|
|
退货金额
|
|
</view>
|
|
<view style="width: 37%;">
|
|
<text style="display: inline-block;width: 100%;text-align: right;">{{shopInfo.returnTotalAmount}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="box">
|
|
<view style="width: 60%;">
|
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
|
|
<uni-icons type="refreshempty" size="24" color="red"></uni-icons>
|
|
</view>
|
|
退货总件数
|
|
</view>
|
|
<view style="width: 37%;">
|
|
<text style="display: inline-block;width: 100%;text-align: right;">{{shopInfo.returnTotalCount}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<view style="width: 100%;height: 10rpx;background: #eee;"></view>
|
|
<view class="box">
|
|
<view style="width: 60%;">
|
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
|
|
<uni-icons type="home" size="24" color="red"></uni-icons>
|
|
</view>
|
|
进货金额
|
|
</view>
|
|
<view style="width: 37%;">
|
|
<text style="display: inline-block;width: 100%;text-align: right;">{{shopInfo.purchasingCost}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="box">
|
|
<view style="width: 60%;">
|
|
<view style="width: 50rpx;height: 50rpx;float: left;margin-right: 20rpx;">
|
|
<uni-icons type="home" size="24" color="red"></uni-icons>
|
|
</view>
|
|
进货总件数
|
|
</view>
|
|
<view style="width: 37%;">
|
|
<text style="display: inline-block;width: 100%;text-align: right;">{{shopInfo.purchasingCount}}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<view @tap="classificationFilter" class="bottom-btn">
|
|
筛选
|
|
</view>
|
|
</view>
|
|
<!-- 筛选弹出层 -->
|
|
<uni-popup ref="filterPopup" background-color="#fff">
|
|
<view class="filter-popup">
|
|
<view @tap="$refs.filterPopup.close()"
|
|
style='width: 50rpx;height: 50rpx;position: absolute;right: 20rpx;top: 25rpx;'>
|
|
<uni-icons type="closeempty" color="red" size="22"></uni-icons>
|
|
</view>
|
|
<view style="height: 100rpx;line-height: 100rpx;font-weight: bold;font-size: 36rpx;text-align: center;">
|
|
筛选
|
|
</view>
|
|
<uni-datetime-picker style="margin-bottom:20rpx;" v-model="range" type="daterange" />
|
|
<view class="shop-box" v-for="(item,index) in indexList" :key="index" @tap="clickType(index)" :style="{background:item.isTrue?'#088FEB':'#eee',color:item.isTrue?'#fff':'#777'}" style="margin-top: 20px;text-align: center;width: 30%;border: 1px solid #eee;height: 70rpx;border-radius: 10rpx;line-height: 70rpx;float: left;margin-left: 2.5%;">
|
|
<text>{{item.categoryName}}</text>
|
|
</view>
|
|
<view style="position: fixed;bottom:20rpx;width: 100%;display: flex;">
|
|
<view @tap="clearData" class="bottom-left popup-btn">清空已选</view>
|
|
<view @tap="confirmData" class="bottom-right popup-btn">确认</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<view v-if="showDayPrice" style="width:100%;height:100%;position: fixed;top: 0;background: rgba(0,0,0,0.7);">
|
|
<view
|
|
style="position: fixed;margin:auto;height:660rpx;left:0;right:0;top:0;bottom:0;width:600rpx;background:#fff;border-radius: 10px;color: #000;">
|
|
<view style="width:100%;height:80rpx;font-size: 30rpx;text-align: center;line-height: 80rpx;font-weight: bold;">
|
|
利润明细
|
|
</view>
|
|
<view style="display: flex;">
|
|
<view style="width: 25%;display: flex;flex-direction: column;text-align: center;">
|
|
<text style="font-weight: bold;">{{shopInfo.totalAmount}}</text>
|
|
<text>销售金额</text>
|
|
</view>
|
|
<view style="width: 25%;display: flex;flex-direction: column;text-align: center;">
|
|
<text style="font-weight: bold;">{{(shopInfo.totalAmount - shopInfo.totalProfit).toFixed(2)}}</text>
|
|
<text>销售成本</text>
|
|
</view>
|
|
<view style="width: 25%;display: flex;flex-direction: column;text-align: center;">
|
|
<text style="font-weight: bold;">{{shopInfo.returnTotalAmount}}</text>
|
|
<text>退货金额</text>
|
|
</view>
|
|
<view style="width: 25%;display: flex;flex-direction: column;text-align: center;">
|
|
<text style="font-weight: bold;">{{shopInfo.saleReturnCost}}</text>
|
|
<text>退货成本</text>
|
|
</view>
|
|
</view>
|
|
<view style="width: 95%;height:380rpx;margin: 0 auto;margin-top: 20rpx;border-top: 1px solid #eee;">
|
|
<view style="background: #ecf5ff;width: 100%;color: #5fd9ee;height: 80rpx;line-height: 80rpx;padding-left: 20rpx;">
|
|
点击↓↓↓可查看计算公式
|
|
</view>
|
|
<view class="tan-lirun" @tap="changeFormula('0')">
|
|
<text style="font-weight: bold;margin-top: 20rpx;">{{shopInfo.totalProfit}}</text>
|
|
<text>销售利润</text>
|
|
</view>
|
|
|
|
<view @tap="changeFormula('1')" class="tan-lirun" style="float: right;" >
|
|
<text style="font-weight: bold;margin-top: 20rpx;">{{(shopInfo.totalAmount-(shopInfo.totalAmount-shopInfo.totalProfit)-shopInfo.returnTotalAmount+shopInfo.saleReturnCost).toFixed(2)}}</text>
|
|
<text>实际利润</text>
|
|
</view>
|
|
<view @tap="changeFormula('3')" class="tan-lirun">
|
|
<text style="font-weight: bold;margin-top: 20rpx;">{{(shopInfo.totalProfit == 0 || shopInfo.totalProfit ==null)?0:(shopInfo.totalAmount == 0 || shopInfo.totalAmount == null)?0:((shopInfo.totalProfit/shopInfo.totalAmount)*100).toFixed(2)}}%</text>
|
|
<text>销售利润率</text>
|
|
</view>
|
|
<view @tap="changeFormula('2')" class="tan-lirun" style="float: right;">
|
|
<text style="font-weight: bold;margin-top: 20rpx;">{{((shopInfo.totalProfit-shopInfo.returnTotalAmount+shopInfo.saleReturnCost)==0 || (shopInfo.totalProfit-shopInfo.returnTotalAmount+shopInfo.saleReturnCost)==null)?0:((shopInfo.totalAmount-shopInfo.returnTotalAmount)== 0 || (shopInfo.totalAmount-shopInfo.returnTotalAmount)== null) ?0:(((shopInfo.totalProfit-shopInfo.returnTotalAmount+shopInfo.saleReturnCost)/(shopInfo.totalAmount-shopInfo.returnTotalAmount))*100).toFixed(2)}}%</text>
|
|
<text>实际利润率</text>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<view @tap="showDayPrice = false" style="height: 100rpx;width: 100%;line-height: 100rpx;text-align: center;border-top: 1px solid #eee;font-size: 40rpx;">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="showFormula"
|
|
style="height:230rpx;position: fixed;z-index:999;margin:auto;left:0;right:0;top:0;bottom:0;width:400rpx;background: rgba(0,0,0,0.7);border-radius: 10px;color: #eee;">
|
|
<view style="width:100%;height:80rpx;font-size: 30rpx;text-align: center;line-height: 80rpx;">
|
|
{{showDan == 0?'销售利润':showDan == 1?'实际利润':showDan == 2?'实际利润率':showDan == 3?'销售利润率':''}}计算公式
|
|
</view>
|
|
<view style="text-align: center;line-height: 40rpx;">
|
|
<view v-if="showDan == 3" style="margin-top: 20rpx;">
|
|
<view>公式：销售利润/销售金额*100</view>
|
|
<view>{{shopInfo.totalProfit}}/{{shopInfo.totalAmount}}*100={{(shopInfo.totalProfit == 0 && shopInfo.totalAmount == 0)?0:((shopInfo.totalProfit/shopInfo.totalAmount)*100).toFixed(2)}}%</view>
|
|
</view>
|
|
<view v-if="showDan == 2" style="margin-top: 20rpx;">
|
|
<view>公式：实际利润/(销售金额-退货金额)</view>
|
|
<view>{{(shopInfo.totalAmount-(shopInfo.totalAmount-shopInfo.totalProfit)-shopInfo.returnTotalAmount+shopInfo.saleReturnCost).toFixed(2)}}/{{shopInfo.totalAmount - shopInfo.returnTotalAmount}} * 100={{(shopInfo.totalProfit-shopInfo.returnTotalAmount+shopInfo.saleReturnCost)==0?0:(((shopInfo.totalProfit-shopInfo.returnTotalAmount+shopInfo.saleReturnCost)/(shopInfo.totalAmount-shopInfo.returnTotalAmount))*100).toFixed(2)}}%</view>
|
|
</view>
|
|
<view v-if="showDan == 1" style="margin-top: 20rpx;">
|
|
<view>公式：销售利润-(退货金额-退货成本)</view>
|
|
<view>{{shopInfo.totalProfit}}-({{shopInfo.returnTotalAmount}}-{{shopInfo.saleReturnCost}})={{(shopInfo.totalAmount-(shopInfo.totalAmount-shopInfo.totalProfit)-shopInfo.returnTotalAmount+shopInfo.saleReturnCost).toFixed(2)}}</view>
|
|
</view>
|
|
<view v-if="showDan == 0" style="margin-top: 20rpx;">
|
|
<view>公式：销售金额-销售成本</view>
|
|
<view>{{shopInfo.totalAmount}}-{{shopInfo.totalAmount - shopInfo.totalProfit}}={{shopInfo.totalProfit}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
showDan:'',
|
|
showFormula: false,
|
|
indexList:[],
|
|
range:[],
|
|
oldDataList:[],
|
|
dataList:[],
|
|
shopInfo:{
|
|
purchasingCost:0,
|
|
purchasingCount:0,
|
|
totalJCount:0,
|
|
totalAmount:0,
|
|
totalProfit:0,
|
|
returnTotalAmount:0,
|
|
saleReturnCost:0,
|
|
returnTotalCount:0
|
|
},
|
|
showDayPrice: false,
|
|
type:uni.getStorageSync('type')
|
|
};
|
|
},
|
|
onShow(){
|
|
if(this.range ==''){
|
|
this.getMonth();
|
|
}
|
|
},
|
|
methods: {
|
|
//初始化获取分类列表
|
|
getGategoryList() {
|
|
this.tui.request("/app/productCategory/list", "get", {
|
|
// shopId: 1,
|
|
}, false, true).then((res) => {
|
|
if (res.code == 200) {
|
|
this.indexList = res.result;
|
|
|
|
this.dataList = JSON.parse(JSON.stringify(this.oldDataList))
|
|
|
|
for(let i=0;i<this.indexList.length;i++){
|
|
this.indexList[i].isTrue = false;
|
|
for(let j=0;j<this.oldDataList.length;j++){
|
|
if(this.indexList[i].id == this.oldDataList[j]){
|
|
this.indexList[i].isTrue = true
|
|
}
|
|
}
|
|
}
|
|
this.$refs.filterPopup.open('bottom')
|
|
this.$forceUpdate()
|
|
} else {
|
|
this.tui.toast(res.message)
|
|
}
|
|
}).catch((res) => {})
|
|
},
|
|
changeFormula(type){
|
|
|
|
this.showFormula = true
|
|
this.showDan = type
|
|
setTimeout(res=>{
|
|
this.showFormula = false
|
|
},2000)
|
|
},
|
|
//筛选按钮
|
|
classificationFilter(){
|
|
this.getGategoryList()
|
|
|
|
},
|
|
//筛选里面的清空按钮
|
|
clearData(){
|
|
this.dataList = []
|
|
for(let i=0;i<this.indexList.length;i++){
|
|
this.indexList[i].isTrue = false;
|
|
}
|
|
this.$forceUpdate()
|
|
},
|
|
//筛选按钮里面的确认按钮
|
|
confirmData(){
|
|
if(this.dataList == ""){
|
|
this.tui.toast("您未选择任何一个分类")
|
|
}else{
|
|
|
|
this.tui.request("/app/sale/getShopAllByCateId", "post", {
|
|
ids:this.dataList,
|
|
pageVo: {
|
|
pageSize: 5,
|
|
pageNumber: 1
|
|
},
|
|
startTime:this.range[0],
|
|
endTime:this.range[1]
|
|
}, false, false).then((res) => {
|
|
if (res.code == 200) {
|
|
this.oldDataList = []
|
|
for(let i=0;i<this.dataList.length;i++){
|
|
this.oldDataList.push(this.dataList[i])
|
|
}
|
|
this.dataList = []
|
|
this.shopInfo = res.result
|
|
this.$refs.filterPopup.close()
|
|
} else {
|
|
this.tui.toast(res.message)
|
|
}
|
|
}).catch((res) => {})
|
|
}
|
|
},
|
|
//筛选按钮里面点击某一个分类
|
|
clickType(index){
|
|
this.indexList[index].isTrue = !this.indexList[index].isTrue
|
|
if(this.dataList.indexOf(this.indexList[index].id) == -1){
|
|
this.dataList.push(this.indexList[index].id)
|
|
}else{
|
|
this.dataList.splice(this.dataList.indexOf(this.indexList[index].id),1)
|
|
}
|
|
|
|
this.$forceUpdate()
|
|
},
|
|
//获取当月1日到当前时间
|
|
getMonth() {
|
|
let date = new Date()
|
|
let year = date.getFullYear().toString() //'年'
|
|
let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString() //'月'
|
|
let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString() //'日'
|
|
let end = year + '-' + month + '-' + da //当天
|
|
let beg = year + '-' + month + '-01' //当月第一天
|
|
this.range = [beg,end]
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page,.page1{
|
|
font-size: 28rpx;
|
|
}
|
|
.contentPadding {
|
|
padding: 28rpx 20rpx;
|
|
background-color: #fff;
|
|
color: #909399;
|
|
|
|
.title {
|
|
padding-left: 20rpx;
|
|
font-size: 32rpx;
|
|
color: #303133;
|
|
margin-bottom: 26rpx;
|
|
line-height: 66rpx;
|
|
|
|
image {
|
|
display: inline-block;
|
|
width: 40rpx;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.btn {
|
|
text-align: right;
|
|
width: 24%;
|
|
float: right;
|
|
font-size: 26rpx;
|
|
color: $u-primary;
|
|
}
|
|
}
|
|
.grid-text {
|
|
font-size: 28rpx;
|
|
margin-bottom: 26rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.u-grid-item {
|
|
width: 30% !important;
|
|
height: 160rpx;
|
|
background: linear-gradient(#84C1FF, #C4E1FF) !important;
|
|
margin-left: 3%;
|
|
border-radius: 30rpx;
|
|
margin-top: 20rpx !important;
|
|
color: #fff !important;
|
|
|
|
}
|
|
.cardText {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.priceText {
|
|
color: $u-primary;
|
|
font-size: 28rpx;
|
|
}
|
|
.u-grid-item:nth-child(2) {
|
|
background: linear-gradient(#FFBB77, #FFDCB9) !important;
|
|
}
|
|
|
|
.u-grid-item:nth-child(3) {
|
|
background: linear-gradient(#1AFD9C, #7AFEC6) !important;
|
|
}
|
|
|
|
.u-grid-item:nth-child(4) {
|
|
background: linear-gradient(#1AFD9C, #7AFEC6) !important;
|
|
}
|
|
.u-grid-item:nth-child(5) {
|
|
background: linear-gradient(#FFBB77, #FFDCB9) !important;
|
|
}
|
|
.u-grid-item:nth-child(6) {
|
|
background: linear-gradient(#84C1FF, #C4E1FF) !important;
|
|
}
|
|
.u-count-num {
|
|
color: #FFF !important;
|
|
text-align:center;
|
|
}
|
|
.uni-date{
|
|
background: #fff;
|
|
}
|
|
.uni-tooltip-popup{
|
|
width: 180rpx;
|
|
}
|
|
.u-icon{
|
|
padding: 0 0 0 16rpx !important;
|
|
}
|
|
.u-zidingyi{
|
|
width: 22% !important;
|
|
height: 160rpx;
|
|
background: linear-gradient(#84C1FF, #C4E1FF) !important;
|
|
margin-left: 3%;
|
|
border-radius: 30rpx;
|
|
margin-top: 20rpx !important;
|
|
color: #fff !important;
|
|
text-align: center;
|
|
padding-top: 20rpx;
|
|
}
|
|
.u-zidingyi:nth-child(2) {
|
|
background: linear-gradient(#FFBB77, #C4E1FF) !important;
|
|
}
|
|
.u-zidingyi:nth-child(3) {
|
|
background: linear-gradient(#84C1FF, #7AFEC6) !important;
|
|
}
|
|
.u-zidingyi:nth-child(4) {
|
|
background: linear-gradient(#84C1FF, #C4E1FF) !important;
|
|
}
|
|
.box{
|
|
width: 100%;
|
|
height: 100rpx;
|
|
padding-left: 20rpx;
|
|
display: flex;
|
|
line-height: 100rpx;
|
|
font-size: 34rpx;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.tan-lirun{
|
|
margin-top: 20rpx;
|
|
width: 45%;
|
|
height: 120rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
float: left;
|
|
background-image: linear-gradient(#84C1FF, #C4E1FF) !important;
|
|
color: #fff;
|
|
border-radius: 10px;
|
|
}
|
|
.bottom-btn{
|
|
width: 90%;
|
|
background: linear-gradient(90deg, #60F3FF, #088FEB);
|
|
color: #fff;
|
|
border-radius: 50rpx;
|
|
height: 85rpx;
|
|
text-align: center;
|
|
line-height: 85rpx;
|
|
position: fixed;
|
|
bottom: 20rpx;
|
|
left: 5%;
|
|
}
|
|
.filter-popup{
|
|
height:1200rpx;
|
|
overflow: scroll;
|
|
}
|
|
.bottom-right{
|
|
background: linear-gradient(90deg, #60F3FF, #088FEB);
|
|
border-top-right-radius: 70rpx;
|
|
border-bottom-right-radius: 70rpx;
|
|
}
|
|
.bottom-left{
|
|
background: linear-gradient(90deg, #FF9797, #FFC1E0);
|
|
border-top-left-radius: 70rpx;
|
|
border-bottom-left-radius: 70rpx;
|
|
margin-left: 4%;
|
|
}
|
|
.popup-btn{
|
|
padding: 0;
|
|
width: 46%;
|
|
height: 70rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
line-height: 70rpx;
|
|
}
|
|
</style>
|