Browse Source

我的收件已完成

sunChengjie 1 year ago
parent
commit
d58b7de09b
4 changed files with 506 additions and 520 deletions
  1. 10 0
      src/api/index.js
  2. 5 1
      src/components/ScrollRefresh.vue
  3. 154 9
      src/pages/logisticslist.vue
  4. 337 510
      src/pages/search.vue

+ 10 - 0
src/api/index.js

@@ -57,5 +57,15 @@ export function getListByUser(data) {
     })
 }
 
+// 我的收件- 收件
+export function getExpressByUser(data) {
+    return request({
+        url: '/tianzong/client/inside/getExpressByUser',
+        method: 'post',
+        data: data,
+        emulateJSON: true
+    })
+}
+
 
 

+ 5 - 1
src/components/ScrollRefresh.vue

@@ -44,7 +44,7 @@ export default {
             refreshLoading: false,
             pagination: {
                 page: 1,
-                limit: 3
+                limit: 10
             },
             list: []
         };
@@ -115,6 +115,10 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+* {
+    font-size: 14px;
+}
+
 .bottom_text {
     text-align: center;
     color: #969799;

+ 154 - 9
src/pages/logisticslist.vue

@@ -23,17 +23,48 @@
 				</div>
 			</div>
 			<!-- 订单列表 -->
-			<div class="list">
+			<div class="jjlist" v-for="item in mailList">
+				<div class="listinfo">
+					<div class="list_top" @click="mailDetail(item.id)">
+						<div class="list_top_left">
+							<img src="../assets/images/ad_icon1.png" alt="">
+							<div>
+								<p>寄件号 {{ item.orderId }}</p>
+								<p><template v-if="item.expressInfo == 1">顺丰</template>
+									<template v-if="item.expressInfo == 2">中通</template>
+									<template v-if="item.expressInfo == 3">DHL</template>
+									<template v-if="item.expressInfo == 4">EMS</template>
+									<template v-if="item.expressInfo == 5">同城</template>
+									<template v-if="item.expressInfo == 6">京东</template> {{ item.expressNo }}
+								</p>
+								<p><span>收</span>收件人 {{ item.name }} {{ item.phone }}</p>
+								<p>{{ item.province }} {{ item.city }} {{ item.county }}</p>
+							</div>
+						</div>
+						<p>
+							<template v-if="item.sendSt == 0">待审核</template>
+							<template v-if="item.sendSt == 1">待揽件</template>
+							<template v-if="item.sendSt == 3">待寄件</template>
+							<template v-if="item.sendSt == 4">已寄出</template>
+							<template v-if="item.sendSt == 7">审核拒绝</template>
+							<template v-if="item.sendSt == 8">已取消</template>
+							<template v-if="item.sendSt == 10">派送中</template>
+							<template v-if="item.sendSt == 11">已签收</template>
+							<template v-if="item.sendSt == 12">拒签</template>
+						</p>
+					</div>
+				</div>
+			</div>
+			<!-- <div class="list">
+
+				
 				<div class="logistics" v-for="item in mailList">
 					<div class="logistics_top">
 						<p>订单号:<span :id="'copytkl' + item.orderId">{{ item.orderId }}</span></p>
-						<!-- <p > -->
 						<img :id="'fz' + item.orderId" @click="copyLink(item.orderId)" data-clipboard-action="copy"
 							:data-clipboard-target="'#copytkl' + item.orderId" src="../assets/images/2022copy.png"
 							alt="">
-						<!-- </p> -->
 					</div>
-					<!-- <div class="logistics_center" @click="mailDetail(item.id)"> -->
 					<div class="logistics_center">
 						<div>
 							<p>{{ item.sendCity }}</p>
@@ -52,10 +83,8 @@
 							<p>{{ item.receiver }}</p>
 						</div>
 					</div>
-
 				</div>
-
-			</div>
+			</div> -->
 			<!-- 日历选择 -->
 			<van-calendar color="#00c4b8" v-model:show="showPicker" type="range" :min-date="minDate" :max-date="maxDate"
 				@confirm="onConfirm" />
@@ -130,10 +159,11 @@ export default {
 			// });
 
 			let parmas = {
-				// expressNo:this.value,
+				expressNo: this.value,
 				startTime: this.startTime,
 				endTime: this.endTime,
-				type: this.index
+				type: this.index,
+
 			}
 			const res = await getListByUser({ ...this.pageSize, ...parmas })
 			this.mailList = res.data
@@ -198,6 +228,121 @@ export default {
 </script>
 
 <style lang="less" scoped="">
+.jjlist {
+	font-size: .3rem;
+	color: #999999;
+
+	.listinfo {
+		background: white;
+		padding: .33rem .33rem .2rem;
+		border-radius: .05rem;
+		margin-bottom: .2rem;
+		position: relative;
+
+		.list_top {
+			display: flex;
+			justify-content: space-between;
+
+			.list_top_left {
+				img {
+					display: inline-block;
+					width: .9rem;
+					height: .9rem;
+					position: relative;
+					top: -.3rem;
+				}
+
+				div {
+					width: 4rem;
+					margin-left: .2rem;
+					display: inline-block;
+					line-height: 150%;
+
+					p:nth-of-type(1) {
+						font-size: .3rem;
+						font-weight: bold;
+						color: #333;
+					}
+
+					p:nth-of-type(3) {
+						font-size: .24rem;
+						color: #333;
+
+						span {
+							width: .37rem;
+							height: .37rem;
+							color: white;
+							border-radius: 50%;
+							background: #cc9a09;
+							display: inline-block;
+							text-align: center;
+							line-height: .37rem;
+							margin-right: .1rem;
+						}
+					}
+
+					p:nth-of-type(4) {
+						font-size: .2rem;
+					}
+				}
+			}
+
+			>p {
+				font-size: .24rem;
+				color: #f5693d;
+				font-weight: bold;
+			}
+		}
+
+		.list_bot {
+			text-align: right;
+			border-top: .01rem solid #ededed;
+			padding-top: .2rem;
+
+			p {
+				display: inline-block;
+				font-size: .24rem;
+				padding: .16rem .4rem;
+				border-radius: .05rem;
+			}
+
+			p:nth-of-type(1) {
+				border: .01rem solid #263fbf;
+				color: #263fbf;
+			}
+
+			p:nth-of-type(2) {
+				border: .01rem solid #408cc7;
+				color: #408cc7;
+			}
+
+			p:nth-of-type(3) {
+				border: .01rem solid #d5a43c;
+				color: #d5a43c;
+			}
+
+			p:nth-of-type(4) {
+				border: .01rem solid #e24444;
+				color: #e24444;
+			}
+		}
+
+		.fast {
+			background: url(../assets/images/status.png) no-repeat center;
+			background-size: 100% 100%;
+			color: white;
+			position: absolute;
+			bottom: 0px;
+			right: 0px;
+			width: 1rem;
+			height: .4rem;
+			text-align: center;
+			line-height: .4rem;
+			font-size: .2rem;
+		}
+	}
+}
+
 .content {
 	font-size: .3rem;
 	//padding: .33rem;

+ 337 - 510
src/pages/search.vue

@@ -2,412 +2,324 @@
 	<div>
 		<back :title="titlename"></back>
 		<div class="content">
-			<!-- tab切换 -->
-			<div class="tab">
-				<div>
-					<p @click="tab(1)" :class="[index==1?'active':'']">寄件</p>
-					<p @click="tab(2)" :class="[index==2?'active':'']" class="">收件</p>
-				</div>
-			</div>
-			<!-- 寄件 -->
-			<div class="jjlist" v-if="index==1" v-for="item in mailList">
-				<div class="listinfo">
-					<div class="list_top" @click="mailDetail(item.id)">
-						<div class="list_top_left">
-							<img src="../assets/images/ad_icon1.png" alt="">
-							<div>
-								<p>寄件号  {{item.sendNo}}</p>
-								<p><template v-if="item.expressInfo == 1">顺丰</template>
-								<template v-if="item.expressInfo == 2">中通</template>
-								<template v-if="item.expressInfo == 3">DHL</template>
-								<template v-if="item.expressInfo == 4">EMS</template>
-								<template v-if="item.expressInfo == 5">同城</template>
-								<template v-if="item.expressInfo == 6">京东</template> {{item.expressNo}}</p>
-								<p><span>收</span>收件人 {{item.receiver}} {{item.receiverPhone}}</p>
-								<p>{{item.receiveAddr}}</p>
-							</div>
-						</div>
-						<p>
-							<!-- <template v-if="item.sendSt==0">待审核</template>
-							<template v-if="item.sendSt==1">待揽件</template>
-							<template v-if="item.sendSt==2">已揽件</template>
-							<template v-if="item.sendSt==3">待寄件</template>
-							<template v-if="item.sendSt==4">已寄出</template>
-							<template v-if="item.sendSt==5">待取件</template>
-							<template v-if="item.sendSt==6">已取件</template> -->
-              <template v-if="item.sendSt==0">待审核</template>
-              <template v-if="item.sendSt==1">待揽件</template>
-              <template v-if="item.sendSt==3">待寄件</template>
-              <template v-if="item.sendSt==4">已寄出</template>
-              <template v-if="item.sendSt==7">审核拒绝</template>
-              <template v-if="item.sendSt==8">已取消</template>
-              <template v-if="item.sendSt==10">派送中</template>
-              <template v-if="item.sendSt==11">已签收</template>
-              <template v-if="item.sendSt==12">拒签</template>
-						</p>
-					</div>
-					<!-- <div class="list_bot">
-						<p>拒收</p>
-						<p>代收</p>
-						<p>延迟</p>
-						<p>签收</p>
-					</div> -->
-				</div>
-			</div>
-
 			<!-- 收件 -->
-			<div class="sjlist" v-if="index==2" v-for="item in expressList">
-				<div class="listinfo">
-					<div class="list_top" @click="expressDetail(item.id)">
-						<div class="list_top_left">
-							<img src="../assets/images/ad_icon1.png" alt="">
-							<div>
-								<p>派单号  {{item.dispatchNo}}</p>
-								<p><template v-if="item.expressCompany == 1">顺丰</template>
-								<template v-if="item.expressCompany == 2">中通</template>
-								<template v-if="item.expressCompany == 3">DHL</template>
-								<template v-if="item.expressCompany == 4">EMS</template>
-								<template v-if="item.expressCompany == 5">同城</template>
-								<template v-if="item.expressCompany == 6">京东</template> {{item.expressNo}}</p>
-								<p><span>收</span>收件人  {{item.recipient}}</p>
-								<p>{{item.recordDate}}</p>
+			<div class="batch_box" @scroll.passive="getScroll($event)"
+				style=" height: calc(100vh - 10vh);overflow-y: auto;">
+				<van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
+					<div class="sjlist" v-for="item in expressList">
+						<div class="listinfo">
+							<div class="list_top">
+								<div class="list_top_left">
+									<img src="../assets/images/ad_icon1.png" alt="">
+									<div>
+										<p>派单号 {{ item.dispatchNo }}</p>
+										<p> {{ item.phone }}</p>
+										<p>收件人 {{ item.recipient }}</p>
+										<p>{{ item.recordDate }}</p>
+									</div>
+								</div>
+								<!-- <p>
+							<template v-if="item.expressStatus == 1">未派送</template>
+<template v-if="item.expressStatus == 2">已派送</template>
+</p> -->
 							</div>
 						</div>
-						<p>
-							<template v-if="item.expressStatus == 1">未派送</template>
-							<template v-if="item.expressStatus == 2">已派送</template>
-						</p>
 					</div>
-					<div class="list_bot" v-if="item.signinStatus == 0">
-						<p @click="addshow3=true;id=item.id;dispatchNo=item.dispatchNo">拒收</p>
-						<p @click="addshow=true;id=item.id;dispatchNo=item.dispatchNo">代收</p>
-						<p @click="addshow2=true;id=item.id;dispatchNo=item.dispatchNo">延迟</p>
-						<p @click="onSubmit(1,item.id,item.dispatchNo)">签收</p>
-					</div>
-				</div>
+					<template v-if="!refreshLoading && expressList.length > 0">
+						<div class="bottom_text" v-if="loading">
+							加载中...
+						</div>
+						<div class="bottom_text" v-else-if="noData">
+							已经到底啦...
+						</div>
+					</template>
+					<template v-if="expressList.length === 0">
+						<div class="bottom_text">数据为空!</div>
+					</template>
+				</van-pull-refresh>
 			</div>
+
 		</div>
-		<!-- 代收人 -->
-		<van-popup round v-model="addshow" class="whrite_add" closeable>
-			<div>
-				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">代收</p>
-				<van-form @submit="onSubmit(2,id,dispatchNo)">
-					<form action="/">
-					  <van-search
-						shape="round"
-					    v-model="dsname"
-					    show-action
-					    placeholder="请输入搜索关键词"
-					    @search="onSearch"
-					    @cancel="onCancel"
-					  />
-					</form>
-				  <van-field v-model="dsnamezs" readonly name="代收人" label="代收人" @click="dsnameshow = true" placeholder="请选择代收人" :rules="[{ required: false}]"/>
-				  <div style="margin-top: 16px;">
-				    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-				  </div>
-				</van-form>
-			</div>
-		</van-popup>
-		<van-popup v-model="dsnameshow" position="bottom">
-		  <van-picker title="代收人" show-toolbar :columns="dsList" value-key="text" @confirm="onConfirmDs" @cancel="dsnameshow=false"/>
-		</van-popup>
-		<!-- 延迟天数 -->
-		<van-popup round v-model="addshow2" class="whrite_add" closeable>
-			<div>
-				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">延迟天数</p>
-				<van-form @submit="onSubmit(4,id,dispatchNo)">
-				  <van-field v-model="delayDays" type="number" name="延迟天数" label="延迟天数" placeholder="请输入延迟天数" :rules="[{ required: false}]"/>
-				  <div style="margin-top: 16px;">
-				    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-				  </div>
-				</van-form>
-			</div>
-		</van-popup>
-
-		<!-- 延迟天数 -->
-		<van-popup round v-model="addshow3" class="whrite_add" closeable>
-			<div>
-				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">拒收理由</p>
-				<van-form @submit="onSubmit(3,id,dispatchNo)">
-				  <van-field v-model="remark" name="拒收理由" label="拒收理由" placeholder="请输入拒收理由" :rules="[{ required: false}]"/>
-				  <div style="margin-top: 16px;">
-				    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-				  </div>
-				</van-form>
-			</div>
-		</van-popup>
 
-		<!-- 底部 -->
-		<!-- <tabbar></tabbar> -->
 	</div>
 </template>
 
 <script>
-import {Toast,Dialog} from 'vant'
+import { Toast, Dialog } from 'vant'
+import { getExpressByUser } from '../api/index'
+import ScrollRefresh from '../components/ScrollRefresh.vue'
 export default {
-    data() {
-      return {
-		titlename: "我的收件",
-		index:1,
-		show:false,
-		userId:'',
-		expressList:[],//收件列表
-		mailList:[],//寄件列表
-		collectAgent:'',//代收人
-		addshow:false,
-		addshow2:false,
-		addshow3:false,
-		delayDays:'',//延迟天数
-		remark:'',//拒收理由
-		id:'',
-		dispatchNo:'',
-		dsname:'',
-		dsnameshow:false,
-		dsList:[],
-		dsnamezs:''
-      };
-    },
-    created:function(){
-		this.isLogin();
-      this.userId = localStorage.getItem("userId");
-	  this.getmailList()
-	  //代收人列表
-	  this.findCollectAgentList()
-
-	  if(this.$route.query.type == 2){
-		  this.index = 2
-		  this.getExpressList()
-	  }
-
-    },
-    methods:{
-		onConfirmDs(e){//确定
-			if(e != undefined){
-				this.dsnamezs = e.text
-				this.collectAgent=e.name
-			}
-			this.dsnameshow=false
-		},
-		//代收人搜索
-		onSearch(){
-			this.$http.post(this.$store.state.host+"/sendMail/searchCollectAgentList.do",{name:this.dsname},{emulateJSON:true})
-				.then(res=>{
-					//发送成功
-					if(res.body.msg=='success'){
-						this.dsList = res.body.list
-						for(var i=0;i<this.dsList.length;i++){
-							this.dsList[i].text = this.dsList[i].name+' '+this.dsList[i].phone + ' '+this.dsList[i].department
-						}
-						this.dsnameshow=true
-					}
-			},res=>{
-					 //发送失败
-				Toast("网络错误!")
-			})
-		},
-		//搜索取消
-		onCancel(){
-			this.findCollectAgentList()
+	components: {
+		ScrollRefresh
+	},
+	data() {
+		return {
+			titlename: "我的收件",
+			expressList: [],
+			pageSize: {
+				page: 1,
+				limit: 10
+			},
+			refreshLoading: false, // 刷新loading
+			noData: false, // 没有更多数据
+		};
+	},
+	created: function () {
+		this.expressListAPI()
+
+	},
+	methods: {
+		// 刷新	
+		async onRefresh() {
+			this.pageSize.page = 1;
+			this.pageSize.limit = 10;
+			this.refreshLoading = true;
+			await this.expressListAPI(true)
+			this.refreshLoading = false
 		},
-		//更改状态
-		onSubmit(type,id,dispatchNo){
-			if(type == 2){
-				if(this.collectAgent == '' || this.collectAgent == undefined){
-					Toast('请填写代收人')
-					return
-				}
+		// 滚动事件
+		getScroll(event) {
+			let scrollBottom =
+				event.target.scrollHeight -
+				event.target.scrollTop -
+				event.target.clientHeight;
+			// 距离底部20px以内 && 还有数据 && 没有正在加载中
+			if (scrollBottom <= 20 && !this.noData && !this.loading) {
+				this.pageSize.page += 1;
+				this.expressListAPI();
 			}
-			if(type == 3){
-				if(this.remark == '' || this.remark == undefined){
-					Toast('请填写拒收理由')
-					return
-				}
+		},
+		// 获取数据
+		async expressListAPI(isClear) {
+			this.loading = true
+			Toast.loading({
+				message: '加载中...',
+				forbidClick: true,
+				duration: 0
+			});
+			const res = await getExpressByUser({ ...this.pageSize })
+			let expressListA = res.data
+			Toast.clear()
+
+			if (isClear) {
+				this.expressList = expressListA
+			} else {
+				this.expressList.push(...expressListA)
 			}
-			if(type == 4){
-				if(this.delayDays == '' || this.delayDays == undefined){
-					Toast('请填写延迟天数')
-					return
-				}
+
+			this.loading = false
+			if (this.pageSize.page * this.pageSize.limit >= res.count) {
+				this.noData = true;
+			} else {
+				this.noData = false;
 			}
-			this.$http.post(this.$store.state.host+"/sendMail/expressManage.do",{id:id,
-					type:type,
-					dispatchNo:dispatchNo,
-					collectAgent:this.collectAgent,
-					delayDays:this.delayDays,
-					remark:this.remark
-					},{emulateJSON:true})
-						.then(res=>{
-							//发送成功
-							if(res.body.msg=='success'){
-								this.getExpressList()
-								this.addshow = false
-								this.addshow2 = false
-								this.addshow3 = false
-							}else{
-								Toast("保存失败");
-							}
-					},res=>{
-						//发送失败
-						Toast("网络错误");
-			})
-			this.collectAgent = ''
-			this.delayDays = ''
-			this.dsnamezs = ''
-			this.dsname = ''
-			this.findCollectAgentList()
 		},
-      tab(obj){
-      	this.index=obj
-		if(obj == 1){
-			this.getmailList()
+
+	}
+};
+</script>
+
+<style lang="less" scoped>
+.whrite_add {
+	width: 6.6rem;
+	padding: .4rem .2rem;
+
+	/deep/.van-field__value {
+		input {
+			text-align: right;
 		}
-		if(obj == 2){
-			this.getExpressList()
+
+	}
+
+	/deep/.van-popup__close-icon--top-right {
+		top: 5px;
+		right: 10px;
+	}
+}
+
+.content {
+	padding: 0rem .33rem;
+
+	.tab {
+		font-size: .36rem;
+		color: #00c4b8;
+		padding: .2rem .0rem;
+
+		div {
+			display: flex;
+			border: .01rem solid #00c4b8;
+			text-align: center;
+			border-radius: .05rem;
+
+			p {
+				flex: 1;
+				padding: .1rem 0rem;
+
+			}
+
+			p.active {
+				background: #00c4b8;
+				color: white;
+			}
 		}
-      },
-	  //收件
-	  getExpressList(){
-	  	Toast.loading({
-	  	    message: '加载中...',
-	  	    forbidClick: true,
-	  	    duration:0
-	  	});
-	  	this.$http.post(this.$store.state.host+"/sendMail/getExpressList.do",{userId:this.userId},{emulateJSON:true})
-	  		.then(res=>{
-	  			//发送成功
-	  			if(res.body.msg=='success'){
-	  				this.expressList = res.body.expressList
-					//console.log(this.expressList)
+
+	}
+
+	.jjlist {
+		font-size: .3rem;
+		color: #999999;
+
+		.listinfo {
+			background: white;
+			padding: .33rem .33rem .2rem;
+			border-radius: .05rem;
+			margin-bottom: .2rem;
+			position: relative;
+
+			.list_top {
+				display: flex;
+				justify-content: space-between;
+
+				.list_top_left {
+					img {
+						display: inline-block;
+						width: .9rem;
+						height: .9rem;
+						position: relative;
+						top: -.3rem;
+					}
+
+					div {
+						width: 4rem;
+						margin-left: .2rem;
+						display: inline-block;
+						line-height: 150%;
+
+						p:nth-of-type(1) {
+							font-size: .3rem;
+							font-weight: bold;
+							color: #333;
+						}
+
+						p:nth-of-type(3) {
+							font-size: .24rem;
+							color: #333;
+
+							span {
+								width: .37rem;
+								height: .37rem;
+								color: white;
+								border-radius: 50%;
+								background: #cc9a09;
+								display: inline-block;
+								text-align: center;
+								line-height: .37rem;
+								margin-right: .1rem;
+							}
+						}
+
+						p:nth-of-type(4) {
+							font-size: .2rem;
+						}
+					}
 				}
-				Toast.clear()
-	  	},res=>{
-	  			 //发送失败
-	  		Toast("网络错误!")
-	  	})
-	  	Toast.clear()
-	  },
-	  //寄件
-	  getmailList(){
-	  	Toast.loading({
-	  	    message: '加载中...',
-	  	    forbidClick: true,
-	  	    duration:0
-	  	});
-	  	this.$http.post(this.$store.state.host+"/sendMail/getMailList.do",{userId:this.userId},{emulateJSON:true})
-	  		.then(res=>{
-	  			//发送成功
-	  			if(res.body.msg=='success'){
-	  				this.mailList = res.body.mailList
-	  				//console.log(this.mailList)
-	  			}
-	  			Toast.clear()
-	  	},res=>{
-	  			 //发送失败
-	  		Toast("网络错误!")
-	  	})
-	  	Toast.clear()
-	  },
-	  //收件详情
-	  expressDetail(id){
-		this.$router.push({path:'/Info',query:{id:id}})
-	  },
-	  //收件详情
-	  mailDetail(id){
-	  	this.$router.push({path:'/MailInfo',query:{id:id}})
-	  },
-	  //代收人列表
-	  // findCollectAgentList(){
-	  // 	this.$http.post(this.$store.state.host+"/sendMail/findCollectAgentList.do",{},{emulateJSON:true})
-	  // 		.then(res=>{
-	  // 			//发送成功
-	  // 			if(res.body.msg=='success'){
-	  // 				this.dsList = res.body.list
-			// 		for(var i=0;i<this.dsList.length;i++){
-			// 			this.dsList[i].text = this.dsList[i].name+' '+this.dsList[i].phone + ' '+this.dsList[i].department
-			// 		}
-	  // 			}
-	  // 	},res=>{
-	  // 			 //发送失败
-	  // 		Toast("网络错误!")
-	  // 	})
-	  // },
-    }
-  };
-</script>
 
-<style lang="less" scoped>
-	.whrite_add{
-		width: 6.6rem;
-		padding: .4rem .2rem;
-		/deep/.van-field__value{
-			input{
+				>p {
+					font-size: .24rem;
+					color: #f5693d;
+					font-weight: bold;
+				}
+			}
+
+			.list_bot {
 				text-align: right;
+				border-top: .01rem solid #ededed;
+				padding-top: .2rem;
+
+				p {
+					display: inline-block;
+					font-size: .24rem;
+					padding: .16rem .4rem;
+					border-radius: .05rem;
+				}
+
+				p:nth-of-type(1) {
+					border: .01rem solid #263fbf;
+					color: #263fbf;
+				}
+
+				p:nth-of-type(2) {
+					border: .01rem solid #408cc7;
+					color: #408cc7;
+				}
+
+				p:nth-of-type(3) {
+					border: .01rem solid #d5a43c;
+					color: #d5a43c;
+				}
+
+				p:nth-of-type(4) {
+					border: .01rem solid #e24444;
+					color: #e24444;
+				}
 			}
 
-		}
-		/deep/.van-popup__close-icon--top-right{
-			top: 5px;
-			right: 10px;
+			.fast {
+				background: url(../assets/images/status.png) no-repeat center;
+				background-size: 100% 100%;
+				color: white;
+				position: absolute;
+				bottom: 0px;
+				right: 0px;
+				width: 1rem;
+				height: .4rem;
+				text-align: center;
+				line-height: .4rem;
+				font-size: .2rem;
+			}
 		}
 	}
-  .content{
-	  padding: 0rem .33rem 1.2rem;
-	  .tab{
-	  	font-size: .36rem;
-	  	color: #00c4b8;
-	  	padding: .2rem .0rem;
-	  	div{
-	  		display: flex;
-	  		border: .01rem solid #00c4b8;
-	  		text-align: center;
-	  		border-radius: .05rem;
-	  		p{
-	  			flex: 1;
-	  			padding: .1rem 0rem;
-
-	  		}
-	  		p.active{
-	  			background: #00c4b8;
-	  			color: white;
-	  		}
-	  	}
-
-	  }
-	  .jjlist{
-		  font-size: .3rem;
-		  color: #999999;
-		  .listinfo{
-			  background: white;
-			  padding: .33rem .33rem .2rem;
-			  border-radius: .05rem;
-			  margin-bottom: .2rem;
-			  position: relative;
-			  .list_top{
-				  display: flex;
-				  justify-content: space-between;
-				  .list_top_left{
-					  img{
-						  display: inline-block;
-						  width: .9rem;
-						  height: .9rem;
-						  position: relative;
-						  top:-.3rem;
-					  }
-					  div{
-						 width: 4rem;
-						 margin-left: .2rem;
-						 display: inline-block;
-						 line-height: 150%;
-						p:nth-of-type(1){
+
+	.sjlist {
+		font-size: .3rem;
+		color: #999999;
+
+		.listinfo {
+			background: white;
+			padding: .33rem .33rem .2rem;
+			border-radius: .05rem;
+			margin-bottom: .2rem;
+
+			.list_top {
+				display: flex;
+				justify-content: space-between;
+
+				.list_top_left {
+					img {
+						display: inline-block;
+						width: .9rem;
+						height: .9rem;
+						position: relative;
+						top: -.3rem;
+					}
+
+					div {
+						width: 4rem;
+						margin-left: .2rem;
+						display: inline-block;
+						line-height: 150%;
+
+						p:nth-of-type(1) {
 							font-size: .3rem;
 							font-weight: bold;
 							color: #333;
 						}
-                        p:nth-of-type(3){
+
+						p:nth-of-type(3) {
 							font-size: .24rem;
 							color: #333;
-							span{
+
+							span {
 								width: .37rem;
 								height: .37rem;
 								color: white;
@@ -419,142 +331,57 @@ export default {
 								margin-right: .1rem;
 							}
 						}
-                        p:nth-of-type(4){
+
+						p:nth-of-type(4) {
 							font-size: .2rem;
 						}
-					  }
-				  }
-				  >p{
-					  font-size: .24rem;
-					  color: #f5693d;
-					  font-weight: bold;
-				  }
-			  }
-			  .list_bot{
-				  text-align: right;
-				  border-top: .01rem solid #ededed;
-				  padding-top: .2rem;
-				  p{
-					  display: inline-block;
-					  font-size: .24rem;
-					  padding: .16rem .4rem;
-					  border-radius: .05rem;
-				  }
-				  p:nth-of-type(1){
-					  border:.01rem solid #263fbf;
-					  color: #263fbf;
-				  }
-				  p:nth-of-type(2){
-				  	border:.01rem solid #408cc7;
-				  	color: #408cc7;
-				  }
-				  p:nth-of-type(3){
-				  	border:.01rem solid #d5a43c;
-				  	color: #d5a43c;
-				  }
-				  p:nth-of-type(4){
-				  	border:.01rem solid #e24444;
-				  	color: #e24444;
-				  }
-			  }
-			  .fast{
-				  background: url(../assets/images/status.png) no-repeat center;
-				  background-size: 100% 100%;
-				  color: white;
-				  position: absolute;
-				  bottom: 0px;
-				  right: 0px;
-				  width: 1rem;
-				  height: .4rem;
-				  text-align: center;
-				  line-height: .4rem;
-				  font-size: .2rem;
-			  }
-		  }
-	  }
-	  .sjlist{
-	  		  font-size: .3rem;
-	  		  color: #999999;
-	  		  .listinfo{
-	  			  background: white;
-	  			  padding: .33rem .33rem .2rem;
-	  			  border-radius: .05rem;
-	  			  margin-bottom: .2rem;
-	  			  .list_top{
-	  				  display: flex;
-	  				  justify-content: space-between;
-	  				  .list_top_left{
-	  					  img{
-	  						  display: inline-block;
-	  						  width: .9rem;
-	  						  height: .9rem;
-	  						  position: relative;
-	  						  top:-.3rem;
-	  					  }
-	  					  div{
-	  						 width: 4rem;
-	  						 margin-left: .2rem;
-	  						 display: inline-block;
-	  						 line-height: 150%;
-	  						p:nth-of-type(1){
-	  							font-size: .3rem;
-	  							font-weight: bold;
-	  							color: #333;
-	  						}
-	                    p:nth-of-type(3){
-	  							font-size: .24rem;
-	  							color: #333;
-	  							span{
-	  								width: .37rem;
-	  								height: .37rem;
-	  								color: white;
-	  								border-radius: 50%;
-	  								background: #cc9a09;
-	  								display: inline-block;
-	  								text-align: center;
-	  								line-height: .37rem;
-	  								margin-right: .1rem;
-	  							}
-	  						}
-	                    p:nth-of-type(4){
-	  							font-size: .2rem;
-	  						}
-	  					  }
-	  				  }
-	  				  >p{
-	  					  font-size: .24rem;
-	  					  color: #f5693d;
-	  					  font-weight: bold;
-	  				  }
-	  			  }
-	  			  .list_bot{
-	  				  text-align: right;
-	  				  border-top: .01rem solid #ededed;
-	  				  padding-top: .2rem;
-	  				  p{
-	  					  display: inline-block;
-	  					  font-size: .24rem;
-	  					  padding: .16rem .4rem;
-	  					  border-radius: .05rem;
-	  				  }
-	  				  p:nth-of-type(1){
-	  					  border:.01rem solid #263fbf;
-	  					  color: #263fbf;
-	  				  }
-	  				  p:nth-of-type(2){
-	  				  	border:.01rem solid #408cc7;
-	  				  	color: #408cc7;
-	  				  }
-	  				  p:nth-of-type(3){
-	  				  	border:.01rem solid #d5a43c;
-	  				  	color: #d5a43c;
-	  				  }
-	  				  p:nth-of-type(4){
-	  				  	border:.01rem solid #e24444;
-	  				  	color: #e24444;
-	  				  }
-	  			  }
-	  		  }
-	  }
-  }
+					}
+				}
+
+				>p {
+					font-size: .24rem;
+					color: #f5693d;
+					font-weight: bold;
+				}
+			}
+
+			.list_bot {
+				text-align: right;
+				border-top: .01rem solid #ededed;
+				padding-top: .2rem;
+
+				p {
+					display: inline-block;
+					font-size: .24rem;
+					padding: .16rem .4rem;
+					border-radius: .05rem;
+				}
+
+				p:nth-of-type(1) {
+					border: .01rem solid #263fbf;
+					color: #263fbf;
+				}
+
+				p:nth-of-type(2) {
+					border: .01rem solid #408cc7;
+					color: #408cc7;
+				}
+
+				p:nth-of-type(3) {
+					border: .01rem solid #d5a43c;
+					color: #d5a43c;
+				}
+
+				p:nth-of-type(4) {
+					border: .01rem solid #e24444;
+					color: #e24444;
+				}
+			}
+		}
+	}
+}
+
+.bottom_text {
+	font-size: 16px;
+}
 </style>