feat 查看详情新建窗口

src/componse/provider-article/provider-article-panel.vue

@@ -11,23 +11,28 @@
     </template>
     <div class="flex flex-col space-y-8">
       <div class="flex space-x-4  ">
-        <div class="w-50">货号：{{provider.pid || '-'}}</div>
+        <div class="w-full">货号：{{provider.pid || '-'}}</div>
 <!--        <div class="w-50">SpuID: {{provider.spuID || '-'}} </div>-->
-        <div class="w-50">SkuID: {{provider.skuID || '-'}}</div>
+        <div class="w-full">SkuID:
-        <div>可以购买：{{provider.available ? '是':'否'}}</div>
+          <a-button type="link" :href="provider.link" target="_blank" v-if="provider.skuID">{{provider.skuID}}</a-button>
+          <span v-else>-</span>
+        </div>
+        <div class="w-full">可以购买：{{provider.available ? '是':'否'}}</div>
       </div>
       <div class="flex space-x-4 items-center">
-        <div class="w-50">当前售价：$ {{provider.cost.originalPrice || '-'}}</div>
+        <div class="w-full">当前售价：$ {{provider.cost.originalPrice || '-'}}</div>
         <a-popover v-if="provider.cost.calMark" trigger="hover">
           <template #content>
                     <span class="whitespace-pre">
                       {{provider.cost.calMark}}
                     </span>
           </template>
-          <div class="w-50">当前到手价：￥ {{provider.cost.finalPrice || '-'}}</div>
+          <div class="w-full">当前到手价：￥ {{provider.cost.finalPrice || '-'}}</div>
         </a-popover>
-        <div class="w-50" v-else>当前到手价：￥ {{provider.cost.finalPrice || '-'}}</div>
+        <div class="w-full" v-else>当前到手价：￥ {{provider.cost.finalPrice || '-'}}</div>
-        <a-button type="primary" @click="fetchArticle(provider)" :loading="fetchLoading">立即拉取</a-button>
+        <div class="w-full">
+          <a-button type="primary" @click="fetchArticle(provider)" :loading="fetchLoading">立即拉取</a-button>
+        </div>
       </div>
       <v-chart class="h-400px w-full" :option="options" />
     </div>

src/componse/seller-article/seller-article-panel.vue

@@ -11,9 +11,9 @@
     </template>
     <div class="flex flex-col space-y-4">
       <div class="flex space-x-4 justify-between">
-        <div class="w-50">货号：{{seller.pid || '-'}}</div>
+        <div class="w-full">货号：{{seller.pid || '-'}}</div>
-        <div class="w-50">SpuID: {{seller.spuID || '-'}} </div>
+        <div class="w-full">SpuID: {{seller.spuID || '-'}} </div>
-        <div class="w-100  flex items-center space-x-4">
+        <div class="w-full  flex items-center space-x-4">
           <div>SkuID: {{seller.skuID || '-'}} </div>
           <div class="text-red-4 flex items-center space-x-4" v-if="!seller.skuID">
             <div>(未匹配到销售商sku)</div>
@@ -22,17 +22,19 @@
         </div>
       </div>
       <div class="flex space-x-4 justify-between">
-        <div class="w-50">当前售价：￥ {{seller.sell.originalPrice || '-'}}</div>
+        <div class="w-full">当前售价：￥ {{seller.sell.originalPrice || '-'}}</div>
         <a-popover v-if="seller.sell.calMark" trigger="hover">
           <template #content>
                     <span class="whitespace-pre">
                       {{seller.sell.calMark}}
                     </span>
           </template>
-          <div class="w-50">当前到手价：￥ {{seller.sell.finalPrice || '-'}}</div>
+          <div class="w-full">当前到手价：￥ {{seller.sell.finalPrice || '-'}}</div>
         </a-popover>
-        <div class="w-50" v-else>当前到手价：￥ {{seller.sell.finalPrice || '-'}}</div>
+        <div class="w-full" v-else>当前到手价：￥ {{seller.sell.finalPrice || '-'}}</div>
-        <a-button v-if="seller.skuID" type="primary" @click="fetchArticle(seller)" :loading="fetchLoading">立即拉取</a-button>
+        <div class="w-full">
+          <a-button  v-if="seller.skuID" type="primary" @click="fetchArticle(seller)" :loading="fetchLoading">立即拉取</a-button>
+        </div>
       </div>
       <v-chart class="h-400px w-full" :option="options" />
     </div>

src/views/article/index.vue

@@ -15,10 +15,16 @@
               <a-image :width="75" :src="record.image"/>
             </template>
             <template v-else-if="column.key === 'name'">
-              <span class="cursor-pointer text-blue" title="查看详情" @click="toDetail(record.id)">{{record.name}}</span>
+              <router-link target="_blank" :to="{ path: '/article/detail', query: {id: record.id} }">
+                {{record.name}}
+              </router-link>
+<!--              <span class="cursor-pointer text-blue" title="查看详情" @click="toDetail(record.id)">{{record.name}}</span>-->
             </template>
             <template v-else-if="column.key === 'pid'">
-              <span class="cursor-pointer text-blue" title="查看详情" @click="toDetail(record.id)">{{record.pid}}</span>
+<!--              <span class="cursor-pointer text-blue" title="查看详情" @click="toDetail(record.id)">{{record.pid}}</span>-->
+              <router-link target="_blank" :to="{ path: '/article/detail', query: {id: record.id} }">
+                {{record.pid}}
+              </router-link>
             </template>
             <template v-else-if="column.key === 'rate'">
               <span>{{record.rate > 0 ? `${record.rate}%`:'--' }}</span>
@@ -57,10 +63,6 @@ const query = reactive({
   rate_sort:null,
 })
 
-watch(()=>query.available, ()=>{
-  console.log(query)
-})
-
 onMounted(()=>{
   list()
 })
@@ -186,7 +188,7 @@ const toDetail=(id)=>{
     path: '/article/detail',
     query: {
       id: id
-    }
+    },
   })
 }