personnel_management_mobile/pages/callTicket/chooseWindow.vue

<template>
  <view class="choose-win-wrap">
    <!-- 顶部标题栏 -->
    <view class="top-header">
      <text class="header-title">环江毛南族自治县政务服务中心</text>
    </view>

    <!-- 主体内容区 -->
    <view class="main-content">
      <text class="main-title">请选择窗口</text>
      <text class="main-subtitle">选择您当前所在的窗口工位</text>

      <!-- 窗口列表卡片 -->
      <view class="window-list" v-if="windowList.length > 0">
        <view class="window-card" v-for="item in windowList" :key="item.id" @click="handleSelect(item)">
          <view class="win-icon-text">{{ item.windowName }}</view>

          <!-- <view class="win-info">
            <text class="win-type">{{ item.windowType || '综合窗口' }}</text>
            <text class="win-biz">{{ item.businessType || '综合业务' }}</text>
          </view> -->
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-else-if="!loading">
        <text class="empty-text">暂无可选窗口</text>
        <text class="empty-sub">请联系管理员检查窗口配置</text>
      </view>

      <!-- 加载中 -->
      <view class="loading-state" v-if="loading">
        <text class="loading-text">正在加载窗口列表...</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getWindowList, selectWindow } from '@/api/ticket.js'

export default {
  name: 'ChooseWindow',
  data() {
    return {
      windowList: [],
      loading: false
    }
  },
  mounted() {
    this.fetchWindowList()
  },
  methods: {
    // 获取可选窗口列表
    async fetchWindowList() {
      this.loading = true
      try {
        const res = await getWindowList({ status: 1, serviceStatus: 1 })
        if (res.success && res.data) {
          this.windowList = res.data.records || []
        }
      } catch (e) {
        console.error('获取窗口列表失败', e)
        uni.showToast({ title: '获取窗口列表失败', icon: 'none' })
      } finally {
        this.loading = false
      }
    },

    // 选择窗口
    async handleSelect(item) {
      uni.showLoading({ title: '选择中...', mask: true })
      try {
        const res = await selectWindow({ windowId: item.id })
        if (res.success && res.data) {
          // 保存窗口信息到本地存储
          const winInfo = {
            windowId: res.data.windowId,
            windowName: res.data.windowName,
            serviceStatus: res.data.serviceStatus,
            handlerUserId: res.data.handlerUserId,
            handlerUserName: res.data.handlerUserName,
            handlerDeptName: res.data.handlerDeptName
          }
          uni.setStorageSync('windowInfo', winInfo)

          uni.hideLoading()
          uni.showToast({ title: `已选择 ${res.data.windowName}`, icon: 'success', duration: 1000 })

          // 跳转到叫号工作台
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/callTicket/callTicket'
            })
          }, 800)
        }
      } catch (e) {
        uni.hideLoading()
        console.error('选择窗口失败', e)
        uni.showToast({ title: '选择窗口失败，请重试', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
}

.choose-win-wrap {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ========== 顶部标题栏 ========== */
.top-header {
  width: 100%;
  background-color: rgba(19, 114, 255, 1);
  display: flex;
  align-items: center;
  padding: 2.5vh 0;
  box-sizing: border-box;
}

.header-title {
  font-size: 3.125vw;
  color: #ffffff;
  font-weight: bold;
  padding-left: 2.083vw;
  /* letter-spacing: 0.3vw; */
  white-space: nowrap;
}

/* ========== 主体内容区 ========== */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2vh 3vw;
  overflow: hidden;
}

.main-title {
  font-size: 3.125vw;
  font-weight: bold;
  color: #1a1a2e;
  margin-bottom: 1vh;
  flex-shrink: 0;
}

.main-subtitle {
  font-size: 2vw;
  color: rgba(26, 26, 46, 0.55);
  margin-bottom: 2vh;
  flex-shrink: 0;
}

/* ========== 窗口列表 ========== */
.window-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* align-content: center; */
  /* gap: 2vh 1.5vw; */
  width: 100%;
  flex: 1;
}

.window-card {
  margin-right: 2vw;
  width: 14vw;
  height: 28vh;
  background: #ffffff;
  border-radius: 1.5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.4vw 2vw rgba(95, 136, 255, 0.12);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.window-card:active {
  transform: scale(0.95);
  box-shadow: 0 0.2vw 1vw rgba(95, 136, 255, 0.3);
}

.win-icon-text {
  padding: 0 1vw;
  font-size: 2vw;
  font-weight: bold;
  color: #1976f2;
  text-align: center;
  /* white-space: nowrap; */
}

.win-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  overflow: hidden;
}

.win-type {
  font-size: 1.4vw;
  font-weight: bold;
  color: #1a1a2e;
  margin-bottom: 0.5vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

.win-biz {
  font-size: 1.1vw;
  color: #999999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}

/* ========== 空状态 ========== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.empty-text {
  font-size: 3vw;
  color: #999;
  margin-bottom: 1vh;
}

.empty-sub {
  font-size: 2vw;
  color: #bbb;
}

/* ========== 加载中 ========== */
.loading-text {
  font-size: 2.5vw;
  color: #999;
}
</style>