uploadResume.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
  1. <template>
  2. <view class="upload-container">
  3. <!-- 顶部插图区域 -->
  4. <view class="header-notice">
  5. <image style="width: 30rpx;height: 30rpx;" src="https://data.qicai321.com/minlong/57d03f34-47de-43fe-8730-b764ed8bdda2.png" mode="aspectFit"></image>请上传简历文件,格式支持pdf及doc格式
  6. </view>
  7. <view class="illustration">
  8. <image class="img" src="https://data.qicai321.com/minlong/09d4daa6-6507-4133-81ff-68e47b0259e5.png" mode="aspectFit"></image>
  9. </view>
  10. <!-- 上传按钮 -->
  11. <button class="upload-btn" @click="chooseFile" :disabled="!!uploadedFile">
  12. {{uploadedFile ? '已上传文件' : '选择并上传文件'}}
  13. </button>
  14. <!-- 跳过,直接进入下一环节 -->
  15. <button class="skip-btn" @click="handleSkip" v-if="showSkipButton">跳过,直接进入下一环节</button>
  16. <!-- 文件信息显示区域 -->
  17. <view class="file-info" v-if="uploadedFile">
  18. <view class="file-info-header">
  19. <view class="file-info-title">已上传文件</view>
  20. <view class="file-delete" @click="clearFile">
  21. <image class="delete-icon" src="https://data.qicai321.com/minlong/delete.png" mode="aspectFit"></image>
  22. </view>
  23. </view>
  24. <view class="file-info-content">
  25. <view class="file-name">{{uploadedFile.name}}</view>
  26. <view class="file-size">{{formatFileSize(uploadedFile.size)}}</view>
  27. <view class="file-time">上传时间:{{uploadedFile.uploadTime}}</view>
  28. </view>
  29. </view>
  30. <!-- 使用说明区域 -->
  31. <view class="instructions">
  32. <view class="title">使用说明及注意事项</view>
  33. <view class="instruction-list">
  34. <view class="instruction-item">1. 点击【选择并上传文件】按钮,上传简历;</view>
  35. <view class="instruction-item">2. 请在本地选择简历文件,文件小于30mb;</view>
  36. <view class="instruction-item">3. 支持pdf及doc格式。</view>
  37. </view>
  38. <!-- 隐私提示 -->
  39. <view class="privacy-notice">
  40. * 我们将对您的隐私保护,所内容仅用于评估岗位的匹配度。
  41. </view>
  42. </view>
  43. </view>
  44. </template>
  45. <script>
  46. import { apiBaseUrl } from '@/common/config.js';
  47. export default {
  48. data() {
  49. return {
  50. fileType: ['pdf', 'doc', 'docx'],
  51. maxSize: 30 * 1024 * 1024, // 30MB in bytes
  52. uploadedFile: null,
  53. showSkipButton: false // 控制跳过按钮显示
  54. }
  55. },
  56. onLoad(options) {
  57. // 判断是否从index页面跳转来
  58. const pages = getCurrentPages();
  59. const prevPage = pages[pages.length - 2]; // 获取上一个页面
  60. if (prevPage && prevPage.route === 'pages/index/index') {
  61. this.showSkipButton = true;
  62. }
  63. },
  64. methods: {
  65. // 处理跳过按钮点击
  66. handleSkip() {
  67. uni.showModal({
  68. title: '提示',
  69. content: '确定要跳过上传简历环节吗?',
  70. success: (res) => {
  71. if (res.confirm) {
  72. uni.navigateTo({
  73. url: '/pages/Personal/Personal'
  74. });
  75. }
  76. }
  77. });
  78. },
  79. // 调用简历解析接口
  80. /* async parseResume(fileUrl) {
  81. try {
  82. const userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}');
  83. const userId = userInfo.id;
  84. const openid = userInfo.openid;
  85. const tenant_id = userInfo.tenant_id;
  86. if (!userId) {
  87. uni.showToast({
  88. title: '用户信息不完整,请重新登录',
  89. icon: 'none'
  90. });
  91. return false;
  92. }
  93. const response = await uni.request({
  94. url: `${apiBaseUrl}/api/system/resume-parsing-tasks/upload_resume/`,
  95. method: 'POST',
  96. data: {
  97. openid: openid,
  98. tenant_id: tenant_id,
  99. user_id: userId,
  100. file: fileUrl,
  101. description: '候选人简历'
  102. },
  103. header: {
  104. 'content-type': 'application/json'
  105. }
  106. });
  107. if (response.statusCode === 200 && response.data.code === 2000) {
  108. return true;
  109. } else {
  110. throw new Error(response.data.msg || '简历解析失败');
  111. }
  112. } catch (error) {
  113. console.error('简历解析失败:', error);
  114. uni.showToast({
  115. title: error.message || '简历解析失败',
  116. icon: 'none'
  117. });
  118. return false;
  119. }
  120. }, */
  121. clearFile() {
  122. uni.showModal({
  123. title: '提示',
  124. content: '确定要删除已上传的文件吗?',
  125. success: (res) => {
  126. if (res.confirm) {
  127. this.uploadedFile = null;
  128. uni.showToast({
  129. title: '文件已删除',
  130. icon: 'success'
  131. });
  132. }
  133. }
  134. });
  135. },
  136. formatFileSize(size) {
  137. if (size < 1024) {
  138. return size + 'B';
  139. } else if (size < 1024 * 1024) {
  140. return (size / 1024).toFixed(2) + 'KB';
  141. } else {
  142. return (size / (1024 * 1024)).toFixed(2) + 'MB';
  143. }
  144. },
  145. chooseFile() {
  146. if (this.uploadedFile) {
  147. uni.showToast({
  148. title: '请先删除已上传的文件',
  149. icon: 'none'
  150. });
  151. return;
  152. }
  153. // #ifdef H5
  154. uni.chooseFile({
  155. count: 1,
  156. type: 'file',
  157. extension: this.fileType,
  158. success: (res) => {
  159. if (res.tempFiles[0].size > this.maxSize) {
  160. uni.showToast({
  161. title: '文件大小不能超过30MB',
  162. icon: 'none'
  163. })
  164. return
  165. }
  166. this.uploadFile(res.tempFiles[0])
  167. }
  168. })
  169. // #endif
  170. // #ifdef APP-PLUS || MP
  171. uni.chooseMessageFile({
  172. count: 1,
  173. type: 'file',
  174. extension: this.fileType,
  175. success: (res) => {
  176. if (res.tempFiles[0].size > this.maxSize) {
  177. uni.showToast({
  178. title: '文件大小不能超过30MB',
  179. icon: 'none'
  180. })
  181. return
  182. }
  183. this.uploadFile(res.tempFiles[0])
  184. }
  185. })
  186. // #endif
  187. },
  188. async uploadFile(file) {
  189. try {
  190. uni.showLoading({
  191. title: '上传中...'
  192. });
  193. // 获取用户信息
  194. const userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}');
  195. console.log(userInfo);
  196. const openid = userInfo.openid || '';
  197. const tenant_id = userInfo.tenant_id || 1;
  198. const userId = userInfo.id;
  199. console.log(openid, tenant_id);
  200. if (!openid || !tenant_id || !userId) {
  201. uni.hideLoading();
  202. uni.showToast({
  203. title: '用户信息不完整,请重新登录',
  204. icon: 'none'
  205. });
  206. return;
  207. }
  208. // 直接上传到简历解析接口
  209. uni.uploadFile({
  210. url: `${apiBaseUrl}/api/system/resume-parsing-tasks/upload_resume/`,
  211. filePath: file.path,
  212. name: 'file',
  213. formData: {
  214. openid: openid,
  215. tenant_id: tenant_id,
  216. user_id: userId,
  217. description: '候选人简历'
  218. },
  219. success: (uploadRes) => {
  220. try {
  221. const res = JSON.parse(uploadRes.data);
  222. console.log(res);
  223. if (res.code === 2000) {
  224. // 保存上传文件信息
  225. this.uploadedFile = {
  226. name: file.name || '未命名文件',
  227. size: file.size,
  228. uploadTime: new Date().toLocaleString(),
  229. url: res.data.url || ''
  230. };
  231. // 显示上传成功提示
  232. uni.showToast({
  233. title: '上传成功',
  234. icon: 'success',
  235. duration: 2000
  236. });
  237. // 显示30秒的loading
  238. let seconds = 30;
  239. uni.showLoading({
  240. title: `正在处理中,请稍候...(${seconds}秒)`,
  241. mask: true
  242. });
  243. const timer = setInterval(() => {
  244. seconds--;
  245. if (seconds > 0) {
  246. uni.showLoading({
  247. title: `正在处理中,请稍候...(${seconds}秒)`,
  248. mask: true
  249. });
  250. } else {
  251. clearInterval(timer);
  252. uni.hideLoading();
  253. uni.showToast({
  254. title: '处理完成',
  255. icon: 'success',
  256. duration: 2000,
  257. success: () => {
  258. uni.navigateTo({
  259. url: '/pages/Personal/Personal'
  260. });
  261. }
  262. });
  263. }
  264. }, 1000);
  265. } else {
  266. uni.showToast({
  267. title: res.msg || '上传失败',
  268. icon: 'none'
  269. });
  270. }
  271. } catch (error) {
  272. uni.showToast({
  273. title: '上传失败',
  274. icon: 'none'
  275. });
  276. }
  277. },
  278. fail: (err) => {
  279. console.error('上传失败:', err);
  280. uni.showToast({
  281. title: '网络错误,请重试',
  282. icon: 'none'
  283. });
  284. },
  285. complete: () => {
  286. // 注意:这里不隐藏loading,因为成功后会显示30秒的loading
  287. if (!this.uploadedFile) {
  288. uni.hideLoading();
  289. }
  290. }
  291. });
  292. } catch (error) {
  293. uni.hideLoading();
  294. uni.showToast({
  295. title: '系统错误,请重试',
  296. icon: 'none'
  297. });
  298. }
  299. }
  300. }
  301. }
  302. </script>
  303. <style lang="scss">
  304. .upload-container {
  305. padding: 30rpx;
  306. background-color: #f5f6fa;
  307. min-height: 100vh;
  308. .header-notice{
  309. display: flex;
  310. align-items: center;
  311. justify-content: center;
  312. text-align: center;
  313. font-size: 24rpx;
  314. color: #999;
  315. line-height: 1.5;
  316. }
  317. .illustration {
  318. text-align: center;
  319. margin: 40rpx auto;
  320. padding: 20rpx;
  321. border-radius: 12rpx;
  322. image {
  323. width: 650rpx;
  324. height: 550rpx;
  325. }
  326. }
  327. .file-info {
  328. background-color: #ffffff;
  329. border-radius: 12rpx;
  330. padding: 30rpx;
  331. margin: 30rpx auto;
  332. width: 90%;
  333. box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  334. .file-info-header {
  335. display: flex;
  336. justify-content: space-between;
  337. align-items: center;
  338. margin-bottom: 20rpx;
  339. }
  340. .file-info-title {
  341. font-size: 28rpx;
  342. color: #333;
  343. font-weight: bold;
  344. }
  345. .file-delete {
  346. padding: 10rpx;
  347. .delete-icon {
  348. width: 32rpx;
  349. height: 32rpx;
  350. }
  351. }
  352. .file-info-content {
  353. .file-name {
  354. font-size: 26rpx;
  355. color: #666;
  356. margin-bottom: 10rpx;
  357. word-break: break-all;
  358. }
  359. .file-size {
  360. font-size: 24rpx;
  361. color: #999;
  362. margin-bottom: 10rpx;
  363. }
  364. .file-time {
  365. font-size: 24rpx;
  366. color: #999;
  367. }
  368. }
  369. }
  370. .instructions {
  371. padding: 0 30rpx;
  372. .title {
  373. font-size: 28rpx;
  374. color: #333;
  375. margin-bottom: 30rpx;
  376. }
  377. .instruction-list {
  378. .instruction-item {
  379. font-size: 26rpx;
  380. color: #666;
  381. line-height: 44rpx;
  382. margin-bottom: 20rpx;
  383. }
  384. }
  385. .privacy-notice {
  386. margin-top: 40rpx;
  387. font-size: 24rpx;
  388. color: #999;
  389. line-height: 1.5;
  390. }
  391. }
  392. .upload-btn {
  393. width: 90%;
  394. height: 88rpx;
  395. line-height: 88rpx;
  396. background-color: #2b4acb;
  397. color: #ffffff;
  398. border-radius: 8rpx;
  399. font-size: 32rpx;
  400. margin: 60rpx auto;
  401. text-align: center;
  402. &::after {
  403. border: none;
  404. }
  405. &[disabled] {
  406. background-color: #cccccc;
  407. color: #ffffff;
  408. }
  409. }
  410. .skip-btn {
  411. width: 90%;
  412. height: 88rpx;
  413. line-height: 88rpx;
  414. background-color: #ffffff;
  415. color: #666666;
  416. border-radius: 8rpx;
  417. font-size: 32rpx;
  418. margin: 20rpx auto;
  419. text-align: center;
  420. border: 1px solid #dddddd;
  421. &::after {
  422. border: none;
  423. }
  424. }
  425. }
  426. </style>