camera.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802
  1. <template>
  2. <view class="camera-container">
  3. <!-- 顶部标题栏 -->
  4. <!-- <view class="header">
  5. <view class="back-button" @click="back">
  6. <text class="iconfont icon-back">&#xe679;</text>
  7. </view>
  8. <view class="title">中国传统文化测试</view>
  9. <view class="controls">
  10. <text class="iconfont icon-mic">&#xe677;</text>
  11. <text class="iconfont icon-settings" @click="toggleSettings">&#xe678;</text>
  12. </view>
  13. </view> -->
  14. <!-- 主要内容区域 -->
  15. <view class="content">
  16. <!-- 数字人头像 -->
  17. <view class="digital-avatar">
  18. <web-view v-if="digitalHumanUrl" :src="digitalHumanUrl" class="digital-human-webview"></web-view>
  19. <image v-else src="/static/avatar.png" mode="aspectFill" class="avatar-image"></image>
  20. </view>
  21. <!-- 进度指示器 -->
  22. <!-- <view class="progress-container">
  23. <view class="progress-step" v-for="(step, index) in 3" :key="index">
  24. <view class="step-circle" :class="{'active': currentStep >= index+1}">{{index+1}}</view>
  25. <view class="step-text">{{stepTexts[index]}}</view>
  26. </view>
  27. <view class="progress-bar">
  28. <view class="progress-fill" :style="{width: progressWidth + '%'}"></view>
  29. </view>
  30. </view> -->
  31. <!-- 面试内容区域 -->
  32. <view class="interview-content">
  33. <!-- 问题编号和进度 -->
  34. <view class="question-number">
  35. <text>{{currentQuestionIndex + 1}}-{{currentQuestion.id}}/{{questions.length}}</text>
  36. </view>
  37. <!-- 问题和选项区域 -->
  38. <view class="question-area">
  39. <view class="question-importance">
  40. <text v-if="currentQuestion.isImportant">重点题</text> {{currentQuestion.text}}
  41. </view>
  42. <view class="options">
  43. <view v-for="(option, index) in currentQuestion.options" :key="index" class="option-item"
  44. :class="{
  45. 'option-selected': selectedOption === index,
  46. 'option-correct': showResult && index === currentQuestion.correctAnswer,
  47. 'option-wrong': showResult && selectedOption === index && index !== currentQuestion.correctAnswer
  48. }"
  49. @click="selectOption(index)">
  50. <text class="option-text">{{option}}</text>
  51. </view>
  52. </view>
  53. <view class="timer-container">
  54. <text class="timer-text">本题剩余时间 {{remainingTime}}</text>
  55. </view>
  56. <button class="next-button" @click="nextQuestion" :disabled="selectedOption === null">
  57. 下一题
  58. </button>
  59. </view>
  60. </view>
  61. </view>
  62. <!-- 底部控制栏 -->
  63. <!-- <view class="footer">
  64. <view class="timer">本题剩余 {{remainingTime}}</view>
  65. <view class="next-step">进入下一题</view>
  66. </view> -->
  67. <!-- 面试结束弹窗 -->
  68. <view class="interview-end-modal" v-if="showEndModal">
  69. <view class="modal-content">
  70. <view class="modal-title">测试已完成</view>
  71. <view class="score-display">{{score}}/{{totalQuestions}}</view>
  72. <view class="modal-message">您在本次中国传统文化测试中答对了{{score}}道题目,共{{totalQuestions}}道题目。</view>
  73. <view class="modal-buttons">
  74. <button type="default" class="modal-button" @click="restartTest">重新测试</button>
  75. <button type="primary" class="modal-button" @click="back">返回首页</button>
  76. </view>
  77. </view>
  78. </view>
  79. <!-- AI面试结束页面 -->
  80. <view class="interview-complete-screen" v-if="interviewCompleted">
  81. <view class="digital-avatar-large">
  82. <image src="/static/avatar.png" mode="aspectFill" class="avatar-image-large"></image>
  83. </view>
  84. <view class="complete-message">AI面试已结束</view>
  85. <view class="complete-description">本次面试的全部环节已结束。非常感谢您的参与。</view>
  86. <button class="complete-button" @click="back">我知道了</button>
  87. </view>
  88. <!-- 在模板中添加一个测试按钮(开发时使用,发布前删除) -->
  89. <!-- <button @click="testEndScreen" style="position: absolute; top: 10px; right: 10px; z-index: 9999;">测试结束页</button> -->
  90. </view>
  91. </template>
  92. <script>
  93. export default {
  94. data() {
  95. return {
  96. cameraContext: null,
  97. devicePosition: 'front',
  98. interviewStarted: true,
  99. showEndModal: false,
  100. currentQuestionIndex: 0,
  101. currentStep: 1,
  102. stepTexts: ['测试准备', '回答问题', '测试结束'],
  103. progressWidth: 50,
  104. remainingTime: '00:27',
  105. selectedOption: null,
  106. showResult: false,
  107. isAnswerCorrect: false,
  108. questions: [{
  109. id: 6,
  110. text: '以下不属于中国传统节日的是( )。',
  111. options: [
  112. 'A. 春节',
  113. 'B. 端午节',
  114. 'C. 重阳节',
  115. 'D. 元旦'
  116. ],
  117. correctAnswer: 3,
  118. isImportant: true,
  119. explanation: '元旦是公历新年,属于现代节日,而春节、端午节和重阳节都是中国传统节日。'
  120. },
  121. {
  122. id: 7,
  123. text: '下列哪个是中国四大名著之一( )。',
  124. options: [
  125. 'A. 聊斋志异',
  126. 'B. 西游记',
  127. 'C. 世说新语',
  128. 'D. 聊斋志异'
  129. ],
  130. correctAnswer: 1,
  131. isImportant: false,
  132. explanation: '中国四大名著是《红楼梦》、《西游记》、《水浒传》和《三国演义》。'
  133. },
  134. {
  135. id: 8,
  136. text: '中国传统文化中"仁义礼智信"五常不包括( )。',
  137. options: [
  138. 'A. 忠',
  139. 'B. 孝',
  140. 'C. 礼',
  141. 'D. 信'
  142. ],
  143. correctAnswer: 1,
  144. isImportant: true,
  145. explanation: '儒家的五常是"仁、义、礼、智、信",不包括"孝"。'
  146. }
  147. ],
  148. useVideo: false,
  149. timerInterval: null,
  150. score: 0,
  151. totalQuestions: 0,
  152. interviewCompleted: false,
  153. digitalHumanUrl: '' // 数字人URL
  154. }
  155. },
  156. computed: {
  157. currentQuestion() {
  158. return this.questions[this.currentQuestionIndex];
  159. }
  160. },
  161. onReady() {
  162. // 创建相机上下文
  163. this.cameraContext = uni.createCameraContext();
  164. // 创建AI视频上下文
  165. if (this.useVideo) {
  166. this.aiVideoContext = uni.createVideoContext('aiInterviewer');
  167. }
  168. // 启动倒计时
  169. this.startTimer();
  170. // 设置总题目数
  171. this.totalQuestions = this.questions.length;
  172. // 初始化数字人
  173. this.initDigitalHuman();
  174. },
  175. methods: {
  176. startTimer() {
  177. // 模拟倒计时
  178. let seconds = 30; // 每题30秒
  179. this.timerInterval = setInterval(() => {
  180. seconds--;
  181. if (seconds <= 0) {
  182. clearInterval(this.timerInterval);
  183. // 时间到,自动提交答案
  184. if (!this.showResult) {
  185. this.checkAnswer();
  186. }
  187. }
  188. const min = Math.floor(seconds / 60).toString().padStart(2, '0');
  189. const sec = (seconds % 60).toString().padStart(2, '0');
  190. this.remainingTime = `${min}:${sec}`;
  191. }, 1000);
  192. },
  193. resetTimer() {
  194. clearInterval(this.timerInterval);
  195. this.startTimer();
  196. },
  197. selectOption(index) {
  198. if (this.showResult) return; // 已显示结果时不能再选择
  199. this.selectedOption = index;
  200. this.playAiSpeaking();
  201. },
  202. checkAnswer() {
  203. clearInterval(this.timerInterval); // 停止计时
  204. // 确保当前问题存在
  205. if (!this.currentQuestion) {
  206. console.error('当前问题不存在');
  207. return;
  208. }
  209. // 检查答案是否正确
  210. this.isAnswerCorrect = this.selectedOption === this.currentQuestion.correctAnswer;
  211. // 更新分数
  212. if (this.isAnswerCorrect) {
  213. this.score++;
  214. }
  215. // 检查是否是最后一题
  216. if (this.currentQuestionIndex === this.questions.length - 1) {
  217. // 显示AI面试结束页面
  218. this.showEndModal = false;
  219. this.interviewCompleted = true;
  220. return;
  221. }
  222. // 不是最后一题,进入下一题
  223. this.goToNextQuestion();
  224. },
  225. nextQuestion() {
  226. // 如果还没有显示结果,先检查答案
  227. if (this.selectedOption !== null) {
  228. this.checkAnswer();
  229. return;
  230. }
  231. },
  232. // 新增方法,处理进入下一题的逻辑
  233. goToNextQuestion() {
  234. // 重置状态
  235. this.showResult = false;
  236. this.selectedOption = null;
  237. // 前往下一题
  238. this.currentQuestionIndex++;
  239. // 检查是否已完成所有题目
  240. if (this.currentQuestionIndex >= this.questions.length) {
  241. // 显示AI面试结束页面,确保弹窗不显示
  242. this.showEndModal = false;
  243. this.interviewCompleted = true;
  244. // 确保清除计时器
  245. if (this.timerInterval) {
  246. clearInterval(this.timerInterval);
  247. }
  248. return;
  249. }
  250. // 重置计时器
  251. this.resetTimer();
  252. // 更新进度
  253. this.progressWidth = (this.currentQuestionIndex + 1) / this.questions.length * 100;
  254. // 播放AI介绍下一题
  255. this.playAiSpeaking();
  256. setTimeout(() => {
  257. this.pauseAiSpeaking();
  258. }, 2000);
  259. },
  260. toggleSettings() {
  261. // 打开设置面板
  262. uni.showToast({
  263. title: '设置功能开发中',
  264. icon: 'none'
  265. });
  266. },
  267. back() {
  268. // 清除计时器
  269. if (this.timerInterval) {
  270. clearInterval(this.timerInterval);
  271. }
  272. // 尝试返回上一页,如果失败则跳转到首页
  273. try {
  274. const pages = getCurrentPages();
  275. if (pages.length > 1) {
  276. uni.reLaunch({
  277. url: '/pages/index/index'
  278. });
  279. } else {
  280. // 如果当前是第一页,则跳转到首页
  281. uni.reLaunch({
  282. url: '/pages/index/index'
  283. });
  284. }
  285. } catch (e) {
  286. console.error('导航错误:', e);
  287. // 出错时也跳转到首页
  288. uni.reLaunch({
  289. url: '/pages/index/index'
  290. });
  291. }
  292. },
  293. error(e) {
  294. // 相机错误事件
  295. console.error(e.detail);
  296. uni.showToast({
  297. title: '相机启动失败,请检查权限设置',
  298. icon: 'none'
  299. });
  300. },
  301. playAiSpeaking() {
  302. if (this.useVideo && this.aiVideoContext) {
  303. this.aiVideoContext.play();
  304. }
  305. // 触发数字人说话动画
  306. if (this.digitalHumanUrl) {
  307. // 假设当前问题的文本作为数字人要说的内容
  308. const speakText = this.currentQuestion ? this.currentQuestion.text : '';
  309. this.interactWithDigitalHuman(speakText);
  310. }
  311. },
  312. pauseAiSpeaking() {
  313. if (this.useVideo && this.aiVideoContext) {
  314. this.aiVideoContext.pause();
  315. }
  316. },
  317. // 重新开始测试
  318. restartTest() {
  319. this.currentQuestionIndex = 0;
  320. this.score = 0;
  321. this.showEndModal = false;
  322. this.showResult = false;
  323. this.selectedOption = null;
  324. this.resetTimer();
  325. },
  326. // 在methods中添加测试方法
  327. testEndScreen() {
  328. this.interviewCompleted = true;
  329. this.showEndModal = false;
  330. },
  331. // 初始化数字人
  332. initDigitalHuman() {
  333. // 这里可以根据实际情况设置数字人的URL
  334. // 例如,可以是一个第三方数字人服务的URL,或者是本地的HTML页面
  335. this.digitalHumanUrl = 'https://your-digital-human-service.com/avatar?id=123';
  336. // 如果使用本地HTML,可以这样设置
  337. // this.digitalHumanUrl = '/hybrid/html/digital-human.html';
  338. },
  339. // 与数字人交互的方法
  340. interactWithDigitalHuman(message) {
  341. // 如果数字人是通过web-view加载的,可以使用postMessage与其通信
  342. const webview = this.$mp.page.$getAppWebview().children()[0];
  343. if (webview) {
  344. webview.evalJS(`receiveMessage('${message}')`);
  345. }
  346. }
  347. },
  348. // 添加生命周期钩子,确保在组件销毁时清除计时器
  349. beforeDestroy() {
  350. if (this.timerInterval) {
  351. clearInterval(this.timerInterval);
  352. }
  353. }
  354. }
  355. </script>
  356. <style>
  357. .camera-container {
  358. position: relative;
  359. width: 100%;
  360. height: 100vh;
  361. background-color: #ffffff;
  362. display: flex;
  363. flex-direction: column;
  364. }
  365. .header {
  366. height: 90rpx;
  367. /* background-color: #000000; */
  368. display: flex;
  369. align-items: center;
  370. padding: 0 30rpx;
  371. /* color: #ffffff; */
  372. }
  373. .back-button {
  374. width: 60rpx;
  375. height: 60rpx;
  376. display: flex;
  377. align-items: center;
  378. justify-content: center;
  379. }
  380. .title {
  381. flex: 1;
  382. text-align: center;
  383. font-size: 32rpx;
  384. font-weight: bold;
  385. }
  386. .controls {
  387. display: flex;
  388. gap: 30rpx;
  389. }
  390. .iconfont {
  391. font-size: 40rpx;
  392. }
  393. .content {
  394. flex: 1;
  395. display: flex;
  396. flex-direction: column;
  397. position: relative;
  398. padding: 50rpx 20rpx 0;
  399. }
  400. .progress-container {
  401. display: flex;
  402. flex-direction: column;
  403. justify-content: space-between;
  404. margin-bottom: 20rpx;
  405. }
  406. .progress-step {
  407. display: flex;
  408. align-items: center;
  409. margin-bottom: 10rpx;
  410. }
  411. .step-circle {
  412. width: 40rpx;
  413. height: 40rpx;
  414. border-radius: 50%;
  415. background-color: #e0e0e0;
  416. display: flex;
  417. align-items: center;
  418. justify-content: center;
  419. font-size: 24rpx;
  420. margin-right: 10rpx;
  421. }
  422. .step-circle.active {
  423. background-color: #ff9500;
  424. color: #ffffff;
  425. }
  426. .step-text {
  427. font-size: 24rpx;
  428. color: #666666;
  429. }
  430. .progress-bar {
  431. height: 10rpx;
  432. background-color: #e0e0e0;
  433. border-radius: 5rpx;
  434. overflow: hidden;
  435. margin-bottom: 20rpx;
  436. }
  437. .progress-fill {
  438. height: 100%;
  439. background-color: #00c853;
  440. transition: width 0.3s;
  441. }
  442. .interview-content {
  443. flex: 1;
  444. display: flex;
  445. flex-direction: column;
  446. }
  447. .video-area {
  448. display: flex;
  449. /* flex-direction: column; */
  450. justify-content: space-between;
  451. height: auto;
  452. margin-bottom: 20rpx;
  453. }
  454. .video-camera {
  455. display: flex;
  456. flex-direction: row;
  457. align-items: center;
  458. justify-content: space-between;
  459. width: 65%;
  460. }
  461. .interviewer {
  462. background-color: #f5f5f5;
  463. display: flex;
  464. align-items: center;
  465. justify-content: center;
  466. position: relative;
  467. width: 48% !important;
  468. height: 300rpx;
  469. }
  470. .interviewer-video {
  471. width: 100%;
  472. height: 100%;
  473. object-fit: cover;
  474. }
  475. .interviewer-avatar {
  476. width: 80%;
  477. height: 80%;
  478. object-fit: contain;
  479. }
  480. .user-camera-container {
  481. width: 48%;
  482. height: 300rpx;
  483. border-radius: 10rpx;
  484. overflow: hidden;
  485. border: 4rpx solid #ffffff;
  486. box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
  487. }
  488. .question-area {
  489. flex: 1;
  490. display: flex;
  491. flex-direction: column;
  492. }
  493. .question-number {
  494. font-size: 28rpx;
  495. color: #666;
  496. margin-bottom: 20rpx;
  497. }
  498. .question-importance {
  499. background-color: #f9f9f9;
  500. padding: 20rpx;
  501. border-radius: 10rpx;
  502. margin-bottom: 20rpx;
  503. font-size: 28rpx;
  504. color: #333;
  505. }
  506. .question-importance text {
  507. color: #ff0000;
  508. margin-right: 10rpx;
  509. }
  510. .options {
  511. display: flex;
  512. flex-direction: column;
  513. gap: 20rpx;
  514. margin-bottom: 30rpx;
  515. }
  516. .option-item {
  517. padding: 20rpx;
  518. background-color: #f5f5f5;
  519. border-radius: 10rpx;
  520. font-size: 28rpx;
  521. transition: all 0.3s;
  522. border: 1px solid #e0e0e0;
  523. }
  524. .option-selected {
  525. background-color: #e6f7ff;
  526. border: 1px solid #1890ff;
  527. }
  528. .option-correct {
  529. background-color: #d4f7d4;
  530. border: 1px solid #52c41a;
  531. }
  532. .option-wrong {
  533. background-color: #fff1f0;
  534. border: 1px solid #ff4d4f;
  535. }
  536. .option-text {
  537. color: #333;
  538. }
  539. .timer-container {
  540. text-align: center;
  541. margin: 20rpx 0;
  542. }
  543. .timer-text {
  544. font-size: 24rpx;
  545. color: #666;
  546. }
  547. .next-button {
  548. background-color: #6c5ce7;
  549. color: #ffffff;
  550. border-radius: 10rpx;
  551. font-size: 30rpx;
  552. margin: 20rpx auto;
  553. height: 80rpx;
  554. line-height: 80rpx;
  555. width: 90%;
  556. text-align: center;
  557. }
  558. .next-button[disabled] {
  559. background-color: #cccccc;
  560. color: #999999;
  561. }
  562. .footer {
  563. height: 100rpx;
  564. background-color: #000000;
  565. display: flex;
  566. justify-content: space-between;
  567. align-items: center;
  568. padding: 0 30rpx;
  569. color: #ffffff;
  570. }
  571. .timer {
  572. font-size: 28rpx;
  573. }
  574. .next-step {
  575. font-size: 28rpx;
  576. }
  577. .interview-end-modal {
  578. position: fixed;
  579. top: 0;
  580. left: 0;
  581. right: 0;
  582. bottom: 0;
  583. background-color: rgba(0, 0, 0, 0.5);
  584. display: flex;
  585. align-items: center;
  586. justify-content: center;
  587. z-index: 999;
  588. }
  589. .modal-content {
  590. width: 80%;
  591. background-color: #ffffff;
  592. border-radius: 20rpx;
  593. padding: 40rpx;
  594. display: flex;
  595. flex-direction: column;
  596. align-items: center;
  597. }
  598. .modal-title {
  599. font-size: 36rpx;
  600. font-weight: bold;
  601. margin-bottom: 30rpx;
  602. }
  603. .score-display {
  604. font-size: 48rpx;
  605. font-weight: bold;
  606. color: #6c5ce7;
  607. margin: 20rpx 0;
  608. }
  609. .modal-message {
  610. font-size: 28rpx;
  611. color: #666;
  612. text-align: center;
  613. margin-bottom: 40rpx;
  614. }
  615. .modal-buttons {
  616. display: flex;
  617. justify-content: space-between;
  618. width: 100%;
  619. margin-top: 20rpx;
  620. }
  621. .modal-button {
  622. width: 45%;
  623. }
  624. @keyframes speaking {
  625. 0% {
  626. opacity: 0.8;
  627. }
  628. 50% {
  629. opacity: 1;
  630. }
  631. 100% {
  632. opacity: 0.8;
  633. }
  634. }
  635. .speaking {
  636. animation: speaking 1.5s infinite;
  637. }
  638. .digital-avatar {
  639. width: 120rpx;
  640. height: 120rpx;
  641. z-index: 10;
  642. overflow: hidden;
  643. }
  644. .avatar-image {
  645. width: 120rpx;
  646. height: 120rpx;
  647. border-radius: 20rpx;
  648. border: 2rpx solid #e0e0e0;
  649. }
  650. .digital-human-webview {
  651. width: 120rpx;
  652. height: 120rpx;
  653. border-radius: 20rpx;
  654. border: 2rpx solid #e0e0e0;
  655. }
  656. .interview-complete-screen {
  657. position: fixed;
  658. top: 0;
  659. left: 0;
  660. right: 0;
  661. bottom: 0;
  662. background-color: #f0f5ff;
  663. display: flex;
  664. flex-direction: column;
  665. align-items: center;
  666. justify-content: center;
  667. z-index: 1000;
  668. padding: 40rpx;
  669. }
  670. .digital-avatar-large {
  671. width: 200rpx;
  672. height: 200rpx;
  673. margin-bottom: 60rpx;
  674. }
  675. .avatar-image-large {
  676. width: 100%;
  677. height: 100%;
  678. border-radius: 30rpx;
  679. }
  680. .complete-message {
  681. font-size: 40rpx;
  682. font-weight: bold;
  683. color: #333;
  684. margin-bottom: 30rpx;
  685. }
  686. .complete-description {
  687. font-size: 28rpx;
  688. color: #666;
  689. text-align: center;
  690. margin-bottom: 80rpx;
  691. line-height: 1.5;
  692. }
  693. .complete-button {
  694. background-color: #6c5ce7;
  695. color: #ffffff;
  696. border-radius: 10rpx;
  697. font-size: 32rpx;
  698. padding: 20rpx 60rpx;
  699. margin-top: 40rpx;
  700. }
  701. </style>