hz-zhhq-app/pages/order-form/order-form.vue

<template>
	<view>
		<view class="list-box" v-if="listInfo.length > 0">
			<view class="list-item" v-for="(item,index) in listInfo" :key="index">
				<view class="head">
					<view class="name"></view>
					<view class="status" v-if='item.order_status == 1'>预定成功</view>
					<view class="status font-col" v-else-if='item.order_status == 0'>已取消</view>
					<view class="status font-col" v-else>已过期</view>
				</view>
				<view class="content" >
					<view class="food-list">
						<view class="food-list-item" v-for="(foodItem,foodIndex) in item.orderDetails" :key="foodIndex">
							<image  class="img" mode="" :src="foodItem.goods_icon" />
							<view class="food-name">{{foodItem.goods_name}} {{foodItem.goods_num}}份</view>
						</view>
					</view>
					<view class="price">&yen;{{item.pay_price}}</view>
				</view>
				<view class="bottom">
					<text class="date">{{item.order_time}}</text>
					<view class="btn-group">
						<view class="btn" @click='cancelOrder(item)' v-if='item.order_status == 1'>取消订单</view>
						<view class="btn" @click='evDining(2,item.dining_room_id,item.id)' v-if='item.order_status == 1'>食堂评价</view>
						<view class="btn" @click='evDining(1,item.id,item.dining_room_id)' v-if='item.order_status == 1'>菜品评价</view>
					</view>
				</view>
			</view>
		</view>
		<content-none :padTop="35" v-else></content-none>
		<load-more :loadingType='loadingType' :contentText="contentText"></load-more>
	</view>
</template>

<script>
	import {alertTip,callbackRequest,getStorage} from '@/common/util.js';
	import {myOrderList,cancelOrder} from '@/common/api.js';
	import loadMore from '@/components/loadMore.vue';
	import contentNone from '@/components/contentNone.vue';
	export default {
		data() {
			return {
				listInfo:[],
				page:1,
				pageSize:10,
				loadingType:0,//0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				userInfo:getStorage('userInfo'),//用户信息
			}
		},
		components:{
			loadMore,
			contentNone
		},
		onLoad(){
			this.initData();
		},
		methods: {
			initData(){
				let data = {
					"method":myOrderList,
					data:{
						userId:this.userInfo.id,
						pageSize:this.pageSize,
						pageNum:this.page
					}
				}
				callbackRequest(data)
				.then(res => {
					if(res.data.returnCode == 1){
						let result = res.data.returnData || [];
						if(this.page == 1){
							this.listInfo = result;
						}else{
							if(result.length > 0){
								this.listInfo = this.listInfo.concat(result);
								this.loadingType = 0;
							}else{
								this.loadingType = 2;
							}
						}
						
					}
				})
			},
			cancelOrder(item){
				let data = {
					"method":cancelOrder,
					data:{
						userId:this.userInfo.id,
						orderId:item.id
					}
				}
				console.log(data);
				uni.showModal({
					content:'确认取消此订单 ?',
					success:res => {
						if(res.confirm){
							callbackRequest(data)
							.then(res => {
								if(res.data.returnCode == 1){
									alertTip('取消成功','success',2000);
									this.page = 1;
									this.loadingType = 0;
									setTimeout(_ => {
										this.initData()
									}, 1000);
								}
							})
						}
					}
				})
			},
			evDining(type,id,spareId){
				uni.navigateTo({
					url: `evaluate?type=${type}&typeId=${id}&spareId=${spareId}`
				});
			},
			details : function(){
				uni.navigateTo({
					url: 'order-details'
				});
			}
		},
		//上拉加载更多
		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';
	page{
		background: #f8f8f8;
	}
	.list-box{
		// padding:10upx;
		.list-item{
			background: #fff;
			margin-bottom:10upx;
			.head{
				overflow:hidden;
				padding:16upx 30upx;
				border-bottom:1px solid #eee;
				.name{
					float:left;
					font-size:28upx;
					color:#333;
					font-weight:bold;
					line-height:40upx;
				}
				.status{
					float:right;
					font-size:26upx;
					color:$assistColor;
					line-height:40upx;
				}
				.font-col{
					color:#999;
				}
			}
			.content{
				.food-list{
					overflow: auto;
					overflow-x: scroll;
					white-space: nowrap;
					padding:20upx 0 10upx 20rpx;
					.food-list-item{
						display: inline-block;
						vertical-align: top;
						margin-right: 20rpx;
						.img{
							width:200upx;
							height:200upx;
						}
						.food-name{
							font-size:24upx;
							color:#666;
							line-height:40upx;
							text-align:center;
						}
					}
				}
				.price{
					padding:4upx 30upx 20upx;
					font-size:28upx;
					color:#333;
					line-height:40upx;
					text-align:right;
				}
			}
			.bottom{
				border-top:1px solid #eee;
				padding:16upx 30upx;
				.date{
					display: inline-block;
					font-size:26upx;
					color:#666;
					line-height:52upx;
				}
				.btn-group{
					float:right;
					.btn{
						float:right;
						padding:10upx 10upx;
						font-size:24upx;
						color:$assistColor;
						line-height:32upx;
						border:1px solid $assistColor;
						border-radius:4upx;
						margin-left:10upx;
					}
				}
			}
		}
	}
</style>