besure_app/src/pages_function/pages/mold/index.vue

<template>
  <view class="page-container">
    <view class="header-section">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">‹</text>
        <text class="back-text">返回</text>
      </view>
      <view class="header-content">
        <text class="header-title">模具查询</text>
        <text class="header-desc">请选择查询方式</text>
      </view>
    </view>

    <view class="content-section">
      <view class="scan-section">
        <view class="scan-area" @click="startScan">
          <view class="scan-icon">
            <text class="icon-text">📷</text>
          </view>
          <text class="scan-title">自动扫描</text>
          <text class="scan-desc">点击启动扫描模具编码</text>
        </view>
        
        <view v-if="isScanning" class="scanning-overlay">
          <view class="scanning-animation">
            <view class="scan-line"></view>
            <view class="scan-corners">
              <view class="corner corner-tl"></view>
              <view class="corner corner-tr"></view>
              <view class="corner corner-bl"></view>
              <view class="corner corner-br"></view>
            </view>
          </view>
          <text class="scanning-text">正在打开扫码...</text>
        </view>
      </view>

      <view class="divider">
        <view class="divider-line"></view>
        <text class="divider-text">或</text>
        <view class="divider-line"></view>
      </view>

      <view class="input-section">
        <view class="input-label">手动输入模具编码</view>
        <view class="input-wrapper">
          <input 
            v-model="moldCode" 
            class="code-input" 
            type="text" 
            placeholder="请输入模具编码"
            placeholder-class="input-placeholder"
          />
        </view>
        <view class="confirm-btn" :class="{ active: moldCode.length > 0 }" @click="confirmInput">
          <text class="btn-text">确定</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const moldCode = ref('');
const isScanning = ref(false);

function goBack() {
  uni.navigateBack();
}

function startScan() {
  if (isScanning.value) return;

  isScanning.value = true;

  const finish = () => {
    isScanning.value = false;
  }

  uni.scanCode({
    onlyFromCamera: true,
    scanType: ['qrCode', 'barCode'],
    success: (res) => {
      console.log(res)
      const info = JSON.parse(res.result)
      console.log('info',info)
      if (!info) {
        uni.showToast({ title: '未获取到扫码结果', icon: 'none' })
        return
      }
      console.log('info.id',info.id)
      navigateToDetail(info.id)
    },
    fail: (err) => {
      const msg = String(err?.errMsg || '')
      if (msg.includes('cancel')) {
        uni.showToast({ title: '已取消扫码', icon: 'none' })
        return
      }
      if (msg.toLowerCase().includes('not support') || msg.toLowerCase().includes('not supported')) {
        uni.showToast({ title: '当前平台不支持扫码', icon: 'none' })
        return
      }
      uni.showToast({ title: '扫码失败', icon: 'none' })
    },
    complete: finish
  })
}

function confirmInput() {
  if (moldCode.value.trim().length === 0) {
    uni.showToast({
      title: '请输入模具编码',
      icon: 'none'
    });
    return;
  }
  
  navigateToDetail(moldCode.value.trim());
}

function navigateToDetail(id) {
  console.log('id',id)
  uni.navigateTo({
    url: `/pages_function/pages/mold/detail?id=${encodeURIComponent(id)}`
  });
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f0f2f5;
}

.header-section {
  background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
  padding: 40rpx 30rpx 80rpx;
  position: relative;
}

.back-btn {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  &:active {
    opacity: 0.7;
  }

  .back-icon {
    font-size: 48rpx;
    color: #ffffff;
    margin-right: 8rpx;
  }

  .back-text {
    font-size: 28rpx;
    color: #ffffff;
  }
}

.header-content {
  .header-title {
    display: block;
    font-size: 44rpx;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 16rpx;
  }
  
  .header-desc {
    display: block;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.7);
  }
}

.content-section {
  padding: 40rpx 30rpx;
}

.scan-section {
  position: relative;
  background: #ffffff;
  border-radius: 24rpx;
  padding: 60rpx 40rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.scan-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  &:active {
    opacity: 0.8;
  }
}

.scan-icon {
  width: 160rpx;
  height: 160rpx;
  background: linear-gradient(135deg, #1a3a5c 0%, #3d7ab5 100%);
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  
  .icon-text {
    font-size: 72rpx;
  }
}

.scan-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #1a3a5c;
  margin-bottom: 12rpx;
}

.scan-desc {
  font-size: 26rpx;
  color: #999999;
}

.scanning-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 58, 92, 0.95);
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.scanning-animation {
  width: 300rpx;
  height: 300rpx;
  position: relative;
  margin-bottom: 40rpx;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 20rpx;
  right: 20rpx;
  height: 4rpx;
  background: linear-gradient(90deg, transparent, #ff8c00, transparent);
  animation: scanMove 1.5s ease-in-out infinite;
}

@keyframes scanMove {
  0% {
    top: 20rpx;
  }
  50% {
    top: 260rpx;
  }
  100% {
    top: 20rpx;
  }
}

.scan-corners {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.corner {
  position: absolute;
  width: 40rpx;
  height: 40rpx;
  border-color: #ff8c00;
  border-style: solid;
  border-width: 0;
}

.corner-tl {
  top: 0;
  left: 0;
  border-top-width: 6rpx;
  border-left-width: 6rpx;
  border-top-left-radius: 12rpx;
}

.corner-tr {
  top: 0;
  right: 0;
  border-top-width: 6rpx;
  border-right-width: 6rpx;
  border-top-right-radius: 12rpx;
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-bottom-width: 6rpx;
  border-left-width: 6rpx;
  border-bottom-left-radius: 12rpx;
}

.corner-br {
  bottom: 0;
  right: 0;
  border-bottom-width: 6rpx;
  border-right-width: 6rpx;
  border-bottom-right-radius: 12rpx;
}

.scanning-text {
  font-size: 32rpx;
  color: #ffffff;
  margin-bottom: 30rpx;
}

.divider {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  
  .divider-line {
    flex: 1;
    height: 2rpx;
    background: #e8eaed;
  }
  
  .divider-text {
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #999999;
  }
}

.input-section {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.input-label {
  font-size: 30rpx;
  font-weight: 600;
  color: #1a3a5c;
  margin-bottom: 24rpx;
}

.input-wrapper {
  margin-bottom: 30rpx;
}

.code-input {
  width: 100%;
  height: 96rpx;
  background: #f5f7fa;
  border-radius: 16rpx;
  padding: 0 30rpx;
  font-size: 30rpx;
  color: #333333;
  border: 2rpx solid transparent;
  
  &:focus {
    border-color: #1a3a5c;
    background: #ffffff;
  }
}

.input-placeholder {
  color: #c0c4cc;
}

.confirm-btn {
  height: 96rpx;
  background: #c0c4cc;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  
  &.active {
    background: linear-gradient(135deg, #1a3a5c 0%, #2d5a87 100%);
    
    &:active {
      opacity: 0.8;
      transform: scale(0.98);
    }
  }
  
  .btn-text {
    font-size: 32rpx;
    font-weight: 600;
    color: #ffffff;
  }
}
</style>