You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
77 lines
2.7 KiB
77 lines
2.7 KiB
11 months ago
|
<script setup lang="ts">
|
||
|
|
import { indexMerchantListApi } from '~/server/homeApi'
|
||
|
|
import { toRefs } from 'vue'
|
||
|
|
const props = defineProps({
|
||
|
|
//列表数据
|
||
|
|
goodStoreImage: {
|
||
|
|
type: String,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
})
|
||
|
|
const { goodStoreImage } = toRefs(props)
|
||
|
|
|
||
|
|
const { data: merchantList, pending: listLoading } = await useAsyncData(async () => indexMerchantListApi(6), {
|
||
|
|
default: () => ({
|
||
|
|
list: [],
|
||
|
|
total: 0,
|
||
|
|
}),
|
||
|
|
})
|
||
|
|
|
||
|
|
// 跳入页面
|
||
|
|
import { linkNavigateTo } from '~/utils/util'
|
||
|
|
const handleGoPage = (id: number) => {
|
||
|
|
linkNavigateTo(`/merchant/merchant_home`, { merId: id })
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="wrapper_1200 merchantIndex mb-50px" v-if="merchantList.list.length">
|
||
|
|
<div class="mb-30px text-28px text-#333 ml-20px font-700 alimama">品牌好店</div>
|
||
|
|
<div class="acea-row">
|
||
|
|
<el-image :src="goodStoreImage" class="w-288px h-422px b-rd-16px"></el-image>
|
||
|
|
<div class="acea-row w-912px" v-loading="listLoading" style="margin-bottom: -15px;">
|
||
|
|
<template v-for="item in merchantList.list" :key="item.id">
|
||
|
|
<div
|
||
|
|
@click="handleGoPage(item.id)"
|
||
|
|
v-if="item.proList.length"
|
||
|
|
class="w-288px h-203px bg-#FFFFFF b-rd-16px py-15px pl-15px mb-15px merchant-item ml-16px cursors"
|
||
|
|
>
|
||
|
|
<div class="flex-between-center mb-15px pr-20px">
|
||
|
|
<div class="flex-center">
|
||
|
|
<el-image :src="item.pcLogo" class="w-36px h-36px b-rd-50% mr-10px"></el-image>
|
||
|
|
<div>
|
||
|
|
<div class="flex-center line1">
|
||
|
|
<div class="text-14px text-#333 mr-6px line1 max-w-170px font-500">{{ item.name }}</div>
|
||
|
|
<div v-if="item.isSelf" class="labelClass bg-color text-#fff">自营</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="acea-row">
|
||
|
|
<div
|
||
|
|
v-for="items in item.proList.length === 2 ? item.proList : item.proList.slice(0, 2)"
|
||
|
|
:key="items.id"
|
||
|
|
class="w-122px h-122px relative b-rd-12px overflow-hidden mr-14px"
|
||
|
|
>
|
||
|
|
<el-image :src="items.image" class="w-122px h-122px"></el-image>
|
||
|
|
<div class="px-8px py-4px price text-12px font-600 text-#fff absolute bottom-0 right-0">
|
||
|
|
<span class="oppoSans-M">￥</span><span class="text-16px dinProSemiBold">{{ items.price }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.merchantIndex {
|
||
|
|
.price {
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
border-radius: 12px 0px 12px 0px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|