index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. <template>
  2. <view class="interview-container">
  3. <!-- 顶部导航栏 -->
  4. <!-- 面试信息 -->
  5. <view class="interview-info">
  6. <view class="info-item">
  7. <text class="label">面试岗位:</text>
  8. <text class="value">前端岗位</text>
  9. </view>
  10. <view class="info-item">
  11. <text class="label">面试岗位:</text>
  12. <text class="value">2024年06月28日 14:48</text>
  13. </view>
  14. <view class="info-item">
  15. <text class="value">2024年06月28日 16:47</text>
  16. </view>
  17. <view class="info-item">
  18. <text class="label">公司全称:</text>
  19. <text class="value">敏龙科技集团有限公司</text>
  20. </view>
  21. </view>
  22. <!-- 表单信息 -->
  23. <view class="form-container">
  24. <view class="form-title">填写报名信息</view>
  25. <view class="form-subtitle">如确认报名(此次面试),请填写以下信息</view>
  26. <view class="form-item">
  27. <text class="form-label">姓名 <text class="required">*</text></text>
  28. <input type="text" v-model="formData.name" placeholder="请输入姓名" />
  29. </view>
  30. <view class="form-item">
  31. <text class="form-label">手机号 <text class="required">*</text></text>
  32. <input type="number" v-model="formData.phone" placeholder="请输入手机号" maxlength="11" />
  33. </view>
  34. <view class="form-item">
  35. <text class="form-label">邮箱</text>
  36. <input type="text" v-model="formData.email" placeholder="请输入邮箱" />
  37. </view>
  38. <button class="submit-btn" @click="submitForm">提交</button>
  39. </view>
  40. </view>
  41. </template>
  42. <script>
  43. export default {
  44. data() {
  45. return {
  46. formData: {
  47. name: '',
  48. phone: '',
  49. email: ''
  50. }
  51. }
  52. },
  53. methods: {
  54. goHome() {
  55. uni.navigateBack({
  56. delta: 1
  57. });
  58. },
  59. submitForm() {
  60. // 表单验证
  61. if (!this.formData.name.trim()) {
  62. uni.showToast({
  63. title: '请输入姓名',
  64. icon: 'none'
  65. });
  66. return;
  67. }
  68. if (!this.formData.phone.trim()) {
  69. uni.showToast({
  70. title: '请输入手机号',
  71. icon: 'none'
  72. });
  73. return;
  74. }
  75. if (!/^1\d{10}$/.test(this.formData.phone)) {
  76. uni.showToast({
  77. title: '请输入正确的手机号',
  78. icon: 'none'
  79. });
  80. return;
  81. }
  82. if (this.formData.email && !/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(this.formData.email)) {
  83. uni.showToast({
  84. title: '请输入正确的邮箱',
  85. icon: 'none'
  86. });
  87. return;
  88. }
  89. // 提交表单数据
  90. console.log('提交的表单数据:', this.formData);
  91. // 模拟提交成功
  92. uni.showLoading({
  93. title: '提交中...'
  94. });
  95. setTimeout(() => {
  96. uni.hideLoading();
  97. uni.showToast({
  98. title: '提交成功',
  99. icon: 'success',
  100. duration: 1500,
  101. success: () => {
  102. // 修改为跳转到成功页面
  103. setTimeout(() => {
  104. uni.navigateTo({
  105. url: '/pages/success/success', // 修改为成功页面的路径
  106. fail: (err) => {
  107. console.error('页面跳转失败:', err);
  108. uni.showToast({
  109. title: '页面跳转失败',
  110. icon: 'none'
  111. });
  112. }
  113. });
  114. }, 1500);
  115. }
  116. });
  117. }, 1000);
  118. }
  119. }
  120. }
  121. </script>
  122. <style>
  123. .interview-container {
  124. display: flex;
  125. flex-direction: column;
  126. min-height: 100vh;
  127. background-color: #f5f7fa;
  128. }
  129. .nav-bar {
  130. display: flex;
  131. justify-content: space-between;
  132. align-items: center;
  133. padding: 20rpx 30rpx;
  134. background-color: #6c5ce7;
  135. color: #fff;
  136. }
  137. .scan-btn {
  138. display: flex;
  139. flex-direction: column;
  140. align-items: center;
  141. background-color: #ff9f43;
  142. padding: 10rpx 30rpx;
  143. border-radius: 30rpx;
  144. font-size: 24rpx;
  145. }
  146. .interview-info {
  147. background-color: #6c5ce7;
  148. color: #fff;
  149. padding: 20rpx 30rpx 40rpx;
  150. }
  151. .info-item {
  152. margin: 10rpx 0;
  153. font-size: 28rpx;
  154. }
  155. .label {
  156. margin-right: 10rpx;
  157. }
  158. .form-container {
  159. flex: 1;
  160. background-color: #fff;
  161. border-radius: 20rpx 20rpx 0 0;
  162. margin-top: -20rpx;
  163. padding: 40rpx 30rpx;
  164. }
  165. .form-title {
  166. font-size: 32rpx;
  167. font-weight: bold;
  168. margin-bottom: 10rpx;
  169. }
  170. .form-subtitle {
  171. font-size: 24rpx;
  172. color: #999;
  173. margin-bottom: 40rpx;
  174. }
  175. .form-item {
  176. margin-bottom: 30rpx;
  177. }
  178. .form-label {
  179. display: block;
  180. font-size: 28rpx;
  181. margin-bottom: 10rpx;
  182. }
  183. .required {
  184. color: #ff4757;
  185. }
  186. input {
  187. width: 100%;
  188. height: 80rpx;
  189. border: 1px solid #eee;
  190. border-radius: 8rpx;
  191. padding: 0 20rpx;
  192. font-size: 28rpx;
  193. box-sizing: border-box;
  194. }
  195. .submit-btn {
  196. width: 100%;
  197. height: 90rpx;
  198. line-height: 90rpx;
  199. background-color: #6c5ce7;
  200. color: #fff;
  201. border-radius: 45rpx;
  202. font-size: 32rpx;
  203. margin-top: 60rpx;
  204. }
  205. </style>