uniapp写一个扫码页面

Sure!

首先，需要在 `manifest.json` 文件中声明使用相机的权限：

{
  "mp-weixin": {
    "appid": "",
    "permission": {
      "scope.camera": {
        "desc": "用于扫码"
      }
    }
  }
}

接下来，创建一个新页面 `scan-code`，并在 `pages.json` 中进行配置：

{
  "pages": [
    {
      "path": "pages/scan-code/scan-code",
      "style": {
        "navigationBarTitleText": "扫码"
      }
    }
  ]
}

然后，在 `scan-code.vue` 文件中编写如下代码：

<template>
  <view class="container">
    <camera
      :device-position="cameraPosition"
      :flash="flash"
      @scanCode="onScanCode"
    ></camera>
    <view class="toolbar">
      <view class="icon" @tap="toggleFlash">
        <image :src="flashIcon"></image>
      </view>
      <view class="spacer"></view>
      <view class="icon" @tap="toggleCameraPosition">
        <image :src="cameraPositionIcon"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cameraPosition: 'back', // 后置摄像头
      flash: 'off', // 闪光灯关闭
    };
  },
  computed: {
    flashIcon() {
      return this.flash === 'off' ? '/static/flash-off.png' : '/static/flash-on.png';
    },
    cameraPositionIcon() {
      return this.cameraPosition === 'back' ? '/static/camera-front.png' : '/static/camera-back.png';
    },
  },
  methods: {
    toggleFlash() {
      this.flash = this.flash === 'off' ? 'torch' : 'off';
    },
    toggleCameraPosition() {
      this.cameraPosition = this.cameraPosition === 'back' ? 'front' : 'back';
    },
    onScanCode(e) {
      console.log('扫码结果：', e.detail.result);
    },
  },
};
</script>

<style>
.container {
  width: 100%;
  height: 100%;
}

.toolbar {
  position: absolute;
  bottom: 20rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.icon {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spacer {
  flex: 1;
}
</style>

这里使用了 `camera` 组件来调用相机，通过 `device-position` 和 `flash` 属性来控制相机的位置和闪光灯状态。同时，在页面底部添加了一个工具栏，用于切换闪光灯和相机位置。

最后，记得将工具栏需要用到的图片放到 `static` 目录下。

这样就完成了一个简单的扫码页面。