index.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <template>
  2. <view class="ss-p-b-100" style="height: 100vh; background-color: #f2f4f7;">
  3. <uni-notice-bar text="温馨提示:最多可以上传5份附件简历。请在手机上打开此小程序进行文件上传,暂不支持在桌面版小程序中上传文件。" />
  4. <view v-if="bioList?.length > 0">
  5. <view v-for="(item, index) in bioList" :key="index" class="default-border list-item">
  6. <view class="d-flex align-center">
  7. <view v-if="props.resumeAnalysis" class="ss-m-r-15">
  8. <radio :value="index" color="#00B760" :checked="index === checkedIndex" @tap="radioChange(index)" />
  9. </view>
  10. <view @click="preview(item.url)" style="flex: 1;">
  11. <view class="MiSans-Semibold" style="font-weight: bold;">{{ item.title }}</view>
  12. <view class="color-666 MiSans-Normal ss-m-t-10 font-size-14">上传时间:{{ timesTampChange(item.createTime, 'Y-M-D') }}</view>
  13. </view>
  14. <view class="ss-m-l-30" style="width: 60rpx;">
  15. <uni-icons @click="handleOpenPopup(item)" type="more-filled" size="20"></uni-icons>
  16. </view>
  17. </view>
  18. </view>
  19. </view>
  20. <view v-else class="nodata-img-parent">
  21. <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
  22. </view>
  23. <view class="bottom-sticky flex-column">
  24. <button v-if="props.resumeAnalysis" class="recomm-button" style="margin-bottom: 0;" :loading="analysisLoading" @click="handleResumeAnalysis">开始解析</button>
  25. <button class="recomm-button MiSans-Medium" style="margin-bottom: 0;" @click="handleUpload">微信聊天文件上传</button>
  26. <view class="color-primary font-size-14 ss-m-b-25 ss-m-t-10 MiSans-Normal" style="text-align: center;">上传文件大小不能超过20MB</view>
  27. </view>
  28. <uni-popup ref="popup" type="bottom">
  29. <button class="big-cancel-button MiSans-Normal" style="color: #666 !important;" @click="handleDelete">删除附件</button>
  30. <button class="big-cancel-button MiSans-Normal" @click="popup.close(); currentId = ''">取消</button>
  31. </uni-popup>
  32. </view>
  33. </template>
  34. <script setup>
  35. import { ref } from 'vue'
  36. import { getPersonResumeCv, saveResume, deleteResume } from '@/api/user'
  37. import { uploadFile } from '@/api/file'
  38. import { timesTampChange } from '@/utils/date'
  39. import { preview } from '@/utils/preview'
  40. const emit = defineEmits(['submit'])
  41. const props = defineProps({
  42. resumeAnalysis: { type: Boolean, default: false }
  43. })
  44. // 获取附件
  45. const bioList = ref([])
  46. const getList = async () => {
  47. const { data } = await getPersonResumeCv()
  48. bioList.value = data
  49. }
  50. getList()
  51. // 更多
  52. const currentId = ref('')
  53. const popup = ref()
  54. const handleOpenPopup = (item) => {
  55. currentId.value = item.id
  56. popup.value.open()
  57. }
  58. // 删除附件
  59. const handleDelete = async () => {
  60. if (!currentId.value) return
  61. await deleteResume(currentId.value)
  62. uni.showToast({
  63. title: '删除成功',
  64. icon: 'success',
  65. duration: 2000
  66. })
  67. currentId.value = ''
  68. popup.value.close()
  69. getList()
  70. }
  71. // 上传附件
  72. const handleUpload = () => {
  73. if (bioList.value.length >= 5) {
  74. uni.showToast({
  75. icon: 'none',
  76. title: '最多可上传5份简历'
  77. })
  78. return
  79. }
  80. wx.chooseMessageFile({
  81. count: 1,
  82. type: 'file',
  83. success (res) {
  84. // 限制文件上传大小
  85. const size = res.tempFiles[0].size
  86. if (size / (1024*1024) > 20) {
  87. uni.showToast({ icon: 'none', title: '文件大小不能超过20M' })
  88. return
  89. }
  90. const title = res.tempFiles[0].name
  91. const path = res.tempFiles[0].path
  92. //效验是否为支持的文件格式
  93. if(/\.(pdf|docx|doc)$/.test(title)){
  94. uploadFile(path, 'attachment').then(async (res) => {
  95. if (!res.data) {
  96. uni.showToast({
  97. title: '上传失败',
  98. icon: 'none'
  99. })
  100. return
  101. }
  102. await saveResume({ title, url: res.data })
  103. uni.showToast({
  104. title: '上传成功',
  105. icon: 'success'
  106. })
  107. getList()
  108. })
  109. }else{
  110. uni.showToast({
  111. icon: 'none',
  112. title: '请上传pdf、doc、docx类型的文件',
  113. duration: 2000
  114. })
  115. return
  116. }
  117. }
  118. })
  119. }
  120. const fileUrl = ref('')
  121. const checkedIndex = ref()
  122. const radioChange = (index) => {
  123. if (!props.resumeAnalysis) return
  124. checkedIndex.value = index
  125. if (bioList.value[index]?.url) fileUrl.value = encodeURIComponent(bioList.value[index].url)
  126. }
  127. const analysisLoading = ref(false)
  128. const handleResumeAnalysis = () => {
  129. if (!fileUrl.value) return uni.showToast({ icon: 'none', title: '请选择要解析的简历' })
  130. analysisLoading.value = true
  131. emit('submit', fileUrl.value)
  132. // uni.navigateTo({
  133. // url: `/pagesA/resumeAnalysis/index?fileUrl=${fileUrl.value}`
  134. // })
  135. }
  136. </script>
  137. <style scoped lang="scss">
  138. .list-item {
  139. margin: 30rpx;
  140. border-radius: 20rpx;
  141. padding: 30rpx;
  142. background-color: #fff;
  143. box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.17);
  144. &:last-child {
  145. margin-bottom: 0;
  146. }
  147. &:first-child {
  148. margin-top: 0;
  149. }
  150. }
  151. </style>