haha/haha-mp/src/pages/index/index.vue

<template>
  <view class="container">
    <!-- 中部内容 -->
    <view class="middle-section">
      <view class="app-title">AI零售柜</view>
    </view>
    
    <!-- 核心扫码按钮区域 -->
    <view class="scan-area">
      <!-- 左侧我的按钮 -->
      <view class="bottom-item" @click="goToMy">
        <image class="bottom-icon" src="/static/icons/my.svg"></image>
        <view class="bottom-text">我的</view>
      </view>
      
      <!-- 核心扫码按钮 -->
      <button class="scan-button" @click="scanCode">
        <view class="scan-icon">
          <image class="scan-svg-icon" src="/static/icons/scan.svg"></image>
        </view>
        <view class="scan-text">扫码开门</view>
      </button>
      
      <!-- 右侧退款按钮 -->
      <view class="bottom-item" @click="goToRefund">
        <image class="bottom-icon" src="/static/icons/refund.svg"></image>
        <view class="bottom-text">退款</view>
      </view>
    </view>
    
    <!-- 底部信息 -->
    <view class="info-section">
      <text class="info-text">💚 微信支付分 | 550分及以上优享</text>
      <text class="info-text">客服电话：400-123-4567</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { scanDoor } from '../../api/device'

const scanCode = () => {
  // 调用摄像头扫码
  uni.scanCode({
    success: async function (res) {
      console.log('扫码结果:', res.result);
      
      // 从扫码结果中解析设备ID
      // 二维码格式: https://hh.hahabianli.com/B142977?_wxpmm0=6009000C0000
      // 需要提取路径中的设备ID: B142977
      let deviceId = '';
      
      try {
        // 尝试从URL中提取deviceId
        const urlPattern = /\/([A-Z0-9]+)(\?|$)/;
        const match = res.result.match(urlPattern);
        
        if (match && match[1]) {
          deviceId = match[1];
          console.log('提取到设备ID:', deviceId);
        } else {
          // 如果不是URL格式，尝试解析JSON格式
          try {
            const qrData = JSON.parse(res.result);
            if (qrData.deviceId) {
              deviceId = qrData.deviceId;
            }
          } catch (e) {
            // 不是JSON格式，直接使用扫码结果作为deviceId
            deviceId = res.result;
          }
        }
        
        if (!deviceId) {
          throw new Error('无法解析设备ID');
        }
      } catch (error) {
        console.error('解析设备ID失败:', error);
        uni.showToast({
          title: '二维码格式错误',
          icon: 'none'
        });
        return;
      }
      
      // 显示加载提示
      uni.showLoading({
        title: '正在开门...',
        mask: true
      });
      
      try {
        // 调用真实接口扫码开门
        const response = await scanDoor(deviceId);
        
        // 隐藏加载提示
        uni.hideLoading();
        
        // 开门成功
        uni.showToast({
          title: '开门成功',
          icon: 'success'
        });
        
        // 将设备信息存储到本地，供购物页面使用
        uni.setStorageSync('currentDeviceId', response.deviceId);
        uni.setStorageSync('currentOutTradeNo', response.outTradeNo);
        uni.setStorageSync('currentOrderNo', response.orderNo);
        
        // 跳转到购物进行中页面
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/shopping/shopping'
          });
        }, 1000);
      } catch (error: any) {
        // 隐藏加载提示
        uni.hideLoading();
        
        console.error('开门失败:', error);
        // 错误信息已经在request工具中显示，这里不需要重复显示
      }
    },
    fail: function (err) {
      console.log('扫码失败:', err);
      uni.showToast({
        title: '扫码失败',
        icon: 'none'
      });
    }
  });
};

const goToMy = () => {
  // 跳转到个人中心
  uni.navigateTo({
    url: '/pages/my/my'
  });
};

const goToRefund = () => {
  // 跳转到订单列表页面
  uni.navigateTo({
    url: '/pages/orders/orders'
  });
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #ffffff;
  position: relative;
  padding-bottom: 100rpx;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* 中部内容区域 */
.middle-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 120rpx 0 20rpx;
  position: relative;
  z-index: 1;
  min-height: 40vh;
  flex-basis: 40vh;
}

/* 应用标题 */
.app-title {
  font-size: 80rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 40rpx;
  letter-spacing: 6rpx;
  position: relative;
  animation: titleSlide 0.8s ease-out;
}

/* 标题动画 */
@keyframes titleSlide {
  0% {
    opacity: 0;
    transform: translateY(-50rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 标题下方装饰线 */
.app-title::after {
  content: '';
  position: absolute;
  bottom: -20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 150rpx;
  height: 6rpx;
  background-color: #FFD700;
  border-radius: 3rpx;
  animation: lineSlide 0.8s ease-out 0.3s both;
}

/* 装饰线动画 */
@keyframes lineSlide {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 150rpx;
    opacity: 1;
  }
}



/* 扫码按钮区域 */
.scan-area {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 80rpx 50rpx;
  position: relative;
  z-index: 1;
}

/* 核心扫码按钮 */
.scan-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 350rpx;
  height: 350rpx;
  border-radius: 50%;
  background-color: #FFD700;
  border: none;
  box-shadow: 0 8rpx 30rpx rgba(255, 215, 0, 0.6);
  z-index: 2;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 扫码按钮悬停效果 */
.scan-button:hover {
  transform: scale(1.05);
  box-shadow: 0 12rpx 40rpx rgba(255, 215, 0, 0.8);
}

/* 扫码按钮点击效果 */
.scan-button:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 20rpx rgba(255, 215, 0, 0.6);
}

/* 扫码按钮脉冲动画 */
.scan-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 400rpx;
    height: 400rpx;
    opacity: 0;
  }
}

/* 扫码图标 */
.scan-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 扫码SVG图标 */
.scan-svg-icon {
  width: 200rpx;
  height: 200rpx;
}

/* 扫码文字 */
.scan-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

/* 底部操作按钮 */
.bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  transition: all 0.3s ease;
  padding: 20rpx;
  border-radius: 15rpx;
}

/* 底部按钮悬停效果 */
.bottom-item:hover {
  transform: translateY(-5rpx);
  background-color: #f5f5f5;
}

/* 底部按钮点击效果 */
.bottom-item:active {
  transform: translateY(0);
  background-color: #e8e8e8;
}

/* 底部图标 */
.bottom-icon {
  width: 50rpx;
  height: 50rpx;
  margin-bottom: 10rpx;
}

/* 底部文字 */
.bottom-text {
  font-size: 24rpx;
  color: #666;
}

/* 底部信息区域 */
.info-section {
  padding: 30rpx 0;
  text-align: center;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  position: relative;
  z-index: 1;
  animation: infoSlide 0.8s ease-out 0.5s both;
}

/* 底部信息动画 */
@keyframes infoSlide {
  0% {
    opacity: 0;
    transform: translateY(30rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 信息文字 */
.info-text {
  font-size: 22rpx;
  color: #999;
  margin: 8rpx 0;
  display: block;
}
</style>