tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' of http://25.13.9.101:9000/K17_AITS/tra-app into develop

Browse Source
This commit is contained in:
杨航
2025-12-17 16:46:36 +08:00
parent 3281c3704d 784feb524b
commit e6bea359f9
3 changed files with 64 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+1 -1
View File
@@ -7,7 +7,7 @@ ENV = 'development'
# VITE_APP_BASE_API_Url = 'https://aits.jlbank.com.cn:7001'
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7003'
VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7001'
src/pages/competition/matching.vue
+1 -1
View File
@@ -11,7 +11,7 @@
<image class="img1" :src="data_info.isAnony === 'N' ? pkAnonymousOpen() : pkAnonymousClose()"></image>
<view class="text">{{ data_info.isAnony === 'N' ? '不匿名' : '匿名' }}</view>
</view>
<view class="top-icon-div" @click="click_top_icon(2)">
<view class="top-icon-div" @click="click_top_icon(2)" v-if="!!data_info.ruleDesc">
<image class="img2" :src="pkRules()"></image>
<view class="text">规则说明</view>
</view>
src/pages/sparring/components/talk-camera.nvue
+62 -223
View File
@@ -1,176 +1,63 @@
<template>
<view class="live-container" :style="{ top: `${topVal}px`, left: `${leftVal}px` }">
<live-pusher
id="livePusher"
class="livePusher"
:muted="true"
:enable-camera="true"
:auto-focus="true"
:beauty="0"
:whiteness="0"
aspect="9:16"
mode="SD"
></live-pusher>
<view
class="drag-controller"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@click="handleClick"
></view>
<view>
<view v-if="isPreviewing" class="live-container">
<cover-view class="pusher-container">
<live-pusher
id="livePusher"
class="livePusher"
:muted="true"
:enable-camera="true"
:auto-focus="true"
:beauty="0"
:whiteness="0"
aspect="9:16"
mode="SD"
></live-pusher>
</cover-view>
</view>
</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
// 响应式数据
const topVal = ref(30+iStatusBarHeight); // 初始顶部位置 (px)
const leftVal = ref(0); // 初始左侧位置 (px)
import { getPhoneEnvBool } from '@/common/common';
import { onMounted, ref, reactive, nextTick } from 'vue';
const livePusherContext = ref(null);
// 触摸相关数据
const startX = ref(40); // 触摸起始X坐标 (px)
const startY = ref(0); // 触摸起始Y坐标 (px)
const startLeft = ref(0); // 触摸起始时的left值 (px)
const startTop = ref(0); // 触摸起始时的top值 (px)
const isAnimating = ref(false); // 动画锁，防止多次触发
// 系统信息 - 直接使用px，无需rpx换算
const systemInfo = uni.getSystemInfoSync();
const screenWidthPx = systemInfo.windowWidth; // 屏幕宽度（px）
const screenHeightPx = systemInfo.windowHeight; // 屏幕高度（px）
// 容器尺寸 (px) - 直接定义像素尺寸
const CONTAINER_WIDTH = 135;
const CONTAINER_HEIGHT = 240;
// 初始化
const isPreviewing = ref(false);
const init = (componentProxy) => {
livePusherContext.value = uni.createLivePusherContext('livePusher', componentProxy);
livePusherContext.value.switchCamera()
};
// 触摸开始事件
const handleTouchStart = (e) => {
console.log('=== 触摸开始 ===');
// 结束动画中和，不能开始
if (isAnimating.value) return;
try {
if (!e.touches || e.touches.length === 0) {
console.error('没有检测到触摸点');
return;
// 切换摄像头
const switchCamera = () => {
livePusherContext.value?.switchCamera({
success: (res) => {
console.log('livePusher.switchCamera:', JSON.stringify(res));
},
fail: (err) => {
console.error('切换摄像头失败:', err);
}
const touch = e.touches[0];
// 安全地获取触摸坐标
const clientX = touch.screenX;
const clientY = touch.screenY;
startX.value = clientX;
startY.value = clientY;
// 记录当前容器的位置
startLeft.value = leftVal.value;
startTop.value = topVal.value;
} catch (error) {
console.error('触摸开始事件处理出错:', error);
}
});
};
// 触摸移动事件 - 移除rpx换算，直接使用px计算
const handleTouchMove = (e) => {
// 防止事件穿透
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
// 动画中不响应触摸移动
if (isAnimating.value) return;
try {
if (!e.touches || e.touches.length === 0) {
return;
}
const touch = e.touches[0];
// 安全地获取当前触摸坐标
const currentX = touch.screenX;
const currentY = touch.screenY;
// 计算偏移量 (px) - 直接使用px，无需换算
const deltaX = currentX - startX.value;
const deltaY = currentY - startY.value;
// 检查偏移量是否有效
if (isNaN(deltaX) || isNaN(deltaY)) {
return;
}
// 直接更新位置（px），无需rpx转换
const newLeft = startLeft.value + deltaX;
const newTop = startTop.value + deltaY;
// 边界检测 - 使用px单位计算边界
const maxLeft = screenWidthPx - CONTAINER_WIDTH;
const maxTop = screenHeightPx - CONTAINER_HEIGHT;
// 确保位置在有效范围内且不是 NaN
if (!isNaN(newLeft) && !isNaN(newTop)) {
leftVal.value = Math.max(0, Math.min(newLeft, maxLeft));
topVal.value = Math.max(0, Math.min(newTop, maxTop));
}
} catch (error) {
console.error('触摸移动事件处理出错:', error);
}
};
// 触摸结束事件 - 吸附逻辑改为px计算
const handleTouchEnd = (e) => {
console.log('=== 触摸结束 ===');
if (isAnimating.value) return;
// 1. 计算核心参数（px单位）
const currentLeft = leftVal.value; // 松手时小窗的左偏移
const windowCenterX = currentLeft + CONTAINER_WIDTH / 2; // 小窗中心的X坐标（px）
const screenMiddleX = screenWidthPx / 2; // 屏幕中线X坐标（px）
// 2. 判断更近的边缘：中心在左半屏 → 吸附左侧；右半屏 → 吸附右侧
const targetLeft = windowCenterX < screenMiddleX ? 0 : screenWidthPx - CONTAINER_WIDTH;
const targetTop = topVal.value; // Y轴保持松手位置
// 3. 平滑动画过渡
const duration = 160; // 动画时长（ms）
const frameCount = 60; // 动画帧数
const stepX = (targetLeft - currentLeft) / frameCount; // 每帧X偏移量
const stepY = (targetTop - topVal.value) / frameCount; // Y轴无偏移
let currentFrame = 0;
isAnimating.value = true;
const animationTimer = setInterval(() => {
currentFrame++;
// 更新位置
leftVal.value += stepX;
topVal.value += stepY;
// 动画结束
if (currentFrame >= frameCount) {
clearInterval(animationTimer);
// 强制修正到目标位置（避免浮点误差）
leftVal.value = targetLeft;
topVal.value = targetTop;
isAnimating.value = false;
console.log('吸附完成，最终位置:', { left: leftVal.value, top: topVal.value });
}
}, duration / frameCount);
// 仅重置触摸起始坐标
startX.value = 0;
startY.value = 0;
};
// 开启预览
const startPreview = () => {
console.log('摄像头开启预览');
if (!livePusherContext.value) return;
livePusherContext.value.startPreview({
success: (res) => {
console.log('摄像头开启成功');
},
fail: (err) => {
console.error('开启预览失败:', err);
isPreviewing.value = true;
nextTick(() => {
livePusherContext.value?.startPreview({
success: (res) => {
console.log('摄像头开启成功');
},
fail: (err) => {
console.error('开启预览失败:', err);
},
complete: (err) => {
console.error('complete预览:', err);
}
});
if (getPhoneEnvBool('AND')) {
console.log('切换前置');
}
});
};
@@ -178,82 +65,34 @@
// 关闭预览
const stopPreview = () => {
console.log('关闭预览');
if (!livePusherContext.value) return;
livePusherContext.value.stopPreview({
livePusherContext.value?.stopPreview({
success: (res) => {
console.log('关闭成功');
console.log('livePusher.stopPreview:', JSON.stringify(res));
},
fail: (err) => {
console.error('关闭预览失败:', err);
},
complete: (err) => {
console.error('complete预览:', err);
}
});
isPreviewing.value = false;
};
const lastClickTime = ref(0);
let clickTimer = null;
const handleClick = () => {
// 2. 双击判断逻辑
const currentTime = new Date().getTime(); // 当前点击时间戳
const timeDiff = currentTime - lastClickTime.value; // 两次点击的时间差
if (timeDiff > 0 && timeDiff <= 300) {
switchCamera();
// 清空上次点击时间，避免连续点击重复触发
lastClickTime.value = 0;
// 清除定时器（如果有）
if (clickTimer) {
clearTimeout(clickTimer);
clickTimer = null;
}
} else {
// 2.2 第一次点击 → 记录时间，设置定时器（超时则清空）
lastClickTime.value = currentTime;
if (clickTimer) {
clearTimeout(clickTimer);
}
clickTimer = setTimeout(() => {
lastClickTime.value = 0; // 超时未触发双击，重置
}, 300);
}
};
// 切换摄像头
const switchCamera = () => {
if (!livePusherContext.value) return;
livePusherContext.value.switchCamera({
success: (res) => {},
});
};
// 组件挂载后的初始化
onMounted(() => {
leftVal.value = screenWidthPx - CONTAINER_WIDTH;
});
// 暴露方法给父组件
defineExpose({
init,
switchCamera,
stopPreview,
startPreview
});
defineExpose({ init, switchCamera, stopPreview, startPreview });
</script>
<style scoped>
.live-container {
position: absolute;
right: 0;
top: 150rpx;
overflow: hidden;
width: 135px;
height: 240px;
flex: 1;
display: flex;
border-radius: 20rpx;
width: 270rpx;
height: 480rpx;
}
.livePusher {
width: 135px;
height: 240px;
border-radius: 10px;
overflow: hidden;
}
.drag-controller {
width: 135px;
height: 240px;
position: absolute;
z-index: 550;
.pusher-container{
overflow: hidden;
border-radius: 20rpx;
}
</style>