14.Home-新鲜好物和人气推荐实现

新鲜好物实现

1.准备模板

<script setup>import HomePanel from './HomePanel.vue'</script><template><homePanel></HomePanel><!-- 下面是插槽主体内容模版<ul class="goods-list"><li v-for="item in newList" :key="item.id"><RouterLink to="/"><img :src="item.picture" alt="" /><p class="name">{{ item.name }}</p><p class="price">&yen;{{ item.price }}</p></RouterLink></li></ul>-->
</template><style scoped lang='scss'>
.goods-list {display: flex;justify-content: space-between;height: 406px;li {width: 306px;height: 406px;background: #f0f9f4;transition: all .5s;&:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 306px;height: 306px;}p {font-size: 22px;padding-top: 12px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}.price {color: $priceColor;}}
}
</style>

2.定制props

<script setup>import HomePanel from './HomePanel.vue'</script><template><homePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱"></HomePanel><!-- 下面是插槽主体内容模版<ul class="goods-list"><li v-for="item in newList" :key="item.id"><RouterLink to="/"><img :src="item.picture" alt="" /><p class="name">{{ item.name }}</p><p class="price">&yen;{{ item.price }}</p></RouterLink></li></ul>-->
</template><style scoped lang='scss'>
.goods-list {display: flex;justify-content: space-between;height: 406px;li {width: 306px;height: 406px;background: #f0f9f4;transition: all .5s;&:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 306px;height: 306px;}p {font-size: 22px;padding-top: 12px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}.price {color: $priceColor;}}
}
</style>

3.定制接口

/*** @description: 获取新鲜好物* @param {*}* @return {*}*/
export const findNewAPI = () => {return httpInstance({url:'/home/new'})
}

<script setup>import HomePanel from './HomePanel.vue'import {findNewAPI} from '@/apis/home'//获取数据
const newlist = ref([])const getNewList = async() => {const res = await findNewAPI()newList.value = res.result
}onMounted(() => getNewList())
</script><template><homePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱"></HomePanel><!-- 下面是插槽主体内容模版<ul class="goods-list"><li v-for="item in newList" :key="item.id"><RouterLink to="/"><img :src="item.picture" alt="" /><p class="name">{{ item.name }}</p><p class="price">&yen;{{ item.price }}</p></RouterLink></li></ul>-->
</template><style scoped lang='scss'>
.goods-list {display: flex;justify-content: space-between;height: 406px;li {width: 306px;height: 406px;background: #f0f9f4;transition: all .5s;&:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 306px;height: 306px;}p {font-size: 22px;padding-top: 12px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}.price {color: $priceColor;}}
}
</style>

4.插槽

<script setup>import HomePanel from './HomePanel.vue'import {findNewAPI} from '@/apis/home'//获取数据
const newlist = ref([])const getNewList = async() => {const res = await findNewAPI()newList.value = res.result
}onMounted(() => getNewList())
</script><template><homePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱"><ul class="goods-list"><li v-for="item in newList" :key="item.id"><RouterLink to="/"><img v-img-lazy="item.picture"  alt="" /><p class="name">{{ item.name }}</p><p class="price">&yen;{{ item.price }}</p></RouterLink></li></ul></HomePanel>// <!-- 下面是插槽主体内容模版// <ul class="goods-list">//   <li v-for="item in newList" :key="item.id">//     <RouterLink to="/">//       <img :src="item.picture" alt="" />//       <p class="name">{{ item.name }}</p>//       <p class="price">&yen;{{ item.price }}</p>//     </RouterLink>//   </li>// </ul>// -->
</template><style scoped lang='scss'>
.goods-list {display: flex;justify-content: space-between;height: 406px;li {width: 306px;height: 406px;background: #f0f9f4;transition: all .5s;&:hover {transform: translate3d(0, -3px, 0);box-shadow: 0 3px 8px rgb(0 0 0 / 20%);}img {width: 306px;height: 306px;}p {font-size: 22px;padding-top: 12px;text-align: center;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}.price {color: $priceColor;}}
}
</style>