style 扫码扫脸登录

pages/chat/components/ai-paging.vue

@@ -241,6 +241,7 @@
             </view>
         </view>
         <PopupFeeBack ref="feeback" @onClose="colseFeeBack" @onSend="confirmFeeBack"></PopupFeeBack>
+        <UploadQrcode ref="qrcodeRef"></UploadQrcode>
         <MsgTips ref="feeBackTips" content="已收到反馈，感谢您的关注" title="反馈成功" :icon="successIcon"></MsgTips>
     </view>
 </template>
@@ -263,6 +264,7 @@ import useChatGroupDBStore from '@/stores/userChatGroupStore';
 import MdRender from '@/components/md-render/md-render.vue';
 import CollapseTransition from '@/components/CollapseTransition/CollapseTransition.vue';
 import PopupFeeBack from './popupbadFeeback.vue';
+import UploadQrcode from './uploadQrcode.vue';
 import AudioWave from './AudioWave.vue';
 import WaveDisplay from './WaveDisplay.vue';
 import FileIcon from './fileIcon.vue';
@@ -279,6 +281,8 @@ const { $api, navTo, throttle } = inject('globalFunction');
 const emit = defineEmits(['onConfirm']);
 const { messages, isTyping, textInput, chatSessionID } = storeToRefs(useChatGroupDBStore());
 import successIcon from '@/static/icon/success.png';
+import useUserStore from '@/stores/useUserStore';
+const {isMachineEnv} = storeToRefs(useUserStore());
 // hook
 // 语音识别
 const {
@@ -316,6 +320,7 @@ const feeBackTips = ref(null);
 const state = reactive({
     uploadFileTips: '请根据以上附件，帮我推荐岗位。',
 });
+const qrcodeRef = ref(null);
 
 const statusText = computed(() => {
     switch (status.value) {
@@ -599,6 +604,10 @@ function changeVoice() {
 }
 
 function changeShowFile() {
+    if(isMachineEnv){
+        qrcodeRef.value?.open()
+        return
+    }
     showfile.value = !showfile.value;
 }
 

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>