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>
|