我的预定取消订单

@@ -32,7 +32,7 @@
           </div>
 
           <el-row class="pd20 mt10" justify="space-between" align="middle">
-            <el-col :lg="10">
+            <el-col :lg="9">
               <div v-if="b.orderType == 0">
                 <h3 class="name">{{b.name}}</h3>
                 <p v-if="language==0">{{b.messageObj?.roomStayDate}}</p>
@@ -78,13 +78,13 @@
                 <p>{{ b.extJsonObj.packageName }}</p>
               </div>
             </el-col>
-            <el-col :lg="4" class="text-center">
+            <el-col :lg="3" class="text-center">
               <span class="text-warning"> {{ language==0?'¥':'€' }}
                 <span class="bigMoney">{{language==0?b.total:b.totalEn}}</span>
               </span>
             </el-col>
 
-            <el-col :lg="4" >
+            <el-col :lg="6" >
               <div class="text-right mb20 text-danger">
                 <el-countdown value-style="color:#E60012;font-size:16px;" v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" format="mm:ss" :value="b.countdown" @finish="finish(b)"/>
               </div>
@@ -95,6 +95,10 @@
                 <el-button v-if="b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')" @click="goDetail(b)"
                            class="mb10" plain round type="primary" >
                   {{ language==0?'支付':'Pay' }}</el-button>
+                <el-button v-if="b.viewStatus==0"  @click="cancel(b)"  class="mb10" plain round type="warning" >
+                  {{ language==0?'取消订单':'Cancel Order' }}</el-button>
+                <el-button v-if="b.viewStatus==5"  @click="unsubscribe(b)"  class="mb10" plain round type="" >
+                  {{ language==0?'退订':'Unsubscribe' }}</el-button>
               </div>
             </el-col>
           </el-row>
@@ -107,15 +111,18 @@
 </template>
 
 <script setup>
-import {onMounted} from "@vue/runtime-core";
+import {onMounted,getCurrentInstance} from "@vue/runtime-core";
 import {useStorage} from "@vueuse/core/index";
 import {newbilllist} from "@/apiPc/common";
 import useUserStore from "@/store/modules/user";
 import dayjs from 'dayjs'
+import {cancelOrder2,cancelOrder} from "/@/apiPc/booking";
+
 const router = useRouter()
 const language= useStorage('language',0)
 const list = ref([])
 const user = useUserStore().user
+const {proxy} = getCurrentInstance()
 
 onMounted(()=>{
   getList()
@@ -132,10 +139,8 @@ function getList() {
       b.extJsonObj = JSON.parse(b.extJson) || {}
       if(b.surplus&&b.status == '0'&&(b.surplus!='0,0'&&b.surplus!='0')){
         b.countdown = Date.now() + Number((b.surplus.split(',')[0]*60 + b.surplus.split(',')[1])*10)
-        console.log(b.countdown)
       }
     }
-    console.log(list.value)
   })
 }
 function goDetail(b) {
@@ -147,6 +152,33 @@ function goDetail(b) {
     }
   })
 }
+
+const cancel = (row) => {
+//取消订单
+  proxy.$modal.confirm(language.value == 0 ? '确定取消订单吗 ?' :`Are you sure to cancel the order?`).then(() => {
+    return cancelOrder2(row.id).then(res=>{
+      getList()
+      ElMessage({
+        message: language.value == 0?'操作成功':'Successful operation!',
+        type: 'success'
+      })
+    })
+  })
+}
+
+const unsubscribe = (row) => {
+  proxy.$modal.confirm(language.value == 0 ?`确定退款吗 ?`:'Are you sure to refund?').then(() => {
+    return cancelOrder(row.id).then(res=>{
+      getList()
+      ElMessage({
+        message: language.value == 0?'操作成功':'Successful operation!',
+        type: 'success'
+      })
+    })
+  })
+}
+
+
 function toInvoice(){
   router.push({
     name: 'invoice'