1076 lines
39 KiB
Vue
1076 lines
39 KiB
Vue
<template>
|
||
<view class="waper">
|
||
<u-navbar :autoBack="true" :placeholder="true" bgColor="#FFFFFF">
|
||
<view slot='center' style="font-size: 36rpx; font-weight: bold;">
|
||
确认订单
|
||
</view>
|
||
</u-navbar>
|
||
<view class="content">
|
||
<view class="top_box">
|
||
<view class="hour_date" v-if="hourDate">
|
||
<view>{{$moment(hourDate).format("MM月DD日")}}</view>
|
||
<view>今天{{hotelDetail.hourRoomCheckInTimeHm}}-{{hotelDetail.hourRoomLeaveTimeHm}}中选择{{detail.duration}}小时</view>
|
||
</view>
|
||
<view class="name">{{hotelDetail.name}}</view>
|
||
<view class="row">
|
||
<view class="label">{{detail.level2Name}}</view>
|
||
<view class="type" @click="typeDetail">
|
||
<text>房型详情</text>
|
||
<u-icon name="arrow-right" color="#03AE80" size="28rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="tags_box">
|
||
<view class="tag" v-if="detail.bedType">{{detail.bedType}}</view>
|
||
<view class="tag" v-if="detail.limitedLivePerson">{{detail.limitedLivePerson}}人入住</view>
|
||
<view class="tag" v-if="detail.area">{{detail.area}}m²</view>
|
||
<view class="tag" v-if="detail.window">{{detail.window}}</view>
|
||
</view>
|
||
<view class="row" v-if="hourDate">
|
||
<view class="label1">
|
||
<u-icon name="checkmark-circle" color="#03AE80" size="28rpx" />
|
||
<view v-if="detail.cancelRuleType == 4" class="text">订单确认后，{{$moment(hourDate).format("MM月DD日")}}{{isHourTime ? isHourTime.label.split('-')[0] : ''}}前可免费取消，逾期不可取消或退款。</view>
|
||
<view v-else class="text">{{detail.cancelRuleTypeDesc}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="row" v-else>
|
||
<view class="label1 alc">
|
||
<u-icon name="checkmark-circle" color="#03AE80" size="28rpx" />
|
||
<view class="text">{{detail.cancelRuleTypeDesc}}</view>
|
||
</view>
|
||
<view class="type" @click="readDetail">
|
||
<text>订房必读</text>
|
||
<u-icon name="arrow-right" color="#03AE80" size="28rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="center_box">
|
||
<view class="label">入住信息</view>
|
||
<view>
|
||
<view class="col" v-if="!hourDate">
|
||
<view class="left">入住时间</view>
|
||
<view class="center">
|
||
<view>{{startDatePage}}-{{stopDatePage}}</view>
|
||
<view>共{{nightsPage}}晚</view>
|
||
</view>
|
||
</view>
|
||
<view class="col col1" @click="timeSlotDetail" v-if="hourDate">
|
||
<view class="left">入住时段</view>
|
||
<view class="center1" v-if="isHourTime">
|
||
<view class="cet_top">
|
||
<view>{{isHourTime.label}}</view>
|
||
<u-icon name="arrow-right" color="rgba(0,0,0,0.45)" size="28rpx"></u-icon>
|
||
</view>
|
||
<view class="cet_bot">
|
||
您可入住<text>{{isHourTime.duration}}</text>，最晚在<text>{{isHourTime.value.split('-')[1]}}</text>离店。请您在选择的时间段内入住，超时将可能无法入住。
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="col" @click="showHotel">
|
||
<view class="left">房间数量</view>
|
||
<view class="center">
|
||
<view>{{isNum}}间<text>每间最多住{{detail.limitedLivePerson}}人</text></view>
|
||
<view class="residue">剩余{{detail.quantity}}间</view>
|
||
</view>
|
||
<view class="right">
|
||
<u-icon v-if="!expand" name="arrow-down" color="rgba(0,0,0,0.45)" size="28rpx" />
|
||
<u-icon v-if="expand" name="arrow-up" color="rgba(0,0,0,0.45)" size="28rpx" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="rooms_box" v-if="expand && detail.quantity">
|
||
<view :class="['num', isNum == index+1 ? 'activeNum' : '']" v-for="(item, index) in detail.quantity" :key="index" @click="changeNum(index)">{{index+1}}间</view>
|
||
</view>
|
||
<view class="bottom_box">
|
||
<view class="col" @click="tenantsDetail">
|
||
<view class="center1">
|
||
<view class="col1" v-for="(item, index) in visitorList" :key="index">
|
||
<view class="key">房间{{index + 1}}</view>
|
||
<view class="name">{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="yq"><u-icon name="account" color="#03AE80" size="32rpx" /></view>
|
||
</view>
|
||
</view>
|
||
<view class="col">
|
||
<view class="left">手机号码</view>
|
||
<view class="center">
|
||
<view class="code">86</view>
|
||
<u-icon name="arrow-down" color="rgba(0,0,0,0.45)" size="28rpx" />
|
||
<view class="line"></view>
|
||
<view>{{contactMobile}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="col" @click="timeDetail" v-if="!hourDate">
|
||
<view class="left">预计到店</view>
|
||
<view class="center">
|
||
<view>{{arrivalTime}}<text v-if="arrivalTime">前</text></view>
|
||
</view>
|
||
<view class="right">
|
||
<u-icon name="arrow-right" color="rgba(0,0,0,0.45)" size="28rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer" :style="'padding-bottom: ' + windowBottom + 'px;'">
|
||
<view class="left">
|
||
<!-- <view class="label">在线付</view> -->
|
||
<view class="price"><text class="unit">￥</text>{{totalPrice}}</view>
|
||
</view>
|
||
<view class="right">
|
||
<view @click="showPopupDetailed = true" class="detailed">
|
||
<view class="label">明细</view>
|
||
<u-icon name="arrow-up" color="rgba(0,0,0,0.85)" size="28rpx" />
|
||
</view>
|
||
<view class="btn" v-if="detail.quantity" @click="predetermine">提交订单</view>
|
||
<view class="btn btn1" v-else>已订完</view>
|
||
</view>
|
||
</view>
|
||
<u-popup :show="showPopupType" :round="10" mode="bottom">
|
||
<view class="type_con">
|
||
<view class="close" @click="showPopupType = false">
|
||
<u-icon name="close" color="#fff" size="36rpx" />
|
||
</view>
|
||
<scroll-view scroll-y class="scroll">
|
||
<view class="swiper">
|
||
<swiper :autoplay="true" :current="current" circular @change="changeSwiper">
|
||
<swiper-item v-for="(i, index) in detail.image" :key="index">
|
||
<image :src="$utils.setImgUrl(i)" mode=""></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="current">{{current + 1}}/{{detail.imageLength}}</view>
|
||
</view>
|
||
<view class="specs">
|
||
<view class="title">{{detail.level2Name}}</view>
|
||
<view class="list_box">
|
||
<view class="item" v-if="detail.area">
|
||
<image src="../../static/image/hotel/area.png" mode=""></image>
|
||
<view>{{detail.area}}㎡</view>
|
||
</view>
|
||
<view class="item" v-if="detail.bedType">
|
||
<image src="../../static/image/hotel/bedType.png" mode=""></image>
|
||
<view>{{detail.bedType}}</view>
|
||
</view>
|
||
<view class="item" v-if="detail.window">
|
||
<image src="../../static/image/hotel/window.png" mode=""></image>
|
||
<view>{{detail.window}}</view>
|
||
</view>
|
||
<view class="item" v-if="detail.wifi">
|
||
<image src="../../static/image/hotel/wifi.png" mode=""></image>
|
||
<view>{{detail.wifi}}</view>
|
||
</view>
|
||
<view class="item" v-if="detail.floor">
|
||
<image src="../../static/image/hotel/floor.png" mode=""></image>
|
||
<view>{{detail.floor}}层</view>
|
||
</view>
|
||
<view class="item" v-if="detail.breakfast">
|
||
<image src="../../static/image/hotel/breakfast.png" mode=""></image>
|
||
<view>{{detail.breakfast}}</view>
|
||
</view>
|
||
<view class="item" v-if="detail.limitedLivePerson">
|
||
<image src="../../static/image/hotel/limitedLivePerson.png" mode=""></image>
|
||
<view>{{detail.limitedLivePerson}}人</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="occupying"></view>
|
||
<view class="policy">
|
||
<view class="title">商家政策</view>
|
||
<view class="list">
|
||
<view class="item">
|
||
<view class="label">重要通知</view>
|
||
<u-parse :content="hotelDetail.importantNotice"></u-parse>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label">入住方式</view>
|
||
<view class="text">{{hotelDetail.checkInWay}}</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="label">取消规则</view>
|
||
<view class="text" v-if="detail.cancelRuleType == 3">
|
||
{{cancelRule}}
|
||
</view>
|
||
<view class="text" v-else>{{detail.cancelRuleTypeDesc}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showPopupRead" :round="10" mode="bottom">
|
||
<view class="read_con">
|
||
<view class="head">
|
||
<view class="title">订房必读</view>
|
||
<view class="close" @click="showPopupRead = false">
|
||
<u-icon name="close" color="#000000" size="36rpx" />
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="scroll">
|
||
<view class="row">
|
||
<view class="title">入住须知</view>
|
||
<view class="con">
|
||
<text>发票：</text>
|
||
<text>{{hotelDetail.invoice == 'N' ? '不' : ''}}</text>
|
||
可开具增值税普通/专用发票
|
||
</view>
|
||
<view class="con">
|
||
<text>年龄限制：</text>
|
||
入住办理人需满{{hotelDetail.minLimitedAge}}岁
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="title">商家政策</view>
|
||
<view class="con">
|
||
<text>重要通知：</text>
|
||
<u-parse :content="hotelDetail.importantNotice"></u-parse>
|
||
</view>
|
||
<view class="con">
|
||
<text>取消规则：</text>
|
||
{{detail.cancelRuleType == 3 ? cancelRule : detail.cancelRuleTypeDesc}}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showPopupTime" :round="10" mode="bottom" closeOnClickOverlay @close="showPopupTime = false">
|
||
<view class="time_con">
|
||
<view class="head">
|
||
<view class="title">预计到店时间</view>
|
||
<view class="text">房间整晚保留，10:00前可能需要等房，详情咨询商家</view>
|
||
</view>
|
||
<scroll-view scroll-y class="scroll">
|
||
<view class="time_box">
|
||
<view :class="['time', isTime == item.dictValue ? 'activeTime' : '']" v-for="(item, index) in timeList" :key="index" @click="changeTime(item)">{{item.dictLabel}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showPopupHourTime" :round="10" mode="bottom">
|
||
<view class="time_con">
|
||
<view class="head1">
|
||
<view class="title">选择入住时段</view>
|
||
<view class="close" @click="showPopupHourTime = false">
|
||
<u-icon name="close" color="#000000" size="36rpx" />
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y class="scroll">
|
||
<view class="time_box1">
|
||
<view :class="['time', isHourTime.value == item.value ? 'activeTime' : '']" v-for="(item, index) in hourTimeList" :key="index" @click="changeHourTime(item)">{{item.label}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showPopupTenants" :round="10" mode="bottom">
|
||
<view class="tenants_con">
|
||
<view class="head">
|
||
<view class="cancel" @click="goCancel">取消</view>
|
||
<view class="title">选择入住人</view>
|
||
<view class="confirm" @click="goConfirm">确定</view>
|
||
</view>
|
||
<scroll-view scroll-y class="scroll">
|
||
<view class="item" v-for="(item, index) in tenantsList" :key="index">
|
||
<view class="left" @click="changeTenants(item)">
|
||
<view class="noChange" v-if="selectValue.indexOf(item.id) == -1"></view>
|
||
<view class="isChange" v-if="selectValue.indexOf(item.id) != -1">
|
||
<u-icon name="checkmark" color="#fff" size="28rpx" />
|
||
</view>
|
||
<view :class="['name', selectValue.indexOf(item.id) != -1 ? 'name1' : '']">{{item.name}}</view>
|
||
</view>
|
||
<u-icon @click="editVisitor(item)" name="edit-pen" color="rgba(0,0,0,0.45)" size="40rpx" />
|
||
</view>
|
||
</scroll-view>
|
||
<view class="btn" @click="addVisitor">
|
||
<u-icon name="plus" color="#03AE80" size="32rpx" />
|
||
<view>手动新增</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showPopupTourist" :round="10" mode="bottom">
|
||
<view class="tourist_box" :style="'padding-bottom: ' + keyboardHeight + 'px;'">
|
||
<view class="popup-tourist">
|
||
<view class="title">
|
||
{{touristTitle}}
|
||
<view class="close" @click="closeTourist">
|
||
<u-icon name="close" color="#000" size="32rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="form">
|
||
<view class="num-box">
|
||
<view class="list">
|
||
<view class="label">姓名</view>
|
||
<input type="text" :adjust-position="false" @keyboardheightchange="handleKeyboardChange" v-model="touristForm.name" placeholder="请输入联系人姓名" />
|
||
</view>
|
||
<view class="list">
|
||
<view class="label">联系电话</view>
|
||
<input type="number" :adjust-position="false" @keyboardheightchange="handleKeyboardChange" v-model="touristForm.mobile" placeholder="请输入联系号码" @blur="keyboardHeight = 0;" />
|
||
</view>
|
||
<view class="list">
|
||
<view class="label">身份证号码</view>
|
||
<input type="idcard" :adjust-position="false" @keyboardheightchange="handleKeyboardChange" v-model="touristForm.idCard" placeholder="请输入证件号码" @blur="keyboardHeight = 0;" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn" @click="saveTourist">保存</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<u-popup :show="showPopupDetailed" :round="10" mode="bottom">
|
||
<view class="detailed_con">
|
||
<view class="head">
|
||
<view class="title">明细</view>
|
||
<view class="close" @click="showPopupDetailed = false">
|
||
<u-icon name="close" color="#000000" size="36rpx" />
|
||
</view>
|
||
</view>
|
||
<view class="add">
|
||
<view class="label">订单合计</view>
|
||
<view class="all">共<text>¥{{totalPrice}}</text></view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
<view class="key">房费 </view>
|
||
<view class="value">￥{{totalPrice}}</view>
|
||
</view>
|
||
<view class="col" v-for="(item, index) in detail.datePrices" :key="index">
|
||
<view class="key">{{item.recordDate}}</view>
|
||
<view class="value">{{isNum}}x ¥{{item.price}}</view>
|
||
</view>
|
||
<view class="col" v-if="endTime">
|
||
<view class="key">{{endTime}}</view>
|
||
<view class="value"></view>
|
||
</view>
|
||
</view>
|
||
<view class="footer" :style="'padding-bottom: ' + windowBottom + 'px;'">
|
||
<view class="left">
|
||
<!-- <view class="label">在线付</view> -->
|
||
<view class="price"><text class="unit">￥</text>{{totalPrice}}</view>
|
||
</view>
|
||
<view class="right">
|
||
<view @click="showPopupDetailed = false" class="detailed">
|
||
<view class="label">明细</view>
|
||
<u-icon name="arrow-down" color="rgba(0,0,0,0.85)" size="28rpx" />
|
||
</view>
|
||
<view class="btn" v-if="detail.quantity" @click="predetermine">提交订单</view>
|
||
<view class="btn btn1" v-else>已订完</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
windowBottom: 0,
|
||
keyboardHeight: 0,
|
||
id: '',
|
||
hotelId: '',
|
||
detail: {},
|
||
hotelDetail: {},
|
||
totalPrice: 0,
|
||
expand: false,
|
||
isNum: null,
|
||
showPopupType: false,
|
||
showPopupRead: false,
|
||
showPopupTime: false,
|
||
showPopupTenants: false,
|
||
showPopupTourist: false,
|
||
showPopupDetailed: false,
|
||
showPopupHourTime: false,
|
||
touristTitle: '',
|
||
touristForm: { name: '', mobile: '', idCard: '' },
|
||
current: 0,
|
||
timeList: [],
|
||
hourTimeList: [],
|
||
arrivalTime: '',
|
||
isTime: null,
|
||
isHourTime: null,
|
||
selectValue: [],
|
||
selectItem: [],
|
||
tenantsList: [],
|
||
visitorList: [],
|
||
|
||
// 全日房
|
||
startTime: '',
|
||
endTime: '',
|
||
startDatePage: '',
|
||
stopDatePage: '',
|
||
nightsPage: null,
|
||
// 钟点房
|
||
hourDate: '',
|
||
// 可选择开始时间
|
||
startHourSlot: '',
|
||
// 可选择结束时间
|
||
endHourSlot: '',
|
||
|
||
contactMobile: '',
|
||
contactNames: '',
|
||
cancelRule: ''
|
||
}
|
||
},
|
||
onLoad (options) {
|
||
this.id = options.id;
|
||
this.hotelId = options.hotelId;
|
||
this.hourDate = options.hourDate;
|
||
this.windowBottom = this.$safeAreaBottom || uni.upx2px(24);
|
||
if (this.hourDate) {
|
||
this.isNum = 1;
|
||
this.visitorList = [{
|
||
name: '',
|
||
id: ''
|
||
}]
|
||
} else {
|
||
if (uni.getStorageSync('hotel_date')) {
|
||
let hotelDate = uni.getStorageSync('hotel_date');
|
||
this.startTime = hotelDate[0];
|
||
this.endTime = hotelDate[1];
|
||
this.startDatePage = this.$moment(hotelDate[0]).format("MM月DD日");
|
||
this.stopDatePage = this.$moment(hotelDate[1]).format("MM月DD日");
|
||
this.nightsPage = this.$moment(hotelDate[1]).diff(this.$moment(hotelDate[0]), 'days');
|
||
}
|
||
if (uni.getStorageSync('hotel_room')) {
|
||
let numData = uni.getStorageSync('hotel_room');
|
||
this.isNum = numData.room;
|
||
for (var i = 0; i < this.isNum; i ++) {
|
||
this.visitorList.push({
|
||
name: '',
|
||
id: ''
|
||
})
|
||
}
|
||
}
|
||
this.common();
|
||
}
|
||
this.getDetail();
|
||
this.getVisitor();
|
||
this.getUserInfo();
|
||
},
|
||
|
||
methods: {
|
||
async getDetail() {
|
||
let params = {
|
||
roomClassifyId: this.id,
|
||
startTime: this.hourDate || this.startTime,
|
||
endTime: this.hourDate || this.endTime
|
||
}
|
||
let res=null;
|
||
if (this.hourDate) {
|
||
// 钟点房
|
||
res = await this.$http.hourClassifyDetail(params);
|
||
} else {
|
||
// 全日房
|
||
res = await this.$http.classifyDetail(params);
|
||
}
|
||
res.data.image = res.data.image.split(',');
|
||
this.detail=res.data;
|
||
this.detail.imageLength = this.detail.image.length;
|
||
this.totalPrice = 0;
|
||
let num = 0;
|
||
this.detail.datePrices.forEach(e => {
|
||
num += e.price * this.isNum;
|
||
})
|
||
this.totalPrice = num.toFixed(2);
|
||
this.getHotelDetail();
|
||
|
||
if (this.detail.cancelRuleType == 3) {
|
||
let cancelRuleContent = JSON.parse(this.detail.cancelRuleContent);
|
||
if (Number(cancelRuleContent[0].handlingFee)) {
|
||
this.cancelRule = `入住当天${cancelRuleContent[0].start}后取消，将收取额外费用`;
|
||
} else {
|
||
this.cancelRule = `入住当天${cancelRuleContent[0].end}前可免费取消，超期将收取额外费用`;
|
||
}
|
||
}
|
||
|
||
if (!this.detail.quantity) {
|
||
uni.$u.toast('该房型已订完');
|
||
}
|
||
},
|
||
async getHotelDetail() {
|
||
let res=await this.$http.homestayId(this.hotelId);
|
||
this.hotelDetail=res.data;
|
||
if (this.hourDate) {
|
||
this.hotelDetail.hourRoomCheckInTimeHm = this.hotelDetail.hourRoomCheckInTime.slice(0, 5);
|
||
this.hotelDetail.hourRoomLeaveTimeHm = this.hotelDetail.hourRoomLeaveTime.slice(0, 5);
|
||
this.getHourTimeList();
|
||
}
|
||
},
|
||
async getVisitor() {
|
||
let info = await this.$http.touristList();
|
||
this.tenantsList = info.rows;
|
||
let f = this.tenantsList.find(m => m.status == 1)
|
||
if (!this.visitorList[0].id && f) {
|
||
this.selectValue = [f.id];
|
||
this.selectItem = [{name: f.name, id: f.id}];
|
||
this.visitorList[0] = {
|
||
name: f.name,
|
||
id: f.id
|
||
}
|
||
}
|
||
},
|
||
async getUserInfo() {
|
||
let info = await this.$http.getUserInfo()
|
||
if (info.code === 200) {
|
||
this.contactMobile = info.data.mobile;
|
||
this.contactNames = info.data.name;
|
||
} else {
|
||
uni.$u.toast(info.msg);
|
||
}
|
||
},
|
||
async common() {
|
||
const params = {
|
||
dictType: 'hotel_homestay_estimated_arrival_time'
|
||
}
|
||
let info = await this.$http.common(params)
|
||
if (info.code === 200) {
|
||
// 当前日期是否早于入住日期
|
||
if (this.$moment().isBefore(this.startTime)) {
|
||
this.timeList = info.data;
|
||
} else {
|
||
let today = [];
|
||
let morrow = [];
|
||
info.data.forEach(e => {
|
||
if (e.dictValue.split('|')[0] == 1) {
|
||
morrow.push(e);
|
||
} else {
|
||
let t = this.startTime + ' ' + e.dictValue.split('|')[1];
|
||
if (this.$moment(t).diff(this.$moment(), 'minutes') > 0) {
|
||
today.push(e);
|
||
}
|
||
}
|
||
})
|
||
this.timeList = this.timeList.concat(today).concat(morrow);
|
||
}
|
||
this.isTime = this.timeList[0].dictValue;
|
||
this.arrivalTime = this.timeList[0].dictLabel;
|
||
} else {
|
||
uni.$u.toast(info.msg);
|
||
}
|
||
},
|
||
handleKeyboardChange (e) {
|
||
this.$nextTick(() => {
|
||
this.keyboardHeight = e.detail.height
|
||
})
|
||
},
|
||
showHotel() {
|
||
this.expand = !this.expand;
|
||
},
|
||
changeNum(i) {
|
||
this.isNum = i + 1;
|
||
this.totalPrice = 0;
|
||
let num = 0;
|
||
this.detail.datePrices.forEach(e => {
|
||
num += e.price * this.isNum;
|
||
})
|
||
this.totalPrice = num.toFixed(2);
|
||
if (this.visitorList.length > this.isNum) {
|
||
this.visitorList = this.visitorList.slice(0, this.isNum);
|
||
this.goCancel();
|
||
}
|
||
if (this.visitorList.length < this.isNum) {
|
||
let num = this.isNum - this.visitorList.length;
|
||
for (var i = 0; i < num; i ++) {
|
||
this.visitorList.push({
|
||
name: '',
|
||
id: ''
|
||
})
|
||
};
|
||
}
|
||
},
|
||
typeDetail() {
|
||
this.showPopupType = true;
|
||
},
|
||
readDetail () {
|
||
this.showPopupRead = true;
|
||
},
|
||
timeDetail() {
|
||
this.showPopupTime = true;
|
||
},
|
||
changeTime(i) {
|
||
this.isTime = i.dictValue;
|
||
this.arrivalTime = i.dictLabel;
|
||
this.showPopupTime = false;
|
||
},
|
||
getHourTimeList() {
|
||
// 可选择结束时间
|
||
this.endHourSlot = this.$moment(this.hourDate + ' ' + this.hotelDetail.hourRoomLeaveTime).subtract(1, 'hours').format("YYYY-MM-DD HH:mm:ss");
|
||
// 当前日期
|
||
let timeNow = this.$moment().format("YYYY-MM-DD HH:mm:ss");
|
||
// 当前时
|
||
let timeNowH = this.$moment(timeNow).format("HH");
|
||
// 当前分
|
||
let timeNowM = this.$moment(timeNow).format("mm");
|
||
// 判断当前日期是否早于钟点房预定日期
|
||
if (this.$moment(timeNow.split(' ')[0]).isBefore(this.hourDate)) {
|
||
this.startHourSlot = this.hourDate + ' ' + this.hotelDetail.hourRoomCheckInTime;
|
||
} else {
|
||
if (Number(timeNowM) < 30) {
|
||
this.startHourSlot = timeNow.split(' ')[0] + ' ' + timeNowH + ':30:00';
|
||
} else {
|
||
this.startHourSlot = timeNow.split(' ')[0] + ' ' + this.$moment(timeNow).add(1, 'hours').format("HH") + ':00:00';
|
||
}
|
||
}
|
||
this.getHourSlot(this.startHourSlot);
|
||
},
|
||
getHourSlot(e) {
|
||
let time = this.$moment(e).add(this.detail.duration, 'hours').format("YYYY-MM-DD HH:mm:ss")
|
||
let duration = this.$moment(this.hourDate + ' ' + this.hotelDetail.hourRoomLeaveTime).diff(this.$moment(time), 'minutes');
|
||
if (duration >= 0) {
|
||
this.hourTimeList.push({
|
||
value: e.split(' ')[1].slice(0, 5) + '-' + time.split(' ')[1].slice(0, 5),
|
||
label: e.split(' ')[1].slice(0, 5) + '-' + time.split(' ')[1].slice(0, 5),
|
||
duration: this.detail.duration + '小时'
|
||
})
|
||
} else {
|
||
let totleTime = this.$moment(this.hourDate + ' ' + this.hotelDetail.hourRoomLeaveTime).diff(this.$moment(e), 'minutes');
|
||
if (totleTime >= 60) {
|
||
let H = Math.floor(totleTime / 60);
|
||
let M = totleTime % 60;
|
||
this.hourTimeList.push({
|
||
value: e.split(' ')[1].slice(0, 5) + '-' + this.hotelDetail.hourRoomLeaveTimeHm,
|
||
label: e.split(' ')[1].slice(0, 5) + '-' + this.hotelDetail.hourRoomLeaveTimeHm + '(可入住' + ( H ? H + '小时' : '') + ( M ? M + '分钟' : '') + ')',
|
||
duration: ( H ? H + '小时' : '') + ( M ? M + '分钟' : '')
|
||
})
|
||
}
|
||
}
|
||
if (!this.isHourTime) this.isHourTime = this.hourTimeList[0];
|
||
let f = this.$moment(e).add(30, 'minutes').format("YYYY-MM-DD HH:mm:ss");
|
||
let d = this.$moment(this.hourDate + ' ' + this.hotelDetail.hourRoomLeaveTime).diff(this.$moment(f), 'minutes');
|
||
if (d >= 60) {
|
||
this.getHourSlot(f);
|
||
}
|
||
},
|
||
timeSlotDetail() {
|
||
this.hourTimeList = [];
|
||
this.getHourTimeList();
|
||
this.showPopupHourTime = true;
|
||
},
|
||
changeHourTime(i) {
|
||
this.isHourTime = i;
|
||
this.showPopupHourTime = false;
|
||
},
|
||
tenantsDetail() {
|
||
this.showPopupTenants = true;
|
||
},
|
||
changeSwiper(e) {
|
||
this.current = e.detail.current;
|
||
},
|
||
changeTenants(i) {
|
||
const index = this.selectValue.indexOf(i.id);
|
||
if (index == -1) {
|
||
if (this.selectValue.length < this.visitorList.length) {
|
||
this.selectValue.push(i.id);
|
||
this.selectItem.push({name: i.name, id: i.id});
|
||
} else {
|
||
uni.showToast({ mask: true, title: `最多可选择${this.visitorList.length}位入住人`, icon: 'none' })
|
||
}
|
||
} else {
|
||
this.selectValue.splice(index, 1);
|
||
this.selectItem.splice(index, 1);
|
||
}
|
||
},
|
||
goCancel() {
|
||
this.showPopupTenants = false;
|
||
this.selectValue = [];
|
||
this.selectItem = [];
|
||
this.visitorList.forEach(e => {
|
||
if (e.id) {
|
||
this.selectValue.push(e.id);
|
||
this.selectItem.push({name: e.name, id: e.id});
|
||
}
|
||
})
|
||
},
|
||
goConfirm() {
|
||
this.visitorList.forEach((e, i) => {
|
||
e.name = this.selectItem[i]?.name || '';
|
||
e.id = this.selectItem[i]?.id || '';
|
||
})
|
||
this.showPopupTenants = false;
|
||
},
|
||
editVisitor(info) {
|
||
this.touristForm = { name: info.name, mobile: info.mobile, idCard: info.idCard, id: info.id };
|
||
this.touristTitle = '编辑常旅客';
|
||
this.showPopupTenants = false;
|
||
this.showPopupTourist = true;
|
||
},
|
||
addVisitor() {
|
||
this.touristForm = { name: '', mobile: '', idCard: '' };
|
||
this.touristTitle = '新增常旅客';
|
||
this.showPopupTenants = false;
|
||
this.showPopupTourist = true;
|
||
},
|
||
closeTourist() {
|
||
this.showPopupTourist = false;
|
||
this.showPopupTenants = true;
|
||
},
|
||
async saveTourist () {
|
||
if (!this.touristForm.name) {
|
||
uni.showToast({ mask: true, title: '请输入姓名', icon: 'none' })
|
||
return false;
|
||
}
|
||
if (!this.$utils.checkStr(this.touristForm.idCard, 'card')) {
|
||
uni.showToast({ mask: true, title: '请输入正确的证件号', icon: 'none' })
|
||
return false;
|
||
}
|
||
if (!this.$utils.checkStr(this.touristForm.mobile, 'mobile')) {
|
||
uni.showToast({ mask: true, title: '请输入正确的手机号', icon: 'none' })
|
||
return false;
|
||
}
|
||
let info = null;
|
||
if (this.touristForm.id) {
|
||
info = await this.$http.updateTourist(this.touristForm);
|
||
} else {
|
||
info = await this.$http.addTourist(this.touristForm);
|
||
}
|
||
if (info.code == 200) {
|
||
uni.showToast({ mask: true, title: '操作成功', icon: 'success' });
|
||
this.closeTourist();
|
||
this.getVisitor();
|
||
}
|
||
},
|
||
async predetermine() {
|
||
for (var i = 0; i < this.isNum; i ++) {
|
||
if (!this.selectValue[i]) {
|
||
uni.showToast({ mask: true, title: '请选择入住人', icon: 'none' });
|
||
return false;
|
||
}
|
||
};
|
||
if (this.hourDate) {
|
||
if (!this.isHourTime) {
|
||
uni.showToast({ mask: true, title: '请选择入住时段', icon: 'none' })
|
||
return false;
|
||
}
|
||
} else {
|
||
if (!this.isTime) {
|
||
uni.showToast({ mask: true, title: '请选择预计到店时间', icon: 'none' })
|
||
return false;
|
||
}
|
||
}
|
||
let params = {
|
||
hotelHomestayId: this.hotelId,
|
||
contactMobile: this.contactMobile,
|
||
contactNames: this.contactNames,
|
||
roomQuantity: this.isNum,
|
||
roomClassifyId: this.id,
|
||
zdyUserTouristIds: this.selectValue
|
||
}
|
||
if (this.hourDate) {
|
||
params.stayType = 'HOURLY';
|
||
params.inDate = this.hourDate;
|
||
params.outDate = this.hourDate;
|
||
params.inTime = this.isHourTime.value.split('-')[0];
|
||
params.outTime = this.isHourTime.value.split('-')[1];
|
||
} else {
|
||
params.inDate = this.startTime;
|
||
params.outDate = this.endTime;
|
||
params.estimatedArrivalTime = this.isTime;
|
||
|
||
}
|
||
let res=await this.$http.hotelOrder(params);
|
||
uni.navigateTo({ url: `/pages/hotel/submitOrder?id=${res.data.id}&hotelId=${this.hotelId}` })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.waper { min-height: 100vh; }
|
||
.content{
|
||
width: 100%; box-sizing: border-box; padding: 24rpx; background-color: #F6F6F6;
|
||
.top_box {
|
||
background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
|
||
.hour_date {
|
||
display: flex; align-items: center; margin-bottom: 20rpx;
|
||
view {
|
||
&:first-child {font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); margin-right: 8rpx;}
|
||
&:last-child {font-size: 24rpx; color: rgba(0,0,0,0.45);}
|
||
}
|
||
}
|
||
.name { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); margin-bottom: 2rpx; }
|
||
.row {
|
||
margin-top: 19rpx; display: flex; align-items: center; justify-content: space-between;
|
||
.label { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
||
.label1 {
|
||
display: flex; align-items: baseline;
|
||
.text { font-size: 24rpx; color: #03AE80; margin-left: 10rpx; }
|
||
}
|
||
.alc {align-items: center;}
|
||
.type {
|
||
display: flex; align-items: center;
|
||
text { font-size: 24rpx; color: #03AE80; margin-right: 4rpx; }
|
||
}
|
||
}
|
||
.tags_box {
|
||
display: flex; align-items: center; margin-top: 11rpx;
|
||
.tag {
|
||
padding: 0 16rpx; position: relative; font-size: 24rpx; color: rgba(0,0,0,0.45);
|
||
&::after{ content: ""; width: 1rpx; height: 23rpx; background: #ECEAEA; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
||
&:first-child { padding-left: 0; }
|
||
&:last-child {
|
||
padding-right: 0;
|
||
&::after {display: none;}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.center_box {
|
||
margin-top: 22rpx; background: #FFFFFF; border-radius: 10rpx 10rpx 0 0; padding: 32rpx 24rpx 0; box-sizing: border-box;
|
||
.label { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); }
|
||
.col {
|
||
padding: 24rpx 0; border-bottom: 1rpx solid #ECEAEA; display: flex; align-items: center;
|
||
.left { width: 154rpx; font-size: 28rpx; color: rgba(0,0,0,0.65); }
|
||
.center {
|
||
flex: 1; display: flex; align-items: center; justify-content: space-between; padding-left: 30rpx;
|
||
view {
|
||
&:first-child {
|
||
font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); display: flex; align-items: center;
|
||
text { font-size: 24rpx; color: rgba(0,0,0,0.45); margin-left: 8rpx; }
|
||
}
|
||
&:last-child { font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
||
}
|
||
.residue { color: #E54042 !important; margin-right: 12rpx; }
|
||
}
|
||
.right { width: 43rpx; text-align: right; }
|
||
}
|
||
.col1 {
|
||
align-items: baseline;
|
||
.center1 {
|
||
flex: 1; padding-left: 30rpx;
|
||
.cet_top {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
view {font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85);}
|
||
}
|
||
.cet_bot {
|
||
margin-top: 12rpx; font-size: 24rpx; color: rgba(0,0,0,0.45);
|
||
text {color: #03AE80;}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.rooms_box {
|
||
margin-top: 24rpx; display: flex; align-items: center; flex-wrap: wrap; padding: 0 24rpx; box-sizing: border-box;
|
||
.num {
|
||
width: 118rpx; height: 64rpx; background: #FFFFFF; border-radius: 4rpx; line-height: 64rpx; text-align: center; font-size: 26rpx; color: rgba(0,0,0,0.65); margin-right: 15rpx; margin-bottom: 24rpx;
|
||
&:nth-child(5n) { margin-right: 0; }
|
||
}
|
||
.activeNum { background: rgba(71,175,195,0.1); border: 1rpx solid #03AE80; color: #03AE80; }
|
||
}
|
||
.bottom_box {
|
||
background: #FFFFFF; border-radius: 0 0 10rpx 10rpx; padding: 0 24rpx; box-sizing: border-box;
|
||
.col {
|
||
display: flex; align-items: center; border-bottom: 1rpx solid #ECEAEA;
|
||
&:last-child { border-bottom: none; }
|
||
.left { width: 154rpx; font-size: 28rpx; color: rgba(0,0,0,0.65); }
|
||
.center {
|
||
flex: 1; display: flex; align-items: center; height: 90rpx; padding-left: 30rpx;
|
||
view {
|
||
font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85);
|
||
}
|
||
.code { margin-right: 18rpx; }
|
||
.line { width: 1rpx; height: 28rpx; background-color: #ECEAEA; margin: 0 18rpx; }
|
||
}
|
||
.center1 {
|
||
flex: 1;
|
||
.col1 {
|
||
display: flex; align-items: center; border-bottom: 1rpx solid #ECEAEA;
|
||
&:last-child { border-bottom: none; }
|
||
.key { width: 154rpx; font-size: 28rpx; color: rgba(0,0,0,0.65); }
|
||
.name { flex: 1; height: 90rpx; line-height: 90rpx; padding-left: 30rpx; font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
||
}
|
||
}
|
||
.right {
|
||
width: 43rpx; text-align: right;
|
||
.yq {
|
||
width: 34rpx; height: 34rpx; border-radius: 50%; border: 1rpx solid #03AE80; position: relative;
|
||
/deep/.u-icon__icon {position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.footer {
|
||
width: 100%; background: #FFFFFF; padding: 24rpx 24rpx 0; box-sizing: border-box; position: fixed; left: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
|
||
.left {
|
||
display: flex; align-items: baseline;
|
||
.label { font-size: 28rpx; color: #000000; margin-right: 12rpx; }
|
||
.price {
|
||
font-weight: bold; font-size: 56rpx; color: #E54042; margin-right: 20rpx;
|
||
.unit { font-size: 28rpx; color: #E54042; }
|
||
}
|
||
}
|
||
.right {
|
||
display: flex; align-items: center;
|
||
.detailed {
|
||
display: flex; align-items: center;
|
||
.label { font-size: 28rpx; color: rgba(0,0,0,0.85); margin-right: 8rpx; }
|
||
}
|
||
.btn { width: 270rpx; height: 68rpx; background: #03AE80; border-radius: 60rpx; line-height: 68rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: #FFFFFF; margin-left: 24rpx; }
|
||
.btn1 {background-color: #BFBFBF;}
|
||
}
|
||
}
|
||
/deep/.u-popup__content {overflow: hidden;}
|
||
.type_con {
|
||
position: relative;
|
||
.close {
|
||
position: absolute; top: 32rpx; right: 24rpx; z-index: 1; width: 56rpx; height: 56rpx; background: rgba(0,0,0,0.4); border-radius: 50%;
|
||
::v-deep .u-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
|
||
}
|
||
.scroll { max-height: 80vh; }
|
||
.swiper{
|
||
width: 100%; height: 500rpx; position: relative;
|
||
swiper{ width: 100%; height: 100%; }
|
||
.current{ padding: 0 20rpx; height: 40rpx; line-height: 40rpx; color: #fff; background: rgba(0, 0, 0, 0.5); font-size: 24rpx; border-radius: 50rpx; position: absolute; right: 24rpx; bottom: 24rpx; }
|
||
}
|
||
.specs {
|
||
background: #FFFFFF; padding: 24rpx 24rpx 32rpx; box-sizing: border-box;
|
||
.title { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); margin-bottom: 6rpx; }
|
||
.list_box {
|
||
display: flex; align-items: center; flex-wrap: wrap;
|
||
.item {
|
||
margin-top: 18rpx; width: 33.33%; display: flex; align-items: center;
|
||
image { width: 28rpx; height: 28rpx; }
|
||
view {
|
||
margin-left: 12rpx; font-size: 24rpx; color: rgba(0,0,0,0.85);
|
||
.text { color: #03AE80; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.occupying { width: 100%; height: 22rpx; background-color: #F6F6F6; }
|
||
.policy {
|
||
background: #FFFFFF; padding: 22rpx 24rpx 24rpx; box-sizing: border-box;
|
||
.title { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); padding-bottom: 7rpx; }
|
||
.list {
|
||
.item {
|
||
border-bottom: 2rpx solid #ECEAEA; padding: 24rpx 0;
|
||
&:last-child { border-bottom: none; }
|
||
.label { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); margin-bottom: 16rpx; }
|
||
.text { font-size: 24rpx; color: rgba(0,0,0,0.45); line-height: 28rpx; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.read_con {
|
||
padding: 32rpx;
|
||
.head {
|
||
position: relative; text-align: center; margin-bottom: 30rpx;
|
||
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
|
||
.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
||
}
|
||
.scroll { max-height: 60vh; }
|
||
.row {
|
||
.title {margin-top: 24rpx; font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85);}
|
||
.con {
|
||
margin-top: 16rpx; font-size: 28rpx; color: rgba(0,0,0,0.65); line-height: 33rpx;
|
||
text:first-child {color: rgba(0,0,0,0.45);}
|
||
}
|
||
}
|
||
}
|
||
.time_con {
|
||
padding: 32rpx 32rpx 0;
|
||
.head {
|
||
margin-bottom: 44rpx;
|
||
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
|
||
.text { margin-top: 8rpx; font-size: 28rpx; color: rgba(0,0,0,0.25); }
|
||
}
|
||
.head1 {
|
||
position: relative; text-align: center; margin-bottom: 30rpx;
|
||
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
|
||
.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
||
}
|
||
.scroll { max-height: 60vh; }
|
||
.time_box {
|
||
display: flex; align-items: center; flex-wrap: wrap;
|
||
.time {
|
||
width: 214rpx; height: 64rpx; background: #F6F7F9; border-radius: 4rpx; line-height: 64rpx; text-align: center; margin: 0 21rpx 16rpx 0; font-size: 26rpx; color: rgba(0,0,0,0.65);
|
||
&:nth-child(3n) { margin-right: 0; }
|
||
}
|
||
.activeTime { background: rgba(71,175,195,0.1); border: 1rpx solid #03AE80; color: #03AE80; }
|
||
}
|
||
.time_box1 {
|
||
.time {
|
||
width: 100%; height: 64rpx; background: #F6F7F9; border-radius: 4rpx; line-height: 64rpx; text-align: center; margin-bottom: 16rpx; font-size: 26rpx; color: rgba(0,0,0,0.65); box-sizing: border-box;
|
||
}
|
||
.activeTime { background: rgba(71,175,195,0.1); border: 1rpx solid #03AE80; color: #03AE80; }
|
||
}
|
||
}
|
||
.tenants_con {
|
||
padding: 32rpx 24rpx 24rpx;
|
||
.head {
|
||
margin-bottom: 30rpx; display: flex; align-items: center; justify-content: space-between;
|
||
.cancel, .confirm { font-size: 34rpx; color: rgba(0,0,0,0.85); }
|
||
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
|
||
}
|
||
.scroll { max-height: 60vh; }
|
||
.item {
|
||
padding: 24rpx 0; border-bottom: 1rpx solid #ECEAEA; display: flex; align-items: center; justify-content: space-between;
|
||
&:last-child { border-bottom: none; }
|
||
.left {
|
||
display: flex; align-items: center;
|
||
.noChange { width: 32rpx; height: 32rpx; border: 1rpx solid rgba(0,0,0,0.25); }
|
||
.isChange {
|
||
width: 32rpx; height: 32rpx; border: 1rpx solid #03AE80; background-color: #03AE80; position: relative;
|
||
::v-deep .u-icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
|
||
}
|
||
.name { margin-left: 24rpx; font-size: 28rpx; color: rgba(0,0,0,0.65); }
|
||
.name1 { color: rgba(0,0,0,0.85); }
|
||
}
|
||
}
|
||
.btn {
|
||
width: 654rpx; height: 90rpx; background: #FFFFFF; border-radius: 4rpx; border: 2rpx solid #03AE80; margin: 198rpx auto 0; display: flex; align-items: center; justify-content: center;
|
||
view { margin-left: 12rpx; font-weight: 500; font-size: 32rpx; color: #03AE80; }
|
||
}
|
||
}
|
||
.tourist_box{
|
||
width: 100%;
|
||
.popup-tourist{ width: 100%; }
|
||
}
|
||
.detailed_con {
|
||
padding: 32rpx 0 150rpx; position: relative;
|
||
.head {
|
||
position: relative; text-align: center; margin: 0 32rpx 30rpx;
|
||
.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
|
||
.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
||
}
|
||
.add {
|
||
padding: 54rpx 0 24rpx; margin: 0 32rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #ECEAEA;
|
||
.label { font-size: 32rpx; color: rgba(0,0,0,0.85); }
|
||
.all {
|
||
font-size: 28rpx; color: rgba(0,0,0,0.85);
|
||
text { font-weight: bold; font-size: 28rpx; color: #E54042; }
|
||
}
|
||
}
|
||
.row {
|
||
padding: 0 32rpx;
|
||
.col {
|
||
display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx;
|
||
&:first-child {
|
||
margin: 24rpx 0 13rpx;
|
||
.key, .value { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
|
||
}
|
||
.key, .value { font-size: 28rpx; color: rgba(0,0,0,0.65); }
|
||
}
|
||
}
|
||
.footer {
|
||
width: 100%; background: #FFFFFF; padding: 24rpx 24rpx 0; box-sizing: border-box; position: fixed; left: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between;
|
||
.left {
|
||
display: flex; align-items: baseline;
|
||
.label { font-size: 28rpx; color: #000000; margin-right: 12rpx; }
|
||
.price {
|
||
font-weight: bold; font-size: 56rpx; color: #E54042; margin-right: 20rpx;
|
||
.unit { font-size: 28rpx; color: #E54042; }
|
||
}
|
||
}
|
||
.right {
|
||
display: flex; align-items: center;
|
||
.detailed {
|
||
display: flex; align-items: center;
|
||
.label { font-size: 28rpx; color: rgba(0,0,0,0.85); margin-right: 8rpx; }
|
||
}
|
||
.btn { width: 270rpx; height: 68rpx; background: #03AE80; border-radius: 60rpx; line-height: 68rpx; text-align: center; font-weight: 500; font-size: 32rpx; color: #FFFFFF; margin-left: 24rpx; }
|
||
.btn1 {background-color: #BFBFBF;}
|
||
}
|
||
}
|
||
}
|
||
</style> |