123 lines
3.0 KiB
Vue
123 lines
3.0 KiB
Vue
<template>
|
|
<view class="search-page">
|
|
<view class="v12-mr-3">
|
|
<u-search searchIconColor="#C52733" :showAction="false" v-model="keyword" @search="search"></u-search>
|
|
</view>
|
|
<view class="v12-justify-between sanctup-items v12-mt-3">
|
|
<view v-for="(item, index) in items" :key="index" class="v12-pa-1" @click="toStore(item.hotelId)">
|
|
<view class="img">
|
|
<image class="img" :src="item.cover" v-if="item.coverType === 1"></image>
|
|
<video
|
|
class="img"
|
|
:src="item.cover"
|
|
:play-btn-position="center"
|
|
:show-fullscreen-btn="false"
|
|
v-if="item.coverType === 2">
|
|
</video>
|
|
<view class="v12-white-text address">
|
|
<image
|
|
class="map-icon v12-mr-1"
|
|
:src="webUrl + '/orderIcon/map_white.png'"
|
|
></image>
|
|
<text class="v12-font-28">{{ item.areaName }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="v12-font-bold v12-font-28 v12-mt-1 more-t" style="min-height: 76rpx; " @click="toStore(item.hotelId)">{{ item.address }}</view>
|
|
<view class="v12-justify-start v12-align-center v12-my-1" @click="toStore(item.hotelId)">
|
|
<view class="atr">
|
|
<image class="atr" :src="item.logo"></image>
|
|
</view>
|
|
<view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.hotelName }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="items.length === 0 && keyword" class="v12-justify-center v12-mt-16">
|
|
<view class="no-data-wrap">
|
|
<image :src="webUrl + '/orderIcon/微信图片_20241009220552.png'" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getCategory,getWellnessPlace } from '@/api/health'
|
|
export default {
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
keyword: '',
|
|
goodCityId: '',
|
|
items: []
|
|
}
|
|
},
|
|
onLoad(opts) {
|
|
this.goodCityId = opts.city
|
|
},
|
|
methods: {
|
|
search() {
|
|
const params = {
|
|
goodCityId: this.goodCityId,
|
|
categoryId: '',
|
|
keyword: this.keyword,
|
|
page: 1,
|
|
limit: 9999
|
|
}
|
|
getWellnessPlace(params).then(res => {
|
|
// console.log(res);
|
|
this.items = res.data.records
|
|
})
|
|
},
|
|
toStore(id) {
|
|
this.$yrouter.push({
|
|
path: '/pagesInn/inn/innHome',
|
|
query: {
|
|
id: id
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.map-icon{
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
.arrow-icon{
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
.icon{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
.address{
|
|
position: absolute;
|
|
left: 30rpx;
|
|
bottom: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.search-page{
|
|
min-height: 100vh;
|
|
background-color: #fff;
|
|
padding: 20rpx;
|
|
}
|
|
.sanctup-items{
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
}
|
|
.img{
|
|
width: 320rpx;
|
|
height: 320rpx;
|
|
border-radius: 16rpx;
|
|
position: relative;
|
|
}
|
|
.atr{
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
border-radius: 50%;
|
|
}
|
|
</style> |