camera.vue 16 KB

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