联调取消订单API流程

 /*
  * @Date: 2023-12-22 10:29:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-27 18:09:49
+ * @LastEditTime: 2023-12-28 09:55:37
  * @FilePath: /meihuaApp/src/api/index.js
  * @Description: 文件描述
  */
@@ -17,6 +17,7 @@ const Api = {
   GET_ROOM: '/srv/?a=room_data&t=get_room',
   ADD_ORDER: '/srv/?a=room_data&t=add_order',
   MY_ORDER: '/srv/?a=room_data&t=my_order',
+  ORDER_CANCEL: '/srv/?a=room_data&t=order_cancel',
   PAY: '/srv/?a=pay',
   PAY_CHECK: '/srv/?a=pay_check',
 }
@@ -110,3 +111,10 @@ export const payCheckAPI = (params) => fn(fetch.post(Api.PAY_CHECK, params));
  * @returns
  */
 export const myOrderAPI = (params) => fn(fetch.get(Api.MY_ORDER, params));
+
+/**
+ * @description: 取消订单
+ * @param id
+ * @returns
+ */
+export const orderCancelAPI = (params) => fn(fetch.post(Api.ORDER_CANCEL, params));

@@ -45,7 +45,7 @@
     <view class="order-card-control">
       <nut-row>
         <nut-col span="6">
-          <view class="order-info" @tap="showOrderInfo('id')">
+          <view class="order-info" @tap="showOrderInfo(order_id)">
             <text>入住信息</text>&nbsp;
             <IconFont v-if="show_info" name="rect-up" size="12" color="#7D7C7C"></IconFont>
             <IconFont v-else name="rect-down" size="12" color="#7D7C7C"></IconFont>
@@ -54,8 +54,8 @@
         <!-- 待支付状态下，剩余时间归零 操作隐藏 -->
         <nut-col span="18">
           <view v-if="showBtn" class="order-control">
-            <nut-button v-if="pay_show || props.data.status === '5'" @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>
+            <nut-button v-if="pay_show || props.data.status === 5" @tap="cancelOrder(order_id)" plain color="#6A4925" size="small">取消订单</nut-button>&nbsp;
+            <nut-button v-if="pay_show" @tap="payOrder(order_id)" color="#6A4925" size="small">立即支付</nut-button>
             <view v-if="delay_pay_show">
               <text style="font-size: 23rpx; color: red;">
                 支付超时，请重新下单！
@@ -132,6 +132,11 @@
 import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
 import Taro from '@tarojs/taro'
 import { IconFont } from '@nutui/icons-vue-taro';
+import { orderCancelAPI } from '@/api/index'
+
+/**
+ * 房间状态（9=已入住，2=已取消，3=未支付，5=已支付）
+ * /
 
 
 /**
@@ -192,17 +197,17 @@ const getDayDifference = (startDate, endDate) => {
 }
 
 const STATUS_COLOR = {
-  '2': '#CECECE',
-  '3': '#D5842D',
-  '5': '#6A4925',
-  '9': '#656565',
+  2: '#CECECE',
+  3: '#D5842D',
+  5: '#6A4925',
+  9: '#656565',
 }
 
 const STATUS_TEXT = {
-  '2': '已取消',
-  '5': '待入住',
-  '9': '已入住',
-  '3': '待支付',
+  2: '已取消',
+  5: '待入住',
+  9: '已入住',
+  3: '待支付',
 }
 
 const id = ref(''); // 房间id
@@ -241,12 +246,12 @@ const booking_info = ref({
 
 // 日历背景色灰色的条件判断
 const calcBgColor = computed(() => {
-  return props.data.status === '9' || props.data.status === '2';
+  return props.data.status === 9 || props.data.status === 2;
 });
 
 // 显示操作按钮的条件判断
 const showBtn = computed(() => {
-  return props.data.status === '5' || props.data.status === '3';
+  return props.data.status === 5 || props.data.status === 3;
 });
 
 /**
@@ -295,9 +300,9 @@ const showOrderInfo = (id) => {
 // 控制待支付状态下的显示
 const pay_show = computed(() => {
   let flag = false;
-  if (props.data.status === '3' && remain_time.value) { // 倒计时进行时
+  if (props.data.status === 3 && remain_time.value) { // 倒计时进行时
     flag = true;
-  } else if (props.data.status === '3' && !remain_time.value) { // 倒计时结束
+  } else if (props.data.status === 3 && !remain_time.value) { // 倒计时结束
     flag = false;
   }
   return flag;
@@ -305,24 +310,26 @@ const pay_show = computed(() => {
 
 // 支付超时显示
 const delay_pay_show = computed(() => {
-  return props.data.status === '3' && !remain_time.value;
+  return props.data.status === 3 && !remain_time.value;
 })
 
 const cancelOrder = (id) => {
   Taro.showModal({
     title: '温馨提示',
     content: '是否确认取消订单？',
-    success: function (res) {
+    success: async (res) => {
       if (res.confirm) {
-        console.log('用户点击确定')
-        // TODO：取消订单
         if (id) {
-          Taro.showToast({
-            title: '取消成功',
-            icon:'success',
-            duration: 2000
-          });
-          // TODO：刷新当前列表接口
+          // 取消订单
+          const { code, data } = await orderCancelAPI({id});
+          if (code) {
+            Taro.showToast({
+              title: '取消成功',
+              icon:'success',
+              duration: 2000
+            });
+            props.data.status = 2; // 取消订单状态置为已取消
+          }
         }
       } else if (res.cancel) {
         console.log('用户点击取消')
@@ -361,7 +368,8 @@ onMounted(async () => {
   order_num.value = props.data.order_num;
   plan_in.value = props.data.plan_in;
   plan_out.value = props.data.plan_out;
-  remain_time.value = props.data.pay_time;
+  // remain_time.value = props.data.pay_time;
+  remain_time.value = 1000;
   contact_name.value = props.data.contact_name;
   contact_phone.value = props.data.contact_phone;
   order_remark.value = props.data.order_remark;