272 lines
6.2 KiB
Vue
272 lines
6.2 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}}</text>
|
||
</view>
|
||
<view class="text">
|
||
<text>申请数量</text>
|
||
</view>
|
||
</view>
|
||
<view class="num-box">
|
||
<view class="num">
|
||
<text>{{statisticsData.price}}</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="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 class="status font-col" v-else>已受理</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}}{{item.company}}</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:true,
|
||
userId:getStorage('userInfo').id,//用户id
|
||
page:1,
|
||
pageSize:10,
|
||
loadingType:0,//0-loading前；1-loading中；2-没有更多了
|
||
contentText: {
|
||
contentdown: "上拉加载更多",
|
||
contentrefresh: "正在加载...",
|
||
contentnomore: "没有更多数据了"
|
||
},
|
||
statisticsData:{},//统计数据
|
||
orders : [],//订单列表
|
||
}
|
||
},
|
||
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){
|
||
// this.statisticsData = result.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);
|
||
// }
|
||
// })
|
||
this.statisticsData = {price:2,num:2};
|
||
this.orders =[{
|
||
orderDetails:[{
|
||
goods_num:1,goods_name:'文件夹',goods_icon:'http://47.99.190.179:80/appImageDir/1.jpg'
|
||
},{
|
||
goods_num:1,goods_name:'计算器',goods_icon:'http://47.99.190.179:80/appImageDir/3.jpg',
|
||
}
|
||
],
|
||
order_time:'2020-01-06 17:00:00',
|
||
no_buy_num:20,
|
||
order_status:1,
|
||
company:'个'},
|
||
{
|
||
orderDetails:[{
|
||
goods_num:1,goods_name:'档案盒',goods_icon:'http://47.99.190.179:80/appImageDir/2.jpg'
|
||
}],
|
||
no_buy_num:20,
|
||
order_time:'2020-01-06 17:00:00',
|
||
order_status:0,
|
||
company:'个'}
|
||
];
|
||
|
||
}
|
||
},
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.list {
|
||
.main {
|
||
background: #FFFFFF;
|
||
margin-bottom:20upx;
|
||
.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;
|
||
}
|
||
}
|
||
.middle {
|
||
// height: 300upx;
|
||
overflow-x: scroll;
|
||
display: flex;
|
||
overflow:auto;
|
||
margin:10upx 30upx 0;
|
||
.foodList {
|
||
width:200upx;
|
||
flex-direction: column;
|
||
float:left;
|
||
text-align: center;
|
||
margin: 0upx 20upx 0upx 0upx;
|
||
image {
|
||
display:block;
|
||
width:200upx;
|
||
height:200upx;
|
||
}
|
||
text {
|
||
display:block;
|
||
font-size: 24upx;
|
||
color:#777;
|
||
line-height:60upx;
|
||
@include overstepOne;
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
padding:20upx 30upx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|