577 lines
13 KiB
Vue
577 lines
13 KiB
Vue
|
<template>
|
||
|
|
<view>
|
||
|
|
<view class="order-index" ref="container">
|
||
|
|
<view class="header acea-row">
|
||
|
|
<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">
|
||
|
|
<image src="@/static/images/sjtj.png" mode="widthFix" style="width:40rpx;translate: 0 10rpx;">
|
||
|
|
</image>数据统计
|
||
|
|
</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">
|
||
|
|
<image src="@/static/images/xxsj.png" mode="widthFix" style="width:40rpx;translate: 0 10rpx;">
|
||
|
|
</image>详细数据
|
||
|
|
</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>
|
||
|
|
<view class="public_footer" v-if="this.type_id == 12">
|
||
|
|
|
||
|
|
<view class="footer_bon">
|
||
|
|
<view class="footer_top public-wrapper ">
|
||
|
|
<image src="@/static/images/ddjk.png" mode="widthFix" style="width:40rpx;"></image>订单监控
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-for="(item,index) in OrderList" :key="index">
|
||
|
|
|
||
|
|
|
||
|
|
<view class="" v-for="(val, key) in item.orderProduct">
|
||
|
|
<view class="bon_top" :key="key" @click="toDetail(item)">
|
||
|
|
<view class="public_img">
|
||
|
|
<image class="public_img" :src="val.cart_info.product.image" mode=""></image>
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<view class="text_top">
|
||
|
|
<view class="text">
|
||
|
|
{{ val.cart_info.product.store_name }}
|
||
|
|
</view>
|
||
|
|
<view class="monry">
|
||
|
|
￥{{ val.total_price }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="text_order">
|
||
|
|
订单号: {{ item.order_sn }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bon_bon" :key="key" @click="toDetail(item)">
|
||
|
|
<view class="order">
|
||
|
|
采购数量
|
||
|
|
<view class="txt">
|
||
|
|
{{ val.product_num }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="order"
|
||
|
|
style="border-left: 1px solid #999999;border-right: 1px solid #999999;">
|
||
|
|
已售数量
|
||
|
|
<view class="txt">
|
||
|
|
{{ val.sales_volume }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="order">
|
||
|
|
库存数量
|
||
|
|
<view class="txt">
|
||
|
|
{{ val.product_num - val.sales_volume }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<button v-if="this.type_id == 12" class="footer-bnt" @click="navigator()">查看更多 ></button>
|
||
|
|
<!-- <view class="public-wrapper">
|
||
|
|
<navigator class="item" :url="`/pages/admin/order/monitor?merId=${mer_id}`"
|
||
|
|
hover-class="none">
|
||
|
|
<view class="num">订单监控</view>
|
||
|
|
</navigator>
|
||
|
|
</view> -->
|
||
|
|
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getStatisticsInfo,
|
||
|
|
getStatisticsMonth,
|
||
|
|
orderStatistics,
|
||
|
|
orderPrice,
|
||
|
|
purchaseOrder
|
||
|
|
} from "@/api/admin";
|
||
|
|
import Loading from '@/components/Loading/index.vue'
|
||
|
|
export default {
|
||
|
|
name: 'adminOrder',
|
||
|
|
components: {
|
||
|
|
Loading
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
census: {},
|
||
|
|
orderData: {
|
||
|
|
today: {},
|
||
|
|
yesterday: {},
|
||
|
|
month: {}
|
||
|
|
},
|
||
|
|
list: [],
|
||
|
|
OrderList: [], //订单数组
|
||
|
|
where: {
|
||
|
|
page: 1,
|
||
|
|
limit: 10,
|
||
|
|
status: 1,
|
||
|
|
keyword: '',
|
||
|
|
product_type: ''
|
||
|
|
},
|
||
|
|
loaded: false,
|
||
|
|
loading: false,
|
||
|
|
mer_id: '',
|
||
|
|
type_id: '', //店铺类型
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.type_id = options.type_id
|
||
|
|
this.where.product_type = options.product_type ?? 0
|
||
|
|
this.mer_id = options.mer_id
|
||
|
|
options.product_type ? uni.setStorageSync("PRODUCT_TYPE", 98) : uni.removeStorageSync("PRODUCT_TYPE");
|
||
|
|
this.getOrderStatistics(this.mer_id);
|
||
|
|
this.getList(this.mer_id)
|
||
|
|
this.purchaseOrderList(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;
|
||
|
|
const data = {
|
||
|
|
product_type: this.where.product_type
|
||
|
|
}
|
||
|
|
orderStatistics(mer_id, data).then(
|
||
|
|
res => {
|
||
|
|
that.census = res.data.order;
|
||
|
|
that.orderData = res.data.data;
|
||
|
|
},
|
||
|
|
err => {
|
||
|
|
that.$util.Tips({
|
||
|
|
title: err.msg
|
||
|
|
})
|
||
|
|
}
|
||
|
|
);
|
||
|
|
},
|
||
|
|
toDetail(item) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/admin/orderDetail/index?id=${item.order_id}&mer_id=${item.mer_id}`
|
||
|
|
})
|
||
|
|
},
|
||
|
|
navigator() {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: `/pages/admin/order/monitor?merId=${this.mer_id}`
|
||
|
|
})
|
||
|
|
},
|
||
|
|
purchaseOrderList(mer_id) {
|
||
|
|
this.where.limit = 2
|
||
|
|
purchaseOrder(this.where, mer_id).then(res => {
|
||
|
|
// console.log(res);
|
||
|
|
this.OrderList = res.data
|
||
|
|
// console.log(this.OrderList);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.supervisory_img {
|
||
|
|
display: inline-block;
|
||
|
|
width: 500rpx;
|
||
|
|
height: 500rpx;
|
||
|
|
background-color: red;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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: url("@/static/images/beijin.png") no-repeat;
|
||
|
|
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;
|
||
|
|
|
||
|
|
.item {
|
||
|
|
.num {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.public_footer {
|
||
|
|
width: 90vw;
|
||
|
|
margin: auto;
|
||
|
|
|
||
|
|
.footer_top {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin: 16px 0 16px 25rpx;
|
||
|
|
|
||
|
|
.jk_img {
|
||
|
|
width: 18px;
|
||
|
|
height: 18px;
|
||
|
|
overflow: hidden;
|
||
|
|
// border: 1px solid red;
|
||
|
|
border-radius: 40px;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 22px;
|
||
|
|
height: 22px;
|
||
|
|
margin-right: 5px;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer_bon {
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 8px;
|
||
|
|
background-color: #fff;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
|
||
|
|
.bon_top {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.public_img {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
margin: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_top {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-start;
|
||
|
|
align-items: center;
|
||
|
|
margin: 3px 0 3px 3px;
|
||
|
|
|
||
|
|
.text {
|
||
|
|
width: 140px;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
.monry {
|
||
|
|
margin-left: 10px;
|
||
|
|
color: #F84221;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.text_order {
|
||
|
|
width: 200px;
|
||
|
|
overflow: hidden;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
margin-left: 3px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.bon_bon {
|
||
|
|
width: 90%;
|
||
|
|
height: 66px;
|
||
|
|
background: #F5F5F5;
|
||
|
|
border-radius: 4px 4px 4px 4px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
text-align: center;
|
||
|
|
margin: auto;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
margin-top: 5px;
|
||
|
|
|
||
|
|
.order {
|
||
|
|
width: 120px;
|
||
|
|
|
||
|
|
.txt {
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer-bnt {
|
||
|
|
width: 100px;
|
||
|
|
height: 40px;
|
||
|
|
border-radius: 15px;
|
||
|
|
margin: auto;
|
||
|
|
line-height: 40px;
|
||
|
|
border: 1px solid #CCCCCC;
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
color: #999999;
|
||
|
|
font-size: 13px
|
||
|
|
}
|
||
|
|
</style>
|