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

<template>
  <view class="container">
    <!-- 顶部品牌区 -->
    <view class="brand-section">
      <text class="brand-title">AI零售柜</text>
      <text class="brand-slogan">智能视觉 · 即拿即走</text>
    </view>

    <!-- 核心操作区 -->
    <view class="action-section">
      <button class="scan-button" @click="scanCode">
        <view class="scan-button-inner">
          <image class="scan-icon" src="/static/icons/scan.svg" mode="aspectFill"></image>
          <text class="scan-text">扫码开门</text>
        </view>
        <view class="scan-button-ripple"></view>
      </button>
    </view>

    <!-- 快捷功能区 -->
    <view class="quick-actions">
      <view class="quick-action-item" @click="goToMy">
        <view class="action-icon">
          <image src="/static/icons/my.svg" mode="aspectFit"></image>
        </view>
        <text class="action-label">我的</text>
      </view>
      <view class="quick-action-item" @click="goToOrders">
        <view class="action-icon">
          <image src="/static/icons/orders.svg" mode="aspectFit"></image>
        </view>
        <text class="action-label">订单</text>
      </view>
      <view class="quick-action-item" @click="goToCouponCenter">
        <view class="action-icon">
          <image src="/static/icons/coupon.svg" mode="aspectFit"></image>
        </view>
        <text class="action-label">优惠券</text>
      </view>
    </view>

    <!-- 底部信息卡片 -->
    <view class="info-card">
      <view class="info-item">
        <image class="info-icon payscore-icon" src="/static/icons/pay-socre-logo.png" mode="aspectFit"></image>
        <text class="info-text">微信支付分 | 550分及以上优享</text>
      </view>
      <view class="info-item">
        <CustomerServiceButton
          mode="inline"
          title="首页-联系客服"
          :path="'/pages/index/index'"
          @contact="onContactSuccess"
        >
          <text class="info-icon">💬</text>
          <text class="info-text">在线客服</text>
        </CustomerServiceButton>
      </view>
    </view>

    <!-- 支付分授权确认弹窗 -->
    <view v-if="showAuthPopup" class="auth-overlay" @click.stop>
      <view class="auth-card">
        <view class="auth-icon-wrap">
          <image class="auth-icon" src="/static/icons/pay-socre-logo.png" mode="aspectFit"></image>
        </view>
        <text class="auth-title">微信支付分授权</text>
        <text class="auth-desc">需授权微信支付分后开门购物，费用离店后自动结算</text>
        <view class="auth-actions">
          <button class="auth-btn cancel" @click="cancelAuth">取消</button>
          <button class="auth-btn confirm" @click="invokePayScore">确认授权</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { scanDoor } from '../../api/device'
import { preCreatePayscoreOrder } from '../../api/payscore'
import { isLoggedIn, getToken } from '../../utils/auth'
import { logger } from '../../utils/logger'

// 授权弹窗状态
const showAuthPopup = ref(false)
const authDeviceId = ref('')
const authPackage = ref('')
const authMchId = ref('')
const authLoading = ref(false)

// 页面显示时检查 token
onShow(() => {
  const token = getToken()
  logger.log('[首页 onShow] token 状态:', token ? '存在' : '不存在')
})

const scanCode = async () => {
  // 检查登录状态
  if (!isLoggedIn()) {
    uni.showModal({
      title: '提示',
      content: '请先登录后再扫码开门',
      showCancel: false,
      success: () => {
        uni.reLaunch({
          url: '/pages/login/login?redirect=/pages/index/index'
        });
      }
    });
    return;
  }

  // 调用摄像头扫码
  uni.scanCode({
    success: async function (res) {
      logger.log('扫码结果:', res.result);

      let deviceId = '';
      try {
        const urlPattern = /\/([A-Z0-9]+)(\?|$)/;
        const match = res.result.match(urlPattern);
        if (match && match[1]) {
          deviceId = match[1];
        } else {
          try {
            const qrData = JSON.parse(res.result);
            if (qrData.deviceId) deviceId = qrData.deviceId;
          } catch (e) {
            deviceId = res.result;
          }
        }

        if (!deviceId) {
          throw new Error('无法解析设备ID');
        }
      } catch (error) {
        logger.error('解析设备ID失败:', error);
        uni.showToast({ title: '二维码格式错误', icon: 'none' });
        return;
      }

      logger.log('提取到设备ID:', deviceId);

      // 预创建支付分订单，获取 package
      await preparePayScoreAuth(deviceId);
    },
    fail: function (err) {
      logger.log('扫码取消:', err);
    }
  });
};

/**
 * 预创建支付分订单，成功后在页面内展示授权按钮
 */
const preparePayScoreAuth = async (deviceId: string) => {
  uni.showLoading({ title: '准备中...', mask: true });

  try {
    const result = await preCreatePayscoreOrder({ deviceId });

    uni.hideLoading();

    if (!result.success || !result.package) {
      uni.showToast({
        title: result.errorMsg || '创建支付分订单失败',
        icon: 'none',
      });
      return;
    }

    logger.log('[支付分] 预创建成功, package:', result.package);

    // 存到状态中，等用户点击"确认授权"按钮
    authDeviceId.value = deviceId;
    authPackage.value = result.package;
    authMchId.value = result.mchId || '';
    showAuthPopup.value = true;
  } catch (error: any) {
    uni.hideLoading();
    logger.error('[支付分] 预创建失败', error);
    uni.showToast({
      title: error?.message || '创建支付分订单失败',
      icon: 'none',
    });
  }
};

/**
 * 用户点击"确认授权"按钮，直接触发 wx.openBusinessView
 * 关键：此调用在用户点击事件的同步调用链中，不会被微信拦截
 */
const invokePayScore = () => {
  if (authLoading.value) return;
  authLoading.value = true;

  logger.log('[支付分] 用户点击确认授权，调起 openBusinessView');

  wx.openBusinessView({
    businessType: 'payscore',
    extraData: {
      mch_id: authMchId.value,
      package: authPackage.value,
    },
    success: async () => {
      authLoading.value = false;
      showAuthPopup.value = false;
      logger.log('[支付分] 用户确认成功，开始开门');
      await doOpenDoor(authDeviceId.value);
    },
    fail: (err: any) => {
      authLoading.value = false;
      logger.error('[支付分] openBusinessView 失败', JSON.stringify(err));
      // 用户取消不弹窗，真正的错误才提示
      if (err && err.errMsg && err.errMsg.indexOf('cancel') === -1) {
        uni.showModal({
          title: '授权失败',
          content: JSON.stringify(err),
          showCancel: false,
        });
      }
    },
  });
};

/**
 * 用户取消授权
 */
const cancelAuth = () => {
  showAuthPopup.value = false;
  logger.log('[支付分] 用户取消授权');
};

/**
 * 执行开门操作
 */
const doOpenDoor = async (deviceId: string) => {
  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);
    uni.removeStorageSync('shoppingPollingActive');

    setTimeout(() => {
      uni.navigateTo({ url: '/pages/shopping/shopping' });
    }, 1000);
  } catch (error: any) {
    uni.hideLoading();
    logger.error('开门失败:', error);
  }
};

const goToMy = () => {
  uni.navigateTo({ url: '/pages/my/my' })
}

const goToOrders = () => {
  uni.navigateTo({ url: '/pages/orders/orders' })
}

const goToCouponCenter = () => {
  uni.navigateTo({ url: '/pages/couponCenter/couponCenter' })
}

const onContactSuccess = () => {
  logger.log('[首页] 客服会话已打开')
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: $color-bg-secondary;
  display: flex;
  flex-direction: column;
  padding: $spacing-xxl $spacing-lg;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

/* ========== 品牌区 ========== */
.brand-section {
  text-align: center;
  padding: $spacing-xxl 0 $spacing-xl;
  animation: slideUp 0.3s ease;

  .brand-title {
    font-size: 56rpx;
    font-weight: 300;
    color: $color-text-primary;
    letter-spacing: 8rpx;
    display: block;
    margin-bottom: $spacing-sm;
  }

  .brand-slogan {
    font-size: 24rpx;
    color: $color-text-secondary;
    letter-spacing: 4rpx;
  }
}

/* ========== 核心操作区 ========== */
.action-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: $spacing-xl 0;
}

.scan-button {
  position: relative;
  width: 400rpx;
  height: 400rpx;
  min-width: 400rpx;
  min-height: 400rpx;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  overflow: hidden;

  &::after {
    border: none;
  }

  &-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, $color-primary-light 0%, $color-primary 100%);
    box-shadow: $shadow-primary;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all $duration-normal $ease-out;

    &:active {
      transform: scale(0.95);
      box-shadow: 0 4rpx 16rpx rgba(255, 193, 7, 0.3);
    }
  }

  &-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: $color-primary;
    transform: translate(-50%, -50%);
    animation: pulse 3s cubic-bezier(0.42, 0, 0.58, 1) infinite;
    opacity: 0.2;
    z-index: -1;
  }
}

.scan-icon {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: $spacing-md;
  flex-shrink: 0;
  display: block;
}

.scan-text {
  font-size: 40rpx;
  font-weight: 600;
  color: $color-text-primary;
  letter-spacing: 4rpx;
}

/* ========== 快捷功能区 ========== */
.quick-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: $spacing-xl;
  margin: $spacing-xxl 0;

  &-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $spacing-md;
    position: relative;
    flex: 0 0 auto;

    &:active { opacity: 0.8; }
  }

  .action-icon {
    width: 120rpx;
    height: 120rpx;
    background: $color-bg-primary;
    border-radius: $radius-lg;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
    margin-bottom: $spacing-sm;
    border: 2rpx solid $color-border;
    flex-shrink: 0;

    image {
      width: 64rpx;
      height: 64rpx;
      display: block;
    }

    &:active {
      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
      border-color: $color-primary-light;
    }
  }

  .action-label {
    font-size: 28rpx;
    color: $color-text-primary;
    font-weight: 500;
    text-align: center;
    display: block;
    width: auto;
  }
}

/* ========== 底部信息卡片 ========== */
.info-card {
  background: $color-bg-primary;
  border-radius: $radius-lg;
  padding: $spacing-lg;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;

  .info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $spacing-sm 0;
    min-height: 60rpx;

    &:not(:last-child) {
      border-bottom: 1rpx solid $color-border;
      padding-bottom: $spacing-md;
      margin-bottom: $spacing-md;
    }
  }

  .info-icon {
    font-size: 28rpx;
    margin-right: $spacing-sm;
    flex-shrink: 0;
    line-height: 1;

    &.payscore-icon {
      width: 36rpx;
      height: 36rpx;
    }
  }

  .info-text {
    font-size: 24rpx;
    color: $color-text-secondary;
    line-height: 1.5;
    text-align: center;
  }
}

/* ========== 授权弹窗 ========== */
.auth-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  animation: fadeIn 0.2s ease;
}

.auth-card {
  width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: scaleIn 0.25s ease;
}

.auth-icon-wrap {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 24rpx;
}

.auth-icon {
  width: 100%;
  height: 100%;
}

.auth-title {
  font-size: 36rpx;
  font-weight: 600;
  color: $color-text-primary;
  margin-bottom: 16rpx;
}

.auth-desc {
  font-size: 26rpx;
  color: $color-text-secondary;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 40rpx;
}

.auth-actions {
  display: flex;
  gap: 24rpx;
  width: 100%;
}

.auth-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  border-radius: 16rpx;
  font-size: 30rpx;
  font-weight: 500;
  border: none;
  padding: 0;

  &::after { border: none; }

  &.cancel {
    background: #f5f5f5;
    color: #666;
  }

  &.confirm {
    background: linear-gradient(135deg, $color-primary-light, $color-primary);
    color: $color-text-primary;
  }

  &:active {
    opacity: 0.85;
  }
}
</style>