|
- <template>
- <div class="cancel-view">
- <h1 v-if="!success">cancelling reservation {{$route.params.token}} ...</h1>
- <h1 v-else>
- your reservation got cancelled.<br>
- thanks for letting us know!
- </h1>
-
- <div v-if="error">
- <h2>
- Oh no! sth went wrong.
- </h2>
- <p>
- {{error.detail}}
- </p>
- <p>
- please send us an email with your reservation token <span class="color: #0ff">{{$route.params.token}}</span>, so we can have a look at it:<br>
- reservation@ck.si
- </p>
- </div>
-
-
- </div>
- </template>
-
- <script>
- export default {
- name: 'Cancel',
- data() {
- return {
- success: false,
- error: false,
- }
- },
- methods: {
- async cancel() {
- let data = {
- token: this.$route.params.token
- }
- const response = await fetch(
- `${process.env.VUE_APP_API_URL}guest/cancel`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify(data),
- }
- )
- if (response.status === 200) {
- this.success = true
- } else {
- this.error = await response.json()
- }
-
- }
- },
- mounted () {
- this.cancel()
- },
-
- }
- </script>
-
- <style>
- .cancel-view {
- min-height: 100vh;
- margin: 2em;
- }
- </style>
|