feat 添加商品页面

nginx.conf

@@ -24,6 +24,16 @@ server {
        proxy_pass http://ht-watcher:8080;
     }
 
+    location /api/v1/spider{
+       resolver   10.43.0.10  valid=10s;   # 6.6.6.6 为自建DNS
+       proxy_pass http://product-spider:8080;
+    }
+
+    location /api/v1/products {
+       resolver   10.43.0.10  valid=10s;   # 6.6.6.6 为自建DNS
+       proxy_pass http://product-backend:8080;
+    }
+
     error_page   500 502 503 504  /50x.html;
     location = /50x.html {
         root   /usr/share/nginx/html;

src/api/product.js

@@ -0,0 +1,7 @@
+import {mande} from "mande";
+
+const product = mande('/api/v1/products')
+
+export const ListProducts = (query) => {
+    return product.get({query:query})
+}

src/routers/index.js

@@ -10,11 +10,16 @@ const routes = [
         name: 'watcher',
         component: ()=>import('@/views/Watcher/index.vue')
     },
+    {
+        path: '/product',
+        name: 'product',
+        component: ()=>import('@/views/Product/index.vue')
+    },
     {
         path: '/pusher',
         name: 'pusher',
         component: ()=>import('@/views/Pusher/index.vue')
-    }
+    },
 ]
 
 const router = createRouter({

src/views/Product/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="h-full  m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between space-y-4">
+    <div class="flex justify-between">
+      <div class="flex space-x-4">
+        <a-input placeholder="请输入关键词" v-model:value="query.keyword"></a-input>
+        <a-button type="primary" :disabled="loading" @click="list">搜索</a-button>
+      </div>
+    </div>
+    <div class="h-full border-0 border-t-1 border-solid border-gray-300 pt-4">
+      <a-spin :spinning="loading" :indicator="indicator">
+        <a-table :dataSource="data.list" :columns="columns" :pagination="false">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'name'">
+              <a v-if="record.name !== '' " :href="record.link" target="_blank">{{record.name}}</a>
+              <span v-else>正在抓取信息</span>
+            </template>
+            <template v-else-if="column.key === 'updatedAt'">
+              <span>{{moment(record.updatedAt).format('YYYY-MM-DD HH:mm:ss')}}</span>
+            </template>
+            <template v-else-if="column.key === 'image'">
+              <a-image
+                  :width="100"
+                  :src="record.image"
+              />
+            </template>
+            <template v-else-if="column.key === 'cnyPrice'">
+              <a-popover >
+                <template #content>
+                  <div class="whitespace-pre">{{record.calMark}}</div>
+                </template>
+                <span class="cursor-pointer">{{parseFloat(record.cnyPrice).toFixed(2)}}</span>
+              </a-popover>
+            </template>
+          </template>
+        </a-table>
+      </a-spin>
+    </div>
+  </div>
+</template>
+<script setup>
+
+import {h, onMounted, reactive, ref} from "vue";
+import {ListProducts} from "@/api/product.js";
+import moment from "moment/moment.js";
+import {LoadingOutlined} from "@ant-design/icons-vue";
+
+onMounted(()=>{
+  list()
+})
+const query = reactive({
+  page: 1,
+  size:6
+})
+
+const loading = ref(false)
+
+const data = ref({
+  total: 0,
+  list:[]
+})
+
+const list = ()=>{
+  loading.value = true
+  ListProducts(query).then(res=>{
+    data.value = res
+  }).catch(err => {
+    console.log(err)
+  }).finally(()=>{
+    loading.value = false
+  })
+}
+
+const columns = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '货号',
+    dataIndex: 'pid',
+    key: 'pid',
+  },
+  {
+    title: '图片',
+    dataIndex: 'image',
+    key: 'image',
+  },
+  {
+    title: '价格(美元)',
+    dataIndex: 'usPrice',
+    key: 'usPrice',
+  },
+  {
+    title: '成本(CNY)',
+    dataIndex: 'cnyPrice',
+    key: 'cnyPrice',
+  },
+  {
+    title: '得物(CNY)',
+    dataIndex: 'dwPrice',
+    key: 'dwPrice',
+  },
+  {
+    title: '收益率',
+    dataIndex: 'rate',
+    key: 'rate',
+  },
+  {
+    title: '抓取时间',
+    dataIndex: 'updatedAt',
+    key: 'updatedAt',
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+  },
+  // {
+  //   title: '操作',
+  //   key: 'opt',
+  // },
+]
+
+const indicator = h(LoadingOutlined, {
+  style: {
+    fontSize: '32px',
+  },
+  spin: true,
+});
+
+</script>
+
+
+
+<style scoped>
+
+</style>

src/views/layout/Aside.vue

@@ -8,7 +8,7 @@
   ></a-menu>
 </template>
 <script setup>
-import {AccountBookOutlined, BellOutlined} from "@ant-design/icons-vue";
+import {AccountBookOutlined, BellOutlined, DollarCircleOutlined} from "@ant-design/icons-vue";
 import {h} from "vue";
 import {useRouter} from "vue-router";
 
@@ -19,6 +19,12 @@ const items = [
     label: '蹲货',
     title: '蹲货',
   },
+  {
+    key: 'product',
+    icon: () => h(DollarCircleOutlined),
+    label: '商品',
+    title: '商品',
+  },
   {
     key: 'pusher',
     icon: () => h(BellOutlined),

vite.config.js

@@ -23,7 +23,7 @@ export default defineConfig({
     open: true,
     proxy: {
       '/api/v1': {
-        target: 'http://172.25.168.160:2280/',
+        target: 'https://ht.timerzz.com:20443/',
         // target: 'http://192.168.31.55:2280/',
         changeOrigin: true,
         secure: false,