Bladeren bron

职位详情富文本显示处理

Xiao_123 4 maanden geleden
bovenliggende
commit
66b72ed325
3 gewijzigde bestanden met toevoegingen van 142 en 6 verwijderingen
  1. 13 0
      api/position.js
  2. 7 6
      pagesB/positionDetail/index.vue
  3. 122 0
      pagesB/positionDetail/similar.vue

+ 13 - 0
api/position.js

@@ -184,3 +184,16 @@ export const getShareDetail = (params) => {
     }
   })
 }
+
+// 职位详情-获取相似职位
+export const getSimilarPosition = (params) => {
+  return request({
+    url: '/app-api/menduner/system/job/advertised/get/acquainted',
+    method: 'GET',
+    params,
+    custom: {
+      showLoading: false,
+      auth: false
+    }
+  })
+}

+ 7 - 6
pagesB/positionDetail/index.vue

@@ -416,11 +416,13 @@ onShareAppMessage((res) => {
 
 // 富文本内容处理,去除多余的换行空格等
 const cleanedHtml = (text) => {
-  let cleaned = text.replace(/\n/g, '</br>')
-  cleaned = cleaned.replace(/\s+/g, ' ').trim()
-  cleaned = cleaned.replace(/(^|\s+)<\/p>(\s*<p>|$)/g, '</p><p>').trim()
-  cleaned = cleaned.replace(/<p>\s*(<br>)\s*<\/p>/g, '')
-  cleaned = cleaned.replace(/<p>\s*(<\/br>)\s*<\/p>/g, '')
+  const cleaned = text.replace(/\n/g, '<br>')
+  .replace(/\s+/g, ' ')
+  .replace(/(^|\s+)<\/p>(\s*<p>|$)/g, '</p><p>')
+  .replace(/<p>\s*(<br>)\s*<\/p>/g, '')
+  .replace(/<pre([^>]*)>/g, '<div$1>')
+  .replace(/<\/pre>/g, '</div>')
+  .replace(/<p>\s*(<\/br>)\s*<\/p>/g, '').trim()
   return cleaned
 }
 
@@ -665,7 +667,6 @@ const handleLoginConfirm = () => {
 
 <style scoped lang="scss">
 @import '../../static/style/position/index.scss';
-
 .hideCanvasView{
 	position: relative;
 }

+ 122 - 0
pagesB/positionDetail/similar.vue

@@ -0,0 +1,122 @@
+<template>
+  <view>
+    <view class="box defaultBgc">
+      <scroll-view class="scrollBox" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadingMore" @scroll="onScroll" style="position:relative;">
+        <PositionList :list="positionListData" :noMore="false"></PositionList>
+        <uni-load-more :status="more" />
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import PositionList from '@/components/PositionList'
+import { dealDictArrayData } from '@/utils/position'
+import { getSimilarPosition } from '@/api/position'
+
+const props = defineProps({
+  id: String
+})
+const more = ref('more')
+
+const positionListData = ref([])
+const query = reactive({
+  pageSize: 10, 
+  pageNo: 1,
+	id: props.id
+})
+console.log(props.id, '==================')
+const getData = async () => {
+  try {
+    const res = await getSimilarPosition(query)
+    const arr = res?.data?.list || []
+    // 推荐接口返回数据需要拼接
+    const list = arr
+    positionListData.value.push(...dealDictArrayData(list))
+    if (positionListData.value.length === +res.data.total) {
+      more.value = 'noMore'
+      return
+    }
+  } catch (error) {
+    query.pageNo--
+    more.value = 'more'
+  }
+}
+
+const scrollTop = ref(0)
+const old = ref({
+  scrollTop: 0
+})
+const onScroll = (e) =>{
+  old.value.scrollTop = e.detail.scrollTop
+}
+
+// 加载更多
+const loadingMore = () => {
+  more.value = 'loading'
+  query.pageNo++
+  getData()
+}
+
+</script>
+
+<style scoped lang="scss">
+.stick {
+  z-index: 1;
+  position: sticky;
+  top: 0;
+}
+.stickFilter {
+  z-index: 1;
+  position: sticky;
+  box-shadow: 0px 10rpx 12rpx 0px rgba(195, 195, 195, .25);
+  top: 120rpx;
+}
+.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
+.pb-10 {
+  padding-bottom: 10px;
+}
+.pb-20 { padding-bottom: 20px; }
+.px-5 { padding-left: 5px; padding-right: 5px; }
+.px-10 { padding-left: 10px; padding-right: 10px; }
+.mx-10 { margin-left: 10px; margin-right: 10px }
+.mx-20 { margin-left: 20px; margin-right: 20px; }
+.mb-10 { margin-bottom: 10px; }
+.box {
+  height: 100vh;
+  overflow: hidden;
+  padding-bottom: 120rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+.scrollBox{
+  flex: 1;
+  height: 0 !important;
+  padding-bottom: 24rpx;
+  box-sizing: border-box;
+}
+:deep(.uni-searchbar__box) {
+  width: calc(100% - 105px);
+  height: 40px !important;
+  border: 1px solid #00897B;
+  padding-right: 20px;
+  flex: none;
+}
+.search-btn {
+  position: absolute;
+  right: 11px;
+  top: 10px;
+  width: 110px;
+  height: 40px;
+  font-size: 16px;
+  background-color: #00897B;
+  color: #fff;
+  border-radius: 0 5px 5px 0;
+  z-index: 9;
+}
+:deep(.picker-view) {
+  padding-bottom: 80px !important;
+}
+</style>