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.
600 lines
14 KiB
600 lines
14 KiB
<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.title}}</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">
|
|
<text>{{skuInfo.showTag}}</text>
|
|
<text>{{skuInfo.lastShowTag}}</text>
|
|
</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="showImg('/uploads/20240830/aa84c8b1de80651f645fed67a1997ced.png')"></image>
|
|
</view>
|
|
<view class="flex-1 w-1rpx" style="padding-left: 14rpx;">
|
|
<view>订单确认后，您在{{new Date(selectDate.startDay).Format('yyyy年MM月dd日')}}20:00前之免费取消或 变更订单，20:00后将收取30%房费作为违约费用。</view>
|
|
<view style="color: #F84A56;">预期不可取消或/修改，扣取全额房费</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="flex" style="padding-top: 22rpx;">
|
|
<view class="flex-shrink-0" style="padding-top: 4rpx;">
|
|
<image :src="showImg('/uploads/20240830/59d2f01f0391f72a537cc9004bc2071d.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>
|
|
|
|
</view>
|
|
|
|
|
|
<view class="btn-list">
|
|
<view class="price-box">
|
|
<view class="text">合计:</view>
|
|
<view class="price">{{ total() }}</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: ''
|
|
}]
|
|
|
|
|
|
}
|
|
},
|
|
onShow(options) {
|
|
},
|
|
onLoad(options) {
|
|
this.initOrderDate()
|
|
},
|
|
methods: {
|
|
popSwiperChange (e) {
|
|
this.popSwiperCurrent = e.detail.current+1
|
|
},
|
|
|
|
// 初始化
|
|
initOrderDate () {
|
|
let data = {}
|
|
try {
|
|
data = JSON.parse(uni.getStorageSync('hotelOrderInfo'));
|
|
} catch (e) {
|
|
data = {}
|
|
setTimeout(()=>{
|
|
uni.navigateBack()
|
|
},1000)
|
|
}
|
|
|
|
this.skuInfo = data.skuInfo
|
|
this.selectDate = data.selectDate
|
|
this.buyNum = 1
|
|
this.roomUser = [{name: ''}]
|
|
|
|
},
|
|
// 查看房型
|
|
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 () {
|
|
return this.skuInfo.price/100 * this.buyNum || 0
|
|
},
|
|
|
|
order () {
|
|
// 校验
|
|
if (!this.isTel(this.phone)){
|
|
uni.showToast({
|
|
title: '请输入自提人手机号',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
if (this.roomUser.some(v=>v.trim().length<0)) {
|
|
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,
|
|
customer_name: this.roomUser.map(v=>v.name).join('、'),
|
|
reserve_mobile: this.phone,
|
|
}
|
|
goods.push(goodsItem)
|
|
|
|
let data = {
|
|
goods: goods,
|
|
reserve_phone: this.phone,
|
|
}
|
|
|
|
return
|
|
this.Post({
|
|
method: 'POST',
|
|
data: JSON.stringify(data)
|
|
},'/api/order/place').then(res => {
|
|
console.log('成功');
|
|
if(res.code == 200){
|
|
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()
|
|
},
|
|
|
|
}
|
|
}
|
|
</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: #666666;
|
|
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(232, 246, 235, 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: #E8F6EB;
|
|
border-radius: 17rpx;
|
|
padding: 5rpx 16rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 24rpx;
|
|
color: #000000;
|
|
}
|
|
|
|
|
|
.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: 600rpx;
|
|
.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: 294rpx;
|
|
height: 88rpx;
|
|
background: #F84A56;
|
|
border-radius: 43rpx;
|
|
text-align: center;
|
|
line-height: 88rpx;
|
|
|
|
font-size: 36rpx;
|
|
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: #fc5109;
|
|
&:before {
|
|
content: '¥';
|
|
display: inline-block;
|
|
color: #fc5109;
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
.post-text {
|
|
margin-left: 15rpx;
|
|
color: #fc5109;
|
|
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: #71B580;
|
|
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;
|
|
}
|
|
}
|
|
</style>
|
|
|