stocktaking/pages/scan/scan.vue

<template>
  <view class="scan-bg">
    <view class="scan-title">扫码盘点</view>
    <button class="scan-btn" @click="doScan">点击开始扫码</button>
    <view v-if="result" class="scan-result">
      <text class="result-label">扫码结果：</text>
      <text class="result-value">{{ result }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      result: ''
    }
  },
  methods: {
    doScan() {
      uni.scanCode({
        success: (res) => {
          this.result = res.result;
        },
        fail: () => {
          uni.showToast({ title: '扫码失败', icon: 'none' });
        }
      });
    }
  }
}
</script>

<style>
.scan-bg {
  min-height: 100vh;
  background: linear-gradient(180deg, #eaf1fb 0%, #f7fafd 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120rpx;
}
.scan-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #222;
  margin-bottom: 80rpx;
}
.scan-btn {
  width: 80vw;
  max-width: 400px;
  height: 100rpx;
  font-size: 32rpx;
  font-weight: 700;
  border-radius: 20rpx;
  background: linear-gradient(90deg, #409eff 0%, #3b7cff 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(64,158,255,0.13);
  letter-spacing: 8rpx;
  margin: 0 auto 40rpx auto;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, box-shadow 0.2s;
}
.scan-btn:active {
  background: linear-gradient(90deg, #337ecc 0%, #2a5db0 100%);
}
.scan-result {
  margin-top: 40rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
  padding: 32rpx 24rpx;
  width: 80vw;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.result-label {
  font-size: 26rpx;
  color: #888;
  margin-bottom: 10rpx;
}
.result-value {
  font-size: 28rpx;
  color: #222;
  word-break: break-all;
}
</style>