jikeH5/pages/remind/detectionDetail.vue

<template>
	<view class="content">
		<view class="titleBox">
			<image @click="goback" src="../../static/img/kackup.png" mode="" class="backIcon"></image>
			<view class="title">检测异常提醒</view>
			<view class="titleRight"></view>
		</view>
		<view class="top">
			<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
			<view style="height: 44px;"></view>
			<view class="ztBox">
				<image src="../../static/img/zt.png" mode="" class="ztImg"></image>
				<view class="ztTxt">提醒单状态</view>
			</view>
			
		</view>
	<!-- 	<view style="height: 360rpx;"></view> -->
		<view class="contBox">
			<view class="infoBox">
				<view class="lineCtop">
					<view class="lineCtopLeft">
						<view class="plateNumber">这是客户姓名</view>
						<image src="../../static/img/wechat.png" mode="" class="weChat"></image>
						<image src="../../static/img/wx1.png" mode="" class="weChat"></image>
					</view>
					<view class="lineCtopRight">
						<image src="../../static/img/lanCall.png" mode="" class="call"></image>
						<image src="../../static/img/jt.png" mode="" class="callJt"></image>
					</view>
				</view>
				<view class="vipBox">
					<view class="vip">普通会员</view>
					<view class="nameBox">
					 	 <image src="../../static/img/rentou.png" mode="" class="rentouIcon"></image>
					     <view class="name">姜金远</view>
					</view>
				</view>
				<view class="ms">
					<view class="msTxt">客户来源：推荐</view>
					<view class="msTxt">生日：2002-10-22</view>
				</view>
				<view class="biaoqian">
					<view class="bqBox">客户标签</view>
					<view class="bqBox">客户标签</view>
					<view class="bqBox">客户标签</view>
				</view>
				<view class="ms2">
					<view class="msLeft">客户备注</view>
					<view class="msRgiht">客户备注：这是客户备注这是客户备注</view>
				</view>
				<view class="ms2">
					<view class="msLeft">所属门店：</view>
					<view class="msRgiht">连锁店过长长长长长长长长长长长这是客户备注这是客户备注</view>
				</view>
			</view>
			<view class="carBox">
				<view class="carTop">
					<view class="plateNumber">鲁A29090</view>
					<image src="../../static/img/jt.png" mode="" class="carJt"></image>
				</view>
				<view class="carModel">东风日产-轩逸-2022款 e-POWE</view>
			</view>
			<view class="txCont">
				<view class="txTitlebox">
					<view class="txTitle">提醒信息</view>
					<view class="txState">未完成提醒单</view>
				</view>
				<view class="txLine">
					<span class="txLineSpan">提醒单号：</span>
					<span>TX202401020001</span>
				</view>
				<view class="txLine">
					<span class="txLineSpan">提醒类型：</span>
					<span>TX202401020001</span>
				</view>
				<view class="txLine">
					<span class="txLineSpan">检测部位：</span>
					<span>TX202401020001</span>
				</view>
				<view class="txLine">
					<span class="txLineSpan">提醒结果：</span>
					<span>TX202401020001</span>
				</view>
				<view class="txLine">
					<span class="txLineSpan">检测门店：</span>
					<span>TX202401020001</span>
				</view>
				<view class="txLine">
					<span class="txLineSpan">检测日期：</span>
					<span>TX202401020001</span>
				</view>
				<view class="txLine">
					<span class="txLineSpan">上次进厂里程：</span>
					<span>TX202401020001</span>
				</view>
				<view class="txLine" style="display: flex;">
					<span class="txLineSpan">下次服务：</span>
					<span>TX202401020001</span>
					<view class="txdq">剩15天到期</view>
				</view>
				<view class="txLine">
					<span class="txLineSpan">处理人：</span>
					<span>TX202401020001</span>
				</view>
				<view class="txLine">
					<span class="txLineSpan">提醒生成：</span>
					<span>TX202401020001</span>
				</view>
				<view class="txLine">
					<span class="txLineSpan">提醒失效：</span>
					<span>TX202401020001</span>
				</view>
			</view>
			
			<view class="txCont">
				<view class="txTitlebox">
					<view class="txTitle">检测单信息</view>
				</view>
				<view class="txLine">
					<span class="txLineSpan">检测单号：</span>
					<span style="color: #3F90F7;">TX202401020001</span>
				</view>
				<view class="txLine">
					<span class="txLineSpan">服务顾问：</span>
					<span>TX202401020001</span>
				</view>
				<view class="txLine">
					<span class="txLineSpan">检测套餐：</span>
					<span>TX202401020001</span>
				</view>
				<view class="jcBottom">
				  <view class="jcbLine">
					  <view class="jcbLineNum">33</view>
					  <view class="jcbLineTxt">状态良好</view>
				  </view>
				  <view class="jcbLine">
					  <view class="jcbLineNum">33</view>
					  <view class="jcbLineTxt">密切关注</view>
				  </view>
				  <view class="jcbLine">
					  <view class="jcbLineNum">33</view>
					  <view class="jcbLineTxt">急需处理</view>
				  </view>
				  <view class="jcbLine">
					  <view class="jcbLineNum">33</view>
					  <view class="jcbLineTxt">本店施工</view>
				  </view>
				</view>
			</view>
			<!--添加跟进记录  -->
			<view class="txCont">
				<view class="txTitlebox">
					<view class="txTitle">添加跟进记录</view>
				</view>
				<view class="textareaBox">
					<textarea class="textarea" placeholder-style="color:#999999" placeholder="请输入跟进内容，100字以内~"/>
				</view>
				<view class="kjBox">
					<view class="kjLine">这是快捷输入这是快捷输入</view>
					<view class="kjLine">这是快捷输入这是快捷输入</view>
					<view class="kjLine">这是快捷输入这是快捷输入这是快捷输入</view>
					<view class="kjLine">这是快捷输入这是快捷输入这是快捷输入这是快捷输入输入</view>
				</view>
				<view class="gjBtnBox">
					<view class="hjBtn">确认添加</view>
				</view>
			</view>
			<!-- 跟进记录 -->
			<view class="txCont">
				<view class="txTitlebox">
					<view class="txTitle">跟进记录</view>
				</view>
				<view class="jinduBox">
					<view class="jinduLine">
						<view class="yuan"></view>
						<view class="jdTime">2022-06-13 15:18:52 刘璐</view>
						<view class="jdCont">
							<view class="jdState1">提醒</view>
							<view class="jdMs">这是跟进标记内容这是跟进标记内容这是跟
							进标记内容 <span style="color: #3F90F7;">（查看跟进内容）</span>
							</view>
						</view>
					</view>
					<view class="jinduLine">
						<view class="yuan"></view>
						<view class="jdTime">2022-06-13 15:18:52 刘璐</view>
						<view class="jdCont">
							<view class="jdState2">转交</view>
							<view class="jdMs">这是跟进标记内容这是跟进标记内容这是跟
							进标记内容 
							</view>
						</view>
					</view>
					<view class="jinduLine">
						<view class="yuan"></view>
						<view class="jdTime">2022-06-13 15:18:52 刘璐</view>
						<view class="jdCont">
							<view class="jdState3">已完成</view>
							<view class="jdMs">这是跟进标记内容这是跟进标记内容这是跟
							进标记内容 
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view style="height: 150rpx;"></view>
		
		<view class="bottom">
			<view class="moreBtn">
				更多
				<image src="../../static/img/shang.png" mode="" class="moreIcon"></image>
			</view>
			<view class="bright">
				<view class="brLine">发微信</view>
				<view class="brLine">发短信</view>
				<view class="brLine brLine2">完成</view>
			</view>
		</view>
		
	</view>
</template>

<script>

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

<style scoped>
 .content{
 	min-height: 100vh;
 	background: #F6F6F6;
 }
 .contBox{
	 padding: 0 24rpx;
	 position: relative;
	 margin-top: -120rpx;
 }
 .carBox{
	 background: #ffffff;
	 padding: 30rpx 20rpx;
	 border-radius: 10rpx;
	 margin-top: 20rpx;
 }
 .plateNumber{
	 font-size: 30rpx;
	 color: #3C3C3C;
	 font-weight: 600;
 }
 .carJt{
	 width: 24rpx;
	 height: 24rpx;
 }
 .top{
	 width: 100vw;
	 height: 360rpx;
	 background: url(../../static/img/paysuc_bg.png) no-repeat;
	 background-size: 100% 100%;
	/* position: fixed;
	 left: 0;
	 top: 0; */
 }
 .backIcon{
	 width: 22rpx;height: 35rpx;
	 padding-left: 24rpx;
 }
 .titleRight{
	 width: 46rpx;
 }
 .titleBox{
	 height: 44px;
	 line-height: 44px;
	 font-weight: 500;
	 font-size: 36rpx;
	 color: #FFFFFF;
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 background: url(../../static/img/paysuc_bg.png) no-repeat;
	 background-size: 100% ;
	 position: fixed;
	 width: 750rpx;
	 top: 0;
	 left: 0;
	 z-index: 11;
 }
 .ztBox{
	 display: flex;justify-content: center;
	 padding-top: 50rpx;
 }
 .ztImg{
	 width: 50rpx;height: 50rpx;
 }
 .ztTxt{
	 font-weight: 500;
	 font-size: 36rpx;
	 color: #FFFFFF;
	 line-height: 50rpx;
	 padding-left: 20rpx;
 }
 .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;
 }
 .lineCtop{
 	display: flex;justify-content: space-between;
 }
 .call{
 	width: 40rpx;height: 40rpx;
 }
 .infoBox{
	 background: #FFFFFF;
	 border-radius: 10rpx;
	 padding: 30rpx 20rpx;
 }
 .callJt{
	 width: 24rpx;height: 24rpx;
	 margin-top: 8rpx;
 }
 .lineCtopRight{
	 display: flex;
 }
 .vipBox{
	 display: flex;justify-content: space-between;
	 padding-top: 16rpx;
 }
 .rentouIcon{
	 width: 28rpx;height: 28rpx;
	 margin-top: 4rpx;
 }
 .nameBox{
	 display: flex;
	  line-height: 33rpx;
 }
 .name{
	 font-size: 24rpx;
	 color: #999999;padding-left: 10rpx;
 }
 .vip{
	 font-weight: 500;
	 font-size: 24rpx;
	 color: #F19D01;
	 line-height: 33rpx;
	 padding: 2rpx 8rpx;
	 background: #FFF8EB;
 }
 .ms{
	 display: flex;justify-content: space-between;
	 font-size: 24rpx;
	 color: #999999;
	 padding-top: 16rpx;
 }
 .biaoqian{
	 display: flex;flex-wrap: wrap;padding-top: 16rpx;
 }
 .bqBox{
	 height: 36rpx;
	 border-radius: 5rpx;
	 border: 1rpx solid #F19D01;
	 line-height: 36rpx;
	 padding: 0 8rpx;
	 font-size: 24rpx;
	 color: #F19D01;
 }
 .ms2{
	 display: flex;
	 font-size: 24rpx;
	 color: #999999;
	 line-height: 33rpx;
	 padding-top: 16rpx;
 }
 .msLeft{
	 width: 120rpx;
 }
 .msRgiht{
  width: 550rpx;	 
 }
 .carTop{
	 display: flex;justify-content: space-between;
 }
 .carModel{
	color: #999999;padding-top: 15rpx;
	line-height: 34rpx; font-size: 24rpx;
 }
 .txCont{
	background: #FFFFFF;
	border-radius: 10rpx;
	margin-top: 20rpx;
	padding-bottom: 20rpx;
 }
 .txTitlebox{
	 display: flex;justify-content: space-between;
	 padding: 26rpx 20rpx;border-bottom: 1px solid #EEEEEE;
 }
 .txTitle{
	font-weight: 500;
	font-size: 30rpx;
	color: #3C3C3C;
	line-height: 46rpx; 
 }
 .txState{
	 font-size: 26rpx;
	 color: #3F90F7;
	 line-height: 46rpx; 
 }
 .txLine{
	 font-size: 26rpx;
	 color: #333333;
	 line-height: 37rpx;
	 padding-top: 20rpx;
	 padding-left: 20rpx;
 }
 .txLineSpan{
	 color: #666666;
 }
 .txdq{
	 height: 36rpx;
	 background: #FEF8EB;
	 border-radius: 4rpx;
	 font-size: 22rpx;
	 color: #F19D01;
	 line-height: 36rpx;
	 padding: 0 10rpx;
	 margin-left: 26rpx;
 }
 .jcBottom{
	 display: flex;
	 justify-content: space-around;
	 border-top: 1px solid #EEEEEE;
	 padding-top: 24rpx;
	 margin-top: 24rpx;
 }
 .jcbLine{
	 text-align: center;
 }
 .jcbLineNum{
	 font-size: 28rpx;
	 color: #333333;
 }
 .jcbLineTxt{
	 font-size: 24rpx;
	 color: #666666;
	 padding-top: 6rpx;
 }
 .textareaBox{
	 padding: 22rpx 20rpx;font-size: 26rpx;
 }
 .textarea{
	 height: 150rpx;font-size: 26rpx;
 }
 .kjBox{
	 display: flex;flex-wrap: wrap;
	 padding-left: 20rpx;
 }
 .kjLine{
	 font-size: 24rpx;
	 color: #3C3C3C;
	 line-height: 33rpx;
	 padding: 10rpx 16rpx;
	 background: #FAFAFA;
	 border-radius: 6rpx;
	 margin-bottom: 16rpx;
 }
 .hjBtn{
	 font-size: 26rpx;
	 color: #FF8113;
	 width: 144rpx;
	 height: 60rpx;
	 border-radius: 10rpx;
	 border: 2rpx solid #FF8113;
	 text-align: center;
	 line-height: 60rpx;
 }
 .gjBtnBox{
	 display: flex;justify-content: flex-end;
	 padding-top: 30rpx;padding-right: 20rpx;
 }
 .jinduLine{
	 padding-left: 30rpx;
	 border-left:1px solid #F4F5F7 ;
	 position: relative;
 }
 .jinduBox{
	 padding: 0 36rpx;
	 padding-top: 30rpx;
 }
 .yuan{
	 width: 16rpx;
	 height: 16rpx;
	 background: #DDDDDD;
	 border-radius: 50%;
	 position: absolute;
	 top: 2rpx;
	 left: -8rpx;
 }
 .jdTime{
	 font-size: 24rpx;
	 color: #999999;
	 line-height: 33rpx;
 }
 .jdCont{
	 display: flex;
	 padding-top: 10rpx;
	 padding-bottom: 37rpx;
 }
 .jdState1{
	 width: 52rpx;
	 height: 30rpx;
	 background: rgba(241,157,1,0.08);
	 border-radius: 4rpx;
	 font-size: 22rpx;
	 color: #F19D01;
	 text-align: center;
	  line-height: 30rpx;
 }
 .jdMs{
	 width: 520rpx;
	 font-size: 26rpx;
	 color: #3C3C3C;
	  line-height: 30rpx;
	  padding-left: 20rpx;
 }
 .jdState2{
	 width: 52rpx;
	 height: 30rpx;
	background: #FEF8EB;
	 border-radius: 4rpx;
	 font-size: 22rpx;
	 color: #F19D01;
	 text-align: center;
	 line-height: 30rpx;
 }
 .jdState3{
	 width: 74rpx;
	 height: 30rpx;
	 border-radius: 4rpx;
	 border: 1rpx solid #DDDDDD;
	  line-height: 30rpx;
	  text-align: center;
	  font-size: 22rpx;
	  color: #999999;
 }
 .moreIcon{
	 width: 20rpx;height: 11rpx;margin-top: 56rpx;margin-left: 6rpx;
 }
 .bottom{
	 width: 750rpx;
	 height: 120rpx;
	 background: #FFFFFF;
	 position: fixed;
	 left: 0;
	 bottom: 0;
	 display: flex;
 }
 .moreBtn{
	 display: flex;
	 line-height: 120rpx;
	 padding-left: 28rpx;
	 font-size: 26rpx;
	 color: #333333;
 }
 .bright{
	 border-radius: 10rpx;
	 border: 1px solid #EEEEEE;
	 display: flex;
	 margin-top: 22rpx;
	 height: 75rpx;
	 overflow: hidden;
	 margin-left: 28rpx;
 }
 .brLine{
	 width: 196rpx;
	 height: 75rpx;
	 line-height: 75rpx;
	 text-align: center;
	 font-size: 30rpx;
	 color: #333333;
 }
 .brLine2{
	 background: #3F90F7;color: #ffffff;
 }
</style>