index.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  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; border-radius: 25px;" :loading="analysisLoading" @click="handleResumeAnalysis">开始解析</button>
  25. <button class="recomm-button MiSans-Medium" style="margin-bottom: 0; border-radius: 25px;" @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. uni.showLoading({ title: '加载中...' })
  48. try {
  49. const { data } = await getPersonResumeCv()
  50. bioList.value = data
  51. } catch {
  52. uni.hideLoading()
  53. } finally {
  54. uni.hideLoading()
  55. }
  56. }
  57. getList()
  58. // 更多
  59. const currentId = ref('')
  60. const popup = ref()
  61. const handleOpenPopup = (item) => {
  62. currentId.value = item.id
  63. popup.value.open()
  64. }
  65. // 删除附件
  66. const handleDelete = async () => {
  67. if (!currentId.value) return
  68. await deleteResume(currentId.value)
  69. uni.showToast({
  70. title: '删除成功',
  71. icon: 'success',
  72. duration: 2000
  73. })
  74. currentId.value = ''
  75. popup.value.close()
  76. getList()
  77. }
  78. // 上传附件
  79. const handleUpload = () => {
  80. if (bioList.value.length >= 5) {
  81. uni.showToast({
  82. icon: 'none',
  83. title: '最多可上传5份简历'
  84. })
  85. return
  86. }
  87. wx.chooseMessageFile({
  88. count: 1,
  89. type: 'file',
  90. success (res) {
  91. // 限制文件上传大小
  92. const size = res.tempFiles[0].size
  93. if (size / (1024*1024) > 20) {
  94. uni.showToast({ icon: 'none', title: '文件大小不能超过20M' })
  95. return
  96. }
  97. const title = res.tempFiles[0].name
  98. const path = res.tempFiles[0].path
  99. //效验是否为支持的文件格式
  100. if(/\.(pdf|docx|doc)$/.test(title)){
  101. uploadFile(path, 'attachment').then(async (res) => {
  102. if (!res.data) {
  103. uni.showToast({
  104. title: '上传失败',
  105. icon: 'none'
  106. })
  107. return
  108. }
  109. await saveResume({ title, url: res.data })
  110. uni.showToast({
  111. title: '上传成功',
  112. icon: 'success'
  113. })
  114. getList()
  115. })
  116. }else{
  117. uni.showToast({
  118. icon: 'none',
  119. title: '请上传pdf、doc、docx类型的文件',
  120. duration: 2000
  121. })
  122. return
  123. }
  124. }
  125. })
  126. }
  127. const fileUrl = ref('')
  128. const checkedIndex = ref()
  129. const radioChange = (index) => {
  130. if (!props.resumeAnalysis) return
  131. checkedIndex.value = index
  132. if (bioList.value[index]?.url) fileUrl.value = encodeURIComponent(bioList.value[index].url)
  133. }
  134. const analysisLoading = ref(false)
  135. const handleResumeAnalysis = () => {
  136. if (!fileUrl.value) return uni.showToast({ icon: 'none', title: '请选择要解析的简历' })
  137. analysisLoading.value = true
  138. emit('submit', fileUrl.value)
  139. // uni.navigateTo({
  140. // url: `/pagesA/resumeAnalysis/index?fileUrl=${fileUrl.value}`
  141. // })
  142. }
  143. </script>
  144. <style scoped lang="scss">
  145. .list-item {
  146. margin: 30rpx;
  147. border-radius: 20rpx;
  148. padding: 30rpx;
  149. background-color: #fff;
  150. box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.17);
  151. &:last-child {
  152. margin-bottom: 0;
  153. }
  154. &:first-child {
  155. margin-top: 0;
  156. }
  157. }
  158. </style>