fish_program/pages/mine/mine.vue

<template>
	<view class="order">
		<view class="order_detail" v-for="(list,index) in ordeListMessage" :key=index>
			
				<view class="fish_pond">
					<text class="name">{{list.company.name}}</text><text class="time">{{list.created_at_text}}</text>
				</view>
				<view class="fish_list">
					<view class="fish_list1">
						<text  class="fish_name">预约时间</text><text class="fish_time">{{list.subscribe_day}}</text>
					</view>
					<view class="fish_list2">
						<text  class="fish_name">预约区域</text><text class="fish_time">{{list.seat.name}}</text>
					</view>
					<view class="fish_list1" v-for="(item,index1) in list.subscribes" :key=index1>
						<text  class="order_name">预约坐席</text><text class="order_time">{{item.seat_no}}</text>
					</view>
				</view>
				<view class="order-footer">
					<text class="order-money">￥{{list.seats_money}}</text><text class="order-state">{{list.status_text}}</text>
				</view>
			
		</view>
	</view>
</template>

<script>
	export default({
		data(){
			return{
				ordeListMessage:''
			}
		},
		onLoad() {
			var that=this
			wx.request({
				url:'https://yutang.web.ximengnaikang.com/api/orders',
				method:'GET',
				 header:{
					'content-type':'application/json' ,// 默认值
					'Authorization':getApp().globalData.token,
				},
				
				success:function(res){
					// console.log(getApp().globalData.no,'这是预约成功发')
					that.ordeListMessage=res.data.data.data
					console.log(that.ordeListMessage,'这是预约')
				}
			})
		}
	})
</script>

<style>
	page{
		background-color: #fcfbfc;
	}
	.order_detail{
			margin: 20rpx 0;
			padding: 0 20rpx;
		background-color:white;
	
	}
	.fish_pond{
		margin:  0 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 6rpx;
		
	}
	.name,.time{
		display: inline-block;
	}
	.name{
		width: 75%;
		font-weight: 600;
		font-size: 40rpx;
	}
	.time{
		width: 25%;
		color: red;
	}
	.fish_list{
		padding: 0 20rpx;
			border-top: solid 1px #d1d0d1;
			border-bottom: solid 1px #d1d0d1;
	}
	.fish_list1,.fish_list2{
		height: 80rpx;
		line-height: 80rpx;
	
	}
	.fish_list2{
			border-bottom: dashed  1px #d1d0d1;
			border-top: dashed  1px #d1d0d1;
	}
	.fish_name{
		width: 70%;
		display: inline-block;
	}
	.fish_time{
		width: 30%;
		display: inline-block;
	}
	.order_time{
		vertical-align: top;
		display: inline-block;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		color: white;
		width: 60rpx;
		background-color: red;
		margin-left: 60rpx;
		margin-top: 10rpx;
		border-radius: 6rpx;
		
	}
	.order-footer{
		height: 120rpx;
	}
	.order-money{
		line-height: 120rpx;
		font-size: 36rpx;
	}
	.order-state{
		margin-right: 40rpx;
		margin-top: 30rpx;
		display: inline-block;
		width: 150rpx;
		height: 60rpx;
		border-radius: 12rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		text-align: center;
		border: solid 1rpx  #d1d0d1;
		float: right;
		
	}
</style>