订单详情 订单预约 订单评论 ui

src/PageMine/orderModules/orderComment - 副本.vue

@@ -0,0 +1,96 @@
+<template>
+  <view class="container">
+    <view class="top-box">
+      <view class="top-rate">
+        <view class="title">评价得分：</view>
+        <u-rate count="5" v-model="queryParams.score"></u-rate>
+      </view>
+      <view class="content-box">
+        <view class="title">评价内容：</view>
+        <view class="comment-box">
+          <u--textarea v-model="queryParams.remark" count placeholder="请输入评价内容" ></u--textarea>
+        </view>
+      </view>
+    </view>
+    <button class="btn" @click="handlerContextSumbit">提交</button>
+  </view>
+</template>
+
+<script>
+  import { goodsCommentsAdd  } from "@/api/client/business.js"
+  export default {
+    data(){
+      return{
+        queryParams:{
+          score:0,//评价打分
+          remark:'',//评价内容
+          goodsId: "", // 商品id
+          orderId: "", // 订单id
+          merchantId: "", // 商家id
+        },
+      }
+    },
+    onLoad(option){
+	  let { goodsList , orderList } = option
+      this.queryParams.orderId = goodsList.orderId
+      this.queryParams.goodsId = goodsList.goodsId
+      this.queryParams.merchantId = orderList.merchantId
+    },
+    methods:{
+      // 测试提交
+      handlerContextSumbit(){
+        goodsCommentsAdd(this.queryParams).then(res=>{
+          if(res.code === 'OK'){
+            uni.showToast({
+              title:"评论成功",
+              icon:'none'
+            })
+            setTimeout(()=>{
+              uni.navigateBack(-1)
+            },1500)
+          }else{
+            uni.showToast({
+              title:res.msg,
+              icon:'none'
+            })
+          }
+        })
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scope>
+  .container{
+    padding: 20rpx;
+    .top-box{
+      padding: 20rpx;
+      border-radius: 20rpx;
+      box-shadow: 0 5rpx 12rpx 0 rgba(0,0,0,0.2);
+      background-color: #fff;
+      .top-rate{
+        display: flex;
+        align-items: center;
+      }
+      .content-box{
+        margin-top: 20rpx;
+        .comment-box{
+          margin-top: 20rpx;
+        }
+      }
+      .title{
+        color: #000;
+        font-size: 28rpx;
+      }
+    }
+
+    .btn{
+      margin-top: 20rpx;
+      background-color: #F57F32;
+      color: #fff;
+      font-size:28rpx;
+      border-radius: 20rpx;
+      box-shadow: 0 5rpx 10rpx 0 rgba(245,127,50, 0.8);
+    }
+  }
+</style>

src/PageMine/orderModules/orderComment.vue

@@ -1,96 +1,109 @@
 <template>
-  <view class="container">
-    <view class="top-box">
-      <view class="top-rate">
-        <view class="title">评价得分：</view>
-        <u-rate count="5" v-model="queryParams.score"></u-rate>
+  <view class='container'>
+    <view class='container-box'>
+      <view class='title'>服务项目</view>
+      <view class='order-item'>
+        <view class='item-left'>
+          <image src="@/static/QR57a.jpg" class="img"></image>
+        </view>
+        <view class='item-right'>
+          <view class='right1'>水洗轿车</view>
+          <view class='right1'>X1</view>
+          <view class='right2'>汽车美容</view>
+        </view>
       </view>
-      <view class="content-box">
-        <view class="title">评价内容：</view>
-        <view class="comment-box">
-          <u--textarea v-model="queryParams.remark" count placeholder="请输入评价内容" ></u--textarea>
+      <u-line margin='24rpx 0 28rpx'></u-line>
+
+      <view class="rate-box">
+        <view class="rate-left">
+          <span style="color: #EA0000;">*</span>评分得分
         </view>
+        <view class="rate-right">
+          <u-rate count="5" v-model="value"></u-rate>
+        </view>
+      </view>
+
+      <view class="comment-box">
+        <u--textarea v-model="remark" count placeholder="请输入评分内容" ></u--textarea>
       </view>
     </view>
-    <button class="btn" @click="handlerContextSumbit">提交</button>
+
+    <button class='btn' >取消预约</button>
   </view>
 </template>
 
 <script>
-  import { goodsCommentsAdd  } from "@/api/client/business.js"
-  export default {
+  export default{
     data(){
       return{
-        queryParams:{
-          score:0,//评价打分
-          remark:'',//评价内容
-          goodsId: "", // 商品id
-          orderId: "", // 订单id
-          merchantId: "", // 商家id
-        },
+        value:'',
+        remark:''
       }
-    },
-    onLoad(option){
-	  let { goodsList , orderList } = option
-      this.queryParams.orderId = goodsList.orderId
-      this.queryParams.goodsId = goodsList.goodsId
-      this.queryParams.merchantId = orderList.merchantId
-    },
-    methods:{
-      // 测试提交
-      handlerContextSumbit(){
-        goodsCommentsAdd(this.queryParams).then(res=>{
-          if(res.code === 'OK'){
-            uni.showToast({
-              title:"评论成功",
-              icon:'none'
-            })
-            setTimeout(()=>{
-              uni.navigateBack(-1)
-            },1500)
-          }else{
-            uni.showToast({
-              title:res.msg,
-              icon:'none'
-            })
-          }
-        })
-      },
     }
   }
 </script>
 
-<style lang="scss" scope>
+<style lang='scss' scope>
+  page{
+    background-color:#F9F9F9;
+  }
   .container{
-    padding: 20rpx;
-    .top-box{
-      padding: 20rpx;
-      border-radius: 20rpx;
-      box-shadow: 0 5rpx 12rpx 0 rgba(0,0,0,0.2);
+    padding:24rpx 32rpx;
+    .container-box{
+      border-radius: 16rpx;
       background-color: #fff;
-      .top-rate{
-        display: flex;
-        align-items: center;
+      padding: 24rpx;
+      .title{
+        margin-bottom:24rpx;
+        color:#333;
+        font-weight:bold;
       }
-      .content-box{
-        margin-top: 20rpx;
-        .comment-box{
-          margin-top: 20rpx;
+      .order-item{
+        display:flex;
+        .item-left{
+          margin-left: 32rpx;
+          .img{
+            width: 160rpx;
+            height: 160rpx;
+          }
+        }
+        .item-right{
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          .right1{
+            color: #333333;
+          }
+          .right2{
+            padding: 2rpx 12rpx;
+            color: #215EBE;
+            border:2rpx solid #215EBE;
+            background-color: #E8EEF8;
+          }
         }
       }
-      .title{
-        color: #000;
-        font-size: 28rpx;
+
+      .rate-box{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom:28rpx;
+        .rate-left{
+          align-items: center;
+        }
+        .rate-right{
+
+        }
       }
     }
-
-    .btn{
-      margin-top: 20rpx;
-      background-color: #F57F32;
+    .btn {
+      width: 100%;
+      background-color: #7A9ED8;
+      text-align: center;
       color: #fff;
-      font-size:28rpx;
-      border-radius: 20rpx;
-      box-shadow: 0 5rpx 10rpx 0 rgba(245,127,50, 0.8);
+      margin-top:50rpx;
+      height:80rpx;
+      line-height: 80rpx;
     }
   }
 </style>

src/PageMine/orderModules/orderDetail - 副本.vue

@@ -0,0 +1,196 @@
+<template>
+	<view class="container">
+		<view class="center-box">
+			<view class="top-t">
+				<view class="t-l">
+					<view class="t-b"> </view>
+					<view class="t-name">商品详情</view>
+				</view>
+			</view>
+
+			<u-line margin="20rpx 0"></u-line>
+
+			<view class="item-center" :key="index" v-for="(item, index) of init_list.goodsInfo">
+				<view class="center-left">
+					<image src="@/static/QR57a.jpg" class="img"></image>
+				</view>
+				<view class="center-right">
+					<view class="r-l">
+						<view class="right-name"> {{ item.goodsName }} </view>
+						<view class="right-descript"> 测试商品描述111 </view>
+						<view class="l-box">
+							<view class="right-price"> ￥{{ item.goodsPrice }} </view>
+							<view class="right-numb"> ×{{ item.goodsQuantity }} </view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="top-box">
+			<view class="top-t">
+				<view class="t-l">
+					<view class="t-b"> </view>
+					<view class="t-name">订单信息</view>
+				</view>
+			</view>
+
+			<u-line margin="20rpx 0"></u-line>
+
+			<view class="top-t2">
+				<view class="t2-item">
+					<p>订单号</p>
+					<p>{{ init_list.orderSn }}</p>
+				</view>
+				<view class="t2-item">
+					<p>下单时间</p>
+					<p>2024-2-25</p>
+				</view>
+				<view class="t2-item">
+					<p>支付方式</p>
+					<p>在线支付</p>
+				</view>
+				<view class="t2-item">
+					<p>商品总额</p>
+					<p>￥{{ allPrice }}</p>
+				</view>
+				<view class="t2-item">
+					<p>优惠券</p>
+					<p>-￥3.90</p>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				init_list: {},
+			};
+		},
+		onLoad(option) {
+			this.init_list = option.orderList;
+		},
+		computed: {
+			allPrice() {
+				let price = 0;
+				this.init_list.goodsInfo.map(rs => {
+					price += rs.goodsPrice;
+				});
+				return price.toFixed(2);
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		padding: 20rpx;
+
+		.top-box,
+		.center-box {
+			padding: 20rpx;
+			background-color: #fff;
+			border-radius: 20rpx;
+			box-shadow: 5rpx 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
+
+			.top-t {
+				display: flex;
+				justify-content: space-between;
+
+				.t-l {
+					display: flex;
+
+					.t-b {
+						width: 12rpx;
+						border-radius: 10rpx;
+						background-color: #f98e23;
+					}
+
+					.t-name {
+						margin-left: 10rpx;
+						font-weight: bold;
+						font-size: 28rpx;
+					}
+				}
+			}
+
+			.top-bottom-text {
+				margin: 10rpx 0;
+			}
+
+			.top-t2 {
+				.t2-item {
+					display: flex;
+					justify-content: space-between;
+					margin-bottom: 20rpx;
+				}
+			}
+		}
+
+		.center-box {
+			margin-bottom: 20rpx;
+		}
+
+		.item-center {
+			display: flex;
+			align-items: center;
+			margin: 10rpx 0;
+
+			.center-left {
+				height: 160rpx;
+
+				.img {
+					width: 160rpx;
+					height: 160rpx;
+				}
+			}
+
+			.center-right {
+				width: 100%;
+				height: 160rpx;
+				display: flex;
+				justify-content: space-between;
+				margin-left: 20rpx;
+
+				.r-l {
+					display: flex;
+					flex-direction: column;
+					justify-content: space-around;
+
+					.right-name {
+						color: #4d5671;
+						font-size: 32rpx;
+						font-weight: bold;
+					}
+
+					.right-descript {
+						font-size: 28rpx;
+						color: #858797;
+					}
+
+					.l-box {
+						display: flex;
+						font-size: 24rpx;
+						align-items: center;
+						font-style: italic;
+
+						.right-price {
+							margin-right: 20rpx;
+							font-weight: bold;
+							font-size: 28rpx;
+							color: #f57f32;
+						}
+
+						.right-numb {
+							font-size: 24rpx;
+							color: #858797;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

src/PageMine/orderModules/orderDetail.vue

@@ -1,66 +1,91 @@
 <template>
-	<view class="container">
-		<view class="center-box">
-			<view class="top-t">
-				<view class="t-l">
-					<view class="t-b"> </view>
-					<view class="t-name">商品详情</view>
-				</view>
-			</view>
-
-			<u-line margin="20rpx 0"></u-line>
-
-			<view class="item-center" :key="index" v-for="(item, index) of init_list.goodsInfo">
-				<view class="center-left">
-					<image src="@/static/QR57a.jpg" class="img"></image>
-				</view>
-				<view class="center-right">
-					<view class="r-l">
-						<view class="right-name"> {{ item.goodsName }} </view>
-						<view class="right-descript"> 测试商品描述111 </view>
-						<view class="l-box">
-							<view class="right-price"> ￥{{ item.goodsPrice }} </view>
-							<view class="right-numb"> ×{{ item.goodsQuantity }} </view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-
-		<view class="top-box">
-			<view class="top-t">
-				<view class="t-l">
-					<view class="t-b"> </view>
-					<view class="t-name">订单信息</view>
-				</view>
-			</view>
-
-			<u-line margin="20rpx 0"></u-line>
-
-			<view class="top-t2">
-				<view class="t2-item">
-					<p>订单号</p>
-					<p>{{ init_list.orderSn }}</p>
-				</view>
-				<view class="t2-item">
-					<p>下单时间</p>
-					<p>2024-2-25</p>
-				</view>
-				<view class="t2-item">
-					<p>支付方式</p>
-					<p>在线支付</p>
-				</view>
-				<view class="t2-item">
-					<p>商品总额</p>
-					<p>￥{{ allPrice }}</p>
-				</view>
-				<view class="t2-item">
-					<p>优惠券</p>
-					<p>-￥3.90</p>
-				</view>
-			</view>
-		</view>
-	</view>
+  <view class='comtainer'>
+    <view class='title-box'>
+      <view class='title'>待使用</view>
+      <view class='explan'>请切务听信商家线下交易，平台交易有保降哦</view>
+    </view>
+
+    <view class="container-item-box">
+      <view class='order-title'>此条形码给店员展示</view>
+
+      <view class='order-item-top-box'>
+        <view class='order-item' v-for="item of 3">
+          <view class='item-box'>
+            <view class='item-left'>
+              <image src='@/static/QR57a.jpg' class='img'></image>
+            </view>
+            <view class='item-right'>
+              <view class='right1'>水洗轿车</view>
+              <view class='right2'>X1</view>
+              <view class='right3'>汽车美容</view>
+            </view>
+          </view>
+        </view>
+        <view class='allprice'>
+         <view class='price-text'>总价:</view>
+         <view class='price'>¥97.95</view>
+        </view>
+      </view>
+
+      <u-line margin='18rpx 0 16rpx '></u-line>
+
+      <view class='order-item-bottom-box'>
+        <view class='refund-box'>
+          <view class='refund-btn'>申请退款</view>
+        </view>
+
+        <view class='rqcode-box'>
+          <view class='rqcode-img'>
+            <image class='img' src='@/static/icon/tools.png'>
+          </view>
+          <view class='rqcode-text'>
+            <view class='text1'>券码:7GM922JDBJGT</view>
+            <view class='text2'>复制</view>
+          </view>
+        </view>
+      </view>
+
+      <view class="order-item-explan-box">
+        <view class='explan-title'>贵阳贵通汽车服务有限公司</view>
+        <view class='explan-sale'>
+          <view class='sale-left'>营业中</view>
+          <view class='sale-right'>销量 225</view>
+        </view>
+        <view class='explan-address'>观山湖区高新区联合广场</view>
+      </view>
+
+      <button class='reserve-btn' @click='handlerSkipReserve'>立即预约</button>
+
+    </view>
+
+    <view class="containers-box">
+      <view class="title"> 订单信息 </view>
+      <view class="item-box">
+          <view class='item-left'>订单编号</view>
+          <view class='item-right'>401976271000000937709085</view>
+      </view>
+      <view class="item-box">
+          <view class='item-left'>下单时间</view>
+          <view class='item-right'>2024-05-24 01:17:59</view>
+      </view>
+      <view class="item-box">
+          <view class='item-left'>订单金额</view>
+          <view class='item-right'>￥97.95</view>
+      </view>
+    </view>
+    <view class="containers-box">
+      <view class="title"> 其他信息 </view>
+      <view class="item-box">
+          <view class='item-left'>使用方法</view>
+          <view class='item-right'>到达门店后出示核销二维码，商户扫码即可</view>
+      </view>
+      <view class="item-box">
+          <view class='item-left'>退款时限</view>
+          <view class='item-right'>1.订单核销码有效期60天，过期后自动退款； 2.未使用/未到期前随时可退，款项沿付款方式原路退回，订单使用后不可退款</view>
+      </view>
+    </view>
+
+  </view>
 </template>
 
 <script>
@@ -82,115 +107,188 @@
 				return price.toFixed(2);
 			},
 		},
+    methods:{
+      // 点击跳转到预约
+      handlerSkipReserve(){
+        uni.navigateTo({
+          url:'/PageMine/orderModules/orderReserve'
+        })
+      }
+    }
 	};
 </script>
 
-<style lang="scss" scoped>
-	.container {
-		padding: 20rpx;
-
-		.top-box,
-		.center-box {
-			padding: 20rpx;
-			background-color: #fff;
-			border-radius: 20rpx;
-			box-shadow: 5rpx 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
-
-			.top-t {
-				display: flex;
-				justify-content: space-between;
-
-				.t-l {
-					display: flex;
-
-					.t-b {
-						width: 12rpx;
-						border-radius: 10rpx;
-						background-color: #f98e23;
-					}
-
-					.t-name {
-						margin-left: 10rpx;
-						font-weight: bold;
-						font-size: 28rpx;
-					}
-				}
-			}
-
-			.top-bottom-text {
-				margin: 10rpx 0;
-			}
-
-			.top-t2 {
-				.t2-item {
-					display: flex;
-					justify-content: space-between;
-					margin-bottom: 20rpx;
-				}
-			}
-		}
-
-		.center-box {
-			margin-bottom: 20rpx;
-		}
-
-		.item-center {
-			display: flex;
-			align-items: center;
-			margin: 10rpx 0;
-
-			.center-left {
-				height: 160rpx;
-
-				.img {
-					width: 160rpx;
-					height: 160rpx;
-				}
-			}
-
-			.center-right {
-				width: 100%;
-				height: 160rpx;
-				display: flex;
-				justify-content: space-between;
-				margin-left: 20rpx;
-
-				.r-l {
-					display: flex;
-					flex-direction: column;
-					justify-content: space-around;
-
-					.right-name {
-						color: #4d5671;
-						font-size: 32rpx;
-						font-weight: bold;
-					}
-
-					.right-descript {
-						font-size: 28rpx;
-						color: #858797;
-					}
-
-					.l-box {
-						display: flex;
-						font-size: 24rpx;
-						align-items: center;
-						font-style: italic;
-
-						.right-price {
-							margin-right: 20rpx;
-							font-weight: bold;
-							font-size: 28rpx;
-							color: #f57f32;
-						}
-
-						.right-numb {
-							font-size: 24rpx;
-							color: #858797;
-						}
-					}
-				}
-			}
-		}
-	}
-</style>
+<style lang="scss" scope>
+  .comtainer{
+    padding: 120rpx 32rpx 32rpx;
+    background: linear-gradient(180deg, #D3E2FF 0%, #EFEFFA 35% , #F9F9F9 50%);;
+    min-height: calc(100vh - 152rpx);
+    font-size: 28rpx;
+    .title-box{
+      .title{
+        color:#0C1223;
+        font-size: 36rpx;
+        font-weight: bold;
+      }
+      .explan{
+        color:#333333;
+        font-size: 26rpx;
+        margin-top:12rpx;
+      }
+    }
+
+    .container-item-box{
+      margin-top:24rpx;
+      background-color: #FFFFFF;
+      border-radius: 16rpx;
+      padding:32rpx 24rpx;
+      .order-title{
+        color: #333333;
+        text-align: center;
+        margin-bottom:32rpx;
+        font-weight: bold;
+      }
+      .order-item-top-box{
+        .order-item{
+          margin-bottom: 24rpx;
+          .item-box{
+            display: flex;
+            .item-left{
+             .img{
+               width:160rpx;
+               height: 160rpx;
+               border-radius: 16rpx;
+             }
+            }
+            .item-right{
+              margin-left: 32rpx;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              .right1{
+
+              }
+              .right2{
+
+              }
+              .right3{
+                padding:2rpx 12rpx;
+                border:2rpx solid #215EBE;
+                color:#215EBE;
+                background-color: #E8EEF8;
+                border-radius: 4rpx;
+              }
+            }
+          }
+        }
+        .order-item:last-child{
+          margin:0;
+        }
+
+        .allprice{
+          display: flex;
+          justify-content: flex-end;
+          font-size: 26rpx;
+          color:#333333;
+          margin-top:26rpx;
+          align-items: center;
+          .price-text{
+            margin-right:10rpx;
+          }
+          .price{
+            font-size: 32rpx;
+            font-weight: bold;
+          }
+        }
+      }
+      .order-item-bottom-box{
+        .refund-box{
+          display: flex;
+          justify-content: flex-end;
+          .refund-btn{
+            padding:4rpx 24rpx;
+            border-radius: 108rpx;
+            border:2rpx solid #E6E6E6;
+            text-align: center;
+          }
+        }
+        .rqcode-box{
+          margin-top:36rpx;
+          .rqcode-img{
+            text-align: center;
+            .img{
+              width:278rpx;
+              height:200rpx;
+            }
+          }
+          .rqcode-text{
+            display: flex;
+            justify-content: center;
+            margin-top:24rpx;
+
+            .text2{
+              color:#1B5FC5;
+              margin-left:16rpx;
+            }
+          }
+        }
+      }
+    }
+  }
+
+.order-item-explan-box{
+  margin-top:50rpx;
+  .explan-sale{
+    display: flex;
+    margin: 9rpx 0;
+    align-items: center;
+    .sale-left{
+      color: #39BD66;
+    }
+    .sale-right{
+      font-size: 24rpx;
+      color: #666666;
+      margin-left: 8rpx;
+    }
+  }
+  .explan-address{
+    font-size: 24rpx;
+    color:#999999;
+  }
+}
+
+.containers-box{
+  background-color: #fff;
+  padding:24rpx;
+  border-radius: 16rpx;
+  margin-top:24rpx;
+  .title{
+    margin-bottom: 24rpx;
+  }
+  .item-box{
+    display: flex;
+    font-size: 24rpx;
+    margin-bottom:16rpx;
+    width:100%;
+    .item-left{
+      margin-right:16rpx;
+      width: 17%;
+    }
+    .item-right{
+      color: #999999;
+      width: 80%;
+    }
+  }
+  .item-box:last-child{
+    margin: 0;
+  }
+}
+.reserve-btn{
+        background-color: #215EBE;
+        color:#FFFFFF;
+        border-radius: 16rpx;
+        height: 80rpx;
+        line-height: 80rpx;
+        margin-top:32rpx;
+      }
+</style>

src/PageMine/orderModules/orderReserve.vue

@@ -0,0 +1,129 @@
+<template>
+  <view class="container">
+    <view class="container-box">
+      <view class="title">汽车美容</view>
+      <view class="item-box" v-for="(item,index) of 3">
+        <view class="item-left">
+          <image src="@/static/QR57a.jpg" class="img"></image>
+        </view>
+        <view class="item-right">
+          <view class="right1">水洗轿车</view>
+          <view class="right1">X1</view>
+          <view class="right2">汽车美容</view>
+        </view>
+      </view>
+    </view>
+    <view class="container-box">
+      <view class="title">预约信息</view>
+      <view class="input-item">
+        <view class="item-top">联系方式</view>
+        <view class="item-bottom">
+          <u--input placeholder="请输入联系方式" border="surround" v-model="value"></u--input>
+        </view>
+      </view>
+      <view class="input-item">
+        <view class="item-top">预约时间</view>
+        <view class="item-bottom">
+          <u--input placeholder="请输入联系方式" border="surround" v-model="value"></u--input>
+        </view>
+      </view>
+      <view class="input-item">
+        <view class="item-top">备注</view>
+        <view class="item-bottom">
+          <u--input placeholder="请输入备注信息" border="surround" v-model="value"></u--input>
+        </view>
+      </view>
+    </view>
+    <button class='btn' @click='handlerReserve'>立即预约</button>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: ''
+      }
+    },
+    methods:{
+      // 立即预约
+      handlerReserve(){
+        uni.navigateTo({
+          url:'/PageMine/orderModules/orderReserveSuccess'
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    padding: 24rpx 32rpx;
+    box-sizing: border-box;
+    background-color: #F9F9F9;
+    font-size: 28rpx;
+
+    .container-box {
+      padding: 24rpx;
+      border-radius: 16rpx;
+      background-color: #fff;
+
+      .title {
+        margin-bottom: 24rpx;
+        font-weight: bold;
+      }
+
+      .item-box {
+        display: flex;
+        margin-bottom: 24rpx;
+
+        .item-left {
+          margin-right: 32rpx;
+
+          .img {
+            width: 160rpx;
+            height: 160rpx;
+            border-radius: 16rpx;
+          }
+        }
+
+        .item-right {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+
+          .right1 {}
+
+          .right2 {
+            padding: 2rpx 12rpx;
+            background-color: #E9EFF9;
+            color: #215EBE;
+            border: 2rpx solid #215EBE;
+          }
+        }
+      }
+
+      .item-box:last-child {
+        margin: 0;
+      }
+
+      .input-item {
+        margin-bottom: 24rpx;
+
+        .item-top {
+          margin-bottom: 16rpx;
+        }
+      }
+    }
+
+    .btn {
+      width: 100%;
+      background-color: #215EBE;
+      text-align: center;
+      color: #fff;
+      margin-top:50rpx;
+      height:80rpx;
+      line-height: 80rpx;
+    }
+  }
+</style>

src/PageMine/orderModules/orderReserveSuccess.vue

@@ -0,0 +1,169 @@
+<template>
+  <view class="container">
+    <view class="back-icon">
+      <u-icon name="arrow-left" color="#000" size="16" @click="handlerBack"></u-icon>
+    </view>
+    <view class="success-icon-box">
+      <view class="icon-img-box">
+        <image src="@/static/mine/icon_mine_success.png" class="img"></image>
+      </view>
+      <view class="icon-type">预约成功</view>
+      <view class="icon-explan">商家将为您预留30分钟预约，请您按时到店。</view>
+    </view>
+    <view class="container-box">
+      <view class="title">汽车美容</view>
+      <view class="item-box" v-for="(item,index) of 3">
+        <view class="item-left">
+          <image src="@/static/QR57a.jpg" class="img"></image>
+        </view>
+        <view class="item-right">
+          <view class="right1">水洗轿车</view>
+          <view class="right1">X1</view>
+          <view class="right2">汽车美容</view>
+        </view>
+      </view>
+    </view>
+    <view class="container-box">
+      <view class="title">预约信息</view>
+      <view class="explan-item">
+        <view class="item-left">联系方式</view>
+        <view class="item-right">18285564342</view>
+      </view>
+      <view class="explan-item">
+        <view class="item-left">预约时间</view>
+        <view class="item-right">2024-05-28 13:15:00</view>
+      </view>
+      <view class="explan-item">
+        <view class="item-left">备注</view>
+        <view class="item-right">过来的时候可能会晚10多分钟左右</view>
+      </view>
+    </view>
+
+    <button class='btn' >取消预约</button>
+  </view>
+</template>
+
+<script>
+  export default {
+    data(){
+      return{
+
+      }
+    },
+    methods:{
+      handlerBack(){
+        uni.switchTab({
+          url:'/pages/tabbar/mine'
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #F9F9F9;
+  }
+
+  .container {
+    padding: 56rpx 32rpx 0;
+    font-size: 28rpx;
+    .back-icon{
+      margin: 70rpx 0 20rpx;
+    }
+    .success-icon-box {
+      text-align: center;
+      margin-bottom: 62rpx;
+
+      .icon-img-box {
+        display: flex;
+        justify-content: center;
+
+        .img {
+          width: 132rpx;
+          height: 132rpx;
+        }
+      }
+
+      .icon-type {
+        margin: 16rpx 0;
+        font-size: 36rpx;
+        font-weight: bold;
+      }
+
+      .icon-explan {
+        font-size: 24rpx;
+        color: #333333;
+      }
+    }
+
+    .container-box {
+      padding: 24rpx;
+      border-radius: 16rpx;
+      background-color: #fff;
+      margin-bottom: 20rpx;
+
+      .title {
+        margin-bottom: 24rpx;
+        font-weight: bold;
+      }
+
+      .item-box {
+        display: flex;
+        margin-bottom: 24rpx;
+
+        .item-left {
+          margin-right: 32rpx;
+
+          .img {
+            width: 160rpx;
+            height: 160rpx;
+            border-radius: 16rpx;
+          }
+        }
+
+        .item-right {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+
+          .right1 {}
+
+          .right2 {
+            padding: 2rpx 12rpx;
+            background-color: #E9EFF9;
+            color: #215EBE;
+            border: 2rpx solid #215EBE;
+          }
+        }
+      }
+
+      .item-box:last-child {
+        margin: 0;
+      }
+
+      .explan-item{
+        margin-bottom: 16rpx;
+        display: flex;
+        justify-content: space-between;
+        font-size: 24rpx;
+        .item-left{
+          color: #999999;
+        }
+        .item-right{
+          color: #333333;
+        }
+      }
+    }
+
+    .btn {
+      width: 100%;
+      background-color: #215EBE;
+      text-align: center;
+      color: #fff;
+      margin-top:50rpx;
+      height:80rpx;
+      line-height: 80rpx;
+    }
+  }
+</style>

src/pages.json

@@ -175,7 +175,20 @@
 					"style": {
 						"navigationBarTitleText": "订单详情"
 					}
-				},
+				},
+        {
+        	"path": "orderModules/orderReserve",
+        	"style": {
+        		"navigationBarTitleText": "订单预约"
+        	}
+        },
+        {
+        	"path": "orderModules/orderReserveSuccess",
+        	"style": {
+        		"navigationBarTitleText": "预约成功",
+            "navigationStyle": "custom"
+        	}
+        },
 				{
 					"path": "orderModules/orderComment",
 					"style": {
@@ -446,4 +459,4 @@
 			"query": ""
 		}]
 	}
-}
+}

src/utils/request.js

@@ -11,10 +11,10 @@ import {
 
 // 每次请求都创建一个新的实例
 const instance = axios.create({
-  // baseURL: 'https://test.api.chelvc.com',
+  baseURL: 'https://test.api.chelvc.com',
   // baseURL: "http://192.168.68.77:11000",
   // baseURL: "https://358175z5l5.yicp.fun",
-  baseURL: "http://localhost:11000",
+  // baseURL: "http://localhost:11000",
   timeout: 10000,
   adapter: UniAdapter,
 });