feat:游记列表

.gitignore

@@ -20,5 +20,5 @@ logs
 
 # Local env files
 # .env
-# .env.*
+.env.*
 # !.env.example

src/pages/yj/[id].vue

@@ -1,46 +1,140 @@
 <template>
   <div>
     <div v-if="['success'].includes(status)">
-      <img
-        :src="
-          detailData.travelNotesBannerAfterConvert?.length
-            ? detailData.travelNotesBannerAfterConvert[0]
-            : ''
-        "
-        class="aspect-[1920/600] w-full object-cover"
-      />
-      <div class="px-10 pt-10 pb-30">
-        <div class="text-2xl font-semibold text-black-3">
-          {{ detailData.projectTitle }}
+
+      <div class="p-10">
+        <img :src="detailData.tourismUrl" class="aspect-[316/204] w-full object-cover rounded" />
+        <div class="flex mt-10">
+          <img src="~/assets/img/article_title.png" class="w-[32px] h-[32px] shrink-0" alt="">
+          <div class="ml-10 text-[16px] text-[#333] leading-[28px]">
+            <span v-if="detailData.isOrigin == 1" class="text-[#FD9A00]">【原创】</span>
+            {{ detailData.projectTitle }}
+          </div>
+        </div>
+        <div class="flex justify-end text-[#999] text-[12px]">
+          {{ detailData.createTime }}
         </div>
-        <div class="mt-15 flex items-center gap-10">
-          <div
-            v-for="item in lableList"
-            :key="item"
-            class="flex h-22 items-center justify-center rounded-sm border border-[#FD9A00] px-8 text-sm text-[#FD9A00]"
-          >
-            {{ item }}
+        <div class="relative pt-15 pb-15 mt-8 rounded pl-20 text-[#4B99EA] text-[12px]"
+          :style="{ background: `url(${dashBorder2})`, backgroundSize: '100% 100%' }">
+          <div class="">
+            <van-row>
+              <van-col span="12">
+                <div class="w-[90%] flex">
+                  <img class="w-[20px] h-[20px] mr-5" src="~/assets/img/yj/date.png" alt="">
+                  <div class="font-bold leading-[20px]">出发时间/</div>
+                  <div class="leading-[20px] flex-1">{{ detailData?.departureTime || '' }}</div>
+                </div>
+              </van-col>
+              <van-col span="12">
+                <div class="w-[90%] flex">
+                  <img class="w-[20px] h-[20px] mr-5" src="~/assets/img/yj/time.png" alt="">
+                  <div class="font-bold leading-[20px]">出发天数/</div>
+                  <div class="leading-[20px] flex-1 ">{{ detailData?.countTimes || '' }}</div>
+                </div>
+              </van-col>
+            </van-row>
+
+          </div>
+          <div class="mt-24">
+            <van-row>
+              <van-col span="12">
+                <div class="w-[90%] flex">
+                  <img class="w-[20px] h-[20px] mr-5" src="~/assets/img/yj/relationship.png" alt="">
+                  <div class="font-bold leading-[20px]">人物关系/</div>
+                  <div class="leading-[20px] flex-1">{{ detailData?.role || '' }}</div>
+                </div>
+              </van-col>
+              <van-col span="12">
+                <div class="w-[90%] flex">
+                  <img class="w-[20px] h-[20px] mr-5" src="~/assets/img/yj/money.png" alt="">
+                  <div class="font-bold leading-[20px]">人均费用/</div>
+                  <div class="leading-[20px] flex-1">{{ detailData?.averageCost || '' }}</div>
+                </div>
+              </van-col>
+            </van-row>
+          </div>
+          <div class="mt-24">
+            <van-row>
+              <van-col span="12">
+                <div class="w-[90%] flex">
+                  <img class="w-[20px] h-[20px] mr-5" src="~/assets/img/yj/plan.png" alt="">
+                  <div class="font-bold leading-[20px]">出行方式/</div>
+                  <div class="leading-[20px] flex-1">{{ detailData?.travelModeDictMap?.name || '' }}</div>
+                </div>
+              </van-col>
+              <van-col span="12">
+                <div class="w-[90%] flex">
+                  <img class="w-[20px] h-[20px] mr-5" src="~/assets/img/yj/target.png" alt="">
+                  <div class="font-bold leading-[20px]">目的地/</div>
+                  <div class="leading-[20px] flex-1">{{ detailData?.endPlaceDictMap?.name || '' }}</div>
+                </div>
+              </van-col>
+            </van-row>
+          </div>
+          <div class="mt-24">
+            <van-row>
+              <van-col span="12">
+                <div class="w-[90%] flex">
+                  <img class="w-[20px] h-[20px] mr-5" src="~/assets/img/yj/person.png" alt="">
+                  <div class="font-bold leading-[20px]">游玩人数/</div>
+                  <div class="leading-[20px] flex-1">{{ detailData?.travelNumber || '' }}</div>
+                </div>
+              </van-col>
+              <van-col span="12">
+                <div class="w-[90%] flex text-[#FD9A00]">
+                  <img class="w-[20px] h-[20px] mr-5" src="~/assets/img/yj/star.png" alt="">
+                  <div class="font-bold leading-[20px]">推荐指数/</div>
+                  <div class="leading-[20px] flex-1">{{ detailData?.recommendationRate || '' }}</div>
+                </div>
+              </van-col>
+            </van-row>
           </div>
         </div>
-        <div class="mt-10 items-center text-xl text-[#666666B2]">
-          <div>出行天数 {{ detailData.countTimes }}</div>
-          <div class="mt-10" v-if="detailData.contactDescription">
-            专业一站式导游服务请联系{{ detailData.contactDescription }}
+        <div class="mt-10" v-for="con in detailData.travelNotesContent" :key="con.id">
+          <template v-if="con.type == 'image'">
+            <img :src="con.content" class="w-[full] rounded-xl" alt="">
+          </template>
+          <template v-else>
+            <div v-html="con.content"></div>
+          </template>
+        </div>
+
+        <div class="flex justify-end items-center text-[12px] text-[#999] mt-10 ">
+          <div class="flex items-center mr-10">
+            <van-icon name="eye-o" class="mr-5" />{{ detailData.pageViewCount }}
+          </div>
+          <div class="flex items-center mr-10">
+            <van-icon name="chat-o" class="mr-5" />{{ detailData.pageViewCount }}
+          </div>
+          <div class="flex items-center mr-10">
+            <van-icon name="good-job-o" class="mr-5" />{{ detailData.likeCount }}
+          </div>
+          <div class="flex items-center">
+            <van-icon name="like-o" class="mr-5" />{{ detailData.hotValue }}
           </div>
         </div>
-        <div v-html="htmlContent" class="mt-15 text-xl text-black-3"></div>
+      </div>
+    </div>
+    <div v-else class=" text-[#999] mt-100">
+      <div class="text-center">
+        不好意思，游记走丢了~
+      </div>
+      <div @click="goBack" class="text-center underline mt-10 cursor-pointer text-[#4B99EA]">
+        返回
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import dashBorder2 from '~/assets/img/dash-border.png'
 const id = useRouteParam("id");
+const router = useRouter();
 
 const { data: detailData, status } = useMyFetch(
   `website/tourism/projectTravelNotes/travelNotesDetail?id=${id.value}`
 );
-
+console.log('detailData::', detailData)
 const htmlContent = computed(() => {
   return detailData?.value?.tourTourismTravelNotesContent?.content?.replace(
     /<img/g,
@@ -51,9 +145,11 @@ const htmlContent = computed(() => {
 const lableList = computed(() => {
   return detailData.value?.projectLabel?.split("&") ?? [];
 });
-
+function goBack() {
+  router.back()
+}
 useSeoMeta({
-  title: "产品详情",
+  title: "游记详情",
 });
 </script>