refactor：订单列表分页

pages.json

@@ -31,7 +31,7 @@
 		{
 			"path": "pages/order/index",
 			"style": {
-				"navigationBarTitleText": "订单"
+				"navigationStyle": "custom"
 			}
 		},
 		{

pages/order/index.rpx.css

@@ -1,7 +0,0 @@
-.tabBarLineHeight{
-    height: 138rpx;
-}
-.tabBarView{
-    position: fixed;
-    bottom: 0;
-}

pages/order/index.rpx.scss

@@ -0,0 +1,408 @@
+.tabBarLineHeight {
+  height: 138rpx;
+}
+
+.tabBarView {
+  position: fixed;
+  bottom: 0;
+}
+
+.showDataLoading {
+  margin-top: 40rpx;
+}
+
+
+.h-content-wrap {
+  padding-top: 60rpx;
+  background: linear-gradient(to bottom, #fef1b9, #fff);
+  height: 80rpx;
+}
+
+.serial-number {
+  padding: 48rpx;
+  width: 600rpx;
+  text-align: center;
+  font-size: 28rpx;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  line-height: 60rpx;
+  background: white;
+  border-radius: 15rpx;
+
+  .number {
+    line-height: 70rpx;
+    font-size: 35rpx;
+    color: #578D31;
+    font-weight: bold;
+  }
+
+  .text {
+    font-size: 26rpx;
+    color: #FFC000;
+    line-height: 80rpx;
+  }
+
+  .text1 {
+    line-height: 80rpx;
+    font-size: 26rpx;
+    color: red;
+  }
+
+}
+
+/* 菜单 */
+.tab-bar {
+  display: flex;
+  height: 80rpx;
+  margin-left: 24rpx;
+  background: #fff;
+  width: 340rpx;
+  border-radius: 40rpx;
+
+  .tab-item {
+    // flex: 1;
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    color: #333;
+
+    border-radius: 50rpx;
+  }
+
+  .tab-item.active {
+    color: #333333;
+    // background: linear-gradient(to right, #ff6c7b, #ff9db8);
+    background: #FFE05C;
+    border-radius: 50rpx;
+  }
+}
+
+/* 服务订单的菜单 */
+.service-order-tab-bar {
+  display: flex;
+  justify-content: space-around;
+  height: 100rpx;
+  margin-top: 24rpx;
+
+  .service-order-tab-item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    color: #333;
+    line-height: 52rpx;
+  }
+
+  .service-order-tab-item.active {
+    color: #ff0000;
+  }
+
+  .underline {
+    border-bottom: 4rpx solid #ff0000;
+  }
+}
+
+/* 服务订单内容*/
+.service-order {
+  margin-top: 24rpx;
+  /* 门店列表 */
+
+
+
+  .store-wrap {
+    background: #fff;
+    // border-radius: 24rpx;
+    margin-top: 14rpx;
+    padding-left: 24rpx;
+    padding-right: 24rpx;
+    padding-bottom: 24rpx;
+
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+    // border: 2rpx dashed rgb(103, 100, 100) ;
+
+    .grayscale {
+      filter: grayscale(100%);
+    }
+
+    .order-state {
+      display: flex;
+      font-size: 24rpx;
+      align-items: center;
+
+      .order-num {
+
+        // width: 70%;
+        // display: flex;
+        // align-items: center;
+        // height: 40rpx;
+        .h-order-num {
+          margin-right: 6rpx;
+          font-size: 28rpx;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #666666;
+
+          image {
+            width: 32rpx;
+            height: 32rpx;
+            transform: translateY(8rpx);
+          }
+        }
+
+        .h-order-text {
+          margin-right: 6rpx;
+          font-size: 28rpx;
+          font-size: large;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #666666;
+        }
+      }
+
+      .order-state-name {
+        width: 30%;
+        text-align: right;
+        padding-right: 24rpx;
+
+        .h-text1 {
+          color: #666666;
+        }
+
+        .h-text2 {
+          color: #93D21A;
+        }
+
+        .h-text3 {
+          color: #FFAF36;
+        }
+      }
+    }
+
+    .store-list {
+      margin-top: 24rpx;
+      margin-bottom: 12rpx;
+      display: flex;
+      justify-content: space-between;
+
+      .store-content {
+        display: flex;
+        justify-content: space-between;
+
+        .store-img {
+          width: 152rpx;
+
+          image {
+            height: 152rpx;
+            border-radius: 6rpx;
+          }
+        }
+
+        .content {
+          width: 100%;
+          padding-left: 16rpx;
+          padding-top: 4rpx;
+          padding-right: 24rpx;
+
+          .title {
+            height: 44rpx;
+            font-size: 28rpx;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: bold;
+            color: #111111;
+            line-height: 44rpx;
+            margin-left: 8rpx;
+
+          }
+
+          .price {
+            height: 44rpx;
+            font-size: 28rpx;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: bold;
+            color: #ED569F;
+            line-height: 44rpx;
+            margin-left: 8rpx;
+
+          }
+
+          .desc {
+            display: flex;
+            // padding: 6rpx;
+
+            .time {
+              font-size: 24rpx;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #ED569F;
+              background: rgba(237, 86, 159, 0.1);
+              padding: 6rpx 16rpx;
+              border-radius: 0rpx 0rpx 12rpx 12rpx;
+            }
+
+            .service-type {
+              font-size: 24rpx;
+              font-family: PingFangSC-Regular, PingFang SC;
+              color: black;
+              background: #fff9de;
+              padding: 6rpx 16rpx;
+              margin-left: 16rpx;
+              border-radius: 0rpx 0rpx 12rpx 12rpx;
+            }
+
+            .service-mode {
+              font-size: 24rpx;
+              font-family: PingFangSC-Regular, PingFang SC;
+              color: #9ed733;
+              background: #e9f6d1;
+              padding: 6rpx 16rpx;
+              margin-left: 16rpx;
+              border-radius: 0rpx 0rpx 12rpx 12rpx;
+            }
+          }
+        }
+      }
+    }
+
+    .detail {
+      font-size: 24rpx;
+      padding-top: 12rpx;
+      padding-bottom: 12rpx;
+      background-image: url('/static/order/ud4.png');
+      background-size: cover;
+
+      .d-item-row {
+        display: flex;
+        height: 44rpx;
+        align-items: center;
+
+        .item-icon {
+          display: flex;
+          align-items: center;
+          padding-right: 8rpx;
+
+          image {
+            height: 36rpx;
+            width: 36rpx;
+          }
+        }
+
+        .item-text {
+          color: #666666;
+
+          .item-v {
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+          }
+        }
+      }
+    }
+
+    .detail11 {
+      font-size: 24rpx;
+      padding-top: 12rpx;
+      padding-bottom: 12rpx;
+
+      .d-item-row {
+        display: flex;
+        height: 44rpx;
+        align-items: center;
+
+        .item-icon {
+          display: flex;
+          align-items: center;
+          padding-right: 8rpx;
+
+          image {
+            height: 36rpx;
+            width: 36rpx;
+          }
+        }
+
+        .item-text {
+          color: #666666;
+
+          .item-v {
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+          }
+        }
+      }
+    }
+
+    .flexLR {
+      border: 4rpx dotted #eeeeee;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      overflow: hidden;
+    }
+
+    .nav-bar {
+      display: flex;
+      text-align: right;
+      justify-content: flex-end;
+
+      .btn {
+        height: 60rpx;
+        line-height: 60rpx;
+        background: #FFE05C;
+        margin-top: 20rpx;
+        text-align: center;
+        color: #fff;
+        margin-right: 16rpx;
+        border-radius: 30rpx;
+        color: #333;
+        padding-right: 24rpx;
+        padding-left: 24rpx;
+        font-size: 26rpx;
+        display: flex;
+
+        .text1 {
+          padding-left: 2rpx;
+          font-size: 24rpx;
+          color: #666;
+        }
+      }
+
+      .look-num-btn {
+        height: 60rpx;
+        line-height: 60rpx;
+        background: #999;
+        margin-top: 20rpx;
+        width: 160rpx;
+        text-align: center;
+        color: #fff;
+        margin-right: 16rpx;
+        border-radius: 8rpx;
+      }
+    }
+
+    .fontColor {
+      color: red;
+    }
+  }
+}
+
+/* 产品订单 */
+.product-order {
+  margin-top: 24rpx;
+
+  .developing {
+    text-align: center;
+    color: #666;
+  }
+}
+
+.planNumber {
+  font-size: 35rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #93BC23;
+
+}
+
+.tabs{
+  background: #FFFFFF;
+}

pages/order/index.vue

@@ -1,6 +1,75 @@
 <template>
 	<view class="content">
-		订单
+
+		<u-sticky>
+			<view ref="hContentWrap" class="hContentWrap h-content-wrap">
+				<view class="tab-bar">
+					<view class="tab-item" :class="{ active: currentTab === 0 }" @click="changeTab(0)">
+						服务订单
+					</view>
+					<view class="tab-item" :class="{ active: currentTab === 1 }" @click="changeTab(1)">
+						产品订单
+					</view>
+				</view>
+			</view>
+			<View class=" tabs" v-if="currentTab === 0">
+				<u-tabs :list="tabList" :scrollable="false" lineWidth="30" lineColor="#FFE05C" :activeStyle="{
+            					color: '#333333',
+            					fontWeight: 'bold',
+            					transform: 'scale(1.05)'
+       							 }" :current="tabIndex" @click="clickTab"></u-tabs>
+			</View>
+		</u-sticky>
+
+		<!-- 订单列表 -->
+		<view :style="{'height':windowHeight}" v-if="currentTab === 0" class="bord">
+			<swiper :style="{'height':windowHeight}" :current="tabIndex" @change="swiperChange">
+				<swiper-item class="swiperItem" v-for="(item,index) in tabList" :key="index">
+					<view>
+						<mescroll-item ref="MescrollItem" :i="index" :index="tabIndex" :tabs="tabList"
+							:height="windowHeight">
+						</mescroll-item>
+					</view>
+				</swiper-item>
+			</swiper>
+		</view>
+
+
+		<view class="product-order" v-if="currentTab === 1">
+			<!-- Tab 2 内容 -->
+			<view class="developing">
+				<text>敬请期待...</text>
+			</view>
+		</view>
+
+
+		<uni-popup ref="serialNumber">
+			<view class="serial-number">
+				<view class="text">
+					<text>您的排队号</text>
+				</view>
+				<view class="number">
+					<text>{{ orderNumberData.schedulingNo }}</text>
+				</view>
+
+				<view v-if="orderNumberData.isOverNo !== '否'" class="text1">
+					<text>已过号，请重新取号</text>
+				</view>
+
+				<view v-else class="text">
+					<text>前面还有{{ orderNumberData.waitNoNum }}人在等待</text>
+				</view>
+
+				<view class="text">
+					<text>随时关注小程序的排队进程，过号作废</text>
+				</view>
+
+				<view class="text">
+					<text>0851—85833828</text>
+				</view>
+			</view>
+		</uni-popup>
+
 
 		<view class="tabBarLineHeight"></view>
 		<view class="tabBarView">
@@ -10,27 +79,64 @@
 </template>
 
 <script>
+	import MescrollItem from "./module/mescrollUni-item.vue";
 	import tabBar from "../../components/tabBar/tabBar";
 	export default {
-		components:{
-			tabBar
+		components: {
+			tabBar,
+			MescrollItem
 		},
 		data() {
 			return {
+				num: 0,
 				title: 'Hello',
-				tabIndex:3
+				tabIndex: 3,
+				currentTab: 0,
+				currentServiceTab: 'orderTab1',
+
+				tabList: [{
+					name: '全部'
+				}, {
+					name: '当前订单'
+				}, {
+					name: '待付款'
+				}, {
+					name: '已完成'
+				}],
+				windowHeight: ''
+
 			}
 		},
 		onLoad() {
-
+			uni.hideTabBar({
+				animation: false
+			})
+			let sysInfo = uni.getSystemInfoSync()
+			this.windowHeight = sysInfo.windowHeight - 44 + 'px' //除标题栏栏外的屏幕可用高度
 		},
 		methods: {
 
+			clickTab(e) {
+				this.tabIndex = e.index
+			},
+			swiperChange(e) {
+				this.tabIndex = e.detail.current
+				// if (this.$refs.MescrollItem[e.detail.current].orderList.length>0){
+				// 	this.$refs.MescrollItem[e.detail.current].downCallback()
+				// }
+			},
+
+			changeTab(currentTab) {
+				this.currentTab = currentTab
+			},
+
+
+
 		}
 	}
 </script>
 
-<style>
+<style scoped lang="scss">
 	@import '/common/css/common.css';
-	@import './index.rpx.css';
+	@import './index.rpx.scss';
 </style>

pages/order/module/index.rpx.css

@@ -0,0 +1,400 @@
+.tabBarLineHeight {
+    height: 138rpx;
+}
+
+.tabBarView {
+    position: fixed;
+    bottom: 0;
+}
+
+.showDataLoading {
+    margin-top: 40rpx;
+}
+
+
+.h-content-wrap {
+    padding-top: 60rpx;
+    background: linear-gradient(to bottom, #fef1b9, #fff);
+    height: 80rpx;
+}
+
+.serial-number {
+    padding: 48rpx;
+    width: 600rpx;
+    text-align: center;
+    font-size: 28rpx;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    line-height: 60rpx;
+    background: white;
+    border-radius: 15rpx;
+}
+.number {
+    line-height: 70rpx;
+    font-size: 35rpx;
+    color: #578D31;
+    font-weight: bold;
+}
+
+.text {
+    font-size: 26rpx;
+    color: #FFC000;
+    line-height: 80rpx;
+}
+
+.text1 {
+    line-height: 80rpx;
+    font-size: 26rpx;
+    color: red;
+}
+
+
+
+/* 菜单 */
+.tab-bar {
+    display: flex;
+    height: 80rpx;
+    margin-left: 24rpx;
+    background: #fff;
+    width: 340rpx;
+    border-radius: 40rpx;
+}
+.tab-item {
+// flex: 1;
+    width: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    color: #333;
+
+    border-radius: 50rpx;
+}
+
+.tab-item.active {
+    color: #333333;
+// background: linear-gradient(to right, #ff6c7b, #ff9db8);
+    background: #FFE05C;
+    border-radius: 50rpx;
+}
+
+
+/* 服务订单的菜单 */
+.service-order-tab-bar {
+    display: flex;
+    justify-content: space-around;
+    height: 100rpx;
+    margin-top: 24rpx;
+}
+.service-order-tab-item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 28rpx;
+    color: #333;
+    line-height: 52rpx;
+}
+
+.service-order-tab-item.active {
+    color: #ff0000;
+}
+
+.underline {
+    border-bottom: 4rpx solid #ff0000;
+}
+
+
+/* 服务订单内容*/
+.service-order {
+    margin-top: 24rpx;
+/* 门店列表 */
+}
+
+
+.store-wrap {
+    background: #fff;
+// border-radius: 24rpx;
+    margin-top: 14rpx;
+    padding-left: 24rpx;
+    padding-right: 24rpx;
+    padding-bottom: 24rpx;
+
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+// border: 2rpx dashed rgb(103, 100, 100) ;
+}
+.grayscale {
+    filter: grayscale(100%);
+}
+
+.order-state {
+    display: flex;
+    font-size: 24rpx;
+    align-items: center;
+}
+.order-num {
+
+// width: 70%;
+// display: flex;
+// align-items: center;
+// height: 40rpx;
+}
+.h-order-num {
+    margin-right: 6rpx;
+    font-size: 28rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #666666;
+}
+.h-order-num image {
+    width: 32rpx;
+    height: 32rpx;
+    transform: translateY(8rpx);
+}
+
+
+.h-order-text {
+    margin-right: 6rpx;
+    font-size: 28rpx;
+    font-weight: bold;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #666666;
+}
+
+
+.order-state-name {
+    width: 30%;
+    text-align: right;
+    padding-right: 24rpx;
+}
+.h-text1 {
+    color: #666666;
+}
+
+.h-text2 {
+    color: #93D21A;
+}
+
+.h-text3 {
+    color: #FFAF36;
+}
+
+
+.store-list {
+    margin-top: 24rpx;
+    margin-bottom: 12rpx;
+    display: flex;
+    justify-content: space-between;
+}
+.store-content {
+    display: flex;
+    justify-content: space-between;
+}
+.store-img {
+    width: 152rpx;
+}
+.store-img image {
+    height: 152rpx;
+    border-radius: 6rpx;
+}
+
+
+.content {
+    width: 100%;
+    padding-left: 16rpx;
+    padding-top: 4rpx;
+    padding-right: 24rpx;
+}
+.title {
+    height: 44rpx;
+    font-size: 28rpx;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: bold;
+    color: #111111;
+    line-height: 44rpx;
+    margin-left: 8rpx;
+
+}
+
+.price {
+    height: 44rpx;
+    font-size: 28rpx;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: bold;
+    color: #ED569F;
+    line-height: 44rpx;
+    margin-left: 8rpx;
+
+}
+
+.desc {
+    display: flex;
+// padding: 6rpx;
+}
+.time {
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ED569F;
+    background: rgba(237, 86, 159, 0.1);
+    padding: 6rpx 16rpx;
+    border-radius: 0rpx 0rpx 12rpx 12rpx;
+}
+
+.service-type {
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: black;
+    background: #fff9de;
+    padding: 6rpx 16rpx;
+    margin-left: 16rpx;
+    border-radius: 0rpx 0rpx 12rpx 12rpx;
+}
+
+.service-mode {
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #9ed733;
+    background: #e9f6d1;
+    padding: 6rpx 16rpx;
+    margin-left: 16rpx;
+    border-radius: 0rpx 0rpx 12rpx 12rpx;
+}
+
+
+.detail {
+    font-size: 24rpx;
+    padding-top: 12rpx;
+    padding-bottom: 12rpx;
+    background-image: url('/static/order/ud4.png');
+    background-size: cover;
+}
+.d-item-row {
+    display: flex;
+    height: 44rpx;
+    align-items: center;
+}
+.item-icon {
+    display: flex;
+    align-items: center;
+    padding-right: 8rpx;
+}
+.item-icon image {
+    height: 36rpx;
+    width: 36rpx;
+}
+
+
+.item-text {
+    color: #666666;
+}
+.item-v {
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+}
+
+
+.detail11 {
+    font-size: 24rpx;
+    padding-top: 12rpx;
+    padding-bottom: 12rpx;
+}
+.d-item-row {
+    display: flex;
+    height: 44rpx;
+    align-items: center;
+}
+.item-icon {
+    display: flex;
+    align-items: center;
+    padding-right: 8rpx;
+}
+.item-icon image {
+    height: 36rpx;
+    width: 36rpx;
+}
+
+
+.item-text {
+    color: #666666;
+}
+.item-v {
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+}
+
+
+.flexLR {
+    border: 4rpx dotted #eeeeee;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    overflow: hidden;
+}
+
+.nav-bar {
+    display: flex;
+    text-align: right;
+    justify-content: flex-end;
+}
+.btn {
+    height: 60rpx;
+    line-height: 60rpx;
+    background: #FFE05C;
+    margin-top: 20rpx;
+    text-align: center;
+    color: #fff;
+    margin-right: 16rpx;
+    border-radius: 30rpx;
+    color: #333;
+    padding-right: 24rpx;
+    padding-left: 24rpx;
+    font-size: 26rpx;
+    display: flex;
+}
+.text1 {
+    padding-left: 2rpx;
+    font-size: 24rpx;
+    color: #666;
+}
+
+
+.look-num-btn {
+    height: 60rpx;
+    line-height: 60rpx;
+    background: #999;
+    margin-top: 20rpx;
+    width: 160rpx;
+    text-align: center;
+    color: #fff;
+    margin-right: 16rpx;
+    border-radius: 8rpx;
+}
+
+
+.fontColor {
+    color: red;
+}
+
+
+/* 产品订单 */
+.product-order {
+    margin-top: 24rpx;
+}
+.developing {
+    text-align: center;
+    color: #666;
+}
+
+
+.planNumber {
+    font-size: 35rpx;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #93BC23;
+
+}
+
+.tabs{
+    background: #FFFFFF;
+}

pages/order/module/mescrollUni-item.vue

@@ -0,0 +1,281 @@
+<template>
+	<!--
+    swiper中的transfrom会使fixed失效,此时用height固定高度;
+    swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
+    -->
+	<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
+	<!-- top的高度等于悬浮菜单tabs的高度 -->
+	<mescroll-uni :ref="'mescrollRef' + i" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
+		:up="upOption" @up="upCallback" @emptyclick="emptyClick">
+		<view>
+			<view class="service-order">
+				<!-- 门店列表 -->
+				<view class="store-wrap">
+					<view :class="{ 'grayscale': item.forstStatus === '1' }">
+						<view @click="orderDetail(item)" class="">
+							<view class="store-list">
+								<view class="store-content">
+									<view class="content">
+										<view class="desc flex-row justify-start ">
+											<!-- <view class="time">
+                                                11111111111
+                                            </view> -->
+											<view class="service-type">
+
+												<!-- {{ item.serviceModeDesc }} -->
+												到店
+											</view>
+											<view class="service-mode">
+												<!-- <text>{{ item.serviceAttrDesc }}</text> -->
+												预约
+											</view>
+										</view>
+
+									</view>
+								</view>
+								<view class=" planNumber flex-col justify-center">
+									<text> {{ item.planNumber || '未排号' }}</text>
+								</view>
+							</view>
+							<view class="order-state">
+								<view class="order-num">
+									<view class="h-order-num">
+										<image src="/static/index/u217.png" mode=""></image>订单编号：{{ item.orderNo }}
+									</view>
+									<view class="h-order-text">
+										服务项目
+									</view>
+								</view>
+								<view class="order-state-name">
+									<text class="h-text1">{{ item.forstStatus === '1' ? '已冻结' : item.orderStatusDesc
+									}}</text>
+								</view>
+
+							</view>
+							<view class="flex-col detail11 ">
+								<view class="d-item-row ">
+									<view class="item-icon">
+										<image src="/static/order/ud1.png" mode=""></image>
+									</view>
+									<view class="item-text">
+										服务对象：<text class="item-v">{{ item.serviceObjectName }}</text>
+									</view>
+								</view>
+								<view class="d-item-row ">
+									<view class="item-icon">
+										<image src="/static/order/ud2.png" mode=""></image>
+									</view>
+									<view class="item-text">
+										服务门店：<text class="item-v">{{ item.storeName }}</text>
+									</view>
+								</view>
+								<view class="d-item-row ">
+									<view class="item-icon">
+										<image src="/static/order/ud14.png" mode=""></image>
+									</view>
+									<view class="item-text">
+										排号时段：<text class="item-v">{{ item.createTime }}</text>
+									</view>
+								</view>
+							</view>
+							<view class="detail flex-row justify-between">
+								<view class="flexLR">
+									<view>
+										<view class="d-item-row ">
+											<view class="item-icon">
+												<image src="/static/order/ud3.png" mode=""></image>
+											</view>
+											<view class="item-text">
+												服务日期：<text v-if="item.servicePersonName" class="item-v">{{
+											item.servicePersonName }}</text>
+												<text v-else class="item-v">2023-8-16</text>
+											</view>
+										</view>
+										<view class="d-item-row ">
+											<view class="item-icon">
+												<image src="/static/order/ud3.png" mode=""></image>
+											</view>
+											<view class="item-text">
+												服务时段：<text v-if="item.servicePersonName" class="item-v">{{
+											item.servicePersonName }}</text>
+												<text v-else class="item-v">15:30 -- 16:30</text>
+											</view>
+										</view>
+										<view class="d-item-row ">
+											<view class="item-icon">
+												<image src="/static/order/ud3.png" mode=""></image>
+											</view>
+											<view class="item-text">
+												服务技师：<text v-if="item.servicePersonName" class="item-v">{{
+											item.servicePersonName }}</text>
+												<text v-else class="item-v">签到成功自动分配</text>
+											</view>
+										</view>
+									</view>
+									<view class=" planNumber flex-col justify-center">
+										<text> {{ item.planNumber || '未排号' }}</text>
+									</view>
+								</view>
+							</view>
+							<view class="price">
+								订单总金额：<text class="fontColor" v-if="item.totalAmount"> ￥{{ item.totalAmount }}</text>
+								<text class="fontColor" v-else>￥0</text>
+							</view>
+						</view>
+						<view class="nav-bar">
+							<view class="btn" @click="gotoPayOrder(item)">
+								<u-icon name="scan" size="18" />
+								<text>扫码</text>
+							</view>
+							<view class="btn" @click="gotoPayOrder(item)" v-if="item.orderStatus == 1">
+								<text>去付款</text>
+							</view>
+							<view class="btn" v-else-if="item.orderStatus == 2">
+								<text>已取消</text>
+							</view>
+							<view @click="orderSign(item)" v-else-if="item.orderStatus == 4" class="btn">
+								立即排队
+								<!-- <text class="text1">点击开始排号</text> -->
+							</view>
+							<view @click="getOrderSign(item)" class="btn" v-else-if="item.orderStatus == 5">
+								<text>点击查看排号</text>
+							</view>
+							<view class="btn" v-else-if="item.orderStatus == 6">
+								<text>服务中</text>
+							</view>
+							<view class="btn" v-else-if="item.orderStatus == 7">
+								<text>排号过期</text>
+							</view>
+							<view @click="gotoEvaluate(item)" class="btn" v-else-if="item.orderStatus == 8">
+								<text>待评价</text>
+							</view>
+							<view @click="gotoPayOrder(item)" class="btn" v-else-if="item.orderStatus == 9">
+								<text>去支付预约费用</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+	</mescroll-uni>
+</template>
+
+<script>
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js"
+	export default {
+		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
+		components: {},
+
+		data() {
+			return {
+				downOption: {
+					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
+				},
+				upOption: {
+					auto: false, // 不自动加载
+					// page: {
+					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
+					// 	size: 10 // 每页数据的数量
+					// },
+					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
+					empty: {
+						icon: '/static/imageIcon/empty.png',
+						tip: '暂无内容', // 提示
+						// btnText: '去看看'
+					},
+					textNoMore: '没有更多了'
+				},
+				list: [],
+			}
+		},
+		props: {
+			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
+			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
+				type: Number,
+				default () {
+					return 0
+				}
+			},
+			dataTime: {
+				type: String,
+				default () {
+					return ''
+				}
+			},
+
+			tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			height: [Number, String], // mescroll的高度
+
+		},
+		watch: {
+
+		},
+
+		created() {},
+
+		methods: {
+
+
+
+			/*下拉刷新的回调 */
+			downCallback() {
+				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
+				// loadSwiper();
+				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
+				this.mescroll.resetUpScroll()
+			},
+			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
+			upCallback(page) {
+
+				//联网加载数据
+				let httpData = {
+					pageNum: page.num,
+					pageSize: 10,
+					type: this.index
+				}
+
+				this.$api.getMyCouponList(httpData).then((res) => {
+					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
+					this.mescroll.endSuccess(res.data.rows.length, res.data.rows.length === 10);
+					//设置列表数据
+					if (page.num === 1) this.list = []; //如果是第一页需手动制空列表
+					this.list = this.list.concat(res.data.rows); //追加新数据
+					console.log(this.list)
+				}).catch((err) => {
+					//联网失败, 结束加载
+					this.mescroll.endErr();
+				})
+
+
+			},
+
+			//点击空布局按钮的回调
+			emptyClick() {
+				uni.showToast({
+					title: '点击了按钮,具体逻辑自行实现'
+				})
+			},
+			// 搜索
+			doSearch() {
+				this.list = []; // 先清空列表,显示加载进度
+				this.mescroll.resetUpScroll();
+			},
+
+			gotoUseCoupon(item) {
+				console.log(item)
+			}
+
+		}
+	}
+</script>
+<style>
+	@import '/common/css/common.css';
+	@import './index.rpx.css';
+</style>