chenkainan
4 months ago
12 changed files with 1862 additions and 47 deletions
@ -0,0 +1,742 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="swipe-box" v-if="info.listimg && info.listimg.length > 0"> |
||||
|
<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.listimg" :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.listimg.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.display_tags"> |
||||
|
<view class="tag" v-for="(tag,tagIndex) in info.display_tags.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="#6A8A27" 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="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/location.png"> |
||||
|
<view class="tip" style="padding-top: 11rpx;">地图</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="phone-container flex-column flex-center" @click="callPhone"> |
||||
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/phone.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: #999999;">入住</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: #999999;">离店</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.headimg)"></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.sku_name}}</view> |
||||
|
<uni-icons style="height: 40rpx;font-weight: bold;" type="right" size="15"></uni-icons> |
||||
|
</view> |
||||
|
<view> |
||||
|
<view class="scenic-content text-overflowRows"> |
||||
|
{{item.sku_model.bed_type}} | {{item.sku_model.area}} |
||||
|
| {{item.sku_model.window}} | 可入住{{item.sku_model.max_room_num}}人 |
||||
|
| {{item.sku_model.breakfast}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="price-container"> |
||||
|
<view class="price">{{item.price/100}}</view> |
||||
|
<view :class="['btn', {'noBuy': item.stock == 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="" v-html="formateRichText(info.brief_intro)"></view> |
||||
|
</view> |
||||
|
<view class="box-title">设施与政策</view> |
||||
|
<view class="common-container" style="padding: 30rpx 40rpx;"> |
||||
|
<view class="" v-html="formateRichText(info.service_info)"></view> |
||||
|
</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/homestay/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 () { |
||||
|
if (!this.info.lon && !this.info.lat) { |
||||
|
uni.showToast({ |
||||
|
title: '暂未配置地理位置', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
return |
||||
|
} |
||||
|
debugger |
||||
|
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/scene/detail').then(res => { |
||||
|
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({ |
||||
|
scene_id: this.id, |
||||
|
start_time: this.selectDate.startDay, |
||||
|
end_time: this.selectDate.endDay |
||||
|
},'/api/scene/get_hotel_sku_list').then(res => { |
||||
|
this.sku = res.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 |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
openCalendar () { |
||||
|
this.$refs.calendarPopup.open(); |
||||
|
}, |
||||
|
// 查看房型 |
||||
|
viewDetail (item) { |
||||
|
this.skuInfo = item |
||||
|
this.popSwiperCurrent = 1 |
||||
|
this.openPopRule() |
||||
|
}, |
||||
|
// 预定 |
||||
|
goOrder (item) { |
||||
|
if (item.stock == 0) { |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
let param = { |
||||
|
skuInfo: item, |
||||
|
selectDate: this.selectDate |
||||
|
} |
||||
|
uni.setStorageSync('hotelOrderInfo', JSON.stringify(param)) |
||||
|
uni.navigateTo({ |
||||
|
url:`/subPackages/homestay/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: #F7F7F7; |
||||
|
} |
||||
|
|
||||
|
.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 #6A8A27; |
||||
|
|
||||
|
padding: 7rpx 14rpx; |
||||
|
|
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 25rpx; |
||||
|
color: #6A8A27; |
||||
|
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: #6A8A27; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
.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: #EDF5DC; |
||||
|
background-image: url('https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/mapBg.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; |
||||
|
} |
||||
|
.address-title { |
||||
|
width: 450rpx; |
||||
|
} |
||||
|
} |
||||
|
.phone-container{ |
||||
|
width: 93rpx; |
||||
|
height: 107rpx; |
||||
|
background: #EDF5DC; |
||||
|
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: #F2F2F2; |
||||
|
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; |
||||
|
margin-right: 13rpx; |
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
.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: #C3282E; |
||||
|
padding-right: 20rpx; |
||||
|
} |
||||
|
.price::before{ |
||||
|
content: "￥"; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
.btn{ |
||||
|
width: 120rpx; |
||||
|
height: 47rpx; |
||||
|
background: #6A8A27; |
||||
|
border-radius: 11rpx; |
||||
|
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> |
||||
@ -0,0 +1,133 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<image :src="headImg" class="topImg" mode="aspectFill"></image> |
||||
|
|
||||
|
<view @click="gotoDetailByType(item)" class="item" v-for="(item,index) in list" :key="index"> |
||||
|
<image :src="item.headimg" mode="aspectFill" class="image"></image> |
||||
|
<view class="content flex-column"> |
||||
|
<view class="title text-overflowRows">{{item.title}}</view> |
||||
|
<view class="tags" v-if="item.scene_tags"> |
||||
|
<view class="tag" v-for="(tagItem,tagIndex) in item.scene_tags.split(',').slice(0,2)" :key="tagIndex">{{tagItem}}</view> |
||||
|
</view> |
||||
|
<view class="address text-overflowRows">{{item.province_name}}{{item.city_name}}{{item.area_name}}{{item.address}}</view> |
||||
|
<view class="price">{{item.price / 100}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
headImg: '', |
||||
|
list: [], |
||||
|
finished: false |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
// 头图 |
||||
|
this.getHeadImg(2371).then(res => {this.headImg = res}) |
||||
|
this.getList() |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
setTimeout(() => { |
||||
|
if(!this.finished) this.getList() |
||||
|
},1000) |
||||
|
}, |
||||
|
methods: { |
||||
|
getList() { |
||||
|
this.Post({ |
||||
|
offset: this.list.length, |
||||
|
limit: 10, |
||||
|
tag_id: 8, |
||||
|
title: '青年' |
||||
|
}, '/api/scene/get_scene_by_tag').then(res => { |
||||
|
if (res) { |
||||
|
this.list = [...res.data.list, ...this.list] |
||||
|
|
||||
|
if (res.data.list.length < 10) { |
||||
|
this.finished = true |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
padding-bottom: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.topImg { |
||||
|
width: 100%; |
||||
|
height: 386.67rpx; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
margin: 30rpx 26rpx; |
||||
|
height: 240rpx; |
||||
|
display: flex; |
||||
|
|
||||
|
.image { |
||||
|
width: 240rpx; |
||||
|
height: 240rpx; |
||||
|
border-radius: 20rpx; |
||||
|
margin-right: 22rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
flex: 1; |
||||
|
height: 240rpx; |
||||
|
padding-top: 10rpx; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.title { |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.tags { |
||||
|
display: flex; |
||||
|
|
||||
|
.tag { |
||||
|
font-size: 24rpx; |
||||
|
color: #6A8A27; |
||||
|
margin-right: 11rpx; |
||||
|
} |
||||
|
.tag:not(:last-child)::after{ |
||||
|
content: '|'; |
||||
|
display: inline-block; |
||||
|
margin-left: 11rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.address { |
||||
|
font-weight: 400; |
||||
|
font-size: 23rpx; |
||||
|
color: #999999; |
||||
|
} |
||||
|
|
||||
|
.price { |
||||
|
font-weight: bold; |
||||
|
font-size: 34rpx; |
||||
|
color: #DC2525; |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
.price::before { |
||||
|
content: '￥'; |
||||
|
font-size: 23rpx; |
||||
|
} |
||||
|
.price::after { |
||||
|
content: '起'; |
||||
|
font-size: 23rpx; |
||||
|
color: rgba(153, 153, 153, 1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,730 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="detail-container"> |
||||
|
<view class="common-container info-container"> |
||||
|
<view class="flex-between" style="align-items: flex-start;"> |
||||
|
<view class="info-title text-overflowRows">{{skuInfo.sku_name}}</view> |
||||
|
<view class="policy-btn flex-shrink-0 flex flex-items-center" @click="openPopRule"> |
||||
|
房型信息 |
||||
|
<uni-icons color="#71B580" style="height: 32rpx;" type="right" size="12"></uni-icons> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="tag-container text-overflow"> |
||||
|
{{skuInfo.sku_model.bed_type}} | {{skuInfo.sku_model.area}} |
||||
|
| {{skuInfo.sku_model.window}} | 可入住{{skuInfo.sku_model.max_room_num}}人 |
||||
|
| {{skuInfo.sku_model.breakfast}} |
||||
|
</view> |
||||
|
|
||||
|
<view class="order-time flex-between" style="justify-content: space-around;"> |
||||
|
<view class="time"> |
||||
|
<view style="font-size: 35rpx;font-weight: bold;"> |
||||
|
{{new Date(selectDate.startDay).Format('MM-dd')}}</view> |
||||
|
<view style="padding-left:14rpx">{{ ShowDateDay(new Date(selectDate.startDay).getDay()) }} |
||||
|
</view> |
||||
|
<view>入住</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-left:14rpx">{{ShowDateDay(new Date(selectDate.endDay).getDay()) }}</view> |
||||
|
<view>离店</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="notice-container"> |
||||
|
<view class="flex"> |
||||
|
<view class="flex-shrink-0" style="padding-top: 4rpx;"> |
||||
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/dui.png"></image> |
||||
|
</view> |
||||
|
<view class="flex-1 w-1rpx" style="padding-left: 14rpx;"> |
||||
|
<!-- <view>订单确认后，您在{{new Date(selectDate.startDay).Format('yyyy年MM月dd日')}}18:00前可免费取消或变更订单，18:00后不可取消或修改，将扣取全额房费。</view> --> |
||||
|
<!-- <view style="color: #F84A56;">预期不可取消或/修改，扣取全额房费</view> --> |
||||
|
<view>酒店需至少提前1天预约，预约成功后不可更改。如未提前电话预约，届时因满房造成无法办理入住，敬请谅解。</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="flex" style="padding-top: 22rpx;"> |
||||
|
<view class="flex-shrink-0" style="padding-top: 4rpx;"> |
||||
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/tanhao.png"> |
||||
|
</image> |
||||
|
</view> |
||||
|
<view class="flex-1 w-1rpx" style="padding-left: 14rpx;"> |
||||
|
<view>证件要求：需身份证登记入住</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
<view class="common-container form-container"> |
||||
|
<view class="form-title"> |
||||
|
<text style="font-weight: bold;font-size: 35rpx;padding-right: 28rpx;">预订信息</text> |
||||
|
<text>姓名需与证件一致</text> |
||||
|
</view> |
||||
|
<view class="btn-box flex-column"> |
||||
|
<view class="line w-full" style="border-top: none;"> |
||||
|
<view class="left">房间数</view> |
||||
|
<view class="input flex" style="justify-content: flex-end;"> |
||||
|
<view class="num-box"> |
||||
|
<view :class="['ctrl',buyNum>1?'':'disabled']" @click="reduce()">-</view> |
||||
|
<input class="num" type="text" v-model="buyNum" :disabled='true' /> |
||||
|
<view :class="['ctrl']" @click="plus()">+</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="line w-full" v-for="(user,index) in roomUser" :key="index"> |
||||
|
<view class="left">房间{{index+1}}</view> |
||||
|
<input class="input" type="text" placeholder="请输入住客姓名" v-model="user.name" /> |
||||
|
</view> |
||||
|
<view class="line w-full"> |
||||
|
<view class="left">联系电话</view> |
||||
|
<view class="flex flex-items-center input"> |
||||
|
<input class="input" type="text" placeholder="请输入联系手机号" v-model="phone" /> |
||||
|
<uni-icons v-if="phone.length>0" style="margin-left: 30rpx;" type="closeempty" size="14" |
||||
|
@click="phone = ''"></uni-icons> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<navigator :url="'/subPackages/order/orderCoupon?allprice='+ price + '&sku_ids='+ skuInfo.id" class="coupon-box flex-between"> |
||||
|
<text>优惠券</text> |
||||
|
<view style="display: flex;align-items: center;"> |
||||
|
<view class="add-btn" v-if="!coupon">选择优惠券</view> |
||||
|
<view style="display: flex;align-items: center;color: #6A8A2D;font-weight: bold;" v-if="coupon && coupon.CouponActivity"> |
||||
|
<view>-￥{{coupon.CouponActivity.discounts/100}}</view> |
||||
|
</view> |
||||
|
<img src="https://static.ticket.sz-trip.com/changyoutaihu/images/user/rightIcon.png" class="icon-coupon"> |
||||
|
</view> |
||||
|
</navigator> |
||||
|
|
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
<view class="btn-list"> |
||||
|
<view class="price-box"> |
||||
|
<view class="text">合计:</view> |
||||
|
<view class="price">{{ total() / 100 }}</view> |
||||
|
<!-- <view class="post-text" v-if="sendType==1&&post">含邮费:¥{{ post / 100 }}</view> --> |
||||
|
</view> |
||||
|
<view class="btn" @click="order()">立即预订</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> |
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
id: null, |
||||
|
popSwiperCurrent: 1, |
||||
|
|
||||
|
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 |
||||
|
}, |
||||
|
|
||||
|
phone: '', |
||||
|
buyNum: 1, |
||||
|
roomUser: [{ |
||||
|
name: '' |
||||
|
}], |
||||
|
allSeldDate: [], |
||||
|
coupon: '', |
||||
|
price: 0 |
||||
|
} |
||||
|
}, |
||||
|
onReady() { |
||||
|
// 清除优惠券 |
||||
|
this.$store.commit("choseCoupon", ""); |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.coupon = this.$store.state.user.coupon |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.initOrderDate() |
||||
|
}, |
||||
|
methods: { |
||||
|
popSwiperChange(e) { |
||||
|
this.popSwiperCurrent = e.detail.current + 1 |
||||
|
}, |
||||
|
|
||||
|
// 初始化 |
||||
|
initOrderDate() { |
||||
|
let data = {} |
||||
|
try { |
||||
|
data = JSON.parse(uni.getStorageSync('hotelOrderInfo')); |
||||
|
console.log(data) |
||||
|
} catch (e) { |
||||
|
data = {} |
||||
|
setTimeout(() => { |
||||
|
uni.navigateBack() |
||||
|
}, 1000) |
||||
|
} |
||||
|
|
||||
|
this.skuInfo = data.skuInfo |
||||
|
this.selectDate = data.selectDate |
||||
|
this.buyNum = 1 |
||||
|
this.roomUser = [{ |
||||
|
name: '' |
||||
|
}] |
||||
|
try { |
||||
|
this.phone = JSON.parse(uni.getStorageSync('userInfo')).mobile |
||||
|
} catch (e) { |
||||
|
this.phone = '' |
||||
|
} |
||||
|
|
||||
|
this.getPriceCal(this.skuInfo.id) |
||||
|
|
||||
|
}, |
||||
|
// 查看房型 |
||||
|
viewDetail() { |
||||
|
this.popSwiperCurrent = 1 |
||||
|
this.openPopRule() |
||||
|
}, |
||||
|
|
||||
|
plus() { |
||||
|
this.buyNum += 1; |
||||
|
this.roomUser.push({ |
||||
|
name: '' |
||||
|
}) |
||||
|
}, |
||||
|
reduce() { |
||||
|
if (this.buyNum > 1) { |
||||
|
this.buyNum -= 1; |
||||
|
this.roomUser.pop() |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
total() { |
||||
|
let disfferMoney = 0 |
||||
|
this.allSeldDate.forEach(v => { |
||||
|
disfferMoney += (v.price || 0) |
||||
|
}) |
||||
|
this.price = ((disfferMoney * this.buyNum) || 0).toFixed(2) |
||||
|
|
||||
|
if(this.coupon) { |
||||
|
if (this.coupon.percent == 0) { |
||||
|
disfferMoney = disfferMoney - this.coupon.CouponActivity.discounts |
||||
|
} else{ |
||||
|
disfferMoney = disfferMoney - (disfferMoney * this.coupon.CouponActivity.percent/100) |
||||
|
} |
||||
|
} |
||||
|
return disfferMoney < 0 ? 0 : disfferMoney |
||||
|
}, |
||||
|
|
||||
|
order() { |
||||
|
this.roomUser.forEach(v => v.name = v.name.trim()) |
||||
|
// 校验 |
||||
|
if (!this.IsTel(this.phone)) { |
||||
|
uni.showToast({ |
||||
|
title: '手机号格式校验失败', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
if (this.roomUser.some(v => { |
||||
|
return v.name.length == 0 |
||||
|
})) { |
||||
|
uni.showToast({ |
||||
|
title: '请输入住客姓名', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let roomNames = [] |
||||
|
this.roomUser.forEach(item => { |
||||
|
roomNames.push(item.name) |
||||
|
}) |
||||
|
|
||||
|
if (roomNames.length != Array.from(new Set(roomNames)).length) { |
||||
|
uni.showToast({ |
||||
|
title: '住客姓名不能相同', |
||||
|
icon: 'none' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let goods = [] |
||||
|
let goodsItem = { |
||||
|
num: this.buyNum, |
||||
|
specifications_id: this.skuInfo.id, |
||||
|
start_date: this.selectDate.startDay, |
||||
|
end_date: this.selectDate.endDay, |
||||
|
} |
||||
|
goods.push(goodsItem) |
||||
|
|
||||
|
let data = { |
||||
|
goods: goods, |
||||
|
reserve_name: roomNames.toString(), |
||||
|
reserve_phone: this.phone, |
||||
|
coupon_id: this.coupon ? this.coupon.id : null, |
||||
|
} |
||||
|
|
||||
|
this.Post({ |
||||
|
method: 'POST', |
||||
|
data: JSON.stringify(data) |
||||
|
}, '/api/order/place').then(res => { |
||||
|
console.log('成功'); |
||||
|
if (res.code == 1) { |
||||
|
uni.removeStorageSync('hotelOrderInfo') |
||||
|
this.Post({ |
||||
|
order_id: res.data.order_id, |
||||
|
type: "miniprogram", |
||||
|
platform: 'miniprogram' |
||||
|
}, '/api/pay/unify').then(res => { |
||||
|
if (res.data) { |
||||
|
uni.requestPayment({ |
||||
|
nonceStr: res.data.nonceStr, |
||||
|
package: res.data.package, |
||||
|
paySign: res.data.paySign, |
||||
|
signType: res.data.signType, |
||||
|
timeStamp: res.data.timeStamp, |
||||
|
complete() { |
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/order/trades' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
closePopupRule() { |
||||
|
this.$refs.popupRule.close() |
||||
|
}, |
||||
|
openPopRule() { |
||||
|
this.$refs.popupRule.open() |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
getPriceCal(skuId, goodId) { |
||||
|
this.Post({ |
||||
|
sku_id: skuId, |
||||
|
start_date: this.selectDate.startDay, |
||||
|
end_date: this.selectDate.endDay, |
||||
|
}, '/api/product/product_date_price').then(res => { |
||||
|
this.allSeldDate = res.data || [] |
||||
|
|
||||
|
if (this.allSeldDate.length > 0) { |
||||
|
this.allSeldDate.pop() |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</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; |
||||
|
right: 36rpx; |
||||
|
top: 36rpx; |
||||
|
font-size: 23rpx; |
||||
|
|
||||
|
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%; |
||||
|
padding: 26rpx; |
||||
|
padding-bottom: 200rpx; |
||||
|
} |
||||
|
|
||||
|
.common-container { |
||||
|
background: white; |
||||
|
border-radius: 20rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
padding: 22rpx 26rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.info-container { |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
|
||||
|
.info-title { |
||||
|
width: 100%; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
font-size: 35rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.policy-btn { |
||||
|
width: 160rpx; |
||||
|
height: 35rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #6A8A27; |
||||
|
text-align: right; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.tag-container { |
||||
|
width: 100%; |
||||
|
padding: 35rpx 0; |
||||
|
} |
||||
|
|
||||
|
.time-container { |
||||
|
padding: 22rpx 0; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.notice-container { |
||||
|
background: rgba(237, 245, 220, 0.7); |
||||
|
border-radius: 13rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 23rpx; |
||||
|
color: #000000; |
||||
|
padding: 22rpx 16rpx; |
||||
|
margin-top: 28rpx; |
||||
|
|
||||
|
image { |
||||
|
width: 25rpx; |
||||
|
height: 25rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
.order-time { |
||||
|
.time { |
||||
|
display: flex; |
||||
|
font-family: PingFang SC; |
||||
|
font-size: 24rpx; |
||||
|
color: #000000; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cal-day { |
||||
|
background: #EDF5DC; |
||||
|
border-radius: 18rpx; |
||||
|
padding: 5rpx 16rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #6A8A27; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.btn-list { |
||||
|
width: 100%; |
||||
|
height: 166rpx; |
||||
|
background: #ffffff; |
||||
|
box-shadow: 0rpx -3rpx 9rpx 1rpx rgba(227, 229, 232, 0.5); |
||||
|
display: flex; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
padding: 20rpx 20rpx; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.btn { |
||||
|
width: 233rpx; |
||||
|
height: 73rpx; |
||||
|
background: #6A8A2D; |
||||
|
border-radius: 11rpx; |
||||
|
text-align: center; |
||||
|
line-height: 73rpx; |
||||
|
font-weight: bold; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.price-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.text { |
||||
|
font-size: 29rpx; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.price { |
||||
|
margin-left: 15rpx; |
||||
|
font-size: 36rpx; |
||||
|
font-family: PingFangSC-Regular, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #DC2525; |
||||
|
|
||||
|
&:before { |
||||
|
content: '¥'; |
||||
|
display: inline-block; |
||||
|
color: #DC2525; |
||||
|
font-size: 36rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.post-text { |
||||
|
margin-left: 15rpx; |
||||
|
color: #DC2525; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.form-container { |
||||
|
.form-title { |
||||
|
font-family: PingFang SC; |
||||
|
color: #000000; |
||||
|
font-weight: 500; |
||||
|
font-size: 23rpx; |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
} |
||||
|
|
||||
|
.left { |
||||
|
width: 160rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
font-size: 29rpx; |
||||
|
color: #000000; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.line { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
border-top: 1rpx solid #D8D8D8; |
||||
|
height: 92rpx; |
||||
|
} |
||||
|
|
||||
|
.input { |
||||
|
flex: 1; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
font-size: 29rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.num-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-left: 20rpx; |
||||
|
width: 160rpx; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.num { |
||||
|
text-align: center; |
||||
|
width: 50rpx; |
||||
|
} |
||||
|
|
||||
|
.ctrl { |
||||
|
width: 47rpx; |
||||
|
height: 47rpx; |
||||
|
background: #6A8A27; |
||||
|
border-radius: 50%; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
font-size: 34rpx; |
||||
|
color: #FFFFFF; |
||||
|
line-height: 42rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.ctrl.disabled { |
||||
|
background: #E8E8E8; |
||||
|
color: #999999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.coupon-box { |
||||
|
height: 113rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 13rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #000000; |
||||
|
padding: 0 20rpx; |
||||
|
|
||||
|
.add-btn { |
||||
|
width: 153rpx; |
||||
|
line-height: 40rpx; |
||||
|
background: #6A8A2D; |
||||
|
border-radius: 9rpx; |
||||
|
text-align: center; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
|
||||
|
.icon-coupon{ |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
margin-left: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,103 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="common-container"> |
||||
|
<view class="info-title box-title text-overflowRows">{{info.title}}</view> |
||||
|
<view class="flex-between phone-container"> |
||||
|
<view> |
||||
|
联系电话：{{info.tel}} |
||||
|
</view> |
||||
|
<view @click="callPhone"> |
||||
|
<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/homestay/phones.png"> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="common-container"> |
||||
|
<view class="box-title">服务设施</view> |
||||
|
<view style="padding-top: 34rpx;" v-html="formateRichText(info.service_info)"></view> |
||||
|
</view> |
||||
|
<view class="common-container"> |
||||
|
<view class="box-title">入住须知</view> |
||||
|
<view style="padding-top: 34rpx;" v-html="formateRichText(info.book_info)"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
id: null, |
||||
|
info: {}, |
||||
|
} |
||||
|
}, |
||||
|
onShow(options) { |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.id = options.id; |
||||
|
this.getInfo(); |
||||
|
}, |
||||
|
methods: { |
||||
|
callPhone () { |
||||
|
let _this = this |
||||
|
uni.showActionSheet({ |
||||
|
itemList: [this.info.tel,'呼叫'], |
||||
|
success: function (res) { |
||||
|
_this.clickPhone(_this.info.tel) |
||||
|
} |
||||
|
}); |
||||
|
// this.clickPhone(this.info.tel) |
||||
|
}, |
||||
|
// 获取景点信息 |
||||
|
getInfo() { |
||||
|
this.Post({id: this.id},'/api/scene/detail').then(res => { |
||||
|
this.info = res.data |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
*{ |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.bg{ |
||||
|
min-height: 100vh; |
||||
|
background: #F7F7F7; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.common-container{ |
||||
|
width: 100%; |
||||
|
background: white; |
||||
|
border-radius: 13rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
padding: 20rpx 18rpx; |
||||
|
} |
||||
|
|
||||
|
.box-title { |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
font-size: 35rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
.info-title{ |
||||
|
height: 88rpx; |
||||
|
} |
||||
|
.phone-container{ |
||||
|
padding-top: 20rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
font-size: 28rpx; |
||||
|
color: #000000; |
||||
|
image{ |
||||
|
width: 33.33rpx; |
||||
|
height: 33.33rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,76 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
|
||||
|
<!--如果需要solt--> |
||||
|
<!--用法二：当mode=2、3的模式下分别为（酒店\往返）的离开日期--> |
||||
|
<Calendar @click="tip" :is-show="true" :start-date="startDate" :end-date="endDate" mode="2" :title="'日期选择'" |
||||
|
@callback="getDate" :transition="'slide'" :theme-color="'#6A8A27'" /> |
||||
|
<div class="btn" @click="determine()"> |
||||
|
确定 |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import Calendar from 'mobile-calendar-simple' |
||||
|
export default { |
||||
|
props: ['startDate', 'endDate'], |
||||
|
data() { |
||||
|
return { //日期均为yyyy-mm-dd或者yyyy/mm/dd格式 |
||||
|
betweenStart: '', |
||||
|
betweenEnd: '', |
||||
|
calendarShow: true, |
||||
|
date: 'init', //判断是否选择了日期 |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
determine() { |
||||
|
if (this.date == 'delete') { |
||||
|
uni.showToast({ |
||||
|
title: "请选择日期", |
||||
|
icon: "none" |
||||
|
}) |
||||
|
} else if (this.date == 'init') { |
||||
|
// 关闭弹框 |
||||
|
uni.$emit('changeHotelDate',null) |
||||
|
} else { |
||||
|
let date = this.date |
||||
|
let data = { |
||||
|
startDay: date.startStr.dateStr, |
||||
|
endDay: date.endStr.dateStr, |
||||
|
differDays: date.dayCount |
||||
|
} |
||||
|
uni.$emit('changeHotelDate',data) |
||||
|
} |
||||
|
}, |
||||
|
//获取回调的日期数据 |
||||
|
getDate(date) { |
||||
|
this.date = date |
||||
|
}, |
||||
|
tip() { |
||||
|
console.log(1); |
||||
|
} |
||||
|
}, |
||||
|
components: { |
||||
|
Calendar |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.btn { |
||||
|
width: 697rpx; |
||||
|
height: 73rpx; |
||||
|
background: #6A8A2D; |
||||
|
border-radius: 11rpx; |
||||
|
line-height: 73rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
color: #FFFFFF; |
||||
|
text-align: center; |
||||
|
position: fixed; |
||||
|
bottom: 30rpx; |
||||
|
z-index: 999; |
||||
|
text-align: center; |
||||
|
left: 50%; |
||||
|
transform: translate(-348.5rpx, 0); |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue