105 lines
2.4 KiB
Vue
105 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import {getMarketingDishList} from "@/pages-store/service";
|
|
import {appMarketActivityListPost} from "@/service";
|
|
import {thumbnailImg} from "@/utils/utils";
|
|
|
|
const props = defineProps<{
|
|
id: string
|
|
}>()
|
|
|
|
function getList(pageNum: number, pageSize: number) {
|
|
return new Promise(resolve => {
|
|
getMarketingDishList(props.id).then(res => {
|
|
resolve(res)
|
|
})
|
|
})
|
|
}
|
|
|
|
const {paging, loading, firstLoaded, dataList, queryList} = usePage(getList)
|
|
|
|
onLoad(()=> {
|
|
// appMarketActivityListPost({
|
|
// options: {
|
|
// pageNum: 1,
|
|
// pageSize: 10,
|
|
// },
|
|
// }).then(res=> {
|
|
// console.log('', res)
|
|
// })
|
|
})
|
|
|
|
function handleClickDish(item: any) {
|
|
navigateTo(`/pages-store/pages/store/index?id=${item.merchantId}`)
|
|
}
|
|
|
|
function navigateTo(url: string) {
|
|
uni.navigateTo({ url })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<z-paging
|
|
ref="paging"
|
|
v-model="dataList"
|
|
@query="queryList"
|
|
bg-color="#fff"
|
|
>
|
|
<template #top>
|
|
<navbar />
|
|
</template>
|
|
|
|
<view class="grid grid-cols-2 gap-x-30rpx gap-y-46rpx px-32rpx">
|
|
<template v-for="(item,index) in dataList">
|
|
<view @click="handleClickDish(item)" class="w-330rpx overflow-hidden">
|
|
<view class="search-result-img-wrap">
|
|
<view v-if="item.isNew == 1" class="dish-new-ribbon">
|
|
<text class="dish-new-ribbon__text">NEW</text>
|
|
</view>
|
|
<image
|
|
:src="thumbnailImg(item?.dishImage?.split(',')[0])"
|
|
class="w-full h-186rpx rounded-24rpx"
|
|
mode="aspectFill"
|
|
></image>
|
|
</view>
|
|
<text class="text-30rpx lh-30rpx text-#333 line-clamp-1 tracking-[.04em] font-500"
|
|
>{{ item.dishName }}</text>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</z-paging>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.search-result-img-wrap {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.dish-new-ribbon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 184rpx;
|
|
height: 184rpx;
|
|
overflow: hidden;
|
|
z-index: 5;
|
|
pointer-events: none;
|
|
|
|
&__text {
|
|
position: absolute;
|
|
top: 26rpx;
|
|
left: -66rpx;
|
|
width: 240rpx;
|
|
text-align: center;
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
letter-spacing: 2rpx;
|
|
line-height: 44rpx;
|
|
background: #E23636;
|
|
transform: rotate(-45deg);
|
|
}
|
|
}
|
|
</style> |