我现在有一个收银页面，点击支付方式中的二维码支付会跳出一个弹窗，弹窗中有一个输入框，还有取消和确定按钮，vue3代码实现

在 Vue3 中，实现这个功能可以按照以下步骤操作：

1. 创建一个弹窗组件 (`QrCodePay.vue`)，用于展示二维码和输入框：

<!-- QrCodePay.vue -->
<template>
  <el-dialog :visible.sync="qrCodeVisible" width="50%" centered>
    <div class="qrcode-wrapper">
      <img :src="qrcodeSrc" alt="二维码图片" :class="{ loaded: qrcodeLoaded }"/>
    </div>
    <el-form-item label="请输入支付密码：" prop="password">
      <el-input v-model="password" type="password" placeholder="请输入支付密码"></el-input>
    </el-form-item>
    <el-dialog-actions>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirmPayment">{{ confirmBtnText }}</el-button>
    </el-dialog-actions>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import qrcode from 'qrcode'; // 使用一个第三方库生成二维码图片
import axios from 'axios'; // 假设这里使用axios做网络请求示例

const qrCodeVisible = ref(false);
let qrcodeData; // 二维码数据，待填充
let qrcodeLoaded = false;
let password = '';
const confirmBtnText = '确认支付';

function generateQrcode(data) {
  // 生成二维码图片并更新qrcodeSrc
  qrcode.toDataURL(data, 'image/png', function (err, src) {
    if (!err) {
      qrcodeData = data;
      qrcodeSrc = src.replace('data:image/png;base64,', '');
      qrcodeLoaded = true;
    }
  });
}

async function showQRCode() {
  qrCodeVisible.value = true;
  // 示例：从后台获取二维码数据，实际应用中替换为相应的接口调用
  const response = await axios.get('/api/qrcode');
  generateQrcode(response.data);
}

function cancel() {
  qrCodeVisible.value = false;
}

function confirmPayment() {
  // 检查密码是否为空，然后处理支付
  if (password.trim()) {
    // 实际支付逻辑
    console.log('正在处理支付...')
    // 清空密码
    password = '';
  } else {
    alert('请输入支付密码');
  }
  hideQRCode();
}

function hideQRCode() {
  qrCodeVisible.value = false;
}

onMounted(() => {
  // 初始化显示二维码时调用showQRCode函数
  showQRCode();
});
</script>

<style scoped>
.qrcode-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  margin-bottom: 20px;
}
</style>

2. 在主页面(`App.vue`或其他需要的组件)中引用 `QrCodePay` 并监听点击事件：

<!-- App.vue 或其他组件 -->
<template>
  <div id="app">
    <button @click="handleQrCodeClick">选择二维码支付</button>
    <!-- ... 其他内容 -->
    <QrCodePay v-if="showQRCodePay" :password.sync="password" @confirm="onConfirm" @cancel="onCancel" />
  </div>
</template>

<script>
import QrCodePay from './QrCodePay.vue';

export default {
  components: {
    QrCodePay,
  },
  data() {
    return {
      showQRCodePay: false,
      password: '',
    };
  },
  methods: {
    handleQrCodeClick() {
      this.showQRCodePay = true;
    },
    onConfirm() {
      // 支付成功回调
      console.log('支付成功');
    },
    onCancel() {
      this.showQRCodePay = false;
    },
  },
};
</script>