订房和我的列表展示方式调整，支付倒计时功能优化调整

hookehuyr
Commit d69070fdd5855320b15f0bbe84fca021f44d4ff5 d69070fd 1 parent 2ca11cc0
Showing 4 changed files with 145 additions and 44 deletions
src/components/orderCard.vue
src/components/payCard.vue
src/pages/book/index.vue
src/pages/my/index.vue
--- a/src/components/orderCard.vue
View file @d69070f
+++ b/src/components/orderCard.vue
View file @d69070f
@@ -42,7 +42,7 @@
         </nut-col>
       </nut-row>
     </view>
-    <view style="padding: 0.5rem;">
+    <view style="padding: 0.5rem; padding-bottom: 0;">
       <nut-row>
         <nut-col span="6">
           <view @tap="showOrderInfo('id')" style="display: flex; align-items: center; margin: 20rpx 0;height: 60rpx;">
@@ -59,13 +59,9 @@
         </nut-col>
       </nut-row>
     </view>
-    <!-- <view v-if="flag" style="display: flex; justify-content: flex-end; font-size: 20rpx; margin-bottom: 1rem;"> -->
+    <view style="display: flex; justify-content: flex-end; font-size: 23rpx; margin-bottom: 1rem; margin-right: 1rem;">
-    <view style="display: flex; justify-content: flex-end; font-size: 20rpx; margin-bottom: 1rem;">
       <text>支付剩余时间</text>&nbsp;
-      <!-- <nut-countdown v-model="resetTime" :end-time="end" @end="onEnd('id')">
+      <text style="font-size: 23rpx; color: red;">{{ formatTime(remain_time) }}</text>
-        <text style="font-size: 20rpx; color: red;">{{ resetTime.m }}:{{ resetTime.s }}</text>
-      </nut-countdown> -->
-      <text style="font-size: 20rpx; color: red;">30:00</text>
     </view>
     <view v-if="show_info">
       <view style="border-bottom: 1px dashed #979797; padding: 0.5rem;">
@@ -124,24 +120,44 @@
 </template>
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import Taro from '@tarojs/taro'
 import { IconFont } from '@nutui/icons-vue-taro';
-const emit = defineEmits(["onPay"]);
+/**
+ * 格式化时间
+ * @param {*} seconds
+ */
+function formatTime(seconds) {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const remainingSeconds = seconds % 60;
-const end = ref(Date.now() + 60 * 1000);
+  let formattedTime = "";
-const resetTime = ref({
+
-  m: '00',
+  if (hours > 0) {
-  s: '00'
+    formattedTime += hours.toString().padStart(2, "0") + ":";
-});
+  }
-const flag = ref(false);
+  if (minutes > 0 || hours > 0) {
-const onEnd = (id) => {
+    formattedTime += minutes.toString().padStart(2, "0") + ":";
-  console.warn(id);
+  }
-  flag.value = false;
+
+  formattedTime += remainingSeconds.toString().padStart(2, "0");
+
+  return formattedTime;
 }
+const props = defineProps({
+  data: {
+    type: Object,
+    default: {}
+  }
+});
+const emit = defineEmits(["onPay"]);
+
+const remain_time = ref(0); // 剩余时间秒数
+
 const show_info = ref(false);
 const showOrderInfo = (id) => {
   show_info.value = !show_info.value;
@@ -160,9 +176,10 @@ const cancelOrder = (id) => {
     }
   })
 }
-const visible = ref(false);
+
 const payOrder = (id) => {
-  emit("onPay", id);
+  // TODO: 把剩余支付时间发到支付组件上显示
+  emit("onPay", { id, remain_time: remain_time.value });
   // visible.value = !visible.value;
   // Taro.showToast({
   //   title: '支付已超时',
@@ -170,6 +187,21 @@ const payOrder = (id) => {
   //   duration: 2000
   // });
 }
+
+let timeId = null;
+
+onMounted(() => {
+  console.warn(props.data)
+  remain_time.value = props.data.remain_time;
+  // 进入页面后，开始倒计时
+  timeId = setInterval(() => {
+    remain_time.value ? remain_time.value -= 1 : 0;
+  }, 1000);
+});
+
+onUnmounted(() => {
+  timeId && clearInterval(timeId);
+})
 </script>
 <style lang="less">
--- a/src/components/payCard.vue
View file @d69070f
+++ b/src/components/payCard.vue
View file @d69070f
 <!--
  * @Date: 2023-12-20 14:11:11
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-20 14:56:37
+ * @LastEditTime: 2023-12-20 16:25:26
  * @FilePath: /meihuaApp/src/components/payCard.vue
  * @Description: 文件描述
 -->
@@ -11,7 +11,7 @@
       <view style="padding: 2rem 1rem; text-align: center;">
         <view style="font-size: 32rpx;">实付金额</view>
         <view style="color: red; margin: 10rpx 0;"><text style="font-size: 50rpx;">￥</text><text style="font-size: 80rpx;">{{ price }}</text></view>
-        <view style="font-size: 28rpx; margin-bottom: 20rpx;">支付剩余时间 <text style="color: red;">{{ remain_time }}</text></view>
+        <view style="font-size: 28rpx; margin-bottom: 20rpx;">支付剩余时间 <text style="color: red;">{{ formatTime(remain_time) }}</text></view>
         <nut-button block color="#6A4925" @tap="goToPay">立即支付</nut-button>
       </view>
     </nut-action-sheet>
@@ -20,7 +20,31 @@
 <script setup>
 import Taro from '@tarojs/taro'
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from 'vue'
+
+/**
+ * 格式化时间
+ * @param {*} seconds
+ */
+ function formatTime(seconds) {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const remainingSeconds = seconds % 60;
+
+  let formattedTime = "";
+
+  if (hours > 0) {
+    formattedTime += hours.toString().padStart(2, "0") + ":";
+  }
+
+  if (minutes > 0 || hours > 0) {
+    formattedTime += minutes.toString().padStart(2, "0") + ":";
+  }
+
+  formattedTime += remainingSeconds.toString().padStart(2, "0");
+
+  return formattedTime;
+}
 const props = defineProps({
   visible: {
@@ -43,6 +67,8 @@ const id = ref('');
 const price = ref('');
 const remain_time = ref('');
+let timeId = null;
+
 watch(
   () => props.visible,
   (val) => {
@@ -57,6 +83,14 @@ watch(
 )
 onMounted(() => {
+  // 进入页面后，开始倒计时
+  timeId = setInterval(() => {
+    remain_time.value ? remain_time.value -= 1 : 0;
+  }, 1000);
+})
+
+onUnmounted(() => {
+  timeId && clearInterval(timeId);
 })
 const goToPay = () => {
--- a/src/pages/book/index.vue
View file @d69070f
+++ b/src/pages/book/index.vue
View file @d69070f
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-19 15:01:47
+ * @LastEditTime: 2023-12-20 16:31:30
  * @FilePath: /meihuaApp/src/pages/book/index.vue
  * @Description: 文件描述
 -->
@@ -14,16 +14,16 @@
       <view class="book-type">
         <nut-tabs v-model="value" @click="onTabClick" title-scroll title-gutter="10" name="tabName" background="#FFF" color="#4C2E08" animated-time="0">
           <nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key">
-            <view v-if="showContent" class="book-list">
-              <scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
-                <view v-for="(item, index) in bookList" :key="index">
-                  <room-card :key="index" :status="item.status"></room-card>
-                  <view v-if="index === bookList.length - 1" style="height: 2rem;"></view>
-                </view>
-              </scroll-view>
-            </view>
           </nut-tab-pane>
         </nut-tabs>
+        <view v-if="showContent" class="book-list">
+          <scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
+            <view v-for="(item, index) in bookList" :key="index">
+              <room-card :key="index" :status="item.status"></room-card>
+              <view v-if="index === bookList.length - 1" style="height: 2rem;"></view>
+            </view>
+          </scroll-view>
+        </view>
       </view>
     </view>
     <nav-bar activated="book" />
--- a/src/pages/my/index.vue
View file @d69070f
+++ b/src/pages/my/index.vue
View file @d69070f
 <!--
  * @Date: 2023-12-13 11:13:13
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-20 15:12:46
+ * @LastEditTime: 2023-12-20 16:16:11
  * @FilePath: /meihuaApp/src/pages/my/index.vue
  * @Description: 文件描述
 -->
@@ -15,7 +15,7 @@
         <text style="margin-left: 30rpx;">阿忆妞妞</text>
       </view>
       <view style="flex: 1;">
-        <IconFont name="edit"></IconFont>
+        <IconFont name="edit" @tap="goToEdit"></IconFont>
       </view>
       <view style="position: absolute; left: 0%; right: 0%; bottom: 0%; height: 20rpx; width: 100%; background-color: #FFF; border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"></view>
     </view>
@@ -24,16 +24,16 @@
       <view>
         <nut-tabs v-model="value" title-scroll title-gutter="0" name="tabName" background="#FFF" color="#6A4925" animated-time="0">
           <nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key">
-            <view v-if="showContent" class="book-list">
-              <scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
-                <view v-for="(item, index) in 5" :key="index">
-                  <order-card :key="index" @onPay="onPay"></order-card>
-                  <view v-if="index === 4" style="height: 2rem;"></view>
-                </view>
-              </scroll-view>
-            </view>
           </nut-tab-pane>
         </nut-tabs>
+        <view v-if="showContent" class="book-list">
+          <scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
+            <view v-for="(item, index) in orderList" :key="index">
+              <order-card :key="index" :data="item" @onPay="onPay"></order-card>
+              <view v-if="index === orderList.length-1" style="height: 2rem;"></view>
+            </view>
+          </scroll-view>
+        </view>
       </view>
     </view>
@@ -68,10 +68,39 @@ const tabList = ref([{
   key: '3',
 }]);
+const orderList = ref([
+  {
+    id: 1,
+    name: '阿忆妞妞1',
+    phone: '138****8888',
+    address: '北京市朝阳区',
+    time: '2023-12-13 11:13:13',
+    price: 1200,
+    remain_time: 10,
+  },
+  {
+    id: 2,
+    name: '阿忆妞妞2',
+    phone: '138****8888',
+    address: '北京市朝阳区',
+    time: '2023-12-13 11:13:13',
+    price: 1200,
+    remain_time: 100,
+  },
+  {
+    id: 3,
+    name: '阿忆妞妞3',
+    phone: '138****8888',
+    address: '北京市朝阳区',
+    time: '2023-12-13 11:13:13',
+    price: 1200,
+    remain_time: 100,
+  },
+])
 const show_pay = ref(false);
 const payData = ref({});
-const onPay = (id) => {
+const onPay = ({ id, remain_time }) => {
   console.warn(id);
   // Taro.showToast({
   //   title: '支付已超时',
@@ -81,12 +110,18 @@ const onPay = (id) => {
   show_pay.value = true;
   payData.value.id = '123';
   payData.value.price = 1200;
-  payData.value.remain_time = '30:00';
+  payData.value.remain_time = remain_time;
 }
 const onPayClose = () => {
   show_pay.value = false;
 }
+
+const goToEdit = () => {
+  Taro.navigateTo({
+    url: '/pages/myInfo/index',
+  });
+}
 </script>
 <script>