mkw-visit-cancel/pages/index/index-new.vue

<template>
  <view class="page">
    <!-- 门岗访客管理页面 -->
    <view class="gate-container">
      <!-- 头部导航 -->
      <view class="gate-header">
        <view class="gate-left">
          <view class="today-visitors" @click="openList">今日访客</view>
        </view>
        <view class="gate-right">
          <view class="gate-info">
            <text class="gate-name">{{ gateName }}</text>
            <text class="switch-gate" @click="showGateSelector">切换</text>
          </view>
          <!-- #ifdef H5 -->
          <view class="fullscreen-btn" @click="toggleFullscreen">
            {{ fullscreen ? '取消全屏' : '打开全屏' }}
          </view>
          <!-- #endif -->
        </view>
      </view>
      
      <!-- 主要内容区域 -->
      <view class="gate-content">
        <view class="form-container">
          <!-- 拜访日期选择 -->
          <view class="form-item">
            <text class="form-label">拜访日期：</text>
            <u-datetime-picker 
              v-model="datePickerShow" 
              mode="range" 
              :start-year="2020" 
              :end-year="2030"
              @confirm="onDateConfirm"
              @cancel="datePickerShow = false">
            </u-datetime-picker>
            <u-input 
              v-model="dateRangeText" 
              placeholder="选择日期范围" 
              @click="datePickerShow = true" 
              readonly 
              class="date-input">
              <u-icon name="calendar-fill" slot="suffix" color="#c0c4cc"></u-icon>
            </u-input>
          </view>
          
          <!-- 核验销码输入 -->
          <view class="form-item">
            <text class="form-label">核验销码：</text>
            <u-input 
              v-model="select.code" 
              placeholder="请输入核销码或扫码" 
              clearable 
              @change="onCodeChange"
              class="form-input">
            </u-input>
          </view>
          
          <!-- 身份证输入 -->
          <view class="form-item">
            <text class="form-label">身份证件：</text>
            <view class="id-input-group">
              <u-input 
                v-model="select.idcard" 
                placeholder="请输入身份证" 
                clearable 
                class="id-input">
              </u-input>
              <u-button type="primary" @click="getIdcard" class="id-btn">查询身份证</u-button>
            </view>
          </view>
          
          <!-- 查询按钮 -->
          <view class="form-item query-btn-container">
            <u-button type="primary" @click="getList" class="query-btn" :loading="loading">查询</u-button>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 门岗人员选择弹窗 -->
    <u-modal v-model="gateShow" title="请先选择门岗人员" :show-cancel-button="false" :mask-close-able="false">
      <view class="gate-selector">
        <u-radio-group v-model="gateAdminId" @change="onGateChange">
          <u-radio 
            v-for="item in gateData" 
            :key="item.id" 
            :name="item.id" 
            class="gate-radio">
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </view>
      <view slot="confirm-button">
        <u-button type="primary" @click="confirmGate">确定</u-button>
      </view>
    </u-modal>
    
    <!-- 访客信息弹窗 -->
    <u-modal v-model="visitShow" title="访客信息" width="90%" :show-cancel-button="false">
      <view class="visit-info" v-if="visitData">
        <view class="info-item">
          <text class="info-label">姓名：</text>
          <text class="info-value">{{ visitData.name }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">状态：</text>
          <text class="info-value">{{ visitData.audit_status_text }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">被访人：</text>
          <text class="info-value">{{ visitData.accept_admin ? visitData.accept_admin.name : '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">联系电话：</text>
          <text class="info-value">{{ visitData.mobile }}</text>
        </view>
      </view>
      <view slot="confirm-button">
        <u-button type="primary" @click="closeVisitModal">关闭</u-button>
      </view>
    </u-modal>
    
    <!-- 今日访客列表弹窗 -->
    <u-modal v-model="listShow" title="今日访客" width="90%">
      <view class="visitor-list">
        <view v-if="todayVisitors.length === 0" class="empty-state">
          <text>今日暂无访客</text>
        </view>
        <view v-else>
          <view v-for="visitor in todayVisitors" :key="visitor.id" class="visitor-item">
            <view class="visitor-name">{{ visitor.name }}</view>
            <view class="visitor-status">{{ visitor.audit_status_text }}</view>
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fullscreen: false,
      gateShow: false,
      gateAdminId: '',
      gateName: '',
      gateData: [],
      gateUser: {},
      loading: false,
      datePickerShow: false,
      dateRangeText: '',
      select: {
        page: 1,
        rows: 10,
        keyword: '',
        audit_status: '',
        start_date: '',
        end_date: '',
        is_export: 0,
        code: '',
        idcard: ''
      },
      visitShow: false,
      visitData: null,
      listShow: false,
      todayVisitors: []
    }
  },
  onLoad() {
    this.getUserList()
    this.getToday()
  },
  onReachBottom() {
    // 上拉加载更多
  },
  onPullDownRefresh() {
    // 下拉刷新
    this.getToday()
    uni.stopPullDownRefresh()
  },
  methods: {
    // 打开今日访客列表
    openList() {
      this.getTodayVisitors()
      this.listShow = true
    },
    
    // 获取今日日期
    getToday() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const today = `${year}-${month}-${day}`
      
      this.select.start_date = today
      this.select.end_date = today
      this.dateRangeText = `${today} 至 ${today}`
    },
    
    // 日期选择确认
    onDateConfirm(data) {
      this.select.start_date = data.startDate
      this.select.end_date = data.endDate
      this.dateRangeText = `${data.startDate} 至 ${data.endDate}`
      this.datePickerShow = false
    },
    
    // 核销码变化
    onCodeChange() {
      if (this.select.code) {
        this.getList()
      }
    },
    
    // 清空输入
    clearInputs() {
      this.select.code = ''
      this.select.idcard = ''
    },
    
    // 查询访客信息
    async getList() {
      if (!this.select.code && !this.select.idcard) {
        uni.showToast({
          title: '请输入核销码或身份证件',
          icon: 'none'
        })
        return
      }
      
      this.loading = true
      try {
        // 这里需要根据实际情况替换API调用
        const res = await this.apiGetList(this.select)
        
        if (res && res.data && res.data.length > 0) {
          const visitor = res.data[0]
          if (visitor.audit_status == 1 || visitor.audit_status == 3) {
            this.visitData = visitor
            this.visitShow = true
          } else {
            uni.showToast({
              title: visitor.audit_status_text,
              icon: 'none'
            })
          }
        } else {
          uni.showToast({
            title: '未查询到记录',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '查询失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        this.clearInputs()
      }
    },
    
    // 获取门岗人员列表
    async getUserList() {
      try {
        // 从存储中获取门岗用户信息
        const gateUser = uni.getStorageSync('gateUser')
        if (gateUser) {
          this.gateUser = gateUser
          this.gateAdminId = gateUser.gateAdminId
          this.gateName = gateUser.gateName
        }
        
        // 获取门岗人员列表
        const res = await this.apiGetUserList()
        this.gateData = res || []
        
        if (!this.gateAdminId && this.gateData.length > 0) {
          this.gateShow = true
        }
      } catch (error) {
        console.error('获取门岗人员列表失败:', error)
      }
    },
    
    // 门岗人员选择变化
    onGateChange(value) {
      this.gateAdminId = value
    },
    
    // 显示门岗选择器
    showGateSelector() {
      this.gateShow = true
    },
    
    // 确认门岗选择
    confirmGate() {
      if (!this.gateAdminId) {
        uni.showToast({
          title: '请先选择门岗',
          icon: 'none'
        })
        return
      }
      
      const selectedGate = this.gateData.find(item => item.id == this.gateAdminId)
      if (selectedGate) {
        this.gateName = selectedGate.name
        
        // 保存到存储
        const gateUser = {
          gateName: this.gateName,
          gateAdminId: this.gateAdminId
        }
        uni.setStorageSync('gateUser', gateUser)
      }
      
      this.gateShow = false
    },
    
    // 读取身份证
    getIdcard() {
      // #ifdef H5
      // H5环境下的身份证读取逻辑
      uni.request({
        url: 'https://127.0.0.1:24011/ZKIDROnline/ScanReadIdCardInfo?OP-DEV=1&CMD-URL=4&REPEAT=1&READTYPE=1',
        method: 'GET',
        header: {
          'Content-Type': 'application/json'
        },
        success: (res) => {
          if (res.data) {
            try {
              const data1 = res.data.split('"IDNumber"')
              if (data1.length > 1) {
                const data2 = data1[1].split(',')
                const idNumber = data2[0].replace(/[^\d]/g, '')
                this.select.idcard = idNumber
                this.getList()
              }
            } catch (error) {
              console.error('解析身份证信息失败:', error)
            }
          }
        },
        fail: (error) => {
          console.error('读取身份证失败:', error)
          uni.showToast({
            title: '读取身份证失败',
            icon: 'none'
          })
        }
      })
      // #endif
      
      // #ifndef H5
      uni.showToast({
        title: '该功能仅支持H5环境',
        icon: 'none'
      })
      // #endif
    },
    
    // 切换全屏
    toggleFullscreen() {
      // #ifdef H5
      const element = document.documentElement
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen
      // #endif
    },
    
    // 关闭访客信息弹窗
    closeVisitModal() {
      this.visitShow = false
      this.visitData = null
    },
    
    // 获取今日访客列表
    async getTodayVisitors() {
      try {
        // 这里需要根据实际情况替换API调用
        const todayParam = {
          start_date: this.select.start_date,
          end_date: this.select.end_date
        }
        const res = await this.apiGetTodayVisitors(todayParam)
        this.todayVisitors = res?.data || []
      } catch (error) {
        console.error('获取今日访客列表失败:', error)
        this.todayVisitors = []
      }
    },
    
    // API调用方法（需要根据实际情况调整）
    async apiGetList(params) {
      return new Promise((resolve, reject) => {
        uni.request({
          url: '/api/gate/list', // 替换为实际API地址
          method: 'GET',
          data: params,
          success: (res) => {
            resolve(res.data)
          },
          fail: (error) => {
            reject(error)
          }
        })
      })
    },
    
    async apiGetUserList() {
      return new Promise((resolve, reject) => {
        uni.request({
          url: '/api/gate/users', // 替换为实际API地址
          method: 'GET',
          success: (res) => {
            resolve(res.data)
          },
          fail: (error) => {
            reject(error)
          }
        })
      })
    },
    
    async apiGetTodayVisitors(params) {
      return new Promise((resolve, reject) => {
        uni.request({
          url: '/api/gate/today-visitors', // 替换为实际API地址
          method: 'GET',
          data: params,
          success: (res) => {
            resolve(res.data)
          },
          fail: (error) => {
            reject(error)
          }
        })
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  background: linear-gradient(135deg, #e4eafa, #f1f7fa);
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
}

/* 门岗容器样式 */
.gate-container {
  background-color: #fff;
  min-height: calc(100vh - 40rpx);
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 头部导航样式 */
.gate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 2rpx solid #f0f0f0;
  background: #fafafa;
  
  /* 移动端样式 */
  @media (max-width: 750px) {
    padding: 20rpx 30rpx;
    flex-direction: column;
    gap: 20rpx;
    align-items: stretch;
  }
}

.gate-left {
  .today-visitors {
    color: #004593;
    font-size: 36rpx;
    font-weight: 600;
    cursor: pointer;
    
    @media (max-width: 750px) {
      font-size: 32rpx;
    }
    
    &:active {
      opacity: 0.7;
    }
  }
}

.gate-right {
  display: flex;
  align-items: center;
  gap: 40rpx;
  
  @media (max-width: 750px) {
    justify-content: space-between;
    gap: 20rpx;
  }
}

.gate-info {
  display: flex;
  align-items: center;
  gap: 20rpx;
  
  .gate-name {
    font-size: 32rpx;
    color: #333;
    
    @media (max-width: 750px) {
      font-size: 28rpx;
    }
  }
  
  .switch-gate {
    color: #004593;
    text-decoration: underline;
    cursor: pointer;
    font-size: 28rpx;
    
    @media (max-width: 750px) {
      font-size: 24rpx;
    }
    
    &:active {
      opacity: 0.7;
    }
  }
}

.fullscreen-btn {
  color: #666;
  cursor: pointer;
  font-size: 28rpx;
  
  @media (max-width: 750px) {
    font-size: 24rpx;
  }
  
  &:active {
    color: #004593;
  }
}

/* 主要内容区域 */
.gate-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40rpx;
  
  @media (max-width: 750px) {
    align-items: flex-start;
    padding: 40rpx 30rpx;
  }
}

.form-container {
  width: 100%;
  max-width: 1000rpx;
  
  @media (min-width: 768px) {
    max-width: 1200rpx;
  }
}

.form-item {
  margin-bottom: 50rpx;
  
  @media (max-width: 750px) {
    margin-bottom: 40rpx;
  }
  
  &:last-child {
    margin-bottom: 0;
  }
}

.form-label {
  display: block;
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
  
  @media (max-width: 750px) {
    font-size: 28rpx;
    margin-bottom: 16rpx;
  }
  
  @media (min-width: 768px) {
    font-size: 40rpx;
    margin-bottom: 24rpx;
  }
}

.form-input, .date-input {
  width: 100%;
}

.id-input-group {
  display: flex;
  gap: 20rpx;
  
  @media (max-width: 750px) {
    flex-direction: column;
    gap: 16rpx;
  }
}

.id-input {
  flex: 1;
}

.id-btn {
  @media (max-width: 750px) {
    width: 100%;
  }
  
  @media (min-width: 768px) {
    min-width: 240rpx;
  }
}

.query-btn-container {
  text-align: center;
  margin-top: 60rpx;
  
  @media (max-width: 750px) {
    margin-top: 50rpx;
  }
}

.query-btn {
  width: 100%;
  height: 100rpx;
  font-size: 36rpx;
  font-weight: 600;
  
  @media (max-width: 750px) {
    height: 88rpx;
    font-size: 32rpx;
  }
  
  @media (min-width: 768px) {
    height: 120rpx;
    font-size: 48rpx;
  }
}

/* 弹窗样式 */
.gate-selector {
  padding: 20rpx 0;
}

.gate-radio {
  margin-bottom: 20rpx;
  padding: 20rpx;
  border: 2rpx solid #e4e7ed;
  border-radius: 8rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.visit-info {
  padding: 20rpx 0;
}

.info-item {
  display: flex;
  margin-bottom: 20rpx;
  align-items: center;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  font-size: 28rpx;
  color: #666;
  min-width: 120rpx;
  margin-right: 20rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  word-break: break-all;
}

.visitor-list {
  max-height: 60vh;
  overflow-y: auto;
}

.empty-state {
  text-align: center;
  padding: 60rpx 20rpx;
  color: #999;
  font-size: 28rpx;
}

.visitor-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.visitor-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.visitor-status {
  font-size: 24rpx;
  color: #666;
  padding: 8rpx 16rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
}

/* uView组件样式覆盖 */
::v-deep .u-input {
  .u-input__input {
    height: 88rpx !important;
    font-size: 32rpx !important;
    
    @media (max-width: 750px) {
      height: 80rpx !important;
      font-size: 28rpx !important;
    }
    
    @media (min-width: 768px) {
      height: 100rpx !important;
      font-size: 36rpx !important;
    }
  }
}

::v-deep .u-button {
  height: 88rpx !important;
  font-size: 28rpx !important;
  
  @media (max-width: 750px) {
    height: 80rpx !important;
    font-size: 26rpx !important;
  }
  
  @media (min-width: 768px) {
    height: 100rpx !important;
    font-size: 32rpx !important;
  }
}

::v-deep .u-modal {
  @media (max-width: 750px) {
    .u-modal__content {
      width: 90% !important;
      margin-top: 15vh !important;
    }
  }
}

::v-deep .u-radio-group {
  .u-radio {
    margin-bottom: 20rpx !important;
    
    @media (max-width: 750px) {
      width: 100% !important;
    }
  }
}
</style>