style 扫码扫脸登录

pages/chat/components/uploadQrcode.vue

@@ -0,0 +1,118 @@
+<template>
+  <uni-popup
+    ref="popup"
+    type="center"
+    borderRadius="12px 12px 0 0"
+    @change="changePopup"
+    background-color="#F6F6F6"
+  >
+    <view class="popup-inner">
+      <view class="title">请扫码上传附件</view>
+      <view class="img-box">
+        <canvas canvas-id="qrcode" id="qrcode" />
+      </view>
+      <view class="close-btn" @click="close"></view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import uQRCode from '@/static/js/qrcode';
+import { ref, inject, getCurrentInstance } from 'vue';
+const emit = defineEmits(['onSend', 'onClose']);
+const { $api } = inject('globalFunction');
+const instance = getCurrentInstance();
+const popup = ref(null);
+
+function open() {
+  popup.value.open();
+  makeQrcode();
+}
+
+function close() {
+  popup.value.close();
+}
+
+function changePopup(e) {
+  if (e.show) {
+  } else {
+    emit('onClose');
+  }
+}
+
+function makeQrcode() {
+  const code = '111'
+  setTimeout(() => {
+    uQRCode.make({
+      canvasId: 'qrcode',
+      text: code,
+      size: uni.upx2px(300),
+      margin: 0,
+      backgroundColor: '#ffffff',
+      foregroundColor: '#1677ff',
+      fileType: 'png',
+      correctLevel: uQRCode.defaults.correctLevel,
+      success: (res) => {
+        console.log(res,'++');
+      },
+    });
+  }, 100);
+}
+
+defineExpose({ open, close });
+</script>
+
+<style lang="scss" scoped>
+.popup-inner{
+    padding:  30rpx;
+    padding-bottom: 40rpx;
+    width: 400rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.title{
+    font-size: 30rpx;
+    color: #333;
+    margin-bottom: 30rpx;
+    font-weight: bold;
+}
+.img-box {
+  margin: 0 auto;
+  width: 300rpx;
+  height: 300rpx;
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+}
+.close-btn {
+  position: absolute;
+  right: 20rpx;
+  top: 20rpx;
+  width: 56rpx;
+  height: 56rpx;
+  &::before {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    content: '';
+    width: 4rpx;
+    height: 28rpx;
+    border-radius: 2rpx;
+    background: #5a5a68;
+    transform: translate(50%, -50%) rotate(-45deg);
+  }
+  &::after {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    content: '';
+    width: 4rpx;
+    height: 28rpx;
+    border-radius: 2rpx;
+    background: #5a5a68;
+    transform: translate(50%, -50%) rotate(45deg);
+  }
+}
+</style>