Merge remote-tracking branch 'origin/clientDemo' into tianyi

src/PageMine/favourite - 副本.vue

@@ -0,0 +1,146 @@
+<template>
+  <view class="collect">
+    <view class="collect_list">
+      <u-tabs :list="listCollect" @click="clickCollect" lineWidth="30" lineColor="#5992bb" :activeStyle="{
+          color: '#303133',
+          fontWeight: 'bold',
+          transform: 'scale(1.05)',
+        }" :inactiveStyle="{
+          color: '#606266',
+          transform: 'scale(1)',
+        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
+    </view>
+    <view>
+      <view v-if="init_list.length > 0">
+        <view class="text">以下是您收藏的商品服务</view>
+        <!-- 收藏的服务 -->
+        <serviceItem v-if="indexs == 0" :item="init_list" @uploadIniList="uploadIniList"></serviceItem>
+        <goodsItem v-else :item="init_list" @uploadIniList="uploadIniList" />
+      </view>
+      <u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
+    </view>
+  </view>
+</template>
+
+<script>
+  import serviceItem from '@/components/service/serviceItem.vue';
+  import goodsItem from "./components/goodsItem"
+  import { maintainFavoritePaging, getFavouriteGoods } from '@/api/client/mine.js';
+  import { getCurrentLocation } from '@/api/client/home';
+  import { mapGetters } from "vuex"
+  export default {
+    components: {
+      serviceItem,
+      goodsItem
+    },
+    data() {
+      return {
+        queryParams: {
+          size: 10,
+          type: 'MERCHANT',
+          region: null, //地区编码
+          longitude: null , //经度
+          latitude: null, //纬度
+        },
+        init_list: [],
+        listCollect: [{
+            id: 1,
+            name: '商家',
+          },
+          {
+            id: 1,
+            name: '服务',
+          },
+        ],
+        indexs: 0,
+
+      };
+    },
+	mounted() {
+	  let { latitude , longitude , region } = this.location
+	  this.queryParams.latitude = latitude
+	  this.queryParams.longitude = longitude
+	  this.queryParams.region = region
+	  this.handlerInitList();
+	},
+	computed:{
+		  ...mapGetters(['location'])
+	},
+    methods: {
+      // 初始化商家列表信息
+      handlerInitList() {
+        maintainFavoritePaging(this.queryParams).then(res => {
+          if (res.code === 'OK' && res.data) {
+            res.data.map(rs => {
+              this.init_list.push(rs.simpleMerchantVO);
+            });
+          } else {
+            uni.showToast({
+              title: '数据请求失败',
+              icon: 'none',
+            });
+          }
+        });
+      },
+      // 初始化服务列表
+      handlerInitGoodsList() {
+        getFavouriteGoods().then(res => {
+          if (res.code === 'OK' && res.data) {
+            res.data.map(rs => {
+              this.init_list.push(rs.goods);
+            });
+          } else {
+            uni.showToast({
+              title: '数据请求失败',
+              icon: 'none',
+            });
+          }
+        });
+      },
+      clickCollect(e) {
+        this.init_list = []
+        this.indexs = e.index
+        switch (e.index) {
+          case 0:
+            this.handlerInitList()
+            break;
+          case 1:
+            this.handlerInitGoodsList()
+            break;
+        }
+      },
+      uploadIniList(e) {
+        this.init_list = []
+        if (e == 1) {
+          this.handlerInitGoodsList()
+          this.indexs = 1
+        } else {
+          this.handlerInitList()
+          this.indexs = 0
+        }
+      }
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .collect {
+    min-height: 100vh;
+    background-color: #efefef;
+
+    &_list {
+      display: flex;
+      height: 70rpx;
+      justify-content: center;
+      align-items: center;
+      background-color: #fff;
+      margin-bottom: 40rpx;
+    }
+
+    .text {
+      text-align: center;
+      padding: 40rpx;
+      color: #999;
+    }
+  }
+</style>

src/PageMine/favourite.vue

@@ -1,6 +1,6 @@
 <template>
-  <view class="collect">
-    <view class="collect_list">
+  <view class='container' @click='handlerClearPop'>
+    <view class="collect-list">
       <u-tabs :list="listCollect" @click="clickCollect" lineWidth="30" lineColor="#5992bb" :activeStyle="{
           color: '#303133',
           fontWeight: 'bold',
@@ -10,39 +10,38 @@
           transform: 'scale(1)',
         }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
     </view>
-    <view>
-      <view v-if="init_list.length > 0">
-        <view class="text">以下是您收藏的商品服务</view>
-        <!-- 收藏的服务 -->
-        <serviceItem v-if="indexs == 0" :item="init_list" @uploadIniList="uploadIniList"></serviceItem>
-        <goodsItem v-else :item="init_list" @uploadIniList="uploadIniList" />
+
+    <u-divider text="以下是您收藏的商家"></u-divider>
+
+    <view class='favoutire-box'>
+      <view class='item-box' v-for="(item,index) of init_list" :key='index'>
+        <view class='item-left'>
+          <image src='@/static/QR57a.jpg' class='img'></image>
+        </view>
+        <view class='item-right'>
+          <view class='name'>{{ item.name }}</view>
+          <view class='favourite'>{{ item.favouriteNumb }}人收藏</view>
+          <view class='price-box'>
+            <view class="price-left">¥{{ item.price }}</view>
+            <view class="price-right" @click.stop='handlerShowPop(item,index)'>
+              <u-icon name="more-dot-fill" color="#000" size="16"></u-icon>
+            </view>
+            <view class="pop-box" v-show="item.show">
+              <view class="pop-item" @click='handlerSkipShow(item,index)'>进店逛逛</view>
+              <view class="pop-item" @click='handlerDeleteItem(item,index)'>删除</view>
+            </view>
+          </view>
+        </view>
       </view>
-      <u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
     </view>
+
   </view>
 </template>
 
 <script>
-  import serviceItem from '@/components/service/serviceItem.vue';
-  import goodsItem from "./components/goodsItem"
-  import { maintainFavoritePaging, getFavouriteGoods } from '@/api/client/mine.js';
-  import { getCurrentLocation } from '@/api/client/home';
-  import { mapGetters } from "vuex"
   export default {
-    components: {
-      serviceItem,
-      goodsItem
-    },
     data() {
       return {
-        queryParams: {
-          size: 10,
-          type: 'MERCHANT',
-          region: null, //地区编码
-          longitude: null , //经度
-          latitude: null, //纬度
-        },
-        init_list: [],
         listCollect: [{
             id: 1,
             name: '商家',
@@ -52,83 +51,89 @@
             name: '服务',
           },
         ],
-        indexs: 0,
-
-      };
+        init_list: [{
+            name: '测试店铺1',
+            favouriteNumb: 120,
+            price: 85,
+            show: false
+          },
+          {
+            name: '测试店铺2',
+            favouriteNumb: 5201,
+            price: 96,
+            show: false
+          },
+          {
+            name: '测试店铺3',
+            favouriteNumb: 12,
+            price: 41,
+            show: false
+          },
+        ],
+        indexs: 0
+      }
     },
-	mounted() {
-	  let { latitude , longitude , region } = this.location
-	  this.queryParams.latitude = latitude
-	  this.queryParams.longitude = longitude
-	  this.queryParams.region = region
-	  this.handlerInitList();
-	},
-	computed:{
-		  ...mapGetters(['location'])
-	},
     methods: {
-      // 初始化商家列表信息
-      handlerInitList() {
-        maintainFavoritePaging(this.queryParams).then(res => {
-          if (res.code === 'OK' && res.data) {
-            res.data.map(rs => {
-              this.init_list.push(rs.simpleMerchantVO);
-            });
-          } else {
-            uni.showToast({
-              title: '数据请求失败',
-              icon: 'none',
-            });
-          }
-        });
-      },
-      // 初始化服务列表
-      handlerInitGoodsList() {
-        getFavouriteGoods().then(res => {
-          if (res.code === 'OK' && res.data) {
-            res.data.map(rs => {
-              this.init_list.push(rs.goods);
-            });
-          } else {
-            uni.showToast({
-              title: '数据请求失败',
-              icon: 'none',
-            });
-          }
-        });
-      },
       clickCollect(e) {
-        this.init_list = []
+        // this.init_list = []
         this.indexs = e.index
         switch (e.index) {
           case 0:
-            this.handlerInitList()
+            // this.handlerInitList()
             break;
           case 1:
-            this.handlerInitGoodsList()
+            // this.handlerInitGoodsList()
             break;
         }
       },
-      uploadIniList(e) {
-        this.init_list = []
-        if (e == 1) {
-          this.handlerInitGoodsList()
-          this.indexs = 1
-        } else {
-          this.handlerInitList()
-          this.indexs = 0
-        }
+      // 点击显示
+      handlerShowPop(item, index) {
+        this.init_list.map(rs => {
+          if (rs.show) {
+            rs.show = false
+          }
+        })
+        item.show = true
+      },
+      // 清除showPop
+      handlerClearPop() {
+        this.init_list.map(rs => {
+          if (rs.show) {
+            rs.show = false
+            console.log("@@@@rs", rs)
+          }
+        })
+        console.log("@@@@@@@")
+      },
+      // 进店逛逛
+      handlerSkipShow() {
+        uni.showToast({
+          title: '进店',
+          icon: 'none'
+        })
+      },
+      // 删除
+      handlerDeleteItem() {
+        uni.showToast({
+          title: '删除',
+          icon: 'none'
+        })
       }
-    },
-  };
+    }
+  }
 </script>
 
-<style lang="scss" scoped>
-  .collect {
+<style lang='scss' scope>
+  page {
+    background-color: #F9F9F9;
+  }
+
+  .container {
+    font-size: 28rpx;
+    width: 100%;
     min-height: 100vh;
-    background-color: #efefef;
 
-    &_list {
+    .collect-list {
       display: flex;
       height: 70rpx;
       justify-content: center;
@@ -137,10 +142,84 @@
       margin-bottom: 40rpx;
     }
 
-    .text {
+    .notic-b {
       text-align: center;
-      padding: 40rpx;
-      color: #999;
+      margin: 24rpx 0;
+    }
+
+    .favoutire-box {
+      padding: 0 32rpx;
+      width: calc(100% - 64rpx);
+
+      .item-box {
+        display: flex;
+        background-color: #fff;
+        width: 100%;
+        margin-bottom: 24rpx;
+        box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
+
+        .item-left {
+          .img {
+            width: 160rpx;
+            height: 160rpx;
+            border-radius: 16px;
+          }
+        }
+
+        .item-right {
+          width: calc(100% - 180rpx);
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+
+          .name {
+            color: #333333;
+          }
+
+          .favourite {
+            color: #999999;
+            font-size: 24rpx;
+          }
+
+          .price-box {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+
+            .price-left {
+              color: #EB3636;
+              font-weight: bold;
+            }
+
+            .price-right {}
+
+            .pop-box {
+              width: 166rpx;
+              position: absolute;
+              right: -4%;
+              bottom: -340%;
+              padding: 24rpx;
+              border-radius: 16rpx;
+              background-color: #fff;
+              box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
+
+              .pop-item {
+                text-align: center;
+                margin-bottom: 16rpx;
+              }
+
+              .pop-item:last-child {
+                margin: 0;
+              }
+            }
+          }
+        }
+      }
+
+      .item-box:last-child {
+        margin: 0;
+      }
     }
   }
 </style>

src/PageMine/goodsReserve - 副本.vue

@@ -0,0 +1,154 @@
+<template>
+  <view class="container">
+    <view class="appoint" :key="index" v-for="(item, index) of init_list">
+      <view class="appoint-list">
+        <view class="appoint-title">{{ item.simpleMerchantVO.name }}</view>
+        <view class="appoint-address"></view>
+        <view class="appoint-flex">
+          <image class="img" :src=" item.simpleMerchantVO.logo" mode="scaleToFill"></image>
+          <view class="appoint-text">
+            <view>{{ item.goodsName }}</view>
+            <view>时间：{{ $u.timeFormat(item.appointTime) }}</view>
+            <view>联系方式：{{ item.mobile }}</view>
+          </view>
+        </view>
+        <view class="appoint-goto">
+          <u-button class="detail" text="详情" @click="handlerSkipGoodsDetail(item, index)"></u-button>
+          <u-button class="cancel" text="取消" @click="handlerClearItem(item, index)"></u-button>
+        </view>
+      </view>
+    </view>
+    <u-empty v-if="init_list.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
+    </u-empty>
+  </view>
+</template>
+
+<script>
+  import {
+    maintainReservations
+  } from '@/api/client/mine.js';
+  import {
+    cancelReservation
+  } from '@/api/client/business.js';
+  export default {
+    data() {
+      return {
+        queryParams: {
+          size: 10,
+        },
+        init_list: [], //初始化列表
+      };
+    },
+    mounted() {
+      this.handlerInitList();
+    },
+    methods: {
+      // 初始化列表
+      handlerInitList() {
+        maintainReservations(this.queryParams).then(res => {
+          this.init_list = res.data;
+        });
+      },
+      // 点击取消商品
+      handlerClearItem(item) {
+        cancelReservation(item.id).then(res => {
+          if (res.code === 'OK') {
+            uni.showToast({
+              title: '取消成功',
+              icon: 'none',
+            });
+            this.handlerInitList();
+          } else {
+            uni.showToast({
+              title: res.msg,
+              icon: 'none',
+            });
+            return;
+          }
+        });
+      },
+      // 点击跳转到商品详情
+      handlerSkipGoodsDetail(item, index) {
+        uni.navigateTo({
+          // url: `/pages/client/clientPackage/serviceDetail/index?id=${item.merchantId}`,
+          url: `/pagesHome/marketer/productDetail?id=${item.goodsId}&shopId=${item.merchantId}`,
+        });
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #efefef;
+  }
+
+  .container {
+    padding: 20rpx;
+  }
+
+  .appoint {
+    .history {
+      font-size: 38rpx;
+      margin: 20rpx 10rpx;
+      font-weight: bold;
+    }
+  }
+
+  .appoint-list {
+    padding: 20rpx;
+    background-color: #fff;
+    margin-bottom: 20rpx;
+    box-sizing: border-box;
+    border-radius: 20rpx;
+
+    .appoint-title {
+      font-size: 38rpx;
+      font-weight: bold;
+      margin-bottom: 10rpx;
+      color: #090909;
+    }
+
+    .appoint-address {
+      font-size: 32rpx;
+      margin: 20rpx;
+      padding-bottom: 20rpx;
+      color: #000000;
+      border-bottom: 2rpx solid #e5e5e5;
+    }
+
+    .appoint-flex {
+      display: flex;
+
+      .img {
+        width: 210rpx;
+        height: 160rpx;
+        display: block;
+        margin-right: 15rpx;
+      }
+
+      .appoint-text {
+        font-size: 28rpx;
+
+        >view {
+          margin-bottom: 26rpx;
+        }
+      }
+    }
+
+    .appoint-goto {
+      display: flex;
+
+      .detail,
+      .cancel {
+        width: 45%;
+        border-radius: 20rpx;
+      }
+
+      .detail {
+        background-color: #6c9fc3;
+        color: #fff;
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,339 @@
+<template>
+	<view class="container">
+		<u-sticky style="margin-top: 15rpx; margin-left: 20rpx" bgColor="#fff">
+			<u-tabs lineWidth="40" :list="list" :current="current" @change="handlerChangeItem"
+				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
+		</u-sticky>
+
+		<!-- 订单 -->
+		<view class="order">
+			<view class="order-box">
+				<view class="order-item" v-for="(item, index) of init_list" :key="index">
+					<view class="" @click="handlerSkipDetail(item)">
+						<view class="item-top">
+							<view class="top-left gray-color">订单编号 : {{ item.orderSn }}</view>
+							<view class="top-right">{{ type_name }}</view>
+						</view>
+						<view class="item-top">
+							<view class="top-left gray-color">支付时间 : {{ item.createTimeText }}</view>
+							<view class="top-right"></view>
+						</view>
+					</view>
+
+					<u-line margin="20rpx 0"></u-line>
+
+					<view class="item-center" :key="idx" v-for="(itm, idx) of item.goodsInfo">
+						<view class="center-left">
+							<image :src="itm.goodsPic" class="img"></image>
+						</view>
+						<view class="center-right">
+							<view class="r-l">
+								<view class="right-name"> {{ itm.goodsName }} </view>
+								<view class="right-descript"> 测试商品描述111 </view>
+								<view class="l-box">
+									<view class="right-price"> ￥{{ itm.goodsPrice }} </view>
+									<view class="right-numb"> ×{{ itm.goodsQuantity }} </view>
+								</view>
+							</view>
+							<view class="r-r">
+								<view class="r-item" @click.stop="handlerSkipComment(item, itm)"
+									v-if="type == 4 && itm.assessStatus == 0">
+									<u-icon name="chat" color="#000" size="28"></u-icon>
+									<span>评价</span>
+								</view>
+							</view>
+						</view>
+					</view>
+
+					<u-line margin="20rpx 0" dashed="true"></u-line>
+
+					<view class="item-allnumb-box">
+						<view class="allnumb-left"> {{ item.allNumb }}件商品 </view>
+						<view class="allnumb-right">
+							<span class="r-text">共计</span>￥{{ item.allPrice }}
+						</view>
+					</view>
+
+					<view class="item-bottom">
+						<button class="btn" v-if="current == 0" @click='handlerCancelOrder(item)'>取消订单</button>
+						<!-- <button class="btn" v-if='current == 1' @click='handlerOrderBtn(1)'>申请退款</button> -->
+						<!-- <button class="btn" v-if='current == 2' @click='handlerOrderBtn(2)'>售后</button> -->
+					</view>
+				</view>
+			</view>
+			<view v-if="init_list.length == 0" style="margin-top: 40rpx">
+				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		userOrdersApi,
+		getUserOrderList,
+		cancelOrder
+	} from '@/api/client/order';
+	export default {
+		data() {
+			return {
+				current: 0,
+				type: 0,
+				type_name: '',
+				size: 20,
+				// 订单状态：0->待付款；1->已付款；2->已发货；3->已完成；4->已关闭；5->无效订单
+				list: [{
+						name: '待付款',
+						type: 0,
+					},
+					{
+						name: '已付款',
+						type: 1,
+					},
+					// {
+					// 	name: '待发货',
+					// 	type: 2,
+					// },
+					// {
+					// 	name: '已发货',
+					// 	type: 3,
+					// },
+					{
+						name: '已完成',
+						type: 3,
+					},
+					{
+						name: '已关闭',
+						type: 4,
+					}
+					// ,
+					//       {
+					//         name: '无效订单',
+					//         type: 5,
+					//       },
+				],
+				init_list: [],
+			};
+		},
+		mounted() {
+			// this.userOrdersPage();
+		},
+		onShow() {
+			let cur = this.$store.state.order.skip_order_type.type;
+			switch (cur) {
+				case 0:
+					this.current = 0;
+					this.userOrdersPage(cur);
+					break;
+				case 1:
+					this.current = 2;
+					this.userOrdersPage(cur);
+					break;
+				case 2:
+					this.current = 3;
+					this.userOrdersPage(cur);
+					break;
+			}
+		},
+		computed: {
+			allNumber() {
+				this.init_list.map(rs => {
+					let sum = 0;
+					let price = 0;
+					rs.goodsInfo.map(rc => {
+						sum += rc.goodsQuantity;
+						price += rc.goodsPrice;
+					});
+					rs.allNumb = sum;
+					rs.allPrice = price;
+				});
+				return;
+			},
+		},
+		methods: {
+			handlerChangeItem(data) {
+				this.current = data.index;
+				this.type = data.type;
+				this.type_name = data.name;
+				this.userOrdersPage(this.type);
+			},
+
+			async userOrdersPage(type) {
+				let orderStatus = type == undefined ? 0 : `${type}`;
+				let res = await getUserOrderList({
+					status: orderStatus,
+					paging: '1,20',
+				});
+				if ((res.code = 200 && res.data)) {
+					this.init_list = res.data.records;
+					this.init_list.map(rs => {
+						rs.createTimeText = uni.$u.timeFormat(rs.createTime, 'yyyy-mm-dd hh:MM:ss');
+					})
+				}
+			},
+
+			// 跳转到订单详情
+			handlerSkipDetail(e) {
+				uni.navigateTo({
+					url: `/PageMine/orderModules/orderDetail?orderList=${JSON.stringify(e)}`,
+				});
+			},
+			// 取消订单
+			handlerCancelOrder(e) {
+				cancelOrder(e.id).then(res => {
+					if (res.code == 'OK') {
+						uni.showToast({
+							title: '订单取消成功',
+							icon: 'none',
+						});
+						this.userOrdersPage(this.type);
+					} else {
+						uni.showToast({
+							title: res.message,
+							icon: 'none',
+						});
+						return
+					}
+				});
+			},
+			// 点击跳转到商品评价
+			handlerSkipComment(item, itm) {
+				uni.navigateTo({
+					url: `/PageMine/orderModules/orderComment?orderList=${JSON.stringify(item)}&goodsList=${JSON.stringify(itm)}`,
+				});
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.order {
+		margin-top: 10px;
+		padding: 10rpx 20rpx 20rpx;
+		box-sizing: border-box;
+
+		.order-box {
+			.order-item {
+				margin-bottom: 20rpx;
+				background-color: #fff;
+				border-radius: 20rpx;
+				padding: 20rpx;
+				box-shadow: 0 8rpx 15rpx 0 rgba(0, 0, 0, 0.08);
+
+				.item-top {
+					display: flex;
+					justify-content: space-between;
+					margin-bottom: 10rpx;
+				}
+
+				.item-center {
+					display: flex;
+					align-items: center;
+					margin-bottom: 10rpx;
+
+					.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;
+								}
+							}
+						}
+
+						.r-r {
+							.r-item {
+								align-items: center;
+							}
+						}
+					}
+				}
+
+				.item-allnumb-box {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					font-weight: bold;
+
+					.allnumb-left {
+						font-size: 32rpx;
+					}
+
+					.allnumb-right {
+						font-size: 26rpx;
+						color: #f57f32;
+
+						.r-text {
+							color: #000;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.item-bottom {
+		width: 100%;
+		margin-top: 20rpx;
+
+		.btn {
+			height: 70rpx;
+			background-color: rgba(248, 213, 53, 0.8);
+			color: #4e5059;
+			font-size: 28rpx;
+			text-align: center;
+			line-height: 70rpx;
+			border-radius: 20rpx;
+		}
+	}
+
+	.gray-color {
+		color: #858797;
+	}
+
+	::deep .u-tabs__wrapper__nav__item__text {
+		font-size: 30px;
+	}
+</style>

src/PageMine/orderModules/index.vue

@@ -1,339 +1,212 @@
 <template>
-	<view class="container">
-		<u-sticky style="margin-top: 15rpx; margin-left: 20rpx" bgColor="#fff">
-			<u-tabs lineWidth="40" :list="list" :current="current" @change="handlerChangeItem"
-				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
-		</u-sticky>
-
-		<!-- 订单 -->
-		<view class="order">
-			<view class="order-box">
-				<view class="order-item" v-for="(item, index) of init_list" :key="index">
-					<view class="" @click="handlerSkipDetail(item)">
-						<view class="item-top">
-							<view class="top-left gray-color">订单编号 : {{ item.orderSn }}</view>
-							<view class="top-right">{{ type_name }}</view>
-						</view>
-						<view class="item-top">
-							<view class="top-left gray-color">支付时间 : {{ item.createTimeText }}</view>
-							<view class="top-right"></view>
-						</view>
-					</view>
-
-					<u-line margin="20rpx 0"></u-line>
-
-					<view class="item-center" :key="idx" v-for="(itm, idx) of item.goodsInfo">
-						<view class="center-left">
-							<image :src="itm.goodsPic" class="img"></image>
-						</view>
-						<view class="center-right">
-							<view class="r-l">
-								<view class="right-name"> {{ itm.goodsName }} </view>
-								<view class="right-descript"> 测试商品描述111 </view>
-								<view class="l-box">
-									<view class="right-price"> ￥{{ itm.goodsPrice }} </view>
-									<view class="right-numb"> ×{{ itm.goodsQuantity }} </view>
-								</view>
-							</view>
-							<view class="r-r">
-								<view class="r-item" @click.stop="handlerSkipComment(item, itm)"
-									v-if="type == 4 && itm.assessStatus == 0">
-									<u-icon name="chat" color="#000" size="28"></u-icon>
-									<span>评价</span>
-								</view>
-							</view>
-						</view>
-					</view>
-
-					<u-line margin="20rpx 0" dashed="true"></u-line>
-
-					<view class="item-allnumb-box">
-						<view class="allnumb-left"> {{ item.allNumb }}件商品 </view>
-						<view class="allnumb-right">
-							<span class="r-text">共计</span>￥{{ item.allPrice }}
-						</view>
-					</view>
-
-					<view class="item-bottom">
-						<button class="btn" v-if="current == 0" @click='handlerCancelOrder(item)'>取消订单</button>
-						<!-- <button class="btn" v-if='current == 1' @click='handlerOrderBtn(1)'>申请退款</button> -->
-						<!-- <button class="btn" v-if='current == 2' @click='handlerOrderBtn(2)'>售后</button> -->
-					</view>
-				</view>
-			</view>
-			<view v-if="init_list.length == 0" style="margin-top: 40rpx">
-				<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
-			</view>
-		</view>
-	</view>
+  <view class="container">
+    <u-sticky style="margin-top: 15rpx; margin-left: 20rpx" bgColor="#fff">
+      <u-tabs lineWidth="40" :list="list" :current="current"
+        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
+    </u-sticky>
+
+    <view class='order-box'>
+      <view class="order-item" v-for="(item,index) of 3">
+        <view class="item-top">
+          <view class="top-left">
+            <image src="@/static/home/icon_home_detail_shop.png" class='img'></image>
+            <view class="left-name"> 聚鑫（途虎养车店）</view>
+          </view>
+          <view class="top-right"> 待付款 </view>
+        </view>
+
+        <view class="goods-item" v-for="item of 3">
+          <view class='item-left'>
+            <image src="@/static/QR57a.jpg" class='img'></image>
+          </view>
+          <view class='item-right'>
+            <view class="right-top">
+              38号轮胎38号轮胎38号轮胎38号轮胎38号轮号轮号轮胎
+            </view>
+            <view class="right-bottom">
+              <view class="bottom-left"> ¥20.00 </view>
+              <view class="bottom-right"> X1 </view>
+            </view>
+          </view>
+        </view>
+
+        <u-line margin='24rpx 0'></u-line>
+
+        <view class='price-box'>
+          <view class="price">需付款￥1559.9</view>
+        </view>
+
+        <view class="btn-box">
+          <button class='btn btn2'>继续付款</button>
+          <button class='btn btn1'>查看卷码</button>
+          <button class='btn btn2'>再来一单</button>
+          <button class='btn btn2'>退款进度</button>
+        </view>
+      </view>
+    </view>
+
+  </view>
 </template>
 
 <script>
-	import {
-		userOrdersApi,
-		getUserOrderList,
-		cancelOrder
-	} from '@/api/client/order';
-	export default {
-		data() {
-			return {
-				current: 0,
-				type: 0,
-				type_name: '',
-				size: 20,
-				// 订单状态：0->待付款；1->已付款；2->已发货；3->已完成；4->已关闭；5->无效订单
-				list: [{
-						name: '待付款',
-						type: 0,
-					},
-					{
-						name: '已付款',
-						type: 1,
-					},
-					// {
-					// 	name: '待发货',
-					// 	type: 2,
-					// },
-					// {
-					// 	name: '已发货',
-					// 	type: 3,
-					// },
-					{
-						name: '已完成',
-						type: 3,
-					},
-					{
-						name: '已关闭',
-						type: 4,
-					}
-					// ,
-					//       {
-					//         name: '无效订单',
-					//         type: 5,
-					//       },
-				],
-				init_list: [],
-			};
-		},
-		mounted() {
-			// this.userOrdersPage();
-		},
-		onShow() {
-			let cur = this.$store.state.order.skip_order_type.type;
-			switch (cur) {
-				case 0:
-					this.current = 0;
-					this.userOrdersPage(cur);
-					break;
-				case 1:
-					this.current = 2;
-					this.userOrdersPage(cur);
-					break;
-				case 2:
-					this.current = 3;
-					this.userOrdersPage(cur);
-					break;
-			}
-		},
-		computed: {
-			allNumber() {
-				this.init_list.map(rs => {
-					let sum = 0;
-					let price = 0;
-					rs.goodsInfo.map(rc => {
-						sum += rc.goodsQuantity;
-						price += rc.goodsPrice;
-					});
-					rs.allNumb = sum;
-					rs.allPrice = price;
-				});
-				return;
-			},
-		},
-		methods: {
-			handlerChangeItem(data) {
-				this.current = data.index;
-				this.type = data.type;
-				this.type_name = data.name;
-				this.userOrdersPage(this.type);
-			},
-
-			async userOrdersPage(type) {
-				let orderStatus = type == undefined ? 0 : `${type}`;
-				let res = await getUserOrderList({
-					status: orderStatus,
-					paging: '1,20',
-				});
-				if ((res.code = 200 && res.data)) {
-					this.init_list = res.data.records;
-					this.init_list.map(rs => {
-						rs.createTimeText = uni.$u.timeFormat(rs.createTime, 'yyyy-mm-dd hh:MM:ss');
-					})
-				}
-			},
-
-			// 跳转到订单详情
-			handlerSkipDetail(e) {
-				uni.navigateTo({
-					url: `/PageMine/orderModules/orderDetail?orderList=${JSON.stringify(e)}`,
-				});
-			},
-			// 取消订单
-			handlerCancelOrder(e) {
-				cancelOrder(e.id).then(res => {
-					if (res.code == 'OK') {
-						uni.showToast({
-							title: '订单取消成功',
-							icon: 'none',
-						});
-						this.userOrdersPage(this.type);
-					} else {
-						uni.showToast({
-							title: res.message,
-							icon: 'none',
-						});
-						return
-					}
-				});
-			},
-			// 点击跳转到商品评价
-			handlerSkipComment(item, itm) {
-				uni.navigateTo({
-					url: `/PageMine/orderModules/orderComment?orderList=${JSON.stringify(item)}&goodsList=${JSON.stringify(itm)}`,
-				});
-			},
-		},
-	};
+  export default {
+    data() {
+      return {
+        current: 0,
+        list: [{
+            name: '待付款',
+            type: 0,
+          },
+          {
+            name: '已付款',
+            type: 1,
+          },
+          {
+            name: '已完成',
+            type: 3,
+          },
+          {
+            name: '已关闭',
+            type: 4,
+          }
+
+        ],
+      };
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-	.order {
-		margin-top: 10px;
-		padding: 10rpx 20rpx 20rpx;
-		box-sizing: border-box;
-
-		.order-box {
-			.order-item {
-				margin-bottom: 20rpx;
-				background-color: #fff;
-				border-radius: 20rpx;
-				padding: 20rpx;
-				box-shadow: 0 8rpx 15rpx 0 rgba(0, 0, 0, 0.08);
-
-				.item-top {
-					display: flex;
-					justify-content: space-between;
-					margin-bottom: 10rpx;
-				}
-
-				.item-center {
-					display: flex;
-					align-items: center;
-					margin-bottom: 10rpx;
-
-					.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;
-								}
-							}
-						}
-
-						.r-r {
-							.r-item {
-								align-items: center;
-							}
-						}
-					}
-				}
-
-				.item-allnumb-box {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-					font-weight: bold;
-
-					.allnumb-left {
-						font-size: 32rpx;
-					}
-
-					.allnumb-right {
-						font-size: 26rpx;
-						color: #f57f32;
-
-						.r-text {
-							color: #000;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.item-bottom {
-		width: 100%;
-		margin-top: 20rpx;
-
-		.btn {
-			height: 70rpx;
-			background-color: rgba(248, 213, 53, 0.8);
-			color: #4e5059;
-			font-size: 28rpx;
-			text-align: center;
-			line-height: 70rpx;
-			border-radius: 20rpx;
-		}
-	}
-
-	.gray-color {
-		color: #858797;
-	}
+  .container {
+    font-size: 28rpx;
+    padding: 0 0 30rpx;
+    .order-box {
+      margin-top: 18rpx;
+
+      .order-item {
+        padding: 34rpx 32rpx;
+        background-color: #fff;
+        margin-bottom: 18rpx;
+        .item-top {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 24rpx;
+
+          .top-left {
+            display: flex;
+            align-items: center;
+
+            .img {
+              width: 32rpx;
+              height: 32rpx;
+            }
+
+            .left-name {
+              margin-left: 8rpx;
+              font-weight: bold;
+            }
+          }
+
+          .top-right {
+            color: #ED4444;
+          }
+        }
+
+        .goods-item {
+          display: flex;
+          margin-bottom: 24rpx;
+          .item-left {
+            margin-right: 24rpx;
+
+            .img {
+              width: 160rpx;
+              height: 160rpx;
+              border-radius: 16rpx;
+            }
+          }
+
+          .item-right {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .right-top {
+              color: #333333;
+            }
+
+            .right-bottom {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+
+              .bottom-left {
+                color: #EB3636;
+                font-weight: bold;
+                font-size: 32rpx;
+              }
+
+              .bottom-right {
+                color: #616570;
+                font-size: 24rpx;
+              }
+            }
+          }
+        }
+        .goods-item:last-child{
+          margin:0;
+        }
+        .price-box {
+          display: flex;
+          justify-content: flex-end;
+          margin-bottom: 24rpx;
+          font-size: 30rpx;
+          font-weight: bold;
+        }
+
+        .btn-box {
+          display: flex;
+          justify-content: flex-end;
+
+          .btn {
+            padding: 0 24rpx;
+            border-radius: 8rpx;
+            box-sizing: border-box;
+            margin-right: 24rpx;
+            height: 60rpx;
+            line-height: 60rpx;
+            font-size: 28rpx;
+          }
+
+          .btn:last-child {
+            margin: 0;
+          }
+
+          .btn1 {
+            color: #616570;
+            border: 2rpx solid #616570;
+          }
+
+          .btn2 {
+            color: #215EBE;
+            border: 2rpx solid #215EBE;
+          }
+        }
+      }
+    }
+  }
+</style>
 
-	::deep .u-tabs__wrapper__nav__item__text {
-		font-size: 30px;
-	}
+<style scope>
+  ::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+    justify-content: space-between;
+  }
+
+  /* //选中蓝色滑块对应 */
+  ::v-deep .u-tabs__wrapper__nav__item {
+    flex: 1 1 0% !important;
+  }
 </style>

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": {
@@ -460,4 +473,4 @@
 			"query": ""
 		}]
 	}
-}
+}