Huanyuyuehui/pages/admin/order/index.vue

338 lines
8.4 KiB
Vue
Raw Normal View History

2024-03-21 17:52:58 +08:00
<template>
<view>
<view class="order-index" ref="container">
<view class="header acea-row" :style="{ 'background-image': `url(${domain}/static/images/order_header.png)`}">
<navigator class="item" :url="`/pages/admin/orderList/index?types=1&merId=${mer_id}`" hover-class="none">
<view class="num">{{ census.unpaid }}</view>
<view>待付款</view>
</navigator>
<navigator class="item" :url="`/pages/admin/orderList/index?types=2&merId=${mer_id}`" hover-class="none">
<view class="num">{{ census.unshipped }}</view>
<view>待发货</view>
</navigator>
<navigator class="item" :url="`/pages/admin/orderList/index?types=3&merId=${mer_id}`" hover-class="none">
<view class="num">{{ census.untake }}</view>
<view>待收货</view>
</navigator>
<navigator class="item" :url="`/pages/admin/orderList/index?types=4&merId=${mer_id}`" hover-class="none">
<view class="num">{{ census.unevaluate }}</view>
<view>待评价</view>
</navigator>
<navigator class="item" :url="`/pages/admin/orderList/index?types=6&merId=${mer_id}`" hover-class="none">
<view class="num">{{ census.refund }}</view>
<view>退款</view>
</navigator>
</view>
<view class="wrapper">
<view class="title">
<span class="iconfont icon-shujutongji"></span>数据统计
</view>
<view class="list acea-row" v-if="orderData">
<navigator class="item" :url="`/pages/admin/statistics/index?type=price&time=today&merId=${mer_id}`" hover-class="none">
<view class="num">{{ orderData.today.payPrice }}</view>
<view>今日成交额</view>
</navigator>
<navigator class="item" :url="`/pages/admin/statistics/index?type=price&time=yesterday&merId=${mer_id}`" hover-class="none">
<view class="num">{{ orderData.yesterday.payPrice }}</view>
<view>昨日成交额</view>
</navigator>
<navigator class="item" :url="`/pages/admin/statistics/index?type=price&time=month&merId=${mer_id}`" hover-class="none">
<view class="num">{{ orderData.month.payPrice }}</view>
<view>本月成交额</view>
</navigator>
<navigator class="item" :url="`/pages/admin/statistics/index?type=order&time=today&merId=${mer_id}`" hover-class="none">
<view class="num">{{ orderData.today.orderNum}}</view>
<view>今日订单数</view>
</navigator>
<navigator class="item" :url="`/pages/admin/statistics/index?type=order&time=yesterday&merId=${mer_id}`" hover-class="none">
<view class="num">{{ orderData.yesterday.orderNum }}</view>
<view>昨日订单数</view>
</navigator>
<navigator class="item" :url="`/pages/admin/statistics/index?type=order&time=month&merId=${mer_id}`" hover-class="none">
<view class="num">{{ orderData.month.orderNum}}</view>
<view>本月订单数</view>
</navigator>
</view>
</view>
<view class="public-wrapper">
<view class="title">
<span class="iconfont icon-xiangxishuju"></span>详细数据
</view>
<view class="nav acea-row row-between-wrapper">
<view class="data">日期</view>
<view class="browse">订单数</view>
<view class="turnover">成交额</view>
</view>
<view class="conter">
<view class="item acea-row row-between-wrapper" v-for="(item, index) in list" :key="index">
<view class="data">{{ item.day }}</view>
<view class="browse">{{ item.total }}</view>
<view class="turnover">{{ item.pay_price }}</view>
</view>
</view>
</view>
<Loading :loaded="loaded" :loading="loading"></Loading>
</view>
</view>
</template>
<script>
import {
getStatisticsInfo,
getStatisticsMonth,
orderStatistics,
orderPrice
} from "@/api/admin";
import Loading from '@/components/Loading/index.vue'
import { HTTP_REQUEST_URL } from '@/config/app';
export default {
name: 'adminOrder',
components: {
Loading
},
data() {
return {
domain: HTTP_REQUEST_URL,
census: {},
orderData: {
today: {},
yesterday: {},
month: {}
},
list: [],
where: {
page: 1,
limit: 15
},
loaded: false,
loading: false,
mer_id: '',
}
},
onLoad(options) {
this.mer_id = options.mer_id
this.getOrderStatistics(this.mer_id);
this.getList(this.mer_id)
},
methods: {
getIndex: function() {
var that = this;
getStatisticsInfo().then(
res => {
that.census = res.data;
},
err => {
that.$util.Tips({
title: err.msg
})
}
);
},
getList: function(mer_id) {
var that = this;
if(that.loading || that.loaded) return;
that.loading = true;
orderPrice(that.where, mer_id).then(
res => {
that.loading = false;
that.loaded = res.data.length < that.where.limit;
that.list.push.apply(that.list, res.data);
that.where.page = that.where.page + 1;
},
error => {
that.$util.Tips({
title: error.msg
})
},
300
);
},
getOrderStatistics: function(mer_id) {
let that = this;
orderStatistics(mer_id).then(
res => {
that.census = res.data.order;
that.orderData = res.data.data;
},
err => {
that.$util.Tips({
title: err.msg
})
}
);
}
},
onReachBottom() {
this.getList(this.mer_id)
}
}
</script>
<style lang="scss" scoped>
.popupn {
position: fixed;
width: 100%;
text-align: center;
top: 0;
left: 0;
background: transparent;
height: 90rpx;
line-height: 90rpx;
z-index: 100;
.spin {
display: block;
transform: rotate(180deg);
font-size: 36rpx;
}
.title {
max-width: 560rpx;
margin: 0 auto;
position: relative;
display: inline;
padding: 10rpx 30rpx 10rpx 50rpx;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 30rpx;
color: #fff;
}
.iconfont {
display: inline-block;
position: relative;
top: 4rpx;
right: 0;
}
.mer_logo {
width: 34rpx;
height: 34rpx;
position: relative;
top: 6rpx;
right: 10px;
}
.mer_name {
display: inline-block;
max-width: 650rpx;
}
.invoice-content {
background-color: #ffffff;
}
}
/*订单首页*/
.order-index .header {
background-size: 100% 100%;
width: 100%;
height: 280upx;
padding: 40upx 3upx 0 3upx;
box-sizing: border-box;
}
.order-index .header .item {
flex: 1;
-webkit-flex: 1;
-o-flex: 1;
-ms-flex: 1;
text-align: center;
font-size: 24upx;
color: #fff;
}
.order-index .header .item .num {
font-size: 40upx;
margin-bottom: 7upx;
height: 60rpx;
}
.order-index .wrapper {
width: 690upx;
background-color: #fff;
border-radius: 10upx;
margin: -115upx auto 0 auto;
padding-top: 25upx;
}
.order-index .wrapper .title {
font-size: 30upx;
color: #282828;
padding: 0 30upx;
margin-bottom: 40upx;
}
.order-index .wrapper .title .iconfont {
color: #2291f8;
font-size: 40upx;
margin-right: 13upx;
vertical-align: middle;
}
.order-index .wrapper .list .item {
width: 33.33%;
text-align: center;
font-size: 24upx;
color: #999;
margin-bottom: 45upx;
}
.order-index .wrapper .list .item .num {
font-size: 40upx;
color: #333;
}
.public-wrapper .title {
font-size: 30upx;
color: #282828;
padding: 0 30upx;
margin-bottom: 20upx;
}
.public-wrapper .title .iconfont {
color: #2291f8;
font-size: 40upx;
margin-right: 13upx;
vertical-align: middle;
}
.public-wrapper {
margin: 18upx auto 0 auto;
width: 690upx;
background-color: #fff;
border-radius: 10upx;
padding-top: 25upx;
}
.public-wrapper .nav {
padding: 0 30upx;
height: 70upx;
line-height: 70upx;
font-size: 24upx;
color: #999;
}
.public-wrapper .data {
width: 210upx;
text-align: left;
}
.public-wrapper .browse {
width: 192upx;
text-align: right;
}
.public-wrapper .turnover {
width: 227upx;
text-align: right;
}
.public-wrapper .conter {
padding: 0 30upx;
}
.public-wrapper .conter .item {
border-bottom: 1px solid #f7f7f7;
height: 70upx;
font-size: 24upx;
}
.public-wrapper .conter .item .turnover {
color: #d84242;
}
</style>