BJ_web_developers / codeScanning

<template>
  <div class="park-enter-container">
    <!-- 欢迎语模块 -->
    <div class="welcome-box">欢迎光临</div>

    <!-- 虚拟车牌展示模块 -->
    <div class="virtual-plate-box">{{ virtualPlate }}</div>

    <!-- 截屏提示模块 -->
    <div class="tips-red">请截屏保存虚拟车牌</div>


    <!-- 服务说明模块 -->
    <div class="service-desc">
      <!-- 出场方法 -->
      <div class="desc-item">
        <i class="icon-car">🚗</i>
        <div class="desc-content">
          <p class="title">出场方法</p>
          <p class="text">出口扫码缴费即可出场</p>
        </div>
      </div>
      <!-- 注意事项 -->
      <div class="desc-item">
        <i class="icon-warning">!</i>
        <div class="desc-content">
          <p class="title">注意事项</p>
          <p class="text">1.进出场、缴费扫码时，请保持使用同一部手机中同一扫码工具（微信、支付宝）</p>
          <p class="text">2.受充电桩功能限制，虚拟车牌不支持充电减免。（充电桩不支持虚拟车牌绑定）</p>
        </div>
      </div>
    </div>

    <!-- 确定入场按钮 -->
    <!-- <div class="okBtn" @click="onHandle">确定入场</div> -->
  </div>
</template>

<script>
// 导入接口（根据实际项目路径调整）
import { noCarQRcodeInOutPark } from '@/api/parkEnter/parkEnter'

export default {
  name: 'parkEnter',
  data() {
    return {
      // 页面请求参数
      query: {},
      // 虚拟车牌（实际项目中建议从接口获取，此处先写死示例）
      virtualPlate: '',
      // 入场图片地址（可从接口返回）
      enterImgUrl: ''
    }
  },
  created() {
    // 初始化获取URL请求参数
    this.initQueryParams()
    // 可选：初始化获取虚拟车牌
    
    this.getVirtualPlate()
  },
  methods: {
    /**
     * 初始化获取URL请求参数
     */
    initQueryParams() {
      try {
        this.query = this.$utils.getQueryString(window.location)
        console.log('入场请求参数：', this.query)
      } catch (e) {
        console.error('获取请求参数失败：', e)
        this.query = {}
      }
    },

    /**
     * 获取虚拟车牌（对接后端接口示例）
     */
    async getVirtualPlate() {
      try {
        // 此处替换为实际获取虚拟车牌的接口
         const requestParams = {
        ...this.query,
        app_id: 1,
        salt: 2,
        deviceInfo: 3,
        sign_type: 'md5',
        sign: 4,
        token: '666',
        // carNumber: this.virtualPlate, // 传虚拟车牌（替代原手机号）
        terminalSource: "7" // 1:任你听 3：微信公共号 4:云平台 7:H5
      }
        const res = await noCarQRcodeInOutPark(requestParams)
        console.log(res);
        this.virtualPlate = res.data.plateno
          localStorage.setItem('virtualCarPlate', res.data.plateno)
          this.$msgbox('提示', '进场信息已录入,请您进场！')
        console.log('虚拟车牌已获取')
      } catch (e) {
        console.error('获取虚拟车牌失败：', e)
        this.$msgbox('提示', '获取虚拟车牌失败，请重试')
      }
    },


    /**
     * 确定入场按钮点击事件
     */
    async onHandle() {
      // 1. 校验请求参数
      if (Object.keys(this.query).length === 0) {
        this.$msgbox('提示', '没有接收到请求参数')
        return
      }

      // 2. 组装接口请求参数
      const requestParams = {
        ...this.query,
        app_id: 1,
        salt: 2,
        deviceInfo: 3,
        sign_type: 'md5',
        sign: 4,
        token: '666',
        carNumber: this.virtualPlate, // 传虚拟车牌（替代原手机号）
        terminalSource: "7" // 1:任你听 3：微信公共号 4:云平台 7:H5
      }

      try {
        // 3. 调用入场接口
        const res = await noCarQRcodeInOutPark(requestParams)
        if (res.code === 0) {
          this.$msgbox('提示', '进场信息已录入,请您进场！')
        } else {
          this.$msgbox('提示', res.message || '入场失败，请重试')
        }
      } catch (e) {
        console.error('入场接口调用失败：', e)
        this.$msgbox('提示', '网络异常，请稍后重试')
      }
    }
  }
}
</script>

<style scoped lang="scss">
// 全局容器样式
.park-enter-container {
  width: 100%;
  max-width: 500px; // 适配移动端，限制最大宽度
  margin: 0 auto;
  padding: 20px 15px;
  box-sizing: border-box;
  background-color: #fff;
}

// 欢迎语盒子样式
.welcome-box {
  width: 100%;
  padding: 15px 0;
  text-align: center;
  font-size: 18px;
  color: #f97316; // 橙色字体
  border: 1px solid #e5e7eb;
  border-radius: 2px;
  margin-bottom: 20px;
}

// 虚拟车牌盒子样式
.virtual-plate-box {
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
  border-radius: 4px;
  margin-bottom: 15px;
  letter-spacing: 2px; // 增加字符间距，更像车牌
}

// 红色提示样式
.tips-red {
  text-align: center;
  color: #ef4444;
  font-size: 16px;
  padding: 10px 0;
  border: 1px dashed #ef4444;
  border-radius: 2px;
  margin-bottom: 25px;
}


// 服务说明容器样式
.service-desc {
  margin-bottom: 50px;
  
  // 说明项样式
  .desc-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    
    // 图标样式
    i {
      font-size: 24px;
      margin-right: 15px;
      margin-top: 2px;
      font-style: normal; // 清除默认斜体
    }
    
    // 车辆图标
    .icon-car {
      color: #3885D9;
    }
    
    // 警告图标
    .icon-warning {
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background: #f59e0b;
      color: #fff;
      border-radius: 50%;
      font-weight: bold;
    }
    
    // 说明内容样式
    .desc-content {
      flex: 1;
      
      .title {
        font-size: 16px;
        color: #000;
        margin-bottom: 5px;
        font-weight: 500;
      }
      
      .text {
        font-size: 14px;
        color: #ef4444;
        line-height: 1.5;
      }
    }
  }
}

// 确定入场按钮样式
.okBtn {
  background: linear-gradient(180deg, #3885D9 0%, #4194EF 100%);
  width: 60%;
  margin: 0 auto;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 5px;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  &:hover {
    opacity: 0.9;
  }
  &:active {
    opacity: 0.8;
  }
}
</style>