162 lines
3.4 KiB
Vue
162 lines
3.4 KiB
Vue
<template>
|
|
<view class="recommend">
|
|
<view class="list-item" v-for="(item, index) in currentList" :key="index" @click="toStore(item.hotelId)">
|
|
<view class="v12-justify-start v12-align-center">
|
|
<view class="log-img">
|
|
<image class="log-img" :src="item.logo" mode="aspectFit|aspectFill|widthFix"></image>
|
|
</view>
|
|
<view class="item-title one-t">{{ item.name }}</view>
|
|
</view>
|
|
<view class="item-action-wrap v12-primary">
|
|
点击查看
|
|
<view class="item-action v12-white"><u-icon name="arrow-right" color="#C52733" size="8"></u-icon></view>
|
|
</view>
|
|
</view>
|
|
<view class="more-wrap" v-if="isMore ? isMore : list.length > 3">
|
|
<view class="more-btn v12-primary" @click="showMore">
|
|
{{ isMore ? '收起' : '查看更多' }}
|
|
<view class="item-action v12-white"><u-icon name="arrow-right" color="#C52733 " size="12"></u-icon></view>
|
|
</view>
|
|
</view>
|
|
<image
|
|
v-if="list.length === 0"
|
|
:src="webUrl + '/orderIcon/wu.png'"
|
|
class="img-nodata"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getPorjectRecommend,
|
|
} from "@/api/product"
|
|
export default {
|
|
props: {
|
|
landmarkDataId: null
|
|
},
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
list: [],
|
|
currentList: [],
|
|
isMore: false
|
|
}
|
|
},
|
|
watch: {
|
|
landmarkDataId(value) {
|
|
if(value) {
|
|
this.getData()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
},
|
|
|
|
methods: {
|
|
getData() {
|
|
getPorjectRecommend({landmarkDataId: this.landmarkDataId}).then(res => {
|
|
this.list = res.data || []
|
|
if(this.isMore) {
|
|
this.currentList = this.list
|
|
} else {
|
|
this.currentList = this.list.filter((item, index) => index < 3)
|
|
}
|
|
})
|
|
},
|
|
toStore(id) {
|
|
if (!id) {
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pagesInn/inn/innHome?id=' + id
|
|
})
|
|
},
|
|
showMore() {
|
|
this.isMore = !this.isMore
|
|
if(this.isMore) {
|
|
this.currentList = this.list
|
|
} else {
|
|
this.currentList = this.list.filter((item, index) => index < 3)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.more-btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.item-action{
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
margin-left: 10rpx;
|
|
padding: 5rpx;
|
|
}
|
|
}
|
|
.recommend{
|
|
padding: 20rpx;
|
|
background: #f0f0f0;
|
|
border-radius: 24rpx;
|
|
}
|
|
.list-item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #fff;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 24rpx;
|
|
align-items: center;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
.item-action-wrap{
|
|
font-size: 22rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 30rpx;
|
|
color: #fff;
|
|
padding: 5rpx 10rpx;
|
|
}
|
|
.item-action{
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
margin-left: 10rpx;
|
|
}
|
|
.item-title{
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
margin-left: 20rpx;
|
|
max-width: 180rpx;
|
|
}
|
|
.log-img{
|
|
width: 68rpx;
|
|
height: 68rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.more-wrap{
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
}
|
|
.more-btn{
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
padding: 5rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
}
|
|
.img-nodata {
|
|
position: relative;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
width: 352rpx;
|
|
height: 338rpx;
|
|
margin-bottom: 60rpx;
|
|
}
|
|
</style> |