350 lines
7.0 KiB
Vue
350 lines
7.0 KiB
Vue
<template>
|
|
<view class="scan-login-container">
|
|
<navBar title="扫码登录" />
|
|
|
|
<!-- 主要内容区域 -->
|
|
<view class="main-content">
|
|
<!-- 连接图标区域 -->
|
|
<view class="connection-area">
|
|
<up-image :src="loginImg" width="420rpx" height="187rpx"></up-image>
|
|
</view>
|
|
|
|
<!-- 提示文字 -->
|
|
<view class="tips-text">
|
|
<text class="main-tip">确认电脑登录</text>
|
|
<text class="sub-tip">为确保账号安全,请确认是您本人操作</text>
|
|
</view>
|
|
|
|
<!-- 按钮区域 -->
|
|
<view class="button-area">
|
|
<button class="confirm-btn" @click="toggleLogin(true)">确认登录</button>
|
|
<button class="cancel-btn" @click="toggleLogin(false)">取消登录</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
|
import { onShow, onLoad } from "@dcloudio/uni-app";
|
|
import navBar from '@/components/navBar/navBar.vue';
|
|
import api from '@/api/api.js';
|
|
import loginImg from '@/static/pcquer.png';
|
|
import navTo from '@/utils/navTo';
|
|
import { encryptAesEcb } from '@/utils/aesEcb.js';
|
|
import OTHER_HOST from '@/utils/otherHost.js';
|
|
|
|
// 响应式数据
|
|
const loading = ref(false);
|
|
const code = ref('');
|
|
// 页面加载
|
|
onLoad((options) => {
|
|
console.log('扫码登录页面加载完成', options);
|
|
if (options.code) {
|
|
code.value = options.code;
|
|
}
|
|
});
|
|
const toggleLogin = (status) => {
|
|
let userInfo=uni.getStorageSync('userInfo');
|
|
let str='';
|
|
if(status){
|
|
str='watchliveTo}'+code.value+'}'+userInfo.uuid+','+userInfo.realName+','+userInfo.photo;
|
|
}else{
|
|
str='watchliveCancel}'+code.value+'}'+userInfo.uuid+','+userInfo.realName+','+userInfo.photo;
|
|
}
|
|
let message=encryptAesEcb(str,'deoep09_klodLdAo');
|
|
uni.request({
|
|
url: OTHER_HOST+'/watchlive/sendWebsocketMsg',
|
|
method: 'POST',
|
|
data: {
|
|
message: message,
|
|
},
|
|
header: {
|
|
'Content-Type':'application/x-www-form-urlencoded'//自定义请求头信息
|
|
},
|
|
success: (res) => {
|
|
console.log(res);
|
|
if(res.data.code==1){
|
|
uni.navigateBack();
|
|
if(status){
|
|
uni.showToast({
|
|
title: '操作成功',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
}else{
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
},
|
|
});
|
|
}
|
|
// 确认登录
|
|
const confirmLogin = async () => {
|
|
if (loading.value) return;
|
|
|
|
try {
|
|
loading.value = true;
|
|
|
|
// 调用确认登录API
|
|
const result = await api.confirmScanLogin({
|
|
qrCode: loginData.qrCode,
|
|
sessionId: loginData.sessionId
|
|
});
|
|
|
|
if (result.code === 200) {
|
|
uni.showToast({
|
|
title: '登录成功',
|
|
icon: 'success'
|
|
});
|
|
|
|
// 登录成功后跳转
|
|
setTimeout(() => {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
});
|
|
}, 1500);
|
|
} else {
|
|
uni.showToast({
|
|
title: result.message || '登录失败',
|
|
icon: 'none'
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('确认登录失败:', error);
|
|
uni.showToast({
|
|
title: '网络错误，请重试',
|
|
icon: 'none'
|
|
});
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// 取消登录
|
|
const cancelLogin = () => {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要取消登录吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.navigateBack({
|
|
fail() {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.scan-login-container {
|
|
min-height: 100vh;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.main-content {
|
|
padding:220rpx 60rpx 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 连接图标区域 */
|
|
.connection-area {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 80rpx;
|
|
position: relative;
|
|
}
|
|
|
|
/* 手机图标 */
|
|
.phone-icon {
|
|
width: 120rpx;
|
|
height: 200rpx;
|
|
background-color: #f5f5f5;
|
|
border-radius: 20rpx;
|
|
position: relative;
|
|
border: 2rpx solid #e0e0e0;
|
|
}
|
|
|
|
.phone-screen {
|
|
width: 100rpx;
|
|
height: 140rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 10rpx;
|
|
position: absolute;
|
|
top: 20rpx;
|
|
left: 10rpx;
|
|
}
|
|
|
|
.phone-home-button {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background-color: #d0d0d0;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
left: 50rpx;
|
|
}
|
|
|
|
/* 连接信号 */
|
|
.connection-signals {
|
|
margin: 0 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.signal-line {
|
|
width: 4rpx;
|
|
background-color: #d0d0d0;
|
|
margin: 4rpx 0;
|
|
border-radius: 2rpx;
|
|
}
|
|
|
|
.signal-1 {
|
|
height: 20rpx;
|
|
}
|
|
|
|
.signal-2 {
|
|
height: 30rpx;
|
|
}
|
|
|
|
.signal-3 {
|
|
height: 40rpx;
|
|
}
|
|
|
|
/* PC图标 */
|
|
.pc-icon {
|
|
width: 140rpx;
|
|
height: 100rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.pc-screen {
|
|
width: 140rpx;
|
|
height: 80rpx;
|
|
background-color: #f5f5f5;
|
|
border: 2rpx solid #e0e0e0;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.pc-text {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pc-stand {
|
|
width: 60rpx;
|
|
height: 20rpx;
|
|
background-color: #e0e0e0;
|
|
border-radius: 0 0 8rpx 8rpx;
|
|
position: absolute;
|
|
bottom: -20rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/* 提示文字 */
|
|
.tips-text {
|
|
text-align: center;
|
|
margin-bottom: 100rpx;
|
|
}
|
|
|
|
.main-tip {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.sub-tip {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* 按钮区域 */
|
|
.button-area {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30rpx;
|
|
}
|
|
|
|
.confirm-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background-color: #8B2316;
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 12rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.confirm-btn:active {
|
|
background-color: #6B1A0F;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.cancel-btn {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background-color: #ffffff;
|
|
color: #666666;
|
|
border: 2rpx solid #e0e0e0;
|
|
border-radius: 12rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.cancel-btn:active {
|
|
background-color: #f5f5f5;
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
/* 加载状态 */
|
|
.confirm-btn[disabled] {
|
|
background-color: #cccccc;
|
|
color: #999999;
|
|
}
|
|
|
|
/* 响应式适配 */
|
|
@media screen and (max-width: 750rpx) {
|
|
.main-content {
|
|
padding: 60rpx 40rpx;
|
|
}
|
|
|
|
.connection-area {
|
|
margin-bottom: 60rpx;
|
|
}
|
|
|
|
.tips-text {
|
|
margin-bottom: 80rpx;
|
|
}
|
|
}
|
|
</style> |