|
|
|
@ -3,37 +3,52 @@ |
|
|
|
<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="#242424"></uni-icons> |
|
|
|
<uni-icons type="left" size="24" color="#fff"></uni-icons> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="goodBox"> |
|
|
|
<view class="goodItem flex-column" v-for="(item,index) in list" :key="index" @click="viewDetail(item)"> |
|
|
|
<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> |
|
|
|
<view class="collect" @click.stop="like(item)"> |
|
|
|
<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="item.is_collect"></image> |
|
|
|
<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image> |
|
|
|
</view> |
|
|
|
|
|
|
|
<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-column flex-1 h-1rpx"> |
|
|
|
<view class="title text-overflow">{{item.title}}</view> |
|
|
|
<view class="flex-between"> |
|
|
|
<view class="flex-1 w-1rpx"> |
|
|
|
<view class="tag-container no-scrollbar" v-if="item.label"> |
|
|
|
<view class="tag" v-for="(tag,tagIndex) in item.label.split(',')" :key="tagIndex">{{tag}}</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="distance">{{item.distance?`距您约${item.distance/1000+'km'}`:''}}</view> |
|
|
|
<view class="priceBox flex-shrink-0"> |
|
|
|
<view class="priceBox flex-1 w-1rpx"> |
|
|
|
售价 |
|
|
|
<view class="price">{{item.price/100}}</view> |
|
|
|
</view> |
|
|
|
<view class="order-btn flex-shrink-0">立即预定</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
@ -59,14 +74,13 @@ |
|
|
|
finished: false, |
|
|
|
headImg:null, |
|
|
|
navList: [], |
|
|
|
actNavIndex: 0, |
|
|
|
activeType: 0, |
|
|
|
type_id: 11,//酒店分类id |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
this.headImg = 'https://tongli.sz-trip.com/uploads/20240826/8653c32761e01ee683505eddba1ae22b.png' |
|
|
|
this.finished = false |
|
|
|
// this.getHeadImg('piaowu') |
|
|
|
|
|
|
|
}, |
|
|
|
onReady() { |
|
|
|
this.getList() |
|
|
|
@ -84,21 +98,18 @@ |
|
|
|
console.log(that.systemInfo) |
|
|
|
} |
|
|
|
}) |
|
|
|
this.getHeadImg('hotel').then(res => {this.headImg = res}) |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
|
|
getHeadImg(type){ |
|
|
|
this.headImg = null |
|
|
|
this.Post( |
|
|
|
{ |
|
|
|
type, |
|
|
|
}, |
|
|
|
'https://yjdtadmin.sz-trip.com/api/public_service/getKumgangHeadImgList' |
|
|
|
).then(res => { |
|
|
|
this.headImg = res.data[0].image |
|
|
|
}); |
|
|
|
changeActiveType (val) { |
|
|
|
if (val!=this.activeType) { |
|
|
|
this.activeType = val |
|
|
|
this.list = [] |
|
|
|
this.getList() |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 根据景点标签获取景点列表 |
|
|
|
getList(){ |
|
|
|
this.Post({ |
|
|
|
@ -107,7 +118,25 @@ |
|
|
|
lat: uni.getStorageSync('location').lat || '30', |
|
|
|
}, |
|
|
|
'/api/Scenic/getScenicByType').then(res => { |
|
|
|
this.list = [...this.list, ...res.data]; |
|
|
|
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 |
|
|
|
} |
|
|
|
@ -155,7 +184,7 @@ |
|
|
|
} |
|
|
|
.bg{ |
|
|
|
min-height: 100vh; |
|
|
|
background: #FFFFFF; |
|
|
|
background: #F5F5F5;; |
|
|
|
} |
|
|
|
.topImg{ |
|
|
|
width: 100%; |
|
|
|
@ -165,6 +194,11 @@ |
|
|
|
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; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -172,47 +206,91 @@ |
|
|
|
.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: 525rpx; |
|
|
|
height: 400rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
box-shadow: 0rpx 0rpx 9rpx 0rpx rgba(153,153,153,0.38); |
|
|
|
margin-bottom: 26rpx; |
|
|
|
border-radius: 13rpx; |
|
|
|
display: flex; |
|
|
|
.left-image{ |
|
|
|
width: 100%; |
|
|
|
height: 321rpx; |
|
|
|
border-radius: 13rpx 13rpx 0rpx 0rpx; |
|
|
|
width: 266rpx; |
|
|
|
height: 100%; |
|
|
|
border-radius: 13rpx 0rpx 13rpx 0rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
|
|
|
|
.collect{ |
|
|
|
.hot-tag{ |
|
|
|
position: absolute; |
|
|
|
top: 22rpx; |
|
|
|
right: 22rpx; |
|
|
|
width: 51rpx; |
|
|
|
height: 51rpx; |
|
|
|
background: rgba(0,0,0,0.5); |
|
|
|
border-radius: 50%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
image{ |
|
|
|
width: 35rpx; |
|
|
|
height: 35rpx; |
|
|
|
} |
|
|
|
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; |
|
|
|
width: 100%; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.title{ |
|
|
|
width: 100%; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 31rpx; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 33rpx; |
|
|
|
color: #000000; |
|
|
|
} |
|
|
|
|
|
|
|
@ -220,30 +298,20 @@ |
|
|
|
display: flex; |
|
|
|
flex-wrap: nowrap; |
|
|
|
overflow-x: auto; |
|
|
|
.tag{ |
|
|
|
background: rgba(205,233,209,0.3); |
|
|
|
border-radius: 7rpx 5rpx 5rpx 7rpx; |
|
|
|
border: 1px solid rgba(135,205,147,0.3); |
|
|
|
|
|
|
|
padding: 4rpx 14rpx; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 25rpx; |
|
|
|
color: #5BA06A; |
|
|
|
text-align: center; |
|
|
|
margin-right: 12rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.priceBox{ |
|
|
|
width: 120rpx; |
|
|
|
padding-right: 15rpx; |
|
|
|
color: #000000; |
|
|
|
font-size: 24rpx; |
|
|
|
.price{ |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 33rpx; |
|
|
|
font-size: 38rpx; |
|
|
|
color: #F02A2A; |
|
|
|
text-align: right; |
|
|
|
display: inline-block; |
|
|
|
} |
|
|
|
.price::before{ |
|
|
|
content: '￥'; |
|
|
|
@ -252,31 +320,70 @@ |
|
|
|
} |
|
|
|
.price::after{ |
|
|
|
content: '起'; |
|
|
|
color: #999; |
|
|
|
color: #000000; |
|
|
|
font-size: 24rpx; |
|
|
|
font-weight: normal; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.distance{ |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 27rpx; |
|
|
|
color: #999999; |
|
|
|
} |
|
|
|
|
|
|
|
.order-btn{ |
|
|
|
width: 173rpx; |
|
|
|
height: 55rpx; |
|
|
|
background: #70B57F; |
|
|
|
border-radius: 27rpx 27rpx 27rpx 27rpx; |
|
|
|
width: 147rpx; |
|
|
|
height: 53rpx; |
|
|
|
background: linear-gradient(-90deg, #EA280F, #FC5109, #FC930A); |
|
|
|
border-radius: 27rpx; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 29rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
color: #FFFFFF; |
|
|
|
text-align: center; |
|
|
|
line-height: 55rpx; |
|
|
|
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> |
chenkainan
1 year ago