140 lines
3.2 KiB
Vue
140 lines
3.2 KiB
Vue
<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>
|
|
<a-pagination :disabled="loading" class="text-right" v-model:current="query.page" :total="data.total" show-less-items @change="list"/>
|
|
</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',
|
|
width:300,
|
|
},
|
|
{
|
|
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> |