<template>
<div class="nearby">
<h3 class="nearby__title">附近店铺</h3>
<div
class="nearby__item"
v-for="item in nearbyList"
:key="item._id"
>
<img :src="item.imgUrl" class="nearby__item__img">
<div class="nearby__content">
<div class="nearby__content__title">{{item.name}}</div>
<div class="nearby__content__tags">
<span
class="nearby__content__tag"
v-for="(innerItem,innerIndex) in item.tags"
:key="innerIndex"
>{{innerItem}}</span>
</div>
<p class="nearby__content__highlight">{{item.desc}}</p>
</div>
</div>
</div>
</template>
<script>
// 响应式数据:页面发生变化,数据跟着变化,引入vue
import { ref } from 'vue'
// 将get从文件中取出
import { get } from '../../utils/request';
export default {
name: 'Nearby',
setup () {
const nearbyList = ref ([]);
// 取数据,将数据封装到一个函数里,异步方法
const getNearbyList = async () =>{
const result = await get('/api/shop/hot-list')
console.log(result)
if (result ?.errno === 0 && result ?.data ?.length){
nearbyList.value = result.data
}
}
// 调用
getNearbyList();
return { nearbyList };
}
}
</script>
<style lang="scss" scoped>
@import '../../style/viriables.scss';
.nearby {
&__title {
margin: .16rem 0 .02rem 0;
font-size: .18rem;
font-weight: normal;
color: $content-fontcolor;
}
&__item {
display: flex;
padding-top: .12rem;
&__img {
margin-right: .16rem;
width: .56rem;
height: .56rem;
}
}
&__content {
flex: 1;
padding-bottom: .12rem;
border-bottom: 1px solid $content-bgColor;
&__title {
line-height: .22rem;
font-size: .16rem;
color: $content-fontcolor;
}
&__tags {
margin-top: .08rem;
line-height: .18rem;
font-size: .13rem;
color: $content-fontcolor;
}
&__tag {
margin-right: .16rem;
}
&__highlight {
margin: .08rem 0 0 0;
line-height: .18rem;
font-size: .13rem;
color: #E93B3B;
}
}
}
</style>
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星