359 lines
7.8 KiB
Vue
359 lines
7.8 KiB
Vue
|
<template>
|
|||
|
|
<view class="container" v-if="loading">
|
|||
|
|
<view class="totle">
|
|||
|
|
<view class="server">
|
|||
|
|
<text class="line"></text>
|
|||
|
|
<text class="text">售买概览</text>
|
|||
|
|
<text class="line"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="num_wrap">
|
|||
|
|
<view class="num-box">
|
|||
|
|
<view class="num">
|
|||
|
|
<text>{{ statisticsData.num || 0 }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="text"><text>当日订单数量</text></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="num-box">
|
|||
|
|
<view class="num">
|
|||
|
|
<text>{{ statisticsData.price || 0 }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="text"><text>当日销售金额</text></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="server">
|
|||
|
|
<text class="line"></text>
|
|||
|
|
<text class="text">订单列表</text>
|
|||
|
|
<text class="line"></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="food-list" v-if="orderList.length > 0">
|
|||
|
|
<view class="main" v-for="(item, index) in orderList" :key="index">
|
|||
|
|
<view class="top">
|
|||
|
|
<view class="dining">{{ item.userName }}</view>
|
|||
|
|
<view class="status" v-if="item.status == 1">预定成功</view>
|
|||
|
|
<view class="status" v-if="item.status == 0">已取消</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="list-item" v-for="(it, index) in item.foodList" :key="index">
|
|||
|
|
<view class="img-box"><image :src="it.picture" mode=""></image></view>
|
|||
|
|
<view class="fr-content">
|
|||
|
|
<view class="name">
|
|||
|
|
{{ it.food_name }}
|
|||
|
|
<text class="ct">x{{ it.count }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="price">¥{{ it.price }}/{{ it.company }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bottom">
|
|||
|
|
<text class="price">
|
|||
|
|
共计：¥
|
|||
|
|
<span>{{ item.price }}</span>
|
|||
|
|
</text>
|
|||
|
|
<text class="order-time">{{ item.order_time }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="list" v-if="orders.length > 0">
|
|||
|
|
<view class="main" v-for="(item,i) in orders" :key="i">
|
|||
|
|
<view class="top">
|
|||
|
|
<view class="dining">{{item.buyer_name}}</view>
|
|||
|
|
<view class="status" v-if="item.order_status == 1">预定成功</view>
|
|||
|
|
<view class="status" v-if="item.order_status == 0">已取消</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="middle">
|
|||
|
|
<view class="foodList" v-for="(item1, index) in item.orderDetails" :key="index">
|
|||
|
|
<image mode="" :src="item1.goods_icon" />
|
|||
|
|
<text >{{item1.goods_name}} {{item1.goods_num}}份</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bottom">
|
|||
|
|
<text class="price">金额：￥<span>{{item.pay_price}}</span></text>
|
|||
|
|
<text class="order-time">{{item.order_time}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<content-none v-else :padTop="20"></content-none>
|
|||
|
|
<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { toDaylist } from '@/common/api.js';
|
|||
|
|
import { callbackRequest, getStorage, alertTip } from '@/common/util.js';
|
|||
|
|
import loadMore from '@/components/loadMore.vue';
|
|||
|
|
import contentNone from '@/components/contentNone.vue';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loading: false,
|
|||
|
|
userId: getStorage('userInfo').id, //用户id
|
|||
|
|
page: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
loadingType: 0, //0-loading前；1-loading中；2-没有更多了
|
|||
|
|
contentText: {
|
|||
|
|
contentdown: '上拉加载更多',
|
|||
|
|
contentrefresh: '正在加载...',
|
|||
|
|
contentnomore: '没有更多数据了'
|
|||
|
|
},
|
|||
|
|
statisticsData: {}, //统计数据
|
|||
|
|
orderList: [
|
|||
|
|
{
|
|||
|
|
userName: '刘晓明',
|
|||
|
|
status: 1,
|
|||
|
|
order_time: '2020-01-10 09:00',
|
|||
|
|
price: 100,
|
|||
|
|
foodList: [
|
|||
|
|
{
|
|||
|
|
price: '20',
|
|||
|
|
company: '斤',
|
|||
|
|
picture: 'http://47.99.190.179:80/appImageDir/a68b13fe0bcf4ee1992ee32623055639.jpg',
|
|||
|
|
food_name: '猪蹄',
|
|||
|
|
count: 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
price: '30',
|
|||
|
|
company: '份',
|
|||
|
|
picture: 'http://47.99.190.179:80/appImageDir/42d0a21e68804c398ca3abb4bdc20314.jpg',
|
|||
|
|
food_name: '鱿鱼圈',
|
|||
|
|
count: 2
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
] //订单列表
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
components: {
|
|||
|
|
loadMore,
|
|||
|
|
contentNone
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
initData() {
|
|||
|
|
let params = {
|
|||
|
|
method: toDaylist,
|
|||
|
|
data: {
|
|||
|
|
userId: this.userId,
|
|||
|
|
// userId:'8a0621e158f611250159675bfc6d054f',
|
|||
|
|
pageSize: this.pageSize,
|
|||
|
|
pageNum: this.page
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
callbackRequest(params).then(res => {
|
|||
|
|
if (res.data.returnCode == 1) {
|
|||
|
|
let result = res.data.returnData || {};
|
|||
|
|
result.orderList = result.orderList || [];
|
|||
|
|
if (this.page == 1) {
|
|||
|
|
let numList = result.numList || [];
|
|||
|
|
this.statisticsData = numList[0] || {};
|
|||
|
|
this.orders = result.orderList || [];
|
|||
|
|
} else {
|
|||
|
|
if (result.orderList.length > 0) {
|
|||
|
|
this.orders = [...this.orders, ...result.orderList];
|
|||
|
|
this.loadingType = 0;
|
|||
|
|
} else {
|
|||
|
|
this.loadingType = 2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.loading = true;
|
|||
|
|
} else {
|
|||
|
|
alertTip(res.data.returnMsg);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
if (this.loadingType !== 0) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.loadingType = 1;
|
|||
|
|
this.page = this.page + 1;
|
|||
|
|
this.initData();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import '@/static/css/common.scss';
|
|||
|
|
.container {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: #f8f8f8;
|
|||
|
|
.server {
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 70upx;
|
|||
|
|
text {
|
|||
|
|
display: inline-block;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
}
|
|||
|
|
.line {
|
|||
|
|
width: 70upx;
|
|||
|
|
height: 3upx;
|
|||
|
|
background: #999;
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
font-size: 30upx;
|
|||
|
|
padding: 0 20upx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.totle {
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
.num_wrap {
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 30upx 0;
|
|||
|
|
.num-box {
|
|||
|
|
float: left;
|
|||
|
|
width: 50%;
|
|||
|
|
height: 100upx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 26upx;
|
|||
|
|
}
|
|||
|
|
.num {
|
|||
|
|
text-align: center;
|
|||
|
|
text {
|
|||
|
|
font-size: 40upx;
|
|||
|
|
color: $themeColor;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.text {
|
|||
|
|
text-align: center;
|
|||
|
|
text {
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.food-list {
|
|||
|
|
height: 100%;
|
|||
|
|
overflow: auto;
|
|||
|
|
background: #fff;
|
|||
|
|
margin: 15upx;
|
|||
|
|
.main {
|
|||
|
|
background: #ffffff;
|
|||
|
|
margin: 10upx;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
.top {
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
padding: 20upx 30upx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
.dining {
|
|||
|
|
float: left;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
color: #555;
|
|||
|
|
}
|
|||
|
|
.status {
|
|||
|
|
float: right;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: #00c277;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom {
|
|||
|
|
padding: 5upx 5upx 0upx 5upx;
|
|||
|
|
border-top: 1px solid #eee;
|
|||
|
|
line-height: 50upx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
.order-time {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
.price {
|
|||
|
|
float: right;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.list-item {
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 10upx 10upx 0upx 5upx;
|
|||
|
|
border-bottom: 1px solid #f8f8f8;
|
|||
|
|
.img-box {
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
float: left;
|
|||
|
|
width: 200upx;
|
|||
|
|
height: 200upx;
|
|||
|
|
image {
|
|||
|
|
display: block;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fr-content {
|
|||
|
|
margin-left: 220upx;
|
|||
|
|
.name {
|
|||
|
|
font-size: 30upx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: bold;
|
|||
|
|
@include overstepOne;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
margin-bottom: 6upx;
|
|||
|
|
}
|
|||
|
|
.num {
|
|||
|
|
font-size: 26upx;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
margin-bottom: 6upx;
|
|||
|
|
}
|
|||
|
|
.quota-num {
|
|||
|
|
min-height: 50rpx;
|
|||
|
|
}
|
|||
|
|
.buy-num {
|
|||
|
|
display: inline-block;
|
|||
|
|
border: 1px solid #ff0000;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: #ff0000;
|
|||
|
|
border-radius: 8upx;
|
|||
|
|
line-height: 32upx;
|
|||
|
|
padding: 0 10upx;
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
.choose-num {
|
|||
|
|
float: right;
|
|||
|
|
image {
|
|||
|
|
width: 40upx;
|
|||
|
|
height: 40upx;
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
text {
|
|||
|
|
display: inline-block;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
color: #666;
|
|||
|
|
width: 80upx;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
.fl {
|
|||
|
|
float: right;
|
|||
|
|
padding: 10upx 20upx;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: $assistColor;
|
|||
|
|
line-height: 32upx;
|
|||
|
|
border: 1px solid $assistColor;
|
|||
|
|
border-radius: 8upx;
|
|||
|
|
margin-left: 10upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.price {
|
|||
|
|
font-size: 32upx;
|
|||
|
|
color: #ff0000;
|
|||
|
|
margin-top: 116upx;
|
|||
|
|
}
|
|||
|
|
.ct {
|
|||
|
|
margin-left: 20upx;
|
|||
|
|
color: #ff00009c;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|