lhyt_shop_applet/XCX-Shop/pages/userInfo/maintenance.vue

<template>
	<view class="body">
		<view class="content">
			<u-toast ref="uToast" />
		           <view >
					<!--   <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower" lower-threshold="100" >
						
					   	</scroll-view> -->
						<view class="paddingOder">
							<view class="model" v-for="(item,index) in noticeList" :key=index>
								<ul>
									<li>
										<view class="Number">
											<p style="width: 1vw; height: 1vw; background-color: red; border-radius: 50%; margin-top: 2vw; margin-right: 2vw;"></p>
											<p>车系:</p>
											<p style="margin-left: 2vw;">{{item.model_name}}</p>
										</view>
										<view class="playOder">
											<p style="width: 1vw; height: 1vw; background-color: grey; border-radius: 50%; margin-top: 2vw; margin-right: 2vw;"></p>
											<p>状态:</p>
											<p style="margin-left: 2vw; color: red;">{{item.status_text}}</p>
										</view>
										<view class="playOder">
											<p style="width: 1vw; height: 1vw; background-color: #fed904; border-radius: 50%;margin-top: 2vw;  margin-right: 2vw;"></p>
											<p>预约时间:</p>
											<p style="margin-left: 2vw;">{{item.date}}</p>
										</view>
										<view class="playOder">
											<p style="width: 1vw; height: 1vw; background-color: grey; border-radius: 50%; margin-top: 2vw; margin-right: 2vw;"></p>
											<p>公司:</p>
											<p style="margin-left: 2vw;">{{item.shop_name}}</p>
										</view>
										
									</li>
									<!-- <li> <image style="width: 20vw; height: 20vw; margin-top: 2vw;" :src="item.imgLink"></image></li> -->
								</ul>
							</view>			   
						</view>
		           </view>
		   </view>
	</view>
</template>
<script>
		
		export default{
		
			data(){
				return{
					trailerKeyboardShow:true,
					control:false,
					scrollTop: 0,
					token:'',
					noticeList:[],
					page:1,
					totals:'',
					pageSize:'',
					status:1
				}
			},
			onLoad() {
				this.getNoticeLists()
			},
			methods:{
				 //  lower(e){
					//   if(this.pageSize*this.page<this.totals){
					// 	  this.page+=1
					// 	  	this.getNoticeLists(this.page,this.status)
					//   }
					
				 //  },
				  getNoticeLists(){
					  this.$api.getmaintReserve(res=>{
						  if(res.code==0){
							  this.noticeList= res.data
						  }else{
							  this.errorToast(res.msg)
						  }
					  })
				  },
				  errorToast(msg){
				  	this.$refs.uToast.show({
				  		title: msg,
				  		type: 'error',
				  		duration:2000
				  	})
				  },
			},
			
		}
</script>

<style scoped lang="scss">
	.body{
		width: 100vw;
		height: 99vh;
		box-sizing: border-box;
		padding: 0 2vw;
		background-color: #fafafa ;
	}
	.paddingOder{
		width: 96vw;
		height: 93vh;
		background-color: #fafafa;
		border-radius: 8px;
		.model{
			width: 96vw;
			height: 28vw;
			box-sizing: border-box;
			padding: 0 3vw;
			background-color: white;
			border-radius: 20px;
			margin-top: 2vw;
			ul{
				display: flex;
				justify-content: space-between;
				li{
					.Number{
						font-size: 0.8rem;
						display: flex;
						margin-top: 1vw;
					}
					.playOder{
						display: flex;
						font-size: 0.75rem;
						margin-top: 1vw;
						color:#808080;
					}
				}
				li:nth-child(2){
					line-height: 20vw;
					color: red;
				}
			}
		}
	}
</style>