style 扫码扫脸登录

App.vue

@@ -19,7 +19,7 @@ onLaunch((options) => {
         useUserStore().changMachineEnv(false);
         return;
     }
-    if (1==1) {
+    if (isY9MachineType()) {
         console.warn('求职一体机环境');
         baseDB.resetAndReinit(); // 清空indexdb
         useUserStore().logOutApp();

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>

pages/login/login.vue

@@ -1,47 +1,77 @@
 <template>
   <AppLayout title="就业服务程序">
-    <!-- 扫码登录-->
+    <view v-if="isMachineEnv" class="alipay-login-container">
-    <view class="alipay-login-container" v-if="isMachineEnv">
+      <!-- 切换 -->
-      <view class="login-scan-area">
+      <view class="login-method-switch">
-        <view class="login-title">扫码登录</view>
+        <view
-        <view class="qrcode-tips">
+          class="method-item"
-          <text class="tips-text">请将二维码对准机器下方</text>
+          :class="{ active: loginMethod === 'face' }"
-          <!-- <text class="tips-subtext">扫一扫后点击确认完成登录</text> -->
+          @click="switchLoginMethod('face')"
+        >
+          扫脸登录
         </view>
-        <view class="qrcode-container">
+        <view
-          <view class="qrcode-wrapper" @click="refreshQrcode">
+          class="method-item"
+          :class="{ active: loginMethod === 'qrcode' }"
+          @click="switchLoginMethod('qrcode')"
+        >
+          扫码登录
+        </view>
+      </view>
+
+      <view class="login-scan-area">
+        <view class="login-title">{{ loginMethod === 'qrcode' ? '扫码登录' : '扫脸登录' }}</view>
+        <view class="qrcode-tips">
+          <text class="tips-text">{{
+            loginMethod === 'qrcode' ? '请将二维码对准机器下方' : '请将面部对准摄像头区域'
+          }}</text>
+        </view>
+      </view>
+
+      <!-- 扫码登录 -->
+      <view v-if="loginMethod === 'qrcode'" class="qrcode-container">
+        <view class="qrcode-wrapper">
           <view class="qrcode-border">
             <view class="qrcode-content">
               <view class="qrcode-pattern">
-                  <image class="qrcode-img" src="@/static/icon/qrcode.png"/>
+                <image class="qrcode-img" src="@/static/icon/qrcode.png" />
                 <view class="qrcode-corner top-left"></view>
                 <view class="qrcode-corner top-right"></view>
                 <view class="qrcode-corner bottom-left"></view>
                 <view class="qrcode-corner bottom-right"></view>
                 <view class="scan-line" :style="{ top: scanLineTop + 'rpx' }"></view>
               </view>
-
-                <!-- 二维码过期提示 -->
-                <view v-if="qrcodeExpired" class="expired-overlay">
-                  <text class="expired-text">二维码已过期</text>
-                  <view class="refresh-btn" @click.stop="refreshQrcode">
-                    <text class="refresh-text">点击刷新</text>
             </view>
           </view>
         </view>
       </view>
-          </view>
-        </view>
-      </view>
-      <!-- 扫码成功提示 -->
-      <view v-if="showSuccessTip" class="success-tip">
-        <view class="success-content">
-          <view class="success-icon">✓</view>
-          <text class="success-text">登录成功！</text>
-        </view>
-      </view>
-    </view>
 
+      <!-- 扫脸登录 -->
+      <view v-else class="face-container">
+        <view class="face-wrapper">
+          <view class="face-border">
+            <view class="face-content">
+              <view class="face-pattern">
+                <image class="face-img" src="@/static/icon/face-icon.png" />
+                <view class="face-scan-arc arc-1"></view>
+                <view class="face-scan-arc arc-2"></view>
+                <view class="face-scan-arc arc-3"></view>
+                <view class="scan-line" :style="{ top: scanLineTop + 'rpx' }"></view>
+              </view>
+             
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="countdown-container">
+        <view class="countdown-wrapper">
+          <text class="countdown-number">{{ countdown }}</text>
+          <text class="countdown-text">秒后自动返回</text>
+        </view>
+        <view class="cancel-btn" @click="cancelLogin">取消登录</view>
+      </view>
+    </view>
     <!-- 正常登录-->
     <tabcontrolVue v-else :current="tabCurrent">
       <template v-slot:tab0>
@@ -187,11 +217,12 @@ const fromValue = reactive({
   experience: '1',
 });
 
-// 扫码登录相关状态
+// 扫码扫脸登录
 const scanLineTop = ref(0);
 let scanInterval = null;
-// 登录成功提示
+const countdown = ref(60);
-const showSuccessTip = ref(false);
+let countdownTimer = null;
+const loginMethod = ref('face'); // 'qrcode' / 'face'
 
 onLoad((parmas) => {
   getTreeselect();
@@ -199,18 +230,62 @@ onLoad((parmas) => {
 });
 
 onMounted(() => {
+  if (isMachineEnv) {
+    startCountdown();
     startScanAnimation();
-  // 模拟扫码成功
+  }
-  setTimeout(() => {
-    //   showSuccessTip.value=true
-  }, 5000);
 });
 onUnmounted(() => {
-  showSuccessTip.value = false;
   stopScanAnimation();
+  stopCountdown();
 });
 
-// 开始扫描动画
+const startCountdown = () => {
+  stopCountdown();
+  countdown.value = 60;
+  countdownTimer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value <= 0) {
+      returnToHome();
+    }
+  }, 1000);
+};
+
+const stopCountdown = () => {
+  if (countdownTimer) {
+    clearInterval(countdownTimer);
+    countdownTimer = null;
+  }
+};
+
+const resetCountdown = () => {
+  stopCountdown();
+  startCountdown();
+};
+
+// 返回首页
+const returnToHome = () => {
+  stopCountdown();
+  stopScanAnimation();
+  uni.switchTab({
+    url: '/pages/index/index',
+  });
+};
+
+// 取消登录
+const cancelLogin = () => {
+  returnToHome();
+};
+
+// 切换登录方式
+const switchLoginMethod = (method) => {
+  if (loginMethod.value !== method) {
+    loginMethod.value = method;
+    resetCountdown();
+  }
+};
+
+// 开始动画
 const startScanAnimation = () => {
   clearInterval(scanInterval);
 
@@ -219,7 +294,7 @@ const startScanAnimation = () => {
   }, 30);
 };
 
-// 停止扫描动画
+// 停止动画
 const stopScanAnimation = () => {
   clearInterval(scanInterval);
 };
@@ -388,7 +463,34 @@ function complete() {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  padding: 40rpx 0;
+  box-sizing: border-box;
+}
+
+/* 登录方式切换 */
+.login-method-switch {
+  display: flex;
+  width: 80%;
+  margin-bottom: 40rpx;
+  background: #f5f5f5;
+  border-radius: 50rpx;
+  padding: 6rpx;
+}
+
+.method-item {
+  flex: 1;
+  text-align: center;
+  padding: 20rpx 0;
+  font-size: 28rpx;
+  color: #666;
+  border-radius: 50rpx;
+  transition: all 0.3s;
+
+  &.active {
+    background: #1677ff;
+    color: #fff;
+    font-weight: 500;
+  }
 }
 
 /* 扫码登录区域样式 */
@@ -408,11 +510,23 @@ function complete() {
   text-align: center;
 }
 
+.qrcode-tips {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 40rpx;
+}
+
+.tips-text {
+  font-size: 28rpx;
+  color: #333;
+}
+
+/* 二维码容器 */
 .qrcode-container {
   width: 100%;
   display: flex;
   justify-content: center;
-  margin-bottom: 40rpx;
 }
 
 .qrcode-wrapper {
@@ -428,7 +542,6 @@ function complete() {
   border-radius: 20rpx;
   padding: 20rpx;
   box-shadow: 0 8rpx 30rpx rgba(22, 119, 255, 0.1);
-  margin-bottom: 30rpx;
   position: relative;
 }
 
@@ -451,6 +564,7 @@ function complete() {
   position: relative;
   padding: 30rpx;
 }
+
 .qrcode-img {
   width: 100%;
   height: 100%;
@@ -485,6 +599,7 @@ function complete() {
     border-top: none;
     border-radius: 0 0 0 10rpx;
   }
+
   &.bottom-right {
     bottom: 0;
     right: 0;
@@ -505,319 +620,149 @@ function complete() {
   z-index: 10;
 }
 
-.expired-overlay {
+/* 扫脸登录样式 */
-  position: absolute;
+.face-container {
-  top: 0;
-  left: 0;
   width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
-  border-radius: 10rpx;
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  z-index: 20;
 }
 
-.expired-text {
+.face-wrapper {
-  font-size: 32rpx;
-  color: #fff;
-  margin-bottom: 30rpx;
-}
-
-.refresh-btn {
-  padding: 16rpx 40rpx;
-  background-color: #1677ff;
-  border-radius: 50rpx;
-}
-
-.refresh-text {
-  font-size: 28rpx;
-  color: #fff;
-}
-
-.qrcode-tips {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.tips-text {
+.face-border {
-  font-size: 28rpx;
+  width: 400rpx;
-  color: #333;
+  height: 400rpx;
-  margin-bottom: 10rpx;
+  background-color: #fff;
-}
+  border-radius: 50%;
-
+  padding: 20rpx;
-.tips-subtext {
+  box-shadow: 0 8rpx 30rpx rgba(22, 119, 255, 0.1);
-  font-size: 24rpx;
-  color: #666;
-}
-
-.refresh-tips {
-  margin-bottom: 40rpx;
-}
-
-.switch-method {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 30rpx 0;
-  border-top: 1rpx solid #f0f0f0;
-}
-
-.switch-text {
-  font-size: 28rpx;
-  color: #666;
-}
-
-.switch-btn {
-  display: flex;
-  align-items: center;
-}
-
-.btn-text {
-  font-size: 28rpx;
-  color: #1677ff;
-  margin-right: 10rpx;
-}
-
-.icon-arrow {
-  font-size: 28rpx;
-  color: #1677ff;
-}
-
-/* 账号密码登录区域样式 */
-.login-password-area {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 0 40rpx;
-}
-
-.password-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 60rpx;
-}
-
-.back-btn {
-  width: 60rpx;
-  height: 60rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 20rpx;
-}
-
-.icon-back {
-  font-size: 36rpx;
-  color: #333;
-}
-
-.login-form {
-  width: 100%;
-}
-
-.form-item {
-  margin-bottom: 40rpx;
   position: relative;
 }
 
-.item-label {
+.face-content {
-  font-size: 28rpx;
-  color: #333;
-  margin-bottom: 20rpx;
-}
-
-.item-input {
   width: 100%;
-  height: 80rpx;
+  height: 100%;
   background-color: #f8f8f8;
-  border-radius: 10rpx;
+  border-radius: 50%;
-  padding: 0 24rpx;
+  display: flex;
-  font-size: 28rpx;
+  align-items: center;
-  color: #333;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
 }
 
-.input-placeholder {
+.face-pattern {
-  color: #999;
+  width: 300rpx;
-  font-size: 28rpx;
+  height: 300rpx;
+  position: relative;
 }
 
-.forget-password {
+.face-img {
-  position: absolute;
-  right: 0;
-  top: 0;
-  font-size: 26rpx;
-  color: #1677ff;
-}
-
-.login-btn {
   width: 100%;
-  height: 90rpx;
+  height: 100%;
-  background-color: #1677ff;
+}
+
+.face-scan-arc {
+  position: absolute;
+  border: 4rpx solid transparent;
+  border-top-color: #1677ff;
+  border-radius: 50%;
+  width: 300rpx;
+  height: 300rpx;
+  top: 0rpx;
+  left: 0rpx;
+
+  &.arc-1 {
+    animation: faceScanRotate1 3s linear infinite;
+  }
+
+  &.arc-2 {
+    transform: rotate(120deg);
+    animation: faceScanRotate2 3s linear infinite;
+  }
+
+  &.arc-3 {
+    transform: rotate(240deg);
+    animation: faceScanRotate3 3s linear infinite;
+  }
+}
+
+@keyframes faceScanRotate1 {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes faceScanRotate2 {
+  0% {
+    transform: rotate(120deg);
+  }
+  100% {
+    transform: rotate(480deg);
+  }
+}
+@keyframes faceScanRotate3 {
+  0% {
+    transform: rotate(240deg);
+  }
+  100% {
+    transform: rotate(600deg);
+  }
+}
+
+/* 底部操作区域 */
+.bottom-action-area {
+  width: 100%;
+  padding: 40rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 30rpx;
+}
+
+.countdown-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20rpx;
+}
+
+.countdown-number {
+  font-size: 40rpx;
+  font-weight: 600;
+  color: #1677ff;
+  min-width: 60rpx;
+  text-align: center;
+}
+
+.countdown-text {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.cancel-btn {
+  margin-top: 20rpx;
+  width: 300rpx;
+  height: 80rpx;
+  background: transparent;
+  border: 2rpx solid #1677ff;
   border-radius: 50rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 60rpx;
-
-  &.disabled {
-    background-color: #a0cfff;
-  }
-}
-
-.login-btn-text {
   font-size: 32rpx;
-  color: #fff;
-  font-weight: 500;
-}
-
-.agreement {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 40rpx;
-  flex-wrap: wrap;
-}
-
-.agreement-checkbox {
-  margin-right: 10rpx;
-}
-
-.checkbox-icon {
-  width: 32rpx;
-  height: 32rpx;
-  border-radius: 6rpx;
-  border: 2rpx solid #ddd;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &.checked {
-    background-color: #1677ff;
-    border-color: #1677ff;
-  }
-}
-
-.checkmark {
-  font-size: 24rpx;
-  color: #fff;
-}
-
-.agreement-text {
-  font-size: 24rpx;
-  color: #666;
-  margin-right: 6rpx;
-}
-
-.agreement-link {
-  font-size: 24rpx;
   color: #1677ff;
-  margin-right: 6rpx;
+  font-weight: 500;
-}
+  transition: all 0.3s;
-
+  &:active {
-.other-login {
+    background: rgba(22, 119, 255, 0.1);
-  margin-top: 80rpx;
-}
-
-.other-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: 50rpx;
-}
-
-.title-line {
-  flex: 1;
-  height: 1rpx;
-  background-color: #eee;
-}
-
-.title-text {
-  font-size: 24rpx;
-  color: #999;
-  margin: 0 20rpx;
-}
-
-.login-methods {
-  display: flex;
-  justify-content: center;
-  gap: 100rpx;
-}
-
-.method-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.method-icon {
-  width: 100rpx;
-  height: 100rpx;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 40rpx;
-  color: #fff;
-  margin-bottom: 20rpx;
-
-  &.scan-icon {
-    background-color: #1677ff;
   }
-
-  &.sms-icon {
-    background-color: #52c41a;
-  }
-}
-
-.method-text {
-  font-size: 24rpx;
-  color: #666;
-}
-
-/* 登录成功提示 */
-.success-tip {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.success-content {
-  background-color: #fff;
-  border-radius: 20rpx;
-  padding: 60rpx 80rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.success-icon {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 50%;
-  background-color: #52c41a;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 60rpx;
-  color: #fff;
-  margin-bottom: 30rpx;
-}
-
-.success-text {
-  font-size: 32rpx;
-  color: #333;
 }
 </style>