fix:修改ui

src/pages/travel-notes/index.vue

@@ -3,41 +3,86 @@
     <div v-if="filterList.length" class="sticky top-50 z-50 bg-white w-full">
       <van-dropdown-menu active-color="#FF9300" ref="dropDownMenuRef">
         <van-dropdown-item @closed="onAreaFilterClose" :title="areaFilterTitle" ref="itemRef">
-          <van-tree-select @click-nav="handleAreaClick" @click-item="handleFilterClick" v-model:active-id="activeId"
-            v-model:main-active-index="areaIndex" :items="filterList" />
+          <van-tree-select
+            @click-nav="handleAreaClick"
+            @click-item="handleFilterClick"
+            v-model:active-id="activeId"
+            v-model:main-active-index="areaIndex"
+            :items="filterList"
+          />
         </van-dropdown-item>
-        <van-dropdown-item :title="writeTypeText" v-model="travelWriteType"
-          :options="writeTypeList"></van-dropdown-item>
+        <van-dropdown-item
+          :title="writeTypeText"
+          v-model="travelWriteType"
+          :options="writeTypeList"
+        ></van-dropdown-item>
       </van-dropdown-menu>
     </div>
     <div class="px-10 pt-20">
-      <van-list v-if="dataList.length" v-model:loading="loading" :immediate-check="false" :finished="finished" loading-text="加载中..." error-text="获取失败" @load="loadMore">
+      <van-list
+        v-if="dataList.length"
+        v-model:loading="loading"
+        :immediate-check="false"
+        :finished="finished"
+        loading-text="加载中..."
+        error-text="获取失败"
+        @load="loadMore"
+      >
         <template v-for="itemData in dataList">
-          <NuxtLink class="group flex relative cursor-pointer bg-white  pb-10 mb-20" :to="`/yj/${itemData.id}`">
+          <NuxtLink
+            class="group flex relative cursor-pointer bg-white pb-10 mb-20"
+            :to="`/yj/${itemData.id}`"
+          >
             <div class="aspect-[120/80] h-80 shrink-0 rounded overflow-hidden bg-[#ddd]">
-              <img v-if="Array.isArray(itemData?.tourismUrlsAfterConvert)" :src="itemData?.tourismUrlsAfterConvert[0]" class="w-full h-full rounded object-cover" alt="" srcset="" />
+              <img
+                v-if="Array.isArray(itemData?.tourismUrlsAfterConvert)"
+                :src="itemData?.tourismUrlsAfterConvert[0]"
+                class="w-full h-full rounded object-cover"
+                alt=""
+                srcset=""
+              />
             </div>
-            <div class="h-80  pl-[8px] flex flex-col text-[#FD9A00] justify-between  w-[calc(100%-120px)]">
+            <div
+              class="h-80 pl-[8px] flex flex-col text-[#FD9A00] justify-between w-[calc(100%-120px)]"
+            >
               <div class="truncate w-full text-[14px] font-bold">
-                <img v-if="itemData.isOriginal == 1" src="~/assets/img/yuanchuang.png"  class="mt-3 w-[30px] h-[16px]" alt="" style="float:left;">
+                <img
+                  v-if="itemData.isOriginal == 1"
+                  src="~/assets/img/yuanchuang.png"
+                  class="mt-3 w-[30px] h-[16px]"
+                  alt=""
+                  style="float: left"
+                />
                 {{ itemData.projectTitle }}
               </div>
               <div class="w-full overflow-x-auto scrollbar" v-if="itemData.noteLabel">
                 <div class="flex flex-nowrap">
-                  <div v-for="tag in convertTag(itemData.noteLabel)" class=" rounded-full border-[#FD9A00] text-[10px] pr-6 pl-6 float-left mr-10 shrink-0" style="border:0.5px solid #FD9A00">{{ tag }}</div>
+                  <div
+                    v-for="tag in convertTag(itemData.noteLabel)"
+                    class="rounded-full text-[#666] border-[#666] text-[10px] pr-6 pl-6 float-left mr-10 shrink-0"
+                    style="border: 0.5px solid #666666"
+                  >
+                    {{ tag }}
+                  </div>
                 </div>
               </div>
               <div class="flex justify-end items-center text-[12px] text-[#999]">
                 <div class="flex items-center mr-10">
-                  <van-icon name="eye-o" class="mr-5" />{{ transferCount(itemData.pageViewCount) }}
+                  <van-icon name="eye-o" class="mr-5" />
+                  {{ transferCount(itemData.pageViewCount) }}
                 </div>
                 <div class="flex items-center mr-10">
-                  <van-icon name="good-job-o" class="mr-5" />{{ transferCount(itemData.likeCount) }}
+                  <van-icon name="good-job-o" class="mr-5" />
+                  {{ transferCount(itemData.likeCount) }}
                 </div>
               </div>
             </div>
             <div class="w-full h-10 absolute top-[100%] left-0 flex items-center justify-between">
-              <div v-for="item in 40" class="w-[3%] h-[1px] border border-[#ddd]" style="transform:scale(0.5)"></div>
+              <div
+                v-for="item in 40"
+                class="w-[3%] h-[1px] border border-[#ddd]"
+                style="transform: scale(0.5)"
+              ></div>
             </div>
           </NuxtLink>
         </template>
@@ -51,25 +96,29 @@
 const router = useRoute()
 const AREA_TEXT = '地域'
 
-const areaId = useRouteParam("area")
+const areaId = useRouteParam('area')
 
-const filterList = ref([])//地域列表
+const filterList = ref([]) //地域列表
 
-const curFilter = ref({})//当前筛选条件(国家)
+const curFilter = ref({}) //当前筛选条件(国家)
 
-const areaIndex = ref(0)//地域索引
+const areaIndex = ref(0) //地域索引
 
 const areaFilterTitle = ref(AREA_TEXT)
 
 const activeId = computed(() => curFilter.value.id)
 
-const activeIndex = ref('');
+const activeIndex = ref('')
 
 const dropDownMenuRef = ref(null)
 // 获取筛选列表
 async function getFilters() {
-  const { data } = await request(`/website/tourism/projectTravelNotes/travelNotesDirectoryList`).finally(()=>{closeToast()})
-  
+  const { data } = await request(
+    `/website/tourism/projectTravelNotes/travelNotesDirectoryList`
+  ).finally(() => {
+    closeToast()
+  })
+
   if (!Array.isArray(data)) return getList()
   const routerAreaId = null
   data.map((item, index) => {
@@ -77,16 +126,16 @@ async function getFilters() {
     data[index].text = item.areaName
 
     // 处理地址栏带area参数的情况
-    if(router.query.area == item.areaId){
+    if (router.query.area == item.areaId) {
       curFilter.value.areaId = router.query.area
       document.title = item.areaName
       areaIndex.value = index + 1
-      curFilter.value.id = item.areaId+',all'
+      curFilter.value.id = item.areaId + ',all'
       areaFilterTitle.value = item.areaName
     }
 
     if (Array.isArray(item.children)) {
-      data[index].children.unshift({countryName:'全部',countryId:item.areaId+',all'})
+      data[index].children.unshift({ countryName: '全部', countryId: item.areaId + ',all' })
       item.children.map((item2, index2) => {
         data[index].children[index2].id = item2.countryId
         data[index].children[index2].text = item2.countryName
@@ -95,28 +144,31 @@ async function getFilters() {
       })
     }
   })
-  if(routerAreaId){
-
+  if (routerAreaId) {
   }
   filterList.value = [{ id: 0, text: '全部', children: [{ id: 0, text: '全部' }] }, ...data]
   getList()
 }
 
 // 监听地域筛选框收起
-function onAreaFilterClose() { areaIndex.value = activeIndex.value }
+function onAreaFilterClose() {
+  areaIndex.value = activeIndex.value
+}
 
 const pageNum = ref(1)
 const pageSize = ref(10)
 const dataList = ref([])
 const loading = ref(true)
 const finished = ref(false)
-// 是否原创 0 全部 1 原创 
+// 是否原创 0 全部 1 原创
 const travelWriteType = ref(0)
 const writeTypeList = ref([
   { text: '全部', value: 0 },
-  { text: '原创', value: 1 },
+  { text: '原创', value: 1 }
 ])
-const writeTypeText = computed(() => writeTypeList.value[travelWriteType.value].value ? '原创' : '是否原创')
+const writeTypeText = computed(() =>
+  writeTypeList.value[travelWriteType.value].value ? '原创' : '是否原创'
+)
 watch(travelWriteType, () => {
   pageNum.value = 1
   dataList.value = []
@@ -128,36 +180,40 @@ async function getList() {
   showLoadingToast({
     message: '加载中...',
     forbidClick: true,
-    duration: 0,
+    duration: 0
   })
   const param = {
     pageNum: pageNum.value,
-    pageSize: pageSize.value,
+    pageSize: pageSize.value
   }
 
-  if(curFilter.value.areaId) param.areaId = curFilter.value.areaId
+  if (curFilter.value.areaId) param.areaId = curFilter.value.areaId
 
-  if(curFilter.value.id) {
+  if (curFilter.value.id) {
     const countryId = curFilter.value.id.split(',')
-    if(!countryId[1]) param.countryId = curFilter.value.id
+    if (!countryId[1]) param.countryId = curFilter.value.id
   }
-  
+
   if (travelWriteType.value) {
     param.travelWriteType = travelWriteType.value
   }
   loading.value = true
-  const { data } = await request(`/website/tourism/projectTravelNotes/travelNotesPageList`, { query: param }).finally(()=>closeToast())
+  const { data } = await request(`/website/tourism/projectTravelNotes/travelNotesPageList`, {
+    query: param
+  }).finally(() => closeToast())
 
   dataList.value = dataList.value.concat(data.dataList)
   loading.value = false
   if (dataList.value.length >= data.totalCount) {
-    finished.value = true;
+    finished.value = true
   } else {
-    finished.value = false;
+    finished.value = false
   }
 }
 // 选择洲
-function handleAreaClick(index) { areaIndex.value = index }
+function handleAreaClick(index) {
+  areaIndex.value = index
+}
 
 // 选择国家
 function handleFilterClick(item) {
@@ -174,32 +230,32 @@ function handleFilterClick(item) {
   dataList.value = []
   getList()
   dropDownMenuRef.value && dropDownMenuRef.value.close()
-  document.title=`${item.id?'游记-'+item.areaName+'-'+item.text:'旅游笔记'}`
+  document.title = `${item.id ? '游记-' + item.areaName + '-' + item.text : '旅游笔记'}`
 }
 
-function transferCount(num=0){
-  if(isNaN(num)) return 0
-  if(num>10000){
-    return (num/10000).toFixed(1)+'w'
-  }else{
+function transferCount(num = 0) {
+  if (isNaN(num)) return 0
+  if (num > 10000) {
+    return (num / 10000).toFixed(1) + 'w'
+  } else {
     return num
   }
 }
 function loadMore() {
-  pageNum.value++;
+  pageNum.value++
   getList()
 }
-function convertTag(str=''){
-  if(typeof str!=='string') return []
+function convertTag(str = '') {
+  if (typeof str !== 'string') return []
   return str.split('&')
 }
 
-onMounted( async () => {
+onMounted(async () => {
   getFilters()
 })
 
 useSeoMeta({
-  title: `旅游笔记`,
+  title: `旅游笔记`
 })
 </script>