选项卡切换/确定要取消订单吗?获取对应的字典数据/前端获取当前用户的信息

admin

选项卡切换/确定要取消订单吗?获取对应的字典数据/前端获取当前用户的信息

<template>
  <!-- 页面容器 -->
  <div class="orderList-page">
    <el-tabs v-model="activeTab" @tab-change="handleTableChange">
      <el-tab-pane label="全部订单" name="全部订单"/>
      <el-tab-pane label="待入住" name="0"/>
      <el-tab-pane label="已入住" name="1"/>
      <el-tab-pane label="已完成" name="2"/>
      <el-tab-pane label="已取消" name="3"/>
    </el-tabs>

    <!-- 订单列表区域 -->
    <div>
      <el-card v-for="order in orderList" :key="order.orderId" class="order-card">
        <!-- 订单头部信息 -->
        <div class="order-header">
          <!-- 订单号 -->
          <div class="order-number">订单号: {{ order.orderId }}</div>
          <!-- 订单状态 -->
          <div class="order-status" :class="order.status">
            <dict-tag :options="order_status" :value="order.status"/>
          </div>
        </div>
        <!-- 订单内容信息 -->
        <div class="order-content">
          <!-- 房间信息 -->
          <div class="room-info">
            <!-- 房间类型图片 -->
            <image-preview :src="order.image" class="room-image"/>
            <!-- 房间详情 -->
            <div class="room-details">
              <h3>{{ order.name }}</h3>
              <p>{{ order.checkInDate }} 至 {{ order.checkOutDate }}</p>
              <p>{{ order.nights }}晚 | {{ order.rooms }}间房</p>
            </div>
          </div>
          <!-- 订单价格 -->
          <div class="order-price">
            <div class="price-label">总价</div>
            <div class="price">¥{{ order.totalPrice }}</div>
          </div>
        </div>
        <!-- 订单底部操作区域 -->
        <div class="order-footer">
          <el-button v-if="order.status === 0"
                     type="primary"
                     @click="cancelToOrder(order.orderId)">
            取消订单
          </el-button>
          <el-button @click="toDetail(order.orderId)">查看详情</el-button>
        </div>
      </el-card>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <pagination
          v-show="total>0"
          :total="total"
          v-model:page="query.pageNum"
          v-model:limit="query.pageSize"
          @pagination="selectOrderList"
      />
    </div>

    <!-- 空状态提示 -->
    <el-empty v-if="orderList.length === 0" description="暂无订单"/>

  </div>
</template>

import {ref} from 'vue'
import useUserStore from "@/store/modules/user.js";
import {cancelOrder, listOrder} from "@/api/hotel/order.js";
import {ElMessage, ElMessageBox} from "element-plus";

//基础API路径
const baseUrl = import.meta.env.VITE_APP_BASE_API

//当前组件实例
const {proxy} = getCurrentInstance()

//获取对应的字段数据
const {order_status} = proxy.useDict('order_status')

//当前激活的标签页, 默认为全部订单
const activeTab = ref('全部订单')

//获取当前用户的信息
const loginUser = useUserStore()

//查询参数
const query = ref({
  pageNum: 1,
  pageSize: 10,
  categoryId: null,
  status: null,
  userId: loginUser.id,
  userName: null
})

//订单列表数据
const orderList = ref([])

//数据总数
const total = ref(0)

//路由实例
const router = useRouter()

//打开详情页面
const toDetail = (orderId) => {
  //跳转到订单详情页面
  router.push(`/index/order/${orderId}`)
}

//取消订单
const cancelToOrder = (orderId) => {
  ElMessageBox.confirm(
      '确定要取消订单吗?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '算了, 不取消',
        type: 'warning',
      }
  )
      .then(() => {
        cancelOrder(orderId).then(res => {
          selectOrderList()
          ElMessage.success("订单取消成功, 已退款至账户余额")
        })
      })
      .catch(() => {
      })
}

//处理标签页切换
const handleTableChange = (tab) => {
  console.log(tab)
  if (tab === '全部订单') {
    query.value.status = null
  } else {
    query.value.status = tab
  }
  //重新查询订单列表
  selectOrderList()
}

//查询订单列表数据
const selectOrderList = () => {
  //调用API查询数据
  listOrder(query.value).then(res => {
    total.value = res.total
    orderList.value = res.rows
  })
}

//组件挂载时执行
onMounted(() => {
  //获取订单列表
  selectOrderList()
})
复制代码