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.
389 lines
9.8 KiB
389 lines
9.8 KiB
<template>
|
|
<view class="bg">
|
|
<view class="topImg relative">
|
|
<img v-if="headImg" :src="showImg(headImg)" class="topImg" mode="aspectFill">
|
|
<view class="icon-back" :style="{top:systemInfo.textTop,left:'19rpx'}" @click="goBack()" >
|
|
<uni-icons type="left" size="24" color="#fff"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="goodBox">
|
|
<view class="type-container">
|
|
<view :class="['type',activeType==0?'active':'']" @click="changeActiveType(0)">精选酒店</view>
|
|
<view :class="['type',activeType==1?'active':'']" @click="changeActiveType(1)">特色民宿</view>
|
|
</view>
|
|
|
|
<view class="goodItem" v-for="(item,index) in list" :key="index" @click="viewDetail(item)">
|
|
<view class="left-image flex-shrink-0 relative">
|
|
<image class="left-image " :src="showImg(item.image)" mode="aspectFill"></image>
|
|
<div class="hot-tag text-overflow" v-if="item.label">{{ item.label.split(',')[0] }}</div>
|
|
<div class="sale-tag text-overflow">已售{{ item.sales_number || 0 }}份</div>
|
|
</view>
|
|
|
|
<view class="contentBox flex flex-column flex-1">
|
|
<view class="title text-overflowRows">{{item.title}}</view>
|
|
|
|
<view class="flex-1 h-1rpx">
|
|
<view class="hotel-tags">
|
|
<template v-if="item.product_data">
|
|
<view class="hotel-item" v-for="(itemShow,indexShow) in item.product_data_show || []" :key="indexShow">
|
|
<view class="hotel-tip" v-if="indexShow<3">{{ itemShow.title }}</view>
|
|
<view class="hotel-info text-overflow" v-if="indexShow<3">{{ itemShow.intro.map(v=>v.title).join("+") }}</view>
|
|
</view>
|
|
</template>
|
|
<view class="hotel-item" v-if="item.address">
|
|
<view class="hotel-tip-image">
|
|
<img src="https://static.ticket.sz-trip.com/uploads/20240912/a0301af16f413baca5c9e7f36026ab14.png">
|
|
</view>
|
|
<view class="hotel-info text-overflow">{{ item.address }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="flex-between">
|
|
<view class="priceBox flex-1 w-1rpx">
|
|
售价
|
|
<view class="price">{{item.price/100}}</view>
|
|
</view>
|
|
<view class="order-btn flex-shrink-0">立即预定</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="finished-text" v-if="finished">没有更多数据了</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return {
|
|
systemInfo: {
|
|
height:"0px",
|
|
textHeight:"0px",
|
|
textTop:"0px",
|
|
contentTop: '0px',
|
|
},
|
|
|
|
list: [],
|
|
finished: false,
|
|
headImg:null,
|
|
navList: [],
|
|
activeType: 0,
|
|
type_id: 11,//酒店分类id
|
|
}
|
|
},
|
|
onShow() {
|
|
this.finished = false
|
|
|
|
},
|
|
onReady() {
|
|
this.getList()
|
|
},
|
|
onLoad(options) {
|
|
let that = this
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
console.log(res)
|
|
that.systemInfo.height =res.windowHeight+'px'
|
|
const menu=uni.getMenuButtonBoundingClientRect()
|
|
that.systemInfo.textHeight=menu.height+"px"
|
|
that.systemInfo.textTop=menu.top+"px"
|
|
that.systemInfo.contentTop = (menu.height + menu.top)+"px"
|
|
console.log(that.systemInfo)
|
|
}
|
|
})
|
|
this.getHeadImg('hotel').then(res => {this.headImg = res})
|
|
},
|
|
|
|
methods: {
|
|
changeActiveType (val) {
|
|
if (val!=this.activeType) {
|
|
this.activeType = val
|
|
this.list = []
|
|
this.getList()
|
|
}
|
|
},
|
|
|
|
// 根据景点标签获取景点列表
|
|
getList(){
|
|
this.Post({
|
|
scenic_type_id: this.type_id,offset: this.list.length,limit: 10,
|
|
lon: uni.getStorageSync('location').lon || '120',
|
|
lat: uni.getStorageSync('location').lat || '30',
|
|
},
|
|
'/api/Scenic/getScenicByType').then(res => {
|
|
let resData = res.data || []
|
|
resData.forEach(v=>{
|
|
// todo
|
|
// v.product_data = [{"title":"住","intro":"[{\"title\":\"叠翠楼/浴霞楼园景标准客房1间\",\"unit\":\"1晚\"}]"},{"title":"食","intro":"[{\"title\":\"次日健康自助早餐/套餐\",\"unit\":\"2份\"}]"},{"title":"游","intro":"[{\"title\":\"江南第一楼雕花楼游览券\",\"unit\":\"2张\"},{\"title\":\"山麓园林启园游览券\",\"unit\":\"2张\"},{\"title\":\"苏州小镰仓\",\"unit\":\"2份\"}]"},{"title":"享","intro":"[{\"title\":\"健身房\",\"unit\":\"免费\"},{\"title\":\"亲子乐园\",\"unit\":\"免费\"}]"}]
|
|
v.product_data_show = []
|
|
if (v.product_data) {
|
|
try{
|
|
v.product_data.forEach(x=>{
|
|
let [title,intro] = Object.entries(x)[0]
|
|
intro = JSON.parse(intro)
|
|
v.product_data_show.push({title: title, intro:intro})
|
|
})
|
|
} catch (e) {
|
|
console.log(v)
|
|
}
|
|
}
|
|
})
|
|
console.log(resData)
|
|
this.list = [...this.list, ...resData];
|
|
if (res.data.length < 10) {
|
|
this.finished = true
|
|
}
|
|
})
|
|
},
|
|
|
|
// 收藏按钮
|
|
like(item){
|
|
this.Post({
|
|
type: 4,
|
|
id: item.id
|
|
}, '/api/scenic/collect').then(res => {
|
|
if (res.code == 1) {
|
|
uni.showToast({title: res.msg,icon:'none'})
|
|
if (item.is_collect == 1) {
|
|
item.is_collect = 0
|
|
} else {
|
|
item.is_collect = 1
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
viewDetail (item) {
|
|
this.goOtherDetail(item)
|
|
if(!item.link_type) {
|
|
uni.navigateTo({
|
|
url: '/subPackages/hotelHomestay/detail?id=' + item.id
|
|
});
|
|
}
|
|
}
|
|
},
|
|
onReachBottom() {
|
|
setTimeout(() => {
|
|
if (!this.finished) this.getList()
|
|
},1000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
*{
|
|
box-sizing: border-box;
|
|
font-family: PingFangSC;
|
|
}
|
|
.bg{
|
|
min-height: 100vh;
|
|
background: #F5F5F5;;
|
|
}
|
|
.topImg{
|
|
width: 100%;
|
|
height: 440rpx;
|
|
.icon-back{
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 50;
|
|
background: rgba(0,0,0,0.5);
|
|
border-radius: 50%;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
padding-left: 5rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.goodBox{
|
|
width: 100%;
|
|
z-index: 2;
|
|
position: relative;
|
|
padding: 26rpx;
|
|
padding-top: 0;
|
|
margin-top: -36rpx;
|
|
|
|
.type-container{
|
|
width: 532rpx;
|
|
height: 73rpx;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
border-radius: 13rpx;
|
|
overflow: hidden;
|
|
margin-bottom: 26rpx;
|
|
|
|
.type{
|
|
flex: 1;
|
|
text-align: center;
|
|
line-height: 73rpx;
|
|
font-weight: bold;
|
|
font-size: 31rpx;
|
|
background: #FFFFFF;
|
|
color: #000000;
|
|
}
|
|
.type.active{
|
|
color: #FFFFFF;
|
|
background: #248BAA;
|
|
}
|
|
}
|
|
|
|
|
|
.goodItem{
|
|
width: 100%;
|
|
height: 400rpx;
|
|
background: #FFFFFF;
|
|
margin-bottom: 26rpx;
|
|
border-radius: 13rpx;
|
|
display: flex;
|
|
.left-image{
|
|
width: 266rpx;
|
|
height: 100%;
|
|
border-radius: 13rpx 0rpx 13rpx 0rpx;
|
|
flex-shrink: 0;
|
|
|
|
.hot-tag{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
font-family: DingTalk JinBuTi;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
background: linear-gradient(-90deg,#FF413B, #FFAB2E);
|
|
border-radius: 13rpx 0rem 13rpx 0rem;
|
|
padding: 0 21rpx;
|
|
line-height: 44rpx;
|
|
height: 44rpx;
|
|
max-width: 100%;
|
|
}
|
|
.sale-tag{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
height: 47rpx;
|
|
|
|
padding: 6rpx 21rpx;
|
|
background: linear-gradient(90deg,rgba(0,0,0,0.5), rgba(0,0,0,0));
|
|
border-radius: 0rem 0rem 0rem 13rpx;
|
|
}
|
|
}
|
|
|
|
.contentBox{
|
|
flex: 1;
|
|
width: 1rpx;
|
|
height: 100%;
|
|
padding:19rpx 26rpx;
|
|
justify-content: space-between;
|
|
|
|
.title{
|
|
width: 100%;
|
|
font-weight: 500;
|
|
font-size: 33rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
.tag-container{
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
|
|
}
|
|
|
|
|
|
.priceBox{
|
|
padding-right: 15rpx;
|
|
color: #000000;
|
|
font-size: 24rpx;
|
|
.price{
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 38rpx;
|
|
color: #F02A2A;
|
|
display: inline-block;
|
|
}
|
|
.price::before{
|
|
content: '￥';
|
|
color: #F02A2A;
|
|
font-size: 24rpx;
|
|
}
|
|
.price::after{
|
|
content: '起';
|
|
color: #000000;
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
|
|
.order-btn{
|
|
width: 147rpx;
|
|
height: 53rpx;
|
|
background: linear-gradient(-90deg, #EA280F, #FC5109, #FC930A);
|
|
border-radius: 27rpx;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 53rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.hotel-tags{
|
|
width: 100%;
|
|
padding: 25rpx 0;
|
|
.hotel-item{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom:6rpx;
|
|
}
|
|
.hotel-tip{
|
|
width: 33rpx;
|
|
height: 33rpx;
|
|
background: #248BAA;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
margin-right: 8rpx;
|
|
font-weight: 500;
|
|
font-size: 23rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 33rpx;
|
|
}
|
|
.hotel-tip-image{
|
|
width: 33rpx;
|
|
height: 33rpx;
|
|
margin-right: 8rpx;
|
|
text-align: center;
|
|
line-height: 33rpx;
|
|
img{
|
|
width: 17rpx;
|
|
height: 21rpx;
|
|
}
|
|
}
|
|
.hotel-info{
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 23rpx;
|
|
color: #666666;
|
|
flex: 1;
|
|
width: 1px;
|
|
height: 33rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|