jikeH5/pages/remind/maintenance.vue

<template>
	<view class="content">
		<view class="top">
			<view class="tabBox">
				  <view class="tabline tabActive" >我的</view>
				  <view class="tabline" >全部</view>
			</view>
			<view class="qiehuanBOx">
				<view class="tabBox2">
					<view class="tabline2 tabActive2">未处理 (7)</view>
					<view class="tabline2">处理中 (99+)</view>
					<view class="tabline2">已完成</view>
					<view class="tabline2">全部</view>
				</view>
			</view>
			<view class="topPadding">
				<view class="searchBox">
				  <view class="searchInputBox">
					  <image src="../../static/img/icon_search.png" mode="" class="searchIcon"></image>
					  <input type="text" placeholder="单号、车牌号、客户姓名、手机号 " class="searchInput">
				  </view>
				  <view class="searchBtnBox">
					  <image src="../../static/img/shaixuan.png" mode="" class="shaixuan"></image>
				      <span class="searchBtnSpan">筛选</span>
				  </view>
				</view>
				<view class="sxBox">
					<view class="sxLine">
						<span>提醒类别</span>
						<image src="../../static/img/arrow_down.png" mode="" class="downIcon"></image>
					</view>
					<view class="sxLine">
						<span>下次服务日期</span>
						<image src="../../static/img/arrow_down.png" mode="" class="downIcon"></image>
					</view>
					<view class="sxLine">
						<span>上次消费门店</span>
						<image src="../../static/img/arrow_down.png" mode="" class="downIcon"></image>
					</view>
				</view>
			</view>
			
			
		</view>
	 
	<view class="lineBox">
		<view class="line" @click="goDetail()">
			<view class="codeBox">
				<view class="code">TX202209090009</view>
				<view class="linestate">提醒单状态</view>
			</view>
			<view class="lineCont">
				<view class="lineCtop">
					<view class="lineCtopLeft">
						<view class="name">鲁A29090</view>
						<view class="name" style="padding-left: 30rpx;">张珊</view>
						<image src="../../static/img/wechat.png" mode="" class="weChat"></image>
						<image src="../../static/img/wx1.png" mode="" class="weChat"></image>
					</view>
					<image src="../../static/img/lanCall.png" mode="" class="call"></image>
				</view>
				<view class="lineMs1">东风日产-轩逸-2022款 e-POWER 超智PLUS</view>
				<view class="lineMs1">上次到店：2019-05-12</view>
				<view class="lineMs2">
					<view>下次保养：2016-06-25</view>
					<view class="day">剩15天到期</view>
				</view>
				<view class="lineMs3">
					<view>提醒类别：机油滤清器备份</view>
					<view>处理人：张三</view>
				</view>
			</view>
			<view class="lineBottom">
			  <view class="lineB">
				  <image src="../../static/img/bcall.png" mode="" class="lineBIcon"></image>
				  <view class="lineBtxt">电话</view>
			  </view>
			  <view class="lineB">
				  <image src="../../static/img/duanxin.png" mode="" class="lineBIcon"></image>
				  <view class="lineBtxt">短信</view>
			  </view>
			  <view class="lineB">
				  <image src="../../static/img/bwx.png" mode="" class="lineBIcon"></image>
				  <view class="lineBtxt">微信</view>
			  </view>
			  <view class="lineB">
				  <image src="../../static/img/bwc.png" mode="" class="lineBIcon"></image>
				  <view class="lineBtxt">完成</view>
			  </view>
			</view>
		</view>
		
	</view>
		
	</view>
</template>

<script>

	export default {
		data() {
			return {
			    iStatusBarHeight:'',
				token:'',
				uid:'',
			}
		},
		onLoad(opt) {
		
			console.log(window.location.origin)
			//this.url=window.location.origin
           this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		   this.token=opt.token;
		   this.uid=opt.uid
		   
		},
		
		methods: {
			getList(){
				//console.log("list")
			},
			goDetail(){
				uni.navigateTo({
					url:'maintenanceDetail'
				})
			}
		
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style scoped>
 .content{
 	min-height: 100vh;
 	background: #F6F6F6;
 }
 .tabBox{
	 display: flex;justify-content: space-around;
 }
 .tabline{
	 font-size: 30rpx;
	 color: #666666;
	 width: 134rpx;
	 text-align: center;
	 line-height: 76rpx;
 }
.top{
	background: #ffffff;
}
.tabActive{
	color: #3F90F7;border-bottom: 4rpx solid #3F90F7;
}
.tabBox2{
	display: flex;
	line-height: 58rpx;
	border: 1px solid #EEEEEE;
	border-radius: 6rpx;
	overflow: hidden;
}
.qiehuanBOx{
	padding: 20rpx 34rpx 0 34rpx;
}
.tabline2{
	width: 25%;text-align: center;
	font-size: 26rpx;
	color: #333333;
}
.tabActive2{
	color: #3F90F7;background: rgba(63,144,247,0.08);
}
.topPadding{
	padding: 20rpx 24rpx;
}
.shaixuan{
	width: 32rpx;
	height: 32rpx;
}
.searchBox{
	display: flex;
}
.searchInputBox{
	display: flex;
	width: 572rpx;
	height: 72rpx;
	background: #F4F5F7;
	border-radius: 36rpx;
}
.searchIcon{
	width: 40rpx;height: 40rpx;
	margin-top: 16rpx;
	margin-left: 20rpx;
}
.searchInput{
	height: 72rpx;
	line-height: 73rpx;
	padding-left: 11px;
	font-size: 26rpx;
	color: #999999;
	width: 400rpx;
}
.searchBtnBox{
	display: flex;
	padding: 20rpx;
}
.searchBtnSpan{
	line-height: 32rpx;padding-left:10rpx ;
	font-size: 26rpx;
	color: #333333;
}
.downIcon{
	width: 24rpx;height: 24rpx;
	margin-top: 6rpx;margin-left: 6rpx;
}
.sxLine{
	display: flex;
	font-size: 26rpx;
	color: #3C3C3C;
	line-height: 36rpx;
}
.sxBox{
	display: flex;justify-content: space-between;
	padding-top: 36rpx;
}
.line{
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: 20rpx;
}
.lineBox{
	padding: 0 24rpx;
}
.codeBox{
	border-bottom: 1px solid #EEEEEE;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	font-size: 26rpx;
	color: #999999;
	line-height: 37rpx;
}
.linestate{
	color: #3F90F7;
}
.lineCtopLeft{
	display: flex;
	font-weight: 500;
	font-size: 30rpx;
	color: #3C3C3C;
	line-height: 38rpx;
}
.weChat{
	width: 38rpx;height: 31rpx;
	margin-left: 16rpx;
	margin-top: 2rpx;
}
.lineCont{
	padding: 20rpx;
	border-bottom: 1px solid #EEEEEE;
}
.lineMs1{
	font-size: 24rpx;
	color: #999999;
	padding-top: 10rpx;
}
.lineMs2{
	display: flex;
	padding-top: 10rpx;
	line-height: 36rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #3C3C3C;
}
.day{
	background: #FEF8EB;
	border-radius: 4rpx;
	height: 36rpx;
	font-size: 22rpx;
	color: #F19D01;
	line-height: 36rpx;
	padding: 0 10rpx;
	font-weight: 400;
	margin-left: 20rpx;
}
.lineMs3{
	display: flex;
	padding-top: 10rpx;
	line-height: 36rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #3C3C3C;
	justify-content: space-between;
}
.call{
	width: 40rpx;height: 40rpx;
}
.lineCtop{
	display: flex;justify-content: space-between;
}
.lineBottom{
	display: flex;
	justify-content: space-between;
	padding: 26rpx 30rpx;
}
.lineBIcon{
	width: 32rpx;height: 32rpx;
}
.lineB{
	display: flex;line-height: 32rpx;
}
.lineBtxt{
	font-size: 26rpx;
	color: #333333;
	padding-left: 6rpx;
}
</style>