interview-notice.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. <template>
  2. <view class="notice-container">
  3. <!-- 标题 -->
  4. <view class="notice-title">面试注意事项</view>
  5. <view class="notice-subtitle">为了保障面试顺利进行,请注意以下事项</view>
  6. <!-- 注意事项列表 -->
  7. <view class="notice-grid">
  8. <!-- 第一行 -->
  9. <view class="notice-item light">
  10. <view class="icon-container">
  11. <text class="iconfont">☀</text>
  12. </view>
  13. <text class="item-text">保持光线良好、干净背景、安静不受打扰</text>
  14. </view>
  15. <view class="notice-item smile">
  16. <view class="icon-container">
  17. <text class="iconfont">☺</text>
  18. </view>
  19. <text class="item-text">保持微笑、声音洪亮、正面直视摄像头</text>
  20. </view>
  21. <!-- 第二行 -->
  22. <view class="notice-item headphone">
  23. <view class="icon-container">
  24. <text class="iconfont">🎧</text>
  25. </view>
  26. <text class="item-text">保持声音回音接收正常、建议使用耳机</text>
  27. </view>
  28. <view class="notice-item wifi">
  29. <view class="icon-container">
  30. <text class="iconfont">📶</text>
  31. </view>
  32. <text class="item-text">保持网络通畅、面试期间勿断出</text>
  33. </view>
  34. <!-- 第三行 -->
  35. <view class="notice-item forbidden">
  36. <view class="icon-container">
  37. <text class="iconfont">✖</text>
  38. </view>
  39. <text class="item-text">请勿人脸离开屏幕</text>
  40. </view>
  41. <view class="notice-item forbidden">
  42. <view class="icon-container">
  43. <text class="iconfont">✖</text>
  44. </view>
  45. <text class="item-text">请勿录屏、截屏</text>
  46. </view>
  47. </view>
  48. <!-- 警告提示 -->
  49. <view class="warning-tip">
  50. * 建议开启免提模式,避免采用\短信等打断面试
  51. </view>
  52. <!-- 免责声明 -->
  53. <!-- <view class="disclaimer">
  54. 本公司保障您的隐私,根据法律法规和监管要求收集必要的面试信息,下载、存储、使用您的面试视频,仅用于面试评估,过程中不会泄露您的个人信息。
  55. </view> -->
  56. <!-- 同意选项 -->
  57. <view class="agreement">
  58. <radio :checked="isAgreed" @tap="toggleAgreement" />
  59. <text class="agreement-text">我同意并知晓</text>
  60. </view>
  61. <!-- 添加语音检测组件 -->
  62. <voice-check-modal
  63. :visible="showVoiceCheck"
  64. @complete="onVoiceCheckComplete"
  65. />
  66. <!-- 底部按钮 -->
  67. <button class="next-btn" :disabled="!isAgreed" @click="startInterview">下一步</button>
  68. </view>
  69. </template>
  70. <script>
  71. import VoiceCheckModal from '../components/voice-check-modal.vue'
  72. export default {
  73. components: {
  74. VoiceCheckModal
  75. },
  76. data() {
  77. return {
  78. isAgreed: false,
  79. showVoiceCheck: false
  80. }
  81. },
  82. methods: {
  83. toggleAgreement() {
  84. this.isAgreed = !this.isAgreed;
  85. },
  86. startInterview() {
  87. if (!this.isAgreed) {
  88. uni.showToast({
  89. title: '请先同意面试须知',
  90. icon: 'none'
  91. });
  92. return;
  93. }
  94. // 显示语音检测弹窗
  95. this.showVoiceCheck = true;
  96. },
  97. onVoiceCheckComplete() {
  98. // 关闭语音检测弹窗
  99. this.showVoiceCheck = false;
  100. // 跳转到下一个页面
  101. uni.navigateTo({
  102. url: '/pages/preview/preview',
  103. fail: (err) => {
  104. console.error('页面跳转失败:', err);
  105. uni.showToast({
  106. title: '页面跳转失败',
  107. icon: 'none'
  108. });
  109. }
  110. });
  111. }
  112. }
  113. }
  114. </script>
  115. <style>
  116. .notice-container {
  117. display: flex;
  118. flex-direction: column;
  119. min-height: 100vh;
  120. background-color: #ffffff;
  121. padding: 30rpx;
  122. }
  123. .notice-title {
  124. font-size: 36rpx;
  125. font-weight: bold;
  126. margin-top: 20rpx;
  127. margin-bottom: 10rpx;
  128. color: #333;
  129. }
  130. .notice-subtitle {
  131. font-size: 26rpx;
  132. color: #999;
  133. margin-bottom: 30rpx;
  134. }
  135. .notice-grid {
  136. display: flex;
  137. flex-wrap: wrap;
  138. justify-content: space-between;
  139. margin-bottom: 30rpx;
  140. }
  141. .notice-item {
  142. width: 47%;
  143. height: 180rpx;
  144. border-radius: 8rpx;
  145. padding: 20rpx;
  146. margin-bottom: 20rpx;
  147. display: flex;
  148. flex-direction: column;
  149. align-items: center;
  150. justify-content: center;
  151. text-align: center;
  152. box-sizing: border-box;
  153. }
  154. .light {
  155. background-color: #f0f9eb;
  156. }
  157. .smile {
  158. background-color: #f0f9eb;
  159. }
  160. .headphone {
  161. background-color: #f0f9eb;
  162. }
  163. .wifi {
  164. background-color: #f0f9eb;
  165. }
  166. .forbidden {
  167. background-color: #fff8e6;
  168. }
  169. .icon-container {
  170. width: 40rpx;
  171. height: 40rpx;
  172. border-radius: 50%;
  173. display: flex;
  174. justify-content: center;
  175. align-items: center;
  176. margin-bottom: 15rpx;
  177. }
  178. .iconfont {
  179. font-size: 40rpx;
  180. color: #333;
  181. }
  182. .item-text {
  183. font-size: 24rpx;
  184. color: #333;
  185. line-height: 1.4;
  186. display: -webkit-box;
  187. -webkit-line-clamp: 3;
  188. -webkit-box-orient: vertical;
  189. overflow: hidden;
  190. }
  191. .warning-tip {
  192. color: #ff9800;
  193. font-size: 24rpx;
  194. margin-bottom: 60rpx;
  195. }
  196. .disclaimer {
  197. font-size: 24rpx;
  198. color: #999;
  199. line-height: 1.5;
  200. margin-bottom: 30rpx;
  201. }
  202. .agreement {
  203. display: flex;
  204. align-items: center;
  205. justify-content: center;
  206. margin-bottom: 40rpx;
  207. }
  208. .agreement-text {
  209. font-size: 28rpx;
  210. color: #333;
  211. margin-left: 10rpx;
  212. }
  213. .next-btn {
  214. width: 100%;
  215. height: 90rpx;
  216. line-height: 90rpx;
  217. background-color: #0039b3;
  218. color: #fff;
  219. border-radius: 8rpx;
  220. font-size: 32rpx;
  221. text-align: center;
  222. }
  223. .next-btn[disabled] {
  224. background-color: #0039b3;
  225. color: #fff;
  226. }
  227. </style>