预期效果
1.简单实现排版:
<template>
<div class="root">
<!-- 产品 -->
<div class="item">
<!-- 图片 -->
<img src="../../../static/images/4K (10).jpg" class="goods" />
<!-- 产品名称 -->
<div class="title">
空军副司令员:新型战机将在珠海航展公开露面空军副司令员:新型战机将在珠海航展公开露面
</div>
<!-- 价格 -->
<div class="price">$12.23</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
</script>
<style lang="scss" scoped>
.root{
height: 100vh;
background-color: #fff;
padding: 20px;
}
.item {
width: 220px;
height: 330px;
border: #eee solid 1px;
background-color: #fff;
float: left;
margin-right: 20px;
}
.goods {
width: 220px;
height: 220px;
}
.title{
height: 50px;
line-height: 25px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow:hidden;
margin: auto;
width: 200px;
}
.price{
color:#f00;
margin-top: 20px;
margin: 10px auto;
width: 200px;
}
</style>
2.调用后端接口显示商品
2.1 前端
api:
product.js:
export function queryCustomerProduct(data) {
return http.post("/v1/product/cust",data);
}
productList.vue
<!--vue模板-->
<template>
<div class="root">
<template v-for="item in productList" :key="item.id">
<!--产品-->
<div class="item">
<!--图片-->
<img :src="host + item.picurl" class="goods" v-if="item.picurl" />
<img src="../../../static/images/4K (10).jpg" class="goods" v-else />
<!--产品名称-->
<div class="title">
{{ item.name }}
</div>
<!--价格-->
<div class="price">${{ item.price }}</div>
</div>
</template>
</div>
</template>
<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { queryCustomerProduct } from "@/api/product.js";
import host from "@/utils/env.js";
import { useRouter } from "vue-router";
//产品列表
const productList = ref([]);
//路由实例
const router = useRouter();
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
async function init() {
let data = {
page: page.value,
pageSize: pageSize.value
};
let res = await queryCustomerProduct(data);
if (res.code == 200) {
productList.value = res.data.list;
page.value = res.data.page;
pageSize.value = res.data.pageSize;
total.value = res.data.total;
console.log(" productList.value>>>", productList.value);
}
}
onBeforeMount(() => {
init();
});
</script>
<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.root {
height: 100vh;
background-color: #fff;
padding: 20px;
}
.item {
width: 220px;
height: 330px;
border: #eee solid 1px;
background-color: #fff;
float: left;
margin-right: 20px;
}
.goods {
width: 220px;
height: 220px;
}
.title {
height: 50px;
line-height: 25px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 200px;
margin: auto;
}
.price {
color: #f00;
width: 200px;
margin: 10px auto;
}
</style>