案例详情页完工

src/components/ExampleItem.vue

@@ -6,6 +6,64 @@ export default defineComponent({
   name: "ExampleItem",
   components:{
     ContactUs
+  },
+  data(){
+    return{
+      psginfos:[],
+      psginfo:null,
+      error:null,
+      isLoading: false
+    }
+  },
+  methods:{
+    fetchpsginfos:function (){
+      this.isLoading=true;
+      this.error=null;
+      const params = new URLSearchParams(window.location.search);
+      const pagecreatedAt = params.get('createdAt');
+      this.$axios.get('/api/project-examples?filters[createdAt]='+pagecreatedAt+'&populate[images][sort]=name:asc')
+          .then(response =>{
+            const resp = response.data;
+            if(resp.meta.pagination.total==0){
+              window.location.href = '/Err404';
+            }
+            if (resp && Array.isArray(resp.data)) {
+              this.psginfos = resp.data;
+              if(this.psginfos.length==0){
+                this.error = "返回的 JSON 对象中不存在 'data' 数组";
+              }else{
+                this.psginfo=this.psginfos[0];
+                let newtitle=this.psginfo.title+'-苏州卡多雷科技有限公司';
+                document.title=newtitle;
+              }
+            } else {
+              this.error = "返回的 JSON 对象中不存在 'data' 数组";
+            }
+          })
+          .catch(err => {
+            this.error = '请求失败，请稍后重试';
+          })
+          .finally(() => {
+            this.isLoading = false;
+          });
+      if(this.error!=null){
+        window.location.href = '/Err404';
+      }else{
+
+      }
+    }
+  },
+  created() {
+    // 获取 id 参数
+    const params = new URLSearchParams(window.location.search);
+    const id = params.get('id');
+    if (!id) {
+      // window.location.href = '/Err404';
+    }
+    this.fetchpsginfos();
+  },
+  mounted() {
+
   }
 })
 </script>
@@ -16,9 +74,26 @@ export default defineComponent({
       <ol class="breadcrumb">
         <li class="breadcrumb-item"><a href="/">卡多雷科技</a></li>
         <li class="breadcrumb-item"><a href="/Examples">行业案例</a></li>
+        <li class="breadcrumb-item">{{psginfo.title}}</li>
       </ol>
     </nav>
   </div>
+  <div class="container-lg bg-light pageroot">
+    <div class="normalcontentdiv">
+     <span class="normalcontenttitle">
+      {{psginfo.title}}
+     </span>
+     <span class="normalcontenttext" style="width: 100%;">
+      {{psginfo.introduction}}
+     </span>
+      <span v-for="(item, index) in psginfo.images" :key="index"
+           class="normalcontenttext"
+           style="width: 100%; height: auto;">
+        <img :src="`${this.$axios.defaults.baseURL}${item.url}`" v-if="item.mime.startsWith('image',0)" alt=""
+          style="width: 100%;"/>
+      </span>
+    </div>
+  </div>
   <ContactUs></ContactUs>
 </template>
 

src/components/ExpListContent.vue

@@ -2,7 +2,66 @@
 import {defineComponent} from 'vue'
 
 export default defineComponent({
-  name: "ExpListContent"
+  name: "ExpListContent",
+  data(){
+    return{
+      titles:[],
+      error:null,
+      isLoading: false,
+      pagination: null
+    }
+  },
+  methods:{
+    fetch_items:function(){
+      this.isLoading=true;
+      this.error=null;
+      const params = new URLSearchParams(window.location.search);
+      const type = params.get('type');
+      console.log('type!',type);
+      let pageNum=1;
+      if(this.isActiveRoute('Examples')){
+        const params = new URLSearchParams(window.location.search);
+        const page = params.get('page');
+        if(page!=null){
+          pageNum=parseInt(page, 10);
+        }
+      }
+      let reqarg='/api/project-examples?fields=title,createdAt&sort=createdAt:desc&pagination[page]='+pageNum+'&pagination[pageSize]=15';
+      this.$axios.get(reqarg)
+          .then(response =>{
+            const resp = response.data;
+            this.pagination= resp.meta.pagination;
+            // if(resp.meta.pagination.pageCount==0){
+            //   window.location.href = '/Examples';
+            //   console.log('turn');
+            // }
+            if (resp && Array.isArray(resp.data)) {
+              this.titles = resp.data;
+              console.log('reqarg',reqarg);
+              if(this.titles.length==0){
+                this.error = "返回的 JSON 对象中不存在 'data' 数组";
+              }
+            } else {
+              this.error = "返回的 JSON 对象中不存在 'data' 数组";
+            }
+          })
+          .catch(err => {
+            console.error(err);
+            this.error = '请求失败，请稍后重试';
+          })
+          .finally(() => {
+            this.isLoading = false;
+          });
+    },
+    isActiveRoute(routename) {
+      // Example: Apply style if route name starts with 'user-'
+      console.log('Current route name:', this.$route.name, 'Comparing with:', routename);
+      return this.$route.name === routename;
+    }
+  },
+  mounted() {
+    this.fetch_items();
+  }
 })
 </script>
 
@@ -14,6 +73,15 @@ export default defineComponent({
      </span>
       <span class="normalcontenttext" style="width: 100%;">
         <table class="table table-striped">
+          <tr v-for="item in titles">
+            <td style="text-align: left;width: 100%;">
+              <span class="normalcontenttext"style="background-color: transparent;">
+                <a :href="`/ExampleItem?createdAt=${item.createdAt}`" style="background-color: transparent; color: blue;">
+                  {{ item.title }}
+                </a>
+              </span>
+            </td>
+          </tr>
         </table>
       </span>
     </div>