feat: 开发期刊推荐

boyang
1 parent 287559f2
Showing 3 changed files with 141 additions and 30 deletions
components/ProductDetail.vue
nuxt.config.ts
pages/products/index.vue
@@ -292,7 +292,7 @@
       </div>
     </div>
  
-    <div class="tw-pb-[64px]">
+    <!-- <div class="tw-pb-[64px]">
       <v-tabs
         class="tabs"
         v-model="tab"
@@ -303,7 +303,6 @@
       >
         <v-tab :value="1">Product Details</v-tab>
         <v-tab :value="2">Specification</v-tab>
-        <!-- <v-tab :value="3">商品百科</v-tab> -->
       </v-tabs>
       <v-window v-model="tab" class="tw-p-[24px]">
         <v-window-item key="1" :value="1">
@@ -347,8 +346,126 @@
             </tbody>
           </v-table>
         </v-window-item>
-        <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
       </v-window>
+    </div> -->
+    <div style="display: flex">
+      <div class="tw-pb-[64px]" style="width: 70%; margin-right: 10px">
+        <v-tabs
+          class="tabs"
+          v-model="tab"
+          color="white"
+          bg-color="#eeeeee"
+          slider-color="blue-lighten-1"
+          selected-class="active"
+        >
+          <v-tab :value="1">Product Details</v-tab>
+          <v-tab :value="2">Specification</v-tab>
+          <!-- <v-tab :value="3">商品百科</v-tab> -->
+        </v-tabs>
+        <v-window v-model="tab" class="tw-p-[24px]">
+          <v-window-item key="1" :value="1">
+            <div v-if="info.advantage" class="tw-mb-[24px]">
+              <div class="text-h6">Advantage</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="info.advantage"></div>
+            </div>
+            <div v-if="info.physicalproperty" class="tw-mb-[24px]">
+              <div class="text-h6">Physical Property</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="info.physicalproperty"></div>
+            </div>
+            <div v-if="info.storage" class="tw-mb-[24px]">
+              <div class="text-h6">Storage</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="info.storage"></div>
+            </div>
+            <div v-if="info.introduction" class="tw-mb-[24px]">
+              <div class="text-h6">Introduction</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="info.introduction"></div>
+            </div>
+            <div v-if="info.description" class="tw-mb-[24px]">
+              <div class="text-h6">Description</div>
+              <v-divider class="tw-mb-[12px]"></v-divider>
+              <div v-html="info.description"></div>
+            </div>
+          </v-window-item>
+          <v-window-item key="2" :value="2">
+            <v-table density="compact" class="table2">
+              <tbody>
+                <tr
+                  class="tr"
+                  v-for="item in info.productAttributeList || []"
+                  :key="item.name"
+                >
+                  <td class="td tw-w-[400px]">{{ item.name }}</td>
+                  <td class="td">{{ item.value }}</td>
+                </tr>
+              </tbody>
+            </v-table>
+          </v-window-item>
+          <!-- <v-window-item key="3" :value="3"> 2 </v-window-item> -->
+        </v-window>
+      </div>
+      <div style="width: 30%">
+        <v-tabs
+          v-model="tabPeriodical"
+          color="white"
+          bg-color="#eeeeee"
+          slider-color="blue-lighten-1"
+          selected-class="active"
+          grow
+        >
+          <v-tab value="one">Blog recommendation</v-tab>
+        </v-tabs>
+        <!-- <v-list rounded>
+          <v-list-item-group v-model="selectedItem" color="primary">
+            <v-list-item
+              v-for="item in info.journals"
+              :key="item.id"
+              @click="navigateToUrl(item.link)"
+            >
+              <v-list-item-content>
+                <v-list-item-title v-text="item.title"></v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list-item-group>
+        </v-list> -->
+        <v-list rounded>
+          <v-list-item-group v-model="selectedItem" color="primary">
+            <v-list-item
+              v-for="item in info.journals"
+              :key="item.id"
+              @click="navigateToUrl(item.link)"
+            >
+              <v-list-item-content>
+                <v-hover v-slot:default="{ isHovering, props }">
+                  <div v-bind="props">
+                    <v-list-item-title
+                      v-if="!isHovering"
+                      v-text="item.title"
+                      style="
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                      "
+                    ></v-list-item-title>
+                    <span v-if="isHovering" bottom style="color: #1e88e5">{{
+                      item.title
+                    }}</span>
+                    <!-- <v-tooltip v-if="isHovering" bottom>
+                      <template v-slot:activator="{ props: tooltipProps }">
+                        <span v-bind="tooltipProps">{{ item.title }}</span>
+                      </template>
+                      <span>{{ item.title }}</span>
+                    </v-tooltip> -->
+                  </div>
+                </v-hover>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list-item-group>
+        </v-list>
+      </div>
     </div>
     <div class="social-share-container">
       <SocialShare
@@ -378,26 +495,6 @@
         style="color: #1e88e5; width: 140px"
       />
     </div>
-    <!-- <div class="social-share-container">
-      <div
-        v-for="network in ['facebook', 'twitter', 'linkedin']"
-        :key="network"
-        class="social-share-item"
-      >
-        <h3 class="social-share-title" style="color: #1e88e5">
-          {{ getTitle(network) }}
-        </h3>
-        <SocialShare
-          :network="network"
-          :styled="true"
-          style="color: #1e88e5"
-          :label="getTitle(network)"
-          :title="info.name"
-          :url="currentUrl"
-          class="p-4 rounded-none"
-        />
-      </div>
-    </div> -->
   </v-container>
 </template>
  
@@ -421,6 +518,20 @@ const dialogStore = useDialogStore();
 const href1 = ref("/products");
 const href2 = ref("/products");
 const idHref = ref("/products");
+const itemsss = [
+  {
+    name: "Item #1",
+    id: 1,
+  },
+  {
+    name: "Item #2",
+    id: 2,
+  },
+  {
+    name: "Item #3",
+    id: 3,
+  },
+];
 const productStore = useProductListStore();
 const currentUrl = ref("https://www.canrud.com/products");
 // 定义单个 item 的接口
@@ -587,7 +698,7 @@ watchEffect(() =&gt; {
 // })
 const currentIndex = ref(0);
 const navigateToUrl = (url) => {
-  // window.open(url); // 在新标签页中打开链接
+  window.open(url); // 在新标签页中打开链接
 };
 const toggleRow = () => {
   currentIndex.value = currentIndex.value === 0 ? 1 : 0;
@@ -41,8 +41,8 @@ export default defineNuxtConfig({
   nitro: {
     devProxy: {
       "/shop": {
-        target: "http://47.89.254.121:8002/shop", // 线上代理地址
-        // target: "http://127.0.0.1:8002/shop",
+        // target: "http://47.89.254.121:8002/shop", // 线上代理地址
+        target: "http://127.0.0.1:8002/shop",
         // target: process.env.BASE_URL || 'http://39.108.227.113:8002/shop', // 目标接口域名
         changeOrigin: true, // 表示是否跨域
       },
@@ -50,8 +50,8 @@ export default defineNuxtConfig({
     // 该配置用于服务端请求转发
     routeRules: {
       "/shop/**": {
-        proxy: "http://47.89.254.121:8002/shop/**",
-        // proxy: "http://127.0.0.1:8002/shop/**",
+        // proxy: "http://47.89.254.121:8002/shop/**",
+        proxy: "http://127.0.0.1:8002/shop/**",
         // proxy: process.env.BASE_URL || 'http://39.108.227.113:8002/shop/**'
       },
     },
@@ -149,14 +149,15 @@ const loadProducts = async () =&gt; {
   if (categoryStore.selectedFuncCategory) {
     params.productFunctionId = categoryStore.selectedFuncCategory;
     if (firstIndex.value == 1) {
-      // categoryStore.selectedFuncCategory = selectedFuncCategoryBak.value;
       params.productFunctionId = selectedFuncCategoryBak.value;
       firstIndex.value += 1;
       if (
         params.productFunctionId == "" &&
         selectedFuncCategoryBak.value == ""
       ) {
+        categoryStore.selectedFuncCategory = selectedFuncCategoryBak.value;
         params.productFunctionId = categoryStore.selectedFuncCategory;
+        // categoryStore.selectedFuncCategory = selectedFuncCategoryBak.value;
       }
       console.log(
         params.productFunctionId,
@@ -248,7 +249,6 @@ watchEffect(async () =&gt; {
 //     const foundFuncCategory = funcCategoryList.value.find(
 //       (func) => func.name === functionName
 //     );
-//     console.log(foundFuncCategory, "5656functionName");
  
 //     if (foundFuncCategory) {
 //       const funcCategoryId = foundFuncCategory.id;