vue-ptc/src/pages/repair/history.vue

<template>
  <div class="p-repair">
    <h3 class="ptc-title">Confirm appointment</h3>
    <div v-if="!list.length" class="ptc-empty">
      <i class="ptc-empty-img"></i>
      <p class="ptc-empty-txt">No appointment yet</p>
    </div>
    <div v-for="item of list" :key="item.id" class="ptc-block wrapper">
      <div class="inner">
        <div class="block-title">
          <span class="text">{{ item.pickup_time }} {{ item.shop_name }}</span>
          <span class="ptc-tag" :class="`s${item.audit_status}`">{{
            item.audit_status == 0
              ? 'Under review'
              : item.audit_status == 1
              ? 'Approved'
              : 'Canceled'
          }}</span>
        </div>
        <div class="cell-group mt48">
          <div class="cell">
            <span class="cell-label">Phone Brand:</span>
            <span class="cell-value">{{ item.phone_brand }}</span>
          </div>
          <div class="cell">
            <span class="cell-label">Phone Model:</span>
            <span class="cell-value">{{ item.phone_model }}</span>
          </div>
          <div class="cell">
            <span class="cell-label">Phone Number:</span>
            <span class="cell-value">{{ item.phone_number }}</span>
          </div>
          <div class="cell">
            <span class="cell-label">IMEI:</span>
            <span class="cell-value">{{ item.phone_imei }}</span>
          </div>
          <div class="cell">
            <span class="cell-label">Service:</span>
            <span class="cell-value">{{ item.fix_name }}</span>
          </div>
          <div class="cell">
            <span class="cell-label">Member Price:</span>
            <span class="cell-value">${{ item.price }}</span>
          </div>
          <div class="cell mt48">
            <span class="cell-label">Postscript:</span>
            <span class="cell-value">{{ item.remark }}</span>
          </div>
        </div>
      </div>
      <div class="button-group">
        <button
          v-if="
            item.audit_status == 2 ||
            (item.audit_status == 1 && item.expired == 1)
          "
          class="ptc-button ptc-button--stroke"
          @click="deleteRepair(item)"
        >
          Delete
        </button>
        <template v-else>
          <button
            class="ptc-button"
            @click="$router.push('/repair/appointment?id=' + item.id)"
          >
            Reschedule
          </button>
          <button
            class="ptc-button ptc-button--stroke"
            @click="cancelRepair(item)"
          >
            Cancel
          </button>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import * as api from '@/service/repair'

export default defineComponent({
  async beforeRouteEnter(to, from, next) {
    const { results } = await api.getRepairList()
    next(vm => (vm.list = results))
  },
  data() {
    return {
      /** @type {any[]} */
      list: [],
    }
  },
  methods: {
    async cancelRepair(item) {
      await api.cancelRepair(item.id)
      item.audit_status = 2
    },
    async deleteRepair(item) {
      await api.deleteRepair(item.id)
      this.list.splice(this.list.indexOf(item), 1)
    },
  },
})
</script>

<style lang="scss" src="./index.scss"></style>