修改首页订单中弹出的路段信息

pages/index/index.scss

@@ -129,9 +129,27 @@ page{background-color: $my-page-bg-color;}
 	
 }
 
-.orderDetails{
+.popup-order-details{
 	color: #545454;
-	/deep/ dl{
+	&-til{
+		padding: 61rpx 40rpx 16rpx;
+		font-size: 36rpx;
+		color: #008CFF;
+		line-height: 50rpx;
+		text-align: center;
+	}
+	&-con{
+		margin-bottom: 40rpx;
+	}
+	&-footer{
+		border-top: 1px solid #CECECE;
+		padding: 28rpx 0 26rpx;
+		font-size: 45rpx;
+		line-height: 63rpx;
+		text-align: center;
+		color: #008CFF;
+	}
+	dl{
 		margin: 20rpx 38rpx;
 		display: flex;
 		font-size: 30rpx;

pages/index/index.vue

@@ -109,12 +109,18 @@
 			content="首次使用请先绑定您的车牌"
 			@confirm="$u.route({url:'pages/myCars/myCars'})"></u-modal>
 			
-		<!-- 订单细节 -->
-		<u-modal v-model="showOrderDetails" title="停车场信息" confirm-text="知道了" :title-style="{color: '#008CFF'}">
-			<view class="slot-content">
-				<rich-text class="orderDetails" :nodes="content"></rich-text>
+		<u-popup class="popup-order-details" v-model="showOrderDetails" mode="center" width="90%" border-radius="20">
+			<view class="popup-order-details-til">停车场信息</view>
+			<view class="popup-order-details-con">
+				<dl><dt>路段名称：</dt> <dd>{{popupOrderDetails.roadName}}</dd></dl>
+				<dl><dt>路段编码：</dt><dd>{{popupOrderDetails.roadNo}}</dd></dl>
+				<dl><dt>联系人：</dt><dd>{{popupOrderDetails.manager}} </dd></dl>
+				<dl><dt>联系电话：</dt><dd  @click="phoneCall(popupOrderDetails.telephone)">{{popupOrderDetails.telephone}}</dd></dl>
 			</view>
-		</u-modal>
+			<view class="popup-order-details-footer" @click="closeOrderDetails">
+				知道了
+			</view>
+		</u-popup>
 		<u-toast ref="uToast" />
 	</view>
 </template>
@@ -139,16 +145,7 @@
 				orderNav:0,//手动,无感
 				bindCarShow:false,//绑定车询问弹窗
 				showOrderDetails:false,//是否线上订单细节
-				content:`
-				<dl>
-					<dt>车场名称：</dt>
-					<dd>贵阳云岩区甜蜜小镇D18组团停车场</dd>
-				</dl>
-				<dl>
-					<dt>免费时长：</dt>
-					<dd>15分钟</dd>
-				</dl>
-				`,
+				popupOrderDetails:[]
 				
 			}
 		},
@@ -239,18 +236,22 @@
 			onRoadInfo(item){
 				this.$u.api.roadInfoById({id:item.roadId})
 				.then(res=>{
-					this.content = `
-				   <dl><dt>路段名称：</dt> <dd>` + res.data.roadName + `</dd></dl>`
-				+ `<dl><dt>路段编码：</dt><dd>` + res.data.roadNo + `</dd></dl>`
-				+ `<dl><dt>联系人：</dt><dd>` + res.data.manager + `</dd></dl>`
-				+ `<dl><dt>联系电话：</dt><dd>` + res.data.telephone + `</dd></dl>`;
-				
+					this.popupOrderDetails=res.data;
 					this.showOrderDetails = true;
 				}).catch(err=>{
 					// alert(err.msg);
 					console.log('getIndexData err',err)
 				});
-			}
+			},
+			closeOrderDetails(){
+				this.showOrderDetails = false;
+			},
+			phoneCall(phone){
+				uni.makePhoneCall({
+				    phoneNumber: phone
+				});
+			},
+			
 
 		}
 	}