chenkainan
/
tongli_WeChat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
47 Commits
1 Branch
0 Tags
5.3 MiB
 
 
 
 
 
Tree: 3ded187031
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '3ded187031'
${ noResults }
tongli_WeChat/subPackages/hotelHomestay/detail.vue

777 lines
19 KiB
Raw Blame History

<template>
<view class="bg">
<view class="swipe-box">
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)"
indicator-active-color="#fff" @change="swiperChange">
<swiper-item v-for="(item, index) in info.list_images.split(',')" :key="item.id">
<view class="swiper-item">
<image class="item-img" :src="showImg(item)" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
<view class="swiper-pointer">
{{swiperCurrent}}/{{info.list_images.split(',').length}}
</view>
<view class="collect" @click.stop="collect()">
<image src="https://tongli.sz-trip.com/uploads/20240829/9dbb80cafe8375bd6d5c96fccb617962.png" v-if="info.is_collect"></image>
<image src="https://tongli.sz-trip.com/uploads/20240826/564af778708591f5de29174d3b14bbff.png" v-else></image>
</view>
</view>
<view class="detail-container">
<view class="common-container info-container">
<view>
<view class="info-title text-overflowRows">{{info.title}}</view>
</view>
<view class="flex-between time-container">
<view class="flex-1 w-1rpx">
<view class="tag-container no-scrollbar" v-if="info.label">
<view class="tag" v-for="(tag,tagIndex) in info.label.split(',')" :key="tagIndex">{{tag}}</view>
</view>
</view>
<view class="policy-btn flex-shrink-0 flex flex-items-center" style="justify-content: flex-end;" @click="goPolicy">
设施/政策
<uni-icons color="#71B580" style="height: 35rpx;" type="right" size="12"></uni-icons>
</view>
</view>
<view class="flex-between">
<view class="address-container flex flex-shrink-0 flex-between" @click="goMap">
<view class="address-title text-overflowRows">
{{info.address}}
</view>
<view class="flex-column flex-center">
<image :src="showImg('/uploads/20240827/5b19517f2a630f3a766ea03ac621a3be.png')">
<view class="tip" style="padding-top: 11rpx;">地图</view>
</view>
</view>
<view class="phone-container flex-column flex-center" @click="callPhone">
<image :src="showImg('/uploads/20240829/b38a84c91eef12d3040deaef50eaf697.png')">
<view class="tip" style="padding-top: 11rpx;">电话</view>
</view>
</view>
</view>
<view class="common-container hotel-container" style="padding: 0;background: none;">
<view class="order-time flex-between" style="justify-content: space-around;"
@click="openCalendar()">
<view class="time">
<view style="font-size: 35rpx;font-weight: bold;">{{new Date(selectDate.startDay).Format('MM-dd')}}</view>
<view style="padding:0 14rpx">{{ ShowDateDay(new Date(selectDate.startDay).getDay()) }}</view>
<view style="color: #71B580;">入住</view>
</view>
<view class="cal-day">
共{{selectDate.differDays}}晚
</view>
<view class="time">
<view style="font-size: 35rpx;font-weight: bold;">{{new Date(selectDate.endDay).Format('MM-dd')}}</view>
<view style="padding:0 14rpx">{{ShowDateDay(new Date(selectDate.endDay).getDay()) }}</view>
<view style="color: #71B580;">离店</view>
</view>
</view>
<view style="padding:0 34rpx;">
<view v-for="(item, index) in sku" :key="index">
<view class="scenic-item flex" v-if="(!showMore&&index<=2)||showMore">
<view class="scenic-image flex-shrink-0">
<image style="width: 100%;height: 100%;" :src="showImg(item.image)"></image>
</view>
<view class="flex-1 w-1rpx flex-column" style="padding: 14rpx;justify-content: space-between;">
<view class="flex flex-items-center" @click="viewDetail(item)">
<view class="scenic-title text-overflow">{{item.title}}</view>
<uni-icons style="height: 40rpx;font-weight: bold;" type="right" size="15"></uni-icons>
</view>
<view>
<view class="scenic-content text-overflowRows">
<text>{{item.showTag}}</text>
<text>{{item.lastShowTag}}</text>
</view>
</view>
<view class="price-container">
<view class="price">{{item.money/100}}</view>
<view :class="['btn', {'noBuy': item.store == 0}]" @click="goOrder(item)">预订</view>
</view>
</view>
</view>
</view>
<view class="showMore" v-if="!showMore&&sku.length>3" @click="changeShowMore">
查看剩余房型
</view>
</view>
</view>
<view style="padding: 0rpx 29rpx;">
<view class="box-title">酒店介绍</view>
<view class="common-container" style="padding: 30rpx 40rpx;">
<view class="" id="cpts" v-html="formateRichText(info.feature_content)"></view>
</view>
<view class="box-title">设施与政策</view>
<view class="common-container policy-container" style="padding: 30rpx 40rpx;">
<view class="common-container1">
<view class="info-title1 box-title1 text-overflowRows">{{info.title}}</view>
<view class="flex-between phone-container1">
<view>
联系电话：{{info.tel}}
</view>
<view @click="callPhone">
<image :src="showImg('/uploads/20240830/8b5750ff23837fe4a187e13775f9424c.png')">
</view>
</view>
</view>
<view class="common-container1">
<view class="box-title1">服务设施</view>
<view style="padding-top: 34rpx;" v-html="formateRichText(info.cost_content)"></view>
</view>
<view class="common-container1">
<view class="box-title1">入住须知</view>
<view style="padding-top: 34rpx;" v-html="formateRichText(info.describe_content)"></view>
</view>
</view>
</view>
</view>
<!-- 酒店详情弹窗 -->
<uni-popup ref="popupRule" type="bottom" :safe-area="false" background-color="#F7F7F7">
<view class="popup-content-date" >
<view class="popup-content-title flex">
<view class="flex-1 w-1rpx text-overflow">
{{skuInfo.title}}
</view>
<img src="https://static.ticket.sz-trip.com/taizhou/images/cha.png" @click="closePopupRule"
style="width: 31rpx;height: 31rpx;" class="flex-shrink-0">
</view>
<view class="content">
<view class="swipe-box" style="height: 347rpx;" v-if="skuInfo.list_images">
<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots indicator-color="rgba(255,255,255,.5)"
indicator-active-color="#fff" @change="popSwiperChange" :current="0">
<swiper-item v-for="(item, index) in skuInfo.list_images.split(',')" :key="item.id">
<view class="swiper-item" style="height: 347rpx;">
<image class="item-img pop-swiper-image" :src="showImg(item)" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
<view class="swiper-pointer" style="right:30rpx;bottom: 20rpx;">
{{popSwiperCurrent}}/{{skuInfo.list_images.split(',').length}}
</view>
</view>
<view class="pop-detail-container">
<view class="pop-detail-title">房型信息</view>
<view v-html="formateRichText(skuInfo.use_explain)"></view>
</view>
</view>
</view>
</uni-popup>
<uni-popup ref="calendarPopup" type="bottom">
<view style="width: 100vw;height: 60vh;">
<SelectCalendar :startDate="new Date(selectDate.startDay).Format('yyyy-MM-dd')" :endDate="new Date(selectDate.endDay).Format('yyyy-MM-dd')"></SelectCalendar>
</view>
</uni-popup>
</view>
</template>
<script>
import SelectCalendar from './selectCalendar';
export default {
components: {
SelectCalendar
},
data() {
return {
headImg: "https://tongli.sz-trip.com/uploads/20240826/8653c32761e01ee683505eddba1ae22b.png",
id: null,
swiperCurrent: 1,
popSwiperCurrent: 1,
info: {list_images:''},
sku: [],
showMore: false,
skuInfo: {}, // 预定门票
selectDate: {
startDay:new Date().Format('yyyy-MM-dd'),
endDay:new Date((new Date()).getFullYear(), (new Date()).getMonth(), new Date().getDate()+1).Format('yyyy-MM-dd'),
differDays: 1
},
minSeldDate: new Date().Format('yyyy-MM-dd'),
maxSeldDate: new Date((new Date()).getFullYear(), (new Date()).getMonth() + 3, 0).Format('yyyy-MM-dd'),
calendarParam: {
stratDate:'',endDate: '', selected: []
},
}
},
onLoad(options) {
this.id = options.id;
this.getInfo();
this.getGoodsList()
uni.$on('changeHotelDate', data => {
if(data) {
this.selectDate = data
this.getGoodsList()
}
this.$refs.calendarPopup.close();
})
},
onUnload() {
uni.$off('changeHotelDate')
},
methods: {
swiperChange (e) {
this.swiperCurrent = e.detail.current+1
},
popSwiperChange (e) {
this.popSwiperCurrent = e.detail.current+1
},
changeShowMore () {
this.showMore = !this.showMore
},
goPolicy () {
uni.navigateTo({
url:`/subPackages/hotelHomestay/policy?id=${this.id}`
})
},
callPhone () {
let _this = this
uni.showActionSheet({
itemList: [this.info.tel,'呼叫'],
success: function (res) {
_this.clickPhone(_this.info.tel)
}
});
// this.clickPhone(this.info.tel)
},
goMap () {
uni.openLocation({
latitude: Number(this.info.lat),
longitude: Number(this.info.lon),
name: this.info.title,
address: this.info.address,
success: function () {
console.log('success');
}
});
},
// 获取景点信息
getInfo() {
this.Post({id: this.id},'/api/scenic/getScenicById').then(res => {
if (res.data.flag == 0) {
uni.showToast({title: '商品不存在或已下架',icon: 'none'})
setTimeout(() => {this.goBack()}, 2000)
}
let info = res.data;
try {
info.times_list_info = JSON.parse(info.times_list)[0]
} catch(e) {
console.log(e)
info.times_list_info = {start:'',end:''}
}
this.info = info
console.log(info)
});
},
// 根据景点id获取商品列表
getGoodsList(){
this.Post({
scenic_id: this.id,
start_date: this.selectDate.startDay,
end_date: this.selectDate.endDay
},'/api/scenic/getGoodsByScenicId').then(res => {
let result = res.data || []
let data = []
result.forEach(item=>{
item.specifications.forEach(v=>{
let showTag = ''
let lastShowTag = ''
if (v.specifications_new_tag) {
let tags = v.specifications_new_tag.split(',')
showTag = (tags.slice(0,-1)||[]).join(' | ')
if (tags.length>1) {
showTag += ' | '
}
lastShowTag = tags[tags.length-1]||''
}
v.showTag = showTag
v.lastShowTag = lastShowTag
data.push(v)
})
})
this.sku = data
// this.sku = [...data,...data,...data,...data]
})
},
// 收藏
collect() {
this.Post({type: 4,id: this.id},'/api/scenic/collect').then(res => {
if (res) {
uni.showToast({title: res.msg,icon: 'none'});
this.info.is_collect = !this.info.is_collect
}
});
},
calDate (startDate, endDate) {
var start = new Date(startDate);
var end = new Date(endDate);
var diff = end - start;
var days = Math.floor(diff / (1000 * 60 * 60 * 24)); // 计算天数差
return days;
},
openCalendar () {
this.$refs.calendarPopup.open();
},
confirmCalendar (val) {
if (val.range.data.length<2) {
uni.showToast({
title:'请选择日期',
icon:'none'
})
return
}
this.selectDate.startDay = val.range.before
this.selectDate.endDay = val.range.after
this.selectDate.differDays = this.calDate(this.selectDate.startDay,this.selectDate.endDay)
},
// 查看房型
viewDetail (item) {
this.skuInfo = item
this.popSwiperCurrent = 1
this.openPopRule()
},
// 预定
goOrder (item) {
if (item.store == 0) {
return
}
let param = {
skuInfo: item,
selectDate: this.selectDate
}
uni.setStorageSync('hotelOrderInfo', JSON.stringify(param))
uni.navigateTo({
url:`/subPackages/hotelHomestay/order`
})
},
closePopupRule() {
this.$refs.popupRule.close()
},
openPopRule(){
this.$refs.popupRule.open()
},
// 价格格式
showNoPriceNew(price) {
if (price && price > 0) {
return (price / 100)
} else {
return '0'
}
},
}
}
</script>
<style scoped lang="scss">
*{
box-sizing: border-box;
}
.bg{
min-height: 100vh;
background: #F8F8F8;
}
.swipe-box {
height: 484rpx;
position: relative;
.swiper-item-num {
width: 90rpx;
height: 40rpx;
background: rgba(0, 0, 0, 0.5);
border-radius: 20rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
text-align: center;
line-height: 40rpx;
position: absolute;
right: 30rpx;
bottom: 50rpx;
}
.collect{
position: absolute;
width: 51rpx;
height: 51rpx;
right: 36rpx;
top: 36rpx;
font-size: 23rpx;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
image{
width: 36rpx;
height: 36rpx;
}
}
.swiper-pointer{
position: absolute;
right: 36rpx;
bottom: 80rpx;
background: rgba(22,22,22,0.5);
border-radius: 23rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
padding: 6rpx 14rpx;
}
}
.swiper {
height: 484rpx;
position: relative;
.swiper-item {
width: 100%;
height: 484rpx;
.item-img {
width: 750rpx;
height: 484rpx;
}
.item-img.pop-swiper-image{
height: 347rpx;
border-radius: 13rpx;
}
}
}
.detail-container{
width: 100%;
z-index: 2;
position: relative;
top: -52rpx;
}
.common-container{
background: white;
border-radius: 20rpx;
margin-bottom: 20rpx;
padding: 22rpx 26rpx;
}
.info-container{
font-family: PingFang;
font-weight: 500;
font-size: 27rpx;
color: #000000;
padding: 36rpx 29rpx;
.time-container{
padding: 22rpx 0;
.tag-container{
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
.tag{
border-radius: 5rpx;
border: 1px solid #71B580;
padding: 7rpx 14rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 25rpx;
color: #71B580;
text-align: center;
margin-right: 15rpx;
flex-shrink: 0;
}
}
.policy-btn{
width: 160rpx;
height: 35rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 27rpx;
text-align: right;
color: #71B580;
}
}
.info-title{
width: 100%;
height: 85rpx;
font-family: PingFang SC;
font-weight: bold;
font-size: 35rpx;
color: #000000;
}
.address-container{
width: 587rpx;
height: 107rpx;
border-radius: 20rpx;
padding: 25rpx 20rpx 25rpx 33rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 27rpx;
color: #000000;
background-color: #E8F6EB;
background-image: url('https://tongli.sz-trip.com/uploads/20240830/e8089886a03786e925bd4d4bbc441320.png');
background-repeat: no-repeat;
background-size: 100% 100%;
image{
width: 30rpx;
height: 30rpx;
}
.tip{
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #333333;
}
}
.phone-container{
width: 93rpx;
height: 107rpx;
background: #E8F6EB;
border-radius: 20rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #333333;
image{
width: 30rpx;
height: 30rpx;
}
.tip{
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #333333;
}
}
}
.hotel-container{
.order-time{
height: 107rpx;
background: linear-gradient(180deg, #FFFFFF, #F7F7F7);
.time{
display: flex;
font-family: PingFang SC;
font-size: 24rpx;
color: #000000;
align-items: center;
}
}
.cal-day{
background: #E8F6EB;
border-radius: 17rpx;
padding: 5rpx 16rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #000000;
}
.showMore{
width: 100%;
height: 67rpx;
background: #FFFFFF;
border-radius: 20rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 27rpx;
color: #666666;
line-height: 67rpx;
text-align: center;
}
}
.box-title {
margin: 52rpx 0 26rpx 12rpx;
font-family: PingFang;
font-weight: bold;
font-size: 37rpx;
color: #000000;
}
.address-icon{
margin-right: 9rpx;
width: 26rpx;
height: 26rpx;
}
.scenic-item{
display: flex;
width: 100%;
height: 213rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding: 7rpx;
margin-bottom: 20rpx;
.scenic-image{
width: 173rpx;
height: 100%;
flex-shrink: 0;
image{
border-radius: 20rpx;
}
}
.scenic-title {
font-family: PingFang SC;
font-weight: bold;
font-size: 31rpx;
color: #000000;
flex-shrink: 0;
max-width: 90%;
}
.scenic-content{
width: 100%;
height: 66rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #666666;
line-height: 33rpx;
text:last-of-type{
color: #71B580;
}
}
.price-container{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
.price{
font-family: PingFang SC;
font-weight: bold;
font-size: 37rpx;
color: #D60000;
padding-right: 20rpx;
}
.price::before{
content: "￥";
font-size: 24rpx;
}
.btn{
width: 120rpx;
height: 47rpx;
background: linear-gradient(90deg, #FD6F34, #F4A61F);
border-radius: 23rpx;
font-family: PingFang SC;
font-weight: bold;
font-size: 29rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.noBuy {
background: #ccc;
}
}
}
.bottom {
.notice {
font-weight: 400;
color: #0B898E;
}
}
.popup-content-date{
position: relative;
background: #F7F7F7;
top: -33rpx;
padding: 25rpx 44rpx;
border-radius: 33rpx;
.popup-content-title{
font-family: PingFang SC;
font-weight: 500;
font-size: 35rpx;
color: #000000;
text-align: center;
padding-bottom: 26rpx;
}
.pop-detail-container{
background: #FFFFFF;
border-radius: 13rpx;
padding: 20rpx;
margin-top: 26rpx;
max-height: 800rpx;
overflow-y: auto;
.pop-detail-title{
font-family: PingFang SC;
font-weight: 500;
font-size: 32rpx;
color: #000000;
}
}
}
.policy-container{
.common-container1{
width: 100%;
background: white;
border-radius: 13rpx;
margin-bottom: 20rpx;
padding: 20rpx 18rpx;
}
.box-title1 {
font-family: PingFang SC;
font-weight: bold;
font-size: 35rpx;
color: #000000;
}
.info-title1{
height: 88rpx;
}
.phone-container1{
padding-top: 20rpx;
font-family: PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #000000;
image{
width: 33.33rpx;
height: 33.33rpx;
}
}
}
</style>