顺带件样式

css/shundaijian.css

@@ -1,7 +1,7 @@
 .row {
     background: white;
     width: 100%;
-    height: 120px;
+    height: 140px;
     border-bottom: 1px solid #ebebeb;
     position: relative;
     margin-bottom: 5px;
@@ -25,6 +25,57 @@
 	overflow: hidden;
 	padding-left: 5px;
 	font-weight: bolder;
+	display: flex;
+}
+
+.loc_range {
+	font-size: 1.1rem;
+	color: black;
+	line-height: 32px;
+    height: 32px;
+	display: flex;
+	justify-content: space-between;
+}
+
+.loc_range .between::before {
+	content: '';
+	height: 1px;
+	background-color: black;
+	width: calc(50vw - 100px);
+	position: absolute;
+	display: block;
+	top: 60%;
+}
+
+.loc_range .between {
+	display: inline-block;
+	width: calc(50vw - 100px);
+	text-align: center;
+	line-height: 22px;
+	position: relative;
+}
+
+.loc_range .with_img {
+	display: inline-flex;
+}
+
+.loc_range .with_img img {
+	width: 32px;
+	height: 32px;
+}
+
+.name ._text {
+	width: calc( 100vw - 50px );
+}
+
+.name ._img {
+	width: 36px;
+	height: 36px;
+}
+
+.name ._img > img {
+	width: 90%;
+	height: 90%;
 }
 
 [v-cloak] {

js/shundaijian.js

@@ -8,6 +8,7 @@ const app = new Vue({
 		return {
 			orderList: [
 			],
+			location: [0,0],
 		}
 	},
 	methods: {
@@ -34,12 +35,22 @@ const app = new Vue({
 					to_address: '测试地址测试地址测试地址测试地址测试地址测试地址',
 					deliver_fee: '8.00',
 					fee: '18.00',
-					before: '2020/20/20 11:20'
+					before: '2020/20/20 11:20',
+					shop_phone: '15270565303',
+					buyer_phone: '15270565304',
+					
 				}
 			]
 		},
 	},
 	created() {
 		this.loadData();
+		plus.geolocation.getCurrentPosition((p) => {
+			console.log(p.coords.latitude);
+			console.log(p.coords.longitude);
+			this.location=[p.coords.latitude, p.coords.longitude];
+		},function (err) {
+			
+		})
 	},
 })

templete/shundaijian.html

@@ -43,8 +43,31 @@
 		</div>
 		<div id="app" v-cloak>
 			<div class="row clearfix" v-for="(each, index) in orderList" :data-id="each.id">
-				<div class="name">店铺：{{each.from_address}}</div>
+				<div class="name">
-				<div class="name">送至：{{each.to_address}}</div>
+					<span class="_text">店铺：{{each.from_address}}</span>
+					<span class="_img">
+						<img src="../img/lianxishangjia4.png" alt="">
+					</span>
+				</div>
+				<div class="name">
+					<span class="_text">送至：{{each.to_address}}</span>
+					<span class="_img">
+						<img src="../img/lianxishangjia4.png" alt="">
+					</span>
+				</div>
+				<div class="loc_range">
+					<span>我</span>
+					<span class="between">1km</span>
+					<span class="with_img">
+						<img src="../img/gothere.png" alt="">
+						商家
+					</span>
+					<span class="between">2km</span>
+					<span class="with_img">
+						<img src="../img/gothere.png" alt="">
+						购户
+					</span>
+				</div>
 			</div>
 		</div>
 	</body>