wangziqi/shopping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add

Browse Source
This commit is contained in:
王子琦
2026-01-14 14:31:14 +08:00
parent 2343001168
commit c512371835
2 changed files with 22 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/pages/user/Home.vue
View File

@@ -17,6 +17,7 @@
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :span="6" v-for="item in home.hot" :key="item.id"> <a-col :span="6" v-for="item in home.hot" :key="item.id">
<a-card hoverable @click="goDetail(item.id)"> <a-card hoverable @click="goDetail(item.id)">
<img v-if="item.imageUrl" :src="previewUrl(item.imageUrl)" class="card-img" />
<div class="title">{{ item.name }}</div> <div class="title">{{ item.name }}</div>
<div class="price">￥{{ item.price }}</div> <div class="price">￥{{ item.price }}</div>
</a-card> </a-card>
@@ -28,6 +29,7 @@
<a-row :gutter="16"> <a-row :gutter="16">
<a-col :span="6" v-for="item in home.newest" :key="item.id"> <a-col :span="6" v-for="item in home.newest" :key="item.id">
<a-card hoverable @click="goDetail(item.id)"> <a-card hoverable @click="goDetail(item.id)">
<img v-if="item.imageUrl" :src="previewUrl(item.imageUrl)" class="card-img" />
<div class="title">{{ item.name }}</div> <div class="title">{{ item.name }}</div>
<div class="price">￥{{ item.price }}</div> <div class="price">￥{{ item.price }}</div>
</a-card> </a-card>
@@ -84,4 +86,10 @@ onMounted(load)
.price { .price {
color: #f5222d; color: #f5222d;
} }
.card-img {
width: 100%;
height: 140px;
object-fit: cover;
margin-bottom: 8px;
}
</style> </style>

14
frontend/src/pages/user/ProductList.vue
View File

@@ -16,6 +16,7 @@
<a-row :gutter="16" style="margin-top: 16px"> <a-row :gutter="16" style="margin-top: 16px">
<a-col :span="6" v-for="item in list" :key="item.id"> <a-col :span="6" v-for="item in list" :key="item.id">
<a-card hoverable @click="goDetail(item.id)"> <a-card hoverable @click="goDetail(item.id)">
<img v-if="item.imageUrl" :src="previewUrl(item.imageUrl)" class="card-img" />
<div class="title">{{ item.name }}</div> <div class="title">{{ item.name }}</div>
<div class="price">￥{{ item.price }}</div> <div class="price">￥{{ item.price }}</div>
<div class="meta">销量 {{ item.sales }}</div> <div class="meta">销量 {{ item.sales }}</div>
@@ -30,6 +31,7 @@ import { useRouter } from 'vue-router'
import api from '../../api' import api from '../../api'
const router = useRouter() const router = useRouter()
const baseUrl = 'http://localhost:8080'
const list = ref([]) const list = ref([])
const categories = ref([]) const categories = ref([])
const keyword = ref('') const keyword = ref('')
@@ -50,6 +52,12 @@ const loadCategories = async () => {
const goDetail = (id) => router.push(`/products/${id}`) const goDetail = (id) => router.push(`/products/${id}`)
const previewUrl = (url) => {
if (!url) return ''
if (url.startsWith('http')) return url
return `${baseUrl}${url}`
}
onMounted(() => { onMounted(() => {
load() load()
loadCategories() loadCategories()
@@ -60,4 +68,10 @@ onMounted(() => {
.title { font-weight: 600; } .title { font-weight: 600; }
.price { color: #f5222d; } .price { color: #f5222d; }
.meta { color: #999; } .meta { color: #999; }
.card-img {
width: 100%;
height: 140px;
object-fit: cover;
margin-bottom: 8px;
}
</style> </style>