hz-zhhq-app/pages/work-tool/work-accept.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>