feat: 前台-订单挂起/悬浮

src/components/order/fiveOrders.vue

+<template>
+  <u-popup
+    v-model="show"
+    mode="center"
+    safe-area-inset-bottom
+    width="650rpx"
+    border-radius="12"
+    @close="handleClose"
+    close-icon-color="#FFFFFF"
+  >
+    <view class="pop-view">
+      <view class="loading-view" v-if="!loaded">
+        <u-loading mode="flower"></u-loading>
+      </view>
+      <view v-else>
+        <view v-for="item in orderList" :key="item.orderId">
+          <OrderCell
+            :orderData="item"
+            :location="[]"
+            @click="handleClickCell"
+            @action="handleClickButton"
+          >
+          </OrderCell>
+        </view>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+import OrderCell from '@/components/order/index.vue'
+
+export default {
+  components: {
+    OrderCell,
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      orderList: [],
+      show: false,
+      loaded: false,
+    }
+  },
+  computed: {},
+  watch: {
+    visible(val) {
+      this.show = val
+      if (val) {
+        this.getOrderList()
+      }
+    },
+  },
+  created() {
+    console.log('-----------created----------')
+    this.show = this.visible
+  },
+  methods: {
+    getOrderList() {
+      this.loaded = false
+      var param = {
+        pageNumber: 1,
+        pageSize: 5,
+        keyword: '',
+        type: 'zuijinlianxi',
+      }
+      this.$u.api.listOrder(param).then((res) => {
+        if (res.code == 200) {
+          this.orderList = res.data.list || []
+        } else {
+          console.log(res.message, '获取订单数量失败！')
+        }
+        this.loaded = true
+      })
+    },
+    handleClose() {
+      console.log('----------handleClose-------------')
+      this.$emit('update:visible', false)
+      this.$emit('close')
+    },
+
+    handleClickCell(item, type, showCountTime) {
+      this.$emit('update:visible', false)
+      this.$emit('click', item, type, showCountTime)
+    },
+    handleClickButton(item, type) {
+      this.$emit('update:visible', false)
+      this.$emit('click', item, type, showCountTime)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.pop-view {
+  padding: 30rpx;
+  height: 800rpx;
+  .loading-view {
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

src/components/parts/applyButton.vue

 <template>
-	<!-- 申请配件按钮 -->
-	<view class="apply-button">
-		<u-button :custom-style="customStyle" shape="circle" @click.stop="handleClick" type="primary">
-			<u-icon class="apply-icon" name="plus"></u-icon>
-			<text class="apply-text" v-if="showText">申请备件</text>
-		</u-button>
-	</view>
+  <!-- 申请配件按钮 -->
+  <view class="apply-button" v-show="show">
+    <u-button
+      :custom-style="customStyle"
+      shape="circle"
+      @click.stop="handleClick"
+      type="primary"
+    >
+      <u-icon class="apply-icon" :name="iconName"></u-icon>
+      <text class="apply-text" v-if="showText">{{ text }}</text>
+    </u-button>
+  </view>
 </template>
 
 <script>
-	export default {
-		props: {
-			type: { // 按钮宽'collapse': '80rpx', 'expand': '220rpx'
-				type: String,
-				default: 'expand'
-			}
-		},
-		computed: {
-			typeWidth() {
-				return {
-					'collapse': '80rpx',
-					'expand': '220rpx'
-				}
-			},
-			showText() {
-				return this.type == 'expand'
-			},
-			customStyle() {
-				return {
-					'height': '80rpx',
-					'width': this.typeWidth[this.type],
-				}
-			}
-		},
-		created() {
-			setTimeout(()=> {
-				this.$emit('update:type', 'collapse')
-			}, 3000)
-		},
-		methods: {
-			handleClick() {
-				this.$emit('click')
-			},
-		}
-	}
+export default {
+  props: {
+    type: {
+      // 按钮宽'collapse': '80rpx', 'expand': '220rpx'
+      type: String,
+      default: 'expand',
+    },
+    text: {
+      type: String,
+      default: '申请备件',
+    },
+    iconName: {
+      type: String,
+      default: 'plus',
+    },
+    show: {
+      type: Boolean,
+      default: true,
+    },
+    clickedType: {
+      // normal 点击之后不隐藏； hidden 点击之后隐藏
+      type: String,
+      default: 'normal',
+    },
+  },
+  computed: {
+    typeWidth() {
+      return {
+        collapse: '80rpx',
+        expand: '220rpx',
+      }
+    },
+    clickedHidden() {
+      return this.clickedType == 'hidden'
+    },
+    typeOpacity() {
+      return {
+        collapse: this.clicked == 0 ? '0.75' : '1',
+        expand: '1',
+      }
+    },
+    showText() {
+      return this.type == 'expand'
+    },
+    customStyle() {
+      return {
+        height: '80rpx',
+        width: this.typeWidth[this.type],
+        opacity: this.typeOpacity[this.type],
+      }
+    },
+  },
+  data() {
+    return {
+      clicked: 0, // 0 不活跃；>1 活跃中
+    }
+  },
+  created() {
+    setTimeout(() => {
+      this.$emit('update:type', 'collapse')
+    }, 3000)
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.clicked += 1
+        setTimeout(() => {
+          // 三秒不点击，算失去活跃
+          this.clicked -= 1
+        }, 3000)
+      }
+    },
+  },
+  methods: {
+    handleClick() {
+      if (this.clickedHidden) {
+        this.$emit('update:show', false)
+      }
+      this.$emit('click')
+    },
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-	.apply-button {
-		.apply-icon {
-			font-size: 36rpx;
-		}
-		.apply-text {
-			font-size: 32rpx;
-			padding-left: 10rpx;
-		}
-	}
-</style>
+.apply-button {
+  .apply-icon {
+    font-size: 36rpx;
+  }
+  .apply-text {
+    font-size: 32rpx;
+    padding-left: 10rpx;
+  }
+}
+</style>

src/pages/index/index.vue

@@ -102,6 +102,18 @@
           <view class="bottom-line-view"></view>
         </view>
       </scroll-view>
+      <view class="fixed-button">
+        <ApplyButton
+          :type.sync="buttonType"
+          clickedType="hidden"
+          :show.sync="showApplyButton"
+          @click="visible = true"
+        />
+      </view>
+      <FiveOrders
+        :visible.sync="visible"
+        @close="showApplyButton = true"
+      ></FiveOrders>
     </view>
   </TabBarPage>
 </template>
@@ -111,12 +123,16 @@ import TabBarPage from '@/components/tabBarList/index.vue'
 import NoOrder from '@/components/order/noOrder.vue'
 const app = getApp()
 import OrderCell from '@/components/order/index.vue'
+import ApplyButton from '@/components/parts/applyButton.vue'
+import FiveOrders from '@/components/order/fiveOrders.vue'
 
 export default {
   components: {
     OrderCell,
     TabBarPage,
     NoOrder,
+    ApplyButton,
+    FiveOrders,
   },
   data() {
     return {
@@ -142,6 +158,9 @@ export default {
       old: {
         scrollTop: 0,
       },
+      buttonType: 'expand', // 申请按钮宽 collapse': '80rpx', 'expand': '220rpx''
+      showApplyButton: true,
+      visible: false,
     }
   },
   watch: {
@@ -234,10 +253,10 @@ export default {
         }
         self.search.pageNumber = 0
         self.loadedOrder = false
-        self.loadOrderList()
         await app.getBaseInfo(self, callBack)
         if (this.status == 7) {
           this.getLocation()
+          self.loadOrderList()
         }
         this.loaded = true
       } else {
@@ -259,7 +278,7 @@ export default {
         }
       })
     },
-    loadOrderList() {
+    async loadOrderList() {
       this.search.pageNumber += 1
       let self = this
       // 加载订单列表
@@ -593,4 +612,9 @@ export default {
     font-size: 24rpx;
   }
 }
+.fixed-button {
+  position: fixed;
+  right: 10rpx;
+  bottom: 40rpx;
+}
 </style>