uniapp扫码点餐代码

这里是一个简单的uniapp扫码点餐代码示例：

1. 在 `pages` 目录下新建 `order` 页面。

2. 在 `order` 目录下新建 `order.vue` 文件，编写以下代码：

<template>
  <view>
    <image :src="qrCode" mode="aspectFit" />
    <view v-if="showLoading" class="loading">
      <loading></loading>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      qrCode: '',
      showLoading: true,
      orderData: [], // 点餐数据
    }
  },
  onLoad() {
    // 生成订单二维码
    this.generateQRCode()
  },
  methods: {
    // 生成订单二维码
    generateQRCode() {
      // TODO: 调用后端接口生成订单二维码，并返回二维码链接
      this.qrCode = 'https://example.com/qrcode.png'

      // 模拟加载时间
      setTimeout(() => {
        this.showLoading = false
      }, 2000)
    },
  },
}
</script>

<style>
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

3. 在 `main.js` 中注册 `vue-qriously` 插件，用于生成二维码：

import VueQriously from 'vue-qriously'

Vue.use(VueQriously)

4. 在 `order.vue` 中引入 `vue-qriously`，并在模板中使用 `qriously` 组件生成二维码：

<template>
  <view>
    <qriously :value="qrCode" :size="200" />
    <view v-if="showLoading" class="loading">
      <loading></loading>
    </view>
  </view>
</template>

<script>
import VueQriously from 'vue-qriously'

export default {
  components: {
    qriously: VueQriously,
  },
  data() {
    return {
      qrCode: '',
      showLoading: true,
      orderData: [], // 点餐数据
    }
  },
  onLoad() {
    // 生成订单二维码
    this.generateQRCode()
  },
  methods: {
    // 生成订单二维码
    generateQRCode() {
      // TODO: 调用后端接口生成订单二维码，并返回二维码链接
      this.qrCode = 'https://example.com/qrcode.png'

      // 模拟加载时间
      setTimeout(() => {
        this.showLoading = false
      }, 2000)
    },
  },
}
</script>

<style>
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

5. 在 `order.vue` 中添加扫码支付逻辑：

<template>
  <view>
    <qriously :value="qrCode" :size="200" />
    <view v-if="showLoading" class="loading">
      <loading></loading>
    </view>
    <view v-else class="bottom" @tap="scanCode">
      <text class="text">扫码支付</text>
    </view>
  </view>
</template>

<script>
import VueQriously from 'vue-qriously'

export default {
  components: {
    qriously: VueQriously,
  },
  data() {
    return {
      qrCode: '',
      showLoading: true,
      orderData: [], // 点餐数据
    }
  },
  onLoad() {
    // 生成订单二维码
    this.generateQRCode()
  },
  methods: {
    // 生成订单二维码
    generateQRCode() {
      // TODO: 调用后端接口生成订单二维码，并返回二维码链接
      this.qrCode = 'https://example.com/qrcode.png'

      // 模拟加载时间
      setTimeout(() => {
        this.showLoading = false
      }, 2000)
    },
    // 扫码支付
    scanCode() {
      uni.scanCode({
        onlyFromCamera: true,
        success: (res) => {
          // TODO: 调用后端接口查询订单状态并完成支付
          uni.showToast({
            title: '支付成功',
            icon: 'success',
            duration: 2000,
            success: () => {
              uni.redirectTo({
                url: '/pages/pay/pay',
              })
            },
          })
        },
      })
    },
  },
}
</script>

<style>
.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  color: #fff;
  font-size: 32rpx;
}
</style>

这样，我们就完成了一个简单的uniapp扫码点餐功能。当用户打开 `order` 页面时，会生成一个订单二维码，用户扫描二维码后，会进入扫码支付流程。