consumer-front/pages/index/scan.vue

<template>
  <view class="scan-page">
    <!-- 顶部品牌 -->
    <view class="brand-area">
      <text class="brand-name">智联方舟</text>
    </view>

    <!-- 中间扫一扫按钮 -->
    <view class="scan-area">
      <view class="scan-btn" @click="handleScan">
        <!-- 二维码图标 -->
        <view class="qr-icon">
          <view class="qr-row">
            <view class="qr-block"></view>
            <view class="qr-block"></view>
            <view class="qr-space"></view>
            <view class="qr-block"></view>
          </view>
          <view class="qr-row">
            <view class="qr-block"></view>
            <view class="qr-space"></view>
            <view class="qr-block"></view>
            <view class="qr-space"></view>
          </view>
          <view class="qr-row">
            <view class="qr-space"></view>
            <view class="qr-block"></view>
            <view class="qr-space"></view>
            <view class="qr-block"></view>
          </view>
          <view class="qr-row">
            <view class="qr-block"></view>
            <view class="qr-block"></view>
            <view class="qr-block"></view>
            <view class="qr-space"></view>
          </view>
        </view>
        <text class="scan-text">扫一扫</text>
      </view>
      <text class="scan-tip">扫描货柜上的二维码开始购物</text>
    </view>

    <!-- 我的入口 -->
    <view class="mine-entry" @click="goMine">
      <view class="mine-icon">
        <view class="mine-head"></view>
        <view class="mine-body"></view>
      </view>
      <text class="mine-text">我的</text>
    </view>

    <!-- 底部客服电话 -->
    <view class="footer">
      <text class="footer-text">客服电话：</text>
      <text class="footer-phone" @click="callService">{{ servicePhone }}</text>
    </view>
  </view>
</template>

<script>
import config from '@/config/env.js';

export default {
  data() {
    return {
      servicePhone: config.servicePhone,
    };
  },
  onLoad(options) {
    // 1. query 参数中携带设备编号
    if (options.device_id) {
      uni.redirectTo({
        url: '/pages/index/index?device_id=' + options.device_id,
      });
      return;
    }

    // #ifdef H5
    // 2. URL 路径中携带设备编号（如 http://xxx/A1036）
    const path = window.location.pathname;
    const segments = path.split('/').filter(Boolean);
    if (segments.length > 0) {
      const last = segments[segments.length - 1];
      if (/^[A-Z][A-Z0-9]+$/.test(last)) {
        uni.redirectTo({
          url: '/pages/index/index?device_id=' + last,
        });
        return;
      }
    }
    // #endif
  },
  methods: {
    handleScan() {
      // #ifdef H5
      uni.showToast({ title: 'H5 环境暂不支持扫码', icon: 'none' });
      // #endif

      // #ifdef MP-WEIXIN
      uni.scanCode({
        onlyFromCamera: false,
        success: (res) => {
          this.parseScanResult(res.result);
        },
        fail: () => {
          uni.showToast({ title: '扫码取消', icon: 'none' });
        },
      });
      // #endif
    },
    parseScanResult(result) {
      // 解析扫码结果，提取 device_id
      // 预期格式：https://domain/A1036 或 device_id=A1036
      let deviceId = '';

      try {
        const url = new URL(result);
        // 取路径最后一段作为设备编号
        const pathParts = url.pathname.split('/').filter(Boolean);
        if (pathParts.length > 0) {
          deviceId = pathParts[pathParts.length - 1];
        }
      } catch {
        // 非 URL 格式，尝试直接匹配
        if (/^[A-Z][A-Z0-9]+$/.test(result)) {
          deviceId = result;
        }
      }

      if (deviceId) {
        uni.redirectTo({
          url: '/pages/index/index?device_id=' + deviceId,
        });
      } else {
        uni.showToast({ title: '无效的二维码', icon: 'none' });
      }
    },
    goMine() {
      uni.navigateTo({ url: '/pages/index/index?tab=mine' });
    },
    callService() {
      // #ifdef H5
      window.location.href = 'tel:' + this.servicePhone;
      // #endif

      // #ifndef H5
      uni.makePhoneCall({ phoneNumber: this.servicePhone, fail: () => {} });
      // #endif
    },
  },
};
</script>

<style scoped>
page {
  height: 100%;
  background-color: #fff;
}

.scan-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  background-color: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 品牌区域 */
.brand-area {
  margin-top: 200rpx;
  margin-bottom: 80rpx;
}

.brand-name {
  font-size: 96rpx;
  font-weight: bold;
  color: #000;
  letter-spacing: 12rpx;
}

/* 扫一扫按钮 */
.scan-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80rpx;
}

.scan-btn {
  width: 360rpx;
  height: 360rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #2979ff, #1e60e0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20rpx 60rpx rgba(41, 121, 255, 0.4);
}

/* 二维码图标 */
.qr-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.qr-row {
  display: flex;
  margin-bottom: 6rpx;
}

.qr-row:last-child {
  margin-bottom: 0;
}

.qr-block {
  width: 24rpx;
  height: 24rpx;
  background-color: #fff;
  margin-right: 6rpx;
  border-radius: 4rpx;
}

.qr-space {
  width: 24rpx;
  height: 24rpx;
  margin-right: 6rpx;
}

.scan-text {
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
}

.scan-tip {
  font-size: 26rpx;
  color: #999;
  margin-top: 40rpx;
}

/* 我的入口 */
.mine-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 140rpx;
}

.mine-icon {
  width: 60rpx;
  height: 54rpx;
  position: relative;
  margin-bottom: 12rpx;
}

.mine-head {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background-color: #999;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.mine-body {
  width: 44rpx;
  height: 26rpx;
  border-radius: 22rpx 22rpx 0 0;
  background-color: #999;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.mine-text {
  font-size: 28rpx;
  color: #999;
}

/* 底部客服 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32rpx 0;
  padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
}

.footer-text {
  font-size: 26rpx;
  color: #999;
}

.footer-phone {
  font-size: 26rpx;
  color: #2979ff;
}
</style>