camera.vue 13 KB

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