fix 数据操作优化

@@ -27,7 +27,7 @@
         </nut-col>
         </nut-col>
       </nut-row>
       </nut-row>
     </view>
     </view>
-    <view :class="['calendar-select-page', props.data.status === 'enable' || props.data.status === 'cancel' ? 'bg-gray' : '']">
+    <view :class="['calendar-select-page', calcBgColor ? 'bg-gray' : '']">
       <nut-row gutter="10">
       <nut-row gutter="10">
         <nut-col span="9">
         <nut-col span="9">
           <view class="check-in-text">入住日期</view>
           <view class="check-in-text">入住日期</view>
@@ -52,16 +52,21 @@
           </view>
           </view>
         </nut-col>
         </nut-col>
         <!-- 待支付状态下，剩余时间归零 操作隐藏 -->
         <!-- 待支付状态下，剩余时间归零 操作隐藏 -->
-        <nut-col span="18" v-if="no_pay_show">
-          <view v-if="props.data.status === 'no-pay' || props.data.status === 'apply'" class="order-control">
-            <nut-button @tap="cancelOrder('id')" plain color="#6A4925" size="small">取消订单</nut-button>&nbsp;
-            <nut-button v-if="props.data.status !== 'apply'" @tap="payOrder('id')" color="#6A4925" size="small">立即支付</nut-button>
+        <nut-col span="18">
+          <view v-if="showBtn" class="order-control">
+            <nut-button v-if="pay_show || props.data.status === 'apply'" @tap="cancelOrder('id')" plain color="#6A4925" size="small">取消订单</nut-button>&nbsp;
+            <nut-button v-if="pay_show" @tap="payOrder('id')" color="#6A4925" size="small">立即支付</nut-button>
+            <view v-if="delay_pay_show">
+              <text style="font-size: 23rpx; color: red;">
+                支付超时，请重新下单！
+              </text>
+            </view>
           </view>
           </view>
         </nut-col>
         </nut-col>
       </nut-row>
       </nut-row>
     </view>
     </view>
     <!-- 待支付状态下，剩余时间归零 显示隐藏 -->
     <!-- 待支付状态下，剩余时间归零 显示隐藏 -->
-    <view v-if="no_pay_show" class="order-remain-time">
+    <view v-if="pay_show" class="order-remain-time">
       <text>支付剩余时间</text>&nbsp;
       <text>支付剩余时间</text>&nbsp;
       <text style="font-size: 23rpx; color: red;">
       <text style="font-size: 23rpx; color: red;">
         {{ formatTime(remain_time) }}
         {{ formatTime(remain_time) }}
@@ -124,7 +129,7 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, computed, } from 'vue'
 import Taro from '@tarojs/taro'
 import Taro from '@tarojs/taro'
 import { IconFont } from '@nutui/icons-vue-taro';
 import { IconFont } from '@nutui/icons-vue-taro';
 
 
@@ -142,6 +147,16 @@ const STATUS_TEXT = {
   'no-pay': '待支付',
   'no-pay': '待支付',
 }
 }
 
 
+// 日历背景色灰色的条件判断
+const calcBgColor = computed(() => {
+  return props.data.status === 'enable' || props.data.status === 'cancel';
+});
+
+// 显示操作按钮的条件判断
+const showBtn = computed(() => {
+  return props.data.status === 'apply' || props.data.status === 'no-pay';
+});
+
 /**
 /**
  * 格式化时间
  * 格式化时间
  * @param {*} seconds
  * @param {*} seconds
@@ -182,7 +197,7 @@ const showOrderInfo = (id) => {
 }
 }
 
 
 // 控制待支付状态下的显示
 // 控制待支付状态下的显示
-const no_pay_show = computed(() => {
+const pay_show = computed(() => {
   let flag = false;
   let flag = false;
   if (props.data.status === 'no-pay' && remain_time.value) { // 倒计时进行时
   if (props.data.status === 'no-pay' && remain_time.value) { // 倒计时进行时
     flag = true;
     flag = true;
@@ -192,6 +207,11 @@ const no_pay_show = computed(() => {
   return flag;
   return flag;
 });
 });
 
 
+// 支付超时显示
+const delay_pay_show = computed(() => {
+  return props.data.status === 'no-pay' && !remain_time.value;
+})
+
 const cancelOrder = (id) => {
 const cancelOrder = (id) => {
   Taro.showModal({
   Taro.showModal({
     title: '温馨提示',
     title: '温馨提示',
@@ -199,6 +219,15 @@ const cancelOrder = (id) => {
     success: function (res) {
     success: function (res) {
       if (res.confirm) {
       if (res.confirm) {
         console.log('用户点击确定')
         console.log('用户点击确定')
+        // TODO：取消订单
+        if (id) {
+          Taro.showToast({
+            title: '取消成功',
+            icon:'success',
+            duration: 2000
+          });
+          // TODO：刷新当前列表接口
+        }
       } else if (res.cancel) {
       } else if (res.cancel) {
         console.log('用户点击取消')
         console.log('用户点击取消')
       }
       }

 <!--
 <!--
  * @Date: 2022-09-19 14:11:06
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-26 17:21:40
+ * @LastEditTime: 2023-12-27 10:55:11
  * @FilePath: /meihuaApp/src/pages/confirm/index.vue
  * @FilePath: /meihuaApp/src/pages/confirm/index.vue
  * @Description: 确认订单页面
  * @Description: 确认订单页面
 -->
 -->
@@ -271,6 +271,7 @@ const goPay = () => {
       show_pay.value = true;
       show_pay.value = true;
       payData.value.id = '订单ID';
       payData.value.id = '订单ID';
       payData.value.price = room_price_info.value.discount * book_count.value * booking_info.value.days;
       payData.value.price = room_price_info.value.discount * book_count.value * booking_info.value.days;
+      // TODO: 数据从哪里过去？
       payData.value.remain_time = '1000'; // 支付失效秒数
       payData.value.remain_time = '1000'; // 支付失效秒数
     }, 1000);
     }, 1000);
   }
   }

 <!--
 <!--
  * @Date: 2023-12-13 11:13:13
  * @Date: 2023-12-13 11:13:13
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-22 12:17:30
+ * @LastEditTime: 2023-12-27 10:55:44
  * @FilePath: /meihuaApp/src/pages/my/index.vue
  * @FilePath: /meihuaApp/src/pages/my/index.vue
  * @Description: 我的页面
  * @Description: 我的页面
 -->
 -->
@@ -71,7 +71,7 @@ const orderList = ref([
     name: '阿忆妞妞1',
     name: '阿忆妞妞1',
     phone: '138****8888',
     phone: '138****8888',
     price: 1200,
     price: 1200,
-    remain_time: 10,
+    remain_time: 1000,
     status: 'no-pay',
     status: 'no-pay',
   },
   },
   {
   {