jikeH5/pages/remind/detection.vue

<template>
	<view class="content">
		<view class="top">
			<view class="tabBox">
				  <view class="tabline" :class="{tabActive:tabIndex==1}" @click="tbFn(1)">我的</view>
				  <view class="tabline" :class="{tabActive:tabIndex==2}" @click="tbFn(2)">全部</view>
			</view>
			<view class="qiehuanBOx">
				<view class="tabBox2">
					<view class="tabline2 " :class="{tabActive2:tabIndex2==1}" @click="tbFn2(1)">未处理 (7)</view>
					<view class="tabline2"  :class="{tabActive2:tabIndex2==2}" @click="tbFn2(2)">处理中 (99+)</view>
					<view class="tabline2"  :class="{tabActive2:tabIndex2==3}" @click="tbFn2(3)">已完成</view>
					<view class="tabline2"  :class="{tabActive2:tabIndex2==4}" @click="tbFn2(4)">全部</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" @click="sxShowFn">
					  <image src="../../static/img/shaixuan.png" v-show="!sxShow" mode="" class="shaixuan"></image>
					   <image src="../../static/img/icon_shaix.png" v-show="sxShow" mode="" class="shaixuan"></image>
				       <span class="searchBtnSpan" :class="{searchBtnSpanActive:sxShow}">筛选</span>
				  </view>
				</view>
				<view class="sxBox" v-show="!sxShow">
					<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="heightView"></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 class="jianche">
					<view class="jcLine">检测结果：长了换 行检测结果：长了换行
					  检测结果：长了换行检测结果：长了换行检测结果：长了换行检测结果：长了换行
					</view>
					<view class="jcLine">检测日期：2024-01-12</view>
					<view class="jcLine">检测门店：这是门店名称</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 class="sxY" v-if="sxShow" @click="sxHdie">
		<view class="sxTkBox" @click.stop="">
		  <view class="sxTitle">处理人</view>
		  <picker @change="bindPickerChange" :value="index" :range="array">
		  		<view class="sxInputBox">
				  <view class="sxLineCont">{{array[index]}}</view>
				  <image src="../../static/img/jt2.png" mode="" class="sxJt"></image>
		  		</view>
		</picker>

		  <view class="sxTitle" >检测部位</view>
		  <picker @change="bindPickerChange" :value="index" :range="array">
		      <view class="sxInputBox">
		  		  <view class="sxLineCont">{{array[index]}}</view>
		  		  <image src="../../static/img/jt2.png" mode="" class="sxJt"></image>
		      </view>
		  </picker>
		  <view class="sxTitle" >检测日期</view>
		  <view class="sxTimeBox">
		  			  <view class="sxtimeLine">请选择</view>
		  			  <view class="sxTimeHx"></view>
		  			  <view class="sxtimeLine">请选择</view>
		  </view>
		  <view class="sxTitle" style="padding-top: 40rpx;">客户所属门店</view>
		  <picker @change="bindPickerChange" :value="index" :range="array">
		      <view class="sxInputBox">
		  		  <view class="sxLineCont">{{array[index]}}</view>
		  		  <image src="../../static/img/jt2.png" mode="" class="sxJt"></image>
		      </view>
		  </picker>
		  <view class="sxTitle" >电话提醒</view>
		  <view class="scCklineBox">
			  <view class="scCkline" @click="sxIndex1=1" :class="{scCklineActive:sxIndex1==1}">未提醒</view>
			  <view class="scCkline" @click="sxIndex1=2" :class="{scCklineActive:sxIndex1==2}">已提醒</view>
		  </view>
		  <view class="sxTitle" style="padding-top: 40rpx;">短信提醒</view>
		  <view class="scCklineBox">
			  <view class="scCkline" @click="sxIndex2=1" :class="{scCklineActive:sxIndex2==1}">未提醒</view>
			  <view class="scCkline " @click="sxIndex2=2" :class="{scCklineActive:sxIndex2==2}">已提醒</view>
		  </view>
		  <view class="sxTitle" style="padding-top: 40rpx;">发放优惠券</view>
		  <view class="scCklineBox">
			  <view class="scCkline" @click="sxIndex3=1" :class="{scCklineActive:sxIndex3==1}">未发放</view>
			  <view class="scCkline" @click="sxIndex3=2" :class="{scCklineActive:sxIndex3==2}">已发放</view>
		  </view>
		  <view class="sxTitle" style="padding-top: 40rpx;">处理人</view>
		  <view class="scCklineBox">
		  			  <view class="scCkline" @click="sxIndex4=1" :class="{scCklineActive:sxIndex4==1}">未分配</view>
		  			  <view class="scCkline" @click="sxIndex4=2" :class="{scCklineActive:sxIndex4==2}">已分配</view>
		  </view>
		  
		  <view class="sxBottom">
			  <view class="chongzhi">重置</view>
			  <view class="sxSure">确定</view>
		  </view>
		  
		</view>
	</view>
	
		
	</view>
</template>

<script>

	export default {
		data() {
			return {
			    iStatusBarHeight:'',
				token:'',
				uid:'',
				sxShow:false,
				 array: ['请选择','中国', '美国', '巴西', '日本'],
				 index: 0,
				 sxIndex1:'',
				 sxIndex2:'',
				 sxIndex3:'',
				 sxIndex4:'',
				 tabIndex:1,
				 tabIndex2:1,
			}
		},
		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: {
			tbFn(num){
			  this.tabIndex=num	
			},
			tbFn2(num){
				 this.tabIndex2=num	
			},
			sxShowFn(){
					this.sxShow=!this.sxShow;
			},
			sxHdie(){
			  	this.sxShow=false;
			},
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index = e.detail.value
			  },
			getList(){
				//console.log("list")
			},
			goDetail(){
				uni.navigateTo({
					url:'detectionDetail'
				})
			}
		
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style scoped>
.sxBottom{
	display: flex;justify-content: space-between;padding-top: 50rpx;
}
.chongzhi{
	width: 334rpx;
	height: 70rpx;
	border-radius: 10rpx;
	border: 1px solid #DDDDDD;
	line-height: 70rpx;
	font-size: 26rpx;
	color: #333333;
	text-align: center;
	
}
.sxSure{
	width: 334rpx;
	height: 70rpx;
	border-radius: 10rpx;
	line-height: 70rpx;
	font-size: 26rpx;
	color: #FFFFFF;
	text-align: center;
	background: #FF8113;
}
.sxTimeBox{
	display: flex;justify-content: space-between;
}
.sxtimeLine{
	width: 317rpx;
	height: 54rpx;
	background: #F7F7F7;
	border-radius: 6rpx;
	font-size: 22rpx;
	color: #999999;
	padding-left: 20rpx;
	line-height:54rpx ;
}
.sxTimeHx{
	width: 13rpx;
	height: 4rpx;
	background: #DDDDDD;
	margin-top: 26rpx;
}
.scCklineBox{
	display: flex;
}
.scCkline{
	width: 160rpx;
	height: 54rpx;
	background: #F7F7F7;
	border-radius: 6rpx;
	line-height: 54rpx;
	text-align: center;
	font-size: 22rpx;
	color: #3C3C3C;
	margin-right: 20rpx;
}
.scCklineActive{
	background: rgba(255,129,19,0.1);
	border-radius: 6rpx;
	border: 2rpx solid #FF8113;
	width: 156rpx;
	height: 50rpx;
	color: #FF8113;
	line-height: 50rpx
}
 .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;
	position: fixed;
	width:750rpx;
	left: 0;
	top: 44px;
	z-index: 11;
}
.heightView{
	height: calc(260rpx + 44px);
}
.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: #9999;
	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-around;
	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;
}
.jianche{
	background: #FAFAFA;
	border-radius: 10rpx;
	padding: 0 20rpx;
	padding-bottom: 20rpx;
	margin-top: 20rpx;
}
.jcLine{
	font-size: 24rpx;
	color: #999999;
	padding-top: 20rpx;
}
.sxY{
	width: 750rpx;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.5);
}
.sxTkBox{
	padding: 24rpx;
	background: #ffffff;
	margin-top: 350rpx;
}
.sxTitle{
	font-weight: 500;
	font-size: 26rpx;
	color: #3C3C3C;
    padding-bottom: 15rpx;
}
.sxJt{
	width: 14rpx;height: 23rpx;
	margin-top: 16rpx;
	margin-right: 20rpx;
}
.sxInputBox{
	display: flex;
	height: 54rpx;
	background: #F7F7F7;
	border-radius: 6rpx;
	margin-bottom: 40rpx;
	line-height: 54rpx;
	padding-left: 22rpx;
	justify-content: space-between;
	font-size: 22rpx;
	color: #999999;
}
.searchBtnSpanActive{
	color: #FF8113;
}
</style>