zhwl-miniapp/pages/hotel/detail.vue
2025-06-26 12:38:35 +08:00

947 lines
38 KiB
Vue

<template>
<view class="waper">
<u-navbar :autoBack="true" :bgColor="scrollTop > 10 ? '#fff' : 'transparent'" :leftIconColor="scrollTop > 10 ? '#303133' : '#fff'">
<view slot='center' class="navbar_title">{{scrollTop > 10 ? '酒店详情' : ''}}</view>
</u-navbar>
<view class="fixed" v-if="scrollTop > paddingTop" :style="'top: ' + navHeight + 'px;'">
<view class="tabs_box">
<view :class="['tabs', isTabs == index ? 'activeTabs' : '']" v-for="(item, index) in tabList" :key="index" @click="changeTab(index)">
<text>{{item}}</text>
<view class="line" v-if="isTabs == index"></view>
</view>
</view>
<view class="date" v-if="isType.indexOf(hourRoomClassifyIds) == -1">
<view class="left" @click="checkInDate">
<view class="time">
<view>{{startDatePage}}</view>
<view>{{startWeekPage}}</view>
</view>
<view class="site">{{nightsPage}}晚</view>
<view class="time">
<view>{{stopDatePage}}</view>
<view>{{stopWeekPage}}</view>
</view>
</view>
<view class="right" @click="selectNum">{{numData.room}}间·{{numData.adult + numData.children}}人</view>
</view>
<view class="date" v-if="isType.indexOf(hourRoomClassifyIds) != -1">
<view class="left" @click="checkInDate">
<view class="time">
<view>{{startDatePageHour}}</view>
<view>{{startWeekPageHour}}</view>
</view>
</view>
</view>
</view>
<view class="swiper">
<swiper :autoplay="true" :current="current" circular @change="changeSwiper">
<swiper-item v-for="(i, index) in detail.carouselImage" :key="index">
<image :src="$utils.setImgUrl(i)" mode=""></image>
</swiper-item>
</swiper>
<view class="current">{{current + 1}}/{{detail.imageLength}}</view>
</view>
<view class="content">
<view class="info">
<view class="title">{{detail.name}}</view>
<view class="time">
<view class="left">
<view class="text">{{detail.openingTime}}年开业</view>
<view class="tag">
<view v-for="(m, x) in detail.label" :key="x">{{m}}</view>
</view>
</view>
<view class="right" @click="detailPage">
<view class="text">详情/设施</view>
<u-icon name="arrow-right" color="#03AE80" size="28rpx"></u-icon>
</view>
</view>
<view class="address">
<view class="left">
<view class="area" v-if="detail.address">{{detail.address}}</view>
<view class="msg" v-if="distance != null">
<view class="msg_icon">
<image src="../../static/image/eatery/local.png" mode=""></image>
</view>
<view class="text">距您{{distance}}公里</view>
</view>
</view>
<view class="right" @click="openLocation">
<view class="right_icon">
<image src="../../static/home/location.png" mode=""></image>
</view>
<!-- <view class="text">地图</view> -->
</view>
</view>
</view>
<view class="content_waper">
<view class="date" v-if="isType.indexOf(hourRoomClassifyIds) == -1">
<view class="left" @click="checkInDate">
<view class="time">
<view>{{startDatePage}}</view>
<view>{{startWeekPage}}</view>
</view>
<view class="site">{{nightsPage}}晚</view>
<view class="time">
<view>{{stopDatePage}}</view>
<view>{{stopWeekPage}}</view>
</view>
</view>
<view class="right" @click="selectNum">{{numData.room}}间·{{numData.adult + numData.children}}人</view>
</view>
<view class="date" v-if="isType.indexOf(hourRoomClassifyIds) != -1">
<view class="left" @click="checkInDate">
<view class="time">
<view>{{startDatePageHour}}</view>
<view>{{startWeekPageHour}}</view>
</view>
</view>
</view>
<view class="types_box">
<scroll-view class="scroll_waper" scroll-x="true">
<view :class="['types', isType.indexOf(item.roomClassifyIds) != -1 ? 'activeType' : '']" v-for="(item, index) in typesList" :key="index" @click="changeType(item)">
<text>{{item.name}}</text>
<image class="atvIcon" v-if="isType.indexOf(item.roomClassifyIds) != -1" src="https://date_active.png" mode=""></image>
</view>
</scroll-view>
</view>
<view v-if="infoList !== null && infoList.length">
<view class="recommendText">
<u-icon name="thumb-up" color="#E54042" size="28rpx"></u-icon>
<view class="tips">为您推荐的房型</view>
</view>
<view class="shop">
<view class="list" v-for="(i, index) in infoList" :key="index" @click="goDetail(i.id)">
<view class="img">
<image :src="$utils.setImgUrl(i.image.split(',')[0])" mode=""></image>
<view>{{i.image.split(',').length}}</view>
</view>
<view :class="['text', !i.quantity ? 'grey' : '']">
<view class="title">{{i.level2Name}}</view>
<view class="tag">
<view v-if="i.bedType">{{i.bedType}}</view>
<view v-if="i.limitedLivePerson">{{i.limitedLivePerson}}人入住</view>
<view v-if="i.window">{{i.window}}</view>
<view v-if="i.breakfast">{{i.breakfast}}</view>
</view>
<view class="msg">{{i.cancelRuleTypeDesc}}</view>
<view class="fot">
<view class="surplus"><text v-if="i.quantity">剩余{{i.quantity}}间</text></view>
<view class="money">
<view>¥{{i.datePrices[0].originalPrice}}</view>
<view>
<text>¥</text>{{i.datePrices[0].price}}
</view>
</view>
</view>
<view class="btn" @click.stop="reserve(i)">
<view> {{ i.quantity ? '订' : '满' }} </view>
<view> {{ i.quantity ? '在线付' : '已订完' }} </view>
</view>
</view>
</view>
</view>
</view>
<view v-if="recommendList !== null && recommendList.length">
<view class="recommendText col1">
<u-icon name="info-circle" color="#03AE80" size="28rpx"></u-icon>
<view class="tips">可供您自由组合的房型</view>
</view>
<view class="shop">
<view class="list" v-for="(i, index) in recommendList" :key="index" @click="goDetail(i.id)">
<view class="img">
<image :src="$utils.setImgUrl(i.image.split(',')[0])" mode=""></image>
<view>{{i.image.split(',').length}}</view>
</view>
<view :class="['text', !i.quantity ? 'grey' : '']">
<view class="title">{{i.level2Name}}</view>
<view class="tag">
<view v-if="i.bedType">{{i.bedType}}</view>
<view v-if="i.limitedLivePerson">{{i.limitedLivePerson}}人入住</view>
<view v-if="i.window">{{i.window}}</view>
<view v-if="i.breakfast">{{i.breakfast}}</view>
</view>
<view class="msg">{{i.cancelRuleTypeDesc}}</view>
<view class="fot">
<view class="surplus"><text v-if="i.quantity">剩余{{i.quantity}}间</text></view>
<view class="money">
<view>¥{{i.datePrices[0].originalPrice}}</view>
<view>
<text>¥</text>{{i.datePrices[0].price}}
</view>
</view>
</view>
<view class="btn" @click.stop="reserve(i)">
<view> {{ i.quantity ? '订' : '满' }} </view>
<view> {{ i.quantity ? '在线付' : '已订完' }} </view>
</view>
</view>
</view>
</view>
</view>
<view class="facilities" id="target">
<view class="active">
<text>设施服务</text>
<image src="../../static/home/title_bg.png" mode=""></image>
</view>
<view class="list_box">
<view class="item" v-for="(item, index) in ssList1" :key="index">
<image :src="$utils.setImgUrl(item.logo)" mode=""></image>
<view>{{item.name}}</view>
</view>
<view class="item" v-if="!allFlag" v-for="(item, index) in ssList2" :key="index">
<image :src="$utils.setImgUrl(item.logo)" mode=""></image>
<view>{{item.name}}</view>
</view>
</view>
<view class="all" v-if="allFlag" @click="allFlag = !allFlag">
全部设施
<u-icon name="arrow-right" color="#03AE80" size="28rpx"></u-icon>
</view>
</view>
<view class="policy">
<view class="active">
<text>订房必读</text>
<image src="../../static/home/title_bg.png" mode=""></image>
</view>
<view class="row">
<view class="label">城市通知</view>
<u-parse :content="detail.importantNotice"></u-parse>
<view class="label">入住限制</view>
<view class="text">{{detail.checkInWay}}</view>
</view>
<view class="col">
<view class="left">
<u-icon name="clock" color="rgba(0,0,0,0.85)" size="28rpx"></u-icon>
</view>
<view class="right">
<view>入离时间</view>
<view>入住时间:{{detail.checkInTime}}之后 离店时间:{{detail.leaveTime}}之前</view>
</view>
</view>
</view>
</view>
</view>
<u-popup :show="showPopupDate" :round="10" mode="bottom">
<view class="date_con" v-if="selected1.length || selected2.length">
<view class="head">
<view class="title">选择日期</view>
<view class="close" @click="closePopup">
<u-icon name="close" color="#000000" size="36rpx" />
</view>
</view>
<view v-if="isType.indexOf(hourRoomClassifyIds) == -1">
<wu-calendar :insert="true" mode="range" :date="[startDate, stopDate]" color="#03AE80" :startDate="calendarStartDate1" :endDate="calendarEndDate1" :lunar="true" :monthShowCurrentMonth="true" :selected="selected1" @change="calendarChange1" startText="入住" endText="离店"></wu-calendar>
<view class="date_fot">
<view class="bot_box">
<view class="box1">
<view class="text">入住</view>
<view class="date">{{startDateActive}} {{startWeekActive}}</view>
</view>
<view class="box2">—</view>
<view class="box1">
<view class="text">离店</view>
<view class="date">{{stopDateActive}} {{stopWeekActive}}</view>
</view>
</view>
<view :class="['btn1', !stopWeekActive ? 'disBtn' : '']" @click="confirm1">确认{{nights}}晚</view>
</view>
</view>
<view v-if="isType.indexOf(hourRoomClassifyIds) != -1">
<wu-calendar :insert="true" :date="startDateHour" color="#03AE80" :startDate="calendarStartDate2" :endDate="calendarEndDate2" :lunar="true" :monthShowCurrentMonth="true" :selected="selected2" @change="calendarChange2"></wu-calendar>
<view class="date_fot">
<view class="bot_box1">
{{startDateActiveHour}} {{startWeekActiveHour}}入住
</view>
<view class="btn1" @click="confirm2">确认</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data () {
return {
navHeight: 0,
paddingTop: 0,
scrollTop: 0,
current: 0,
tabList: ['预定', '详情'],
isTabs: 0,
id: '',
detail: {},
infoList: null,
recommendList: null,
ssList1: [],
ssList2: [],
allFlag: false,
distance: null,
numData: {},
typesList: [],
isType: [],
// 钟点房房型id
hourRoomClassifyIds: null,
// 获取房型入住时间参数
startDateParams: '',
// 获取房型离店时间参数
stopDateParams: '',
// 页面展示入住时间
startDatePage: '',
// 页面展示离店时间
stopDatePage: '',
// 页面展示入住周几
startWeekPage: '',
// 页面展示离店周几
stopWeekPage: '',
// 页面展示入住几晚
nightsPage: 1,
// 获取房型钟点房入住时间参数
startDateParamsHour: '',
// 页面展示钟点房入住时间
startDatePageHour: '',
// 页面展示钟点房入住周几
startWeekPageHour: '',
showPopupDate: false,
// 弹窗展示选中入住时间
startDate: '',
// 弹窗展示选中离店时间
stopDate: '',
// 弹窗展示入住时间
startDateActive: '',
// 弹窗展示离店时间
stopDateActive: '',
// 弹窗展示入住周几
startWeekActive: '',
// 弹窗展示离店周几
stopWeekActive: '',
// 弹窗日历可选开始日期
calendarStartDate1: '',
// 弹窗日历可选结束日期
calendarEndDate1: '',
// 弹窗展示入住几晚
nights: 1,
// 弹窗展示钟点房选中入住时间
startDateHour: '',
// 弹窗展示钟点房入住时间
startDateActiveHour: '',
// 弹窗展示钟点房入住周几
startWeekActiveHour: '',
// 弹窗钟点房日历可选开始日期
calendarStartDate2: '',
// 弹窗钟点房日历可选结束日期
calendarEndDate2: '',
weekList: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
selected1: [],
selected2: []
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
if (this.scrollTop < this.paddingTop) {
this.isTabs = 0;
}
// uni.createSelectorQuery().select('.date_scroll').boundingClientRect(res => {
// this.dateScrollTop = res.top;
// }).exec()
},
onShow() {
this.isType = [];
// 缓存取房间数、人数
if (uni.getStorageSync('hotel_room')) {
this.numData = uni.getStorageSync('hotel_room');
} else {
this.numData = {
room: 1,
adult: 2,
children: 0,
}
uni.setStorageSync('hotel_room', this.numData);
uni.setStorageSync('hotel_children', []);
}
this.getClassify();
},
onLoad (options) {
this.id = options.id;
this.navHeight = this.$paddingTop;
this.paddingTop = this.$paddingTop + uni.upx2px(330);
if (uni.getStorageSync('hotel_date')) {
let hotelDate = uni.getStorageSync('hotel_date');
let nowDate = this.$moment().format("YYYY-MM-DD");
if (this.$moment(hotelDate[0]).isBefore(nowDate)) {
this.getDate();
this.numData = {
room: 1,
adult: 2,
children: 0,
}
uni.setStorageSync('hotel_room', this.numData);
uni.setStorageSync('hotel_children', []);
} else {
this.startDateParams = hotelDate[0];
this.stopDateParams = hotelDate[1];
this.startDatePage = this.$moment(hotelDate[0]).format("MM月DD日");
this.stopDatePage = this.$moment(hotelDate[1]).format("MM月DD日");
this.startWeekPage = this.weekList[this.$moment(hotelDate[0]).day()];
this.stopWeekPage = this.weekList[this.$moment(hotelDate[1]).day()];
this.nightsPage = this.$moment(hotelDate[1]).diff(this.$moment(hotelDate[0]), 'days');
}
} else {
this.getDate();
}
this.startDate = this.startDateParams;
this.stopDate = this.stopDateParams;
this.startDateActive = this.startDatePage;
this.stopDateActive = this.stopDatePage;
this.startWeekActive = this.startWeekPage;
this.stopWeekActive = this.stopWeekPage;
this.nights = this.nightsPage;
this.startDateParamsHour = this.startDateParams;
this.startDatePageHour = this.startDatePage;
this.startWeekPageHour = this.startWeekPage;
this.startDateHour = this.startDateParamsHour;
this.startDateActiveHour = this.startDatePageHour;
this.startWeekActiveHour = this.startWeekPageHour;
this.getDetail();
},
methods: {
getDate() {
this.startDateParams = this.$moment().format("YYYY-MM-DD");
this.stopDateParams = this.$moment().add(1, 'days').format("YYYY-MM-DD");
this.startDatePage = this.$moment().format("MM月DD日");
this.stopDatePage = this.$moment().add(1, 'days').format("MM月DD日");
this.startWeekPage = this.weekList[this.$moment().day()];
this.stopWeekPage = this.weekList[this.$moment().add(1, 'days').day()];
this.nightsPage = 1;
uni.setStorageSync('hotel_date', [this.startDateParams, this.stopDateParams]);
},
async getDetail() {
let res=await this.$http.homestayId(this.id);
res.data.carouselImage = res.data.carouselImage.split(',');
res.data.label = res.data.label.split(',');
res.data.openingTime = res.data.openingTime.split('-')[0];
this.detail=res.data;
this.detail.imageLength = this.detail.carouselImage.length;
if (this.detail.facilitiesList.length > 8) {
this.ssList1 = this.detail.facilitiesList.slice(0, 8);
this.ssList2 = this.detail.facilitiesList.slice(8);
this.allFlag = true;
} else {
this.ssList1 = this.detail.facilitiesList;
this.ssList2 = [];
this.allFlag = false;
}
uni.getLocation({
type: 'gcj02',
isHighAccuracy: true,
success: (res) => {
let latitude = res.latitude;
let longitude = res.longitude;
if (latitude && longitude) {
this.getDistance(latitude, longitude, this.detail.latitude, this.detail.longitude);
}
}
})
},
async getPriceList() {
let params = {
hotelHomestayId: this.id
}
let res = await this.$http.hotelLowestPrice(params);
if (res.data.length) {
this.calendarStartDate1 = res.data[0].date;
this.calendarEndDate1 = res.data[res.data.length - 1].date;
this.selected1 = [];
res.data.forEach(e => {
this.selected1.push({
date: e.date,
info: '¥' + e.lowerPrice,
infoColor: '#6ac695'
})
})
} else {
this.calendarStartDate1 = this.$moment().format("YYYY-MM-DD");
this.calendarEndDate1 = this.$moment().add(1, 'months').format("YYYY-MM-DD");
}
},
async getHourPriceList() {
let params = {
hotelHomestayId: this.id
}
let res = await this.$http.hourLowestPrice(params);
if (res.data.length) {
this.calendarStartDate2 = res.data[0].date;
this.calendarEndDate2 = res.data[res.data.length - 1].date;
this.selected2 = [];
res.data.forEach(e => {
this.selected2.push({
date: e.date,
info: '¥' + e.lowerPrice,
infoColor: '#6ac695'
})
})
} else {
this.calendarStartDate2 = this.$moment().format("YYYY-MM-DD");
this.calendarEndDate2 = this.$moment().add(1, 'months').format("YYYY-MM-DD");
}
},
async getHouseType() {// 普通房列表
let ids = [];
if (this.isType.length) {
this.isType.forEach(e => {
ids.push(...e)
})
}
let params = {
hotelHomestayId: this.id,
startTime: this.startDateParams,
endTime: this.stopDateParams,
roomQuantity: this.numData.room,
adultQuantity: this.numData.adult,
roomClassifyIds: ids.join(',')
}
let res=await this.$http.classifyList(params);
this.infoList = res.data.meetConditionRoomClassifyList;
this.recommendList = res.data.notMeetConditionRoomClassifyList;
},
async getHourList() {// 钟点房列表
let ids = [];
if (this.isType.length) {
this.isType.forEach(e => {
if (this.hourRoomClassifyIds != e) ids.push(...e);
})
}
let params = {
hotelHomestayId: this.id,
startTime: this.startDateParamsHour,
endTime: this.startDateParamsHour,
roomClassifyIds: ids.join(',')
}
let res=await this.$http.hourClassifyList(params);
this.infoList = res.data.meetConditionRoomClassifyList;
this.recommendList = res.data.notMeetConditionRoomClassifyList;
},
changeType(e) {
if (e) {
let index = this.isType.indexOf(e.roomClassifyIds);
if (index == -1) {
this.isType.push(e.roomClassifyIds);
} else {
this.isType.splice(index, 1);
}
let index1 = this.isType.indexOf(this.hourRoomClassifyIds);
if (index1 == -1) {
if (!this.selected1.length) this.getPriceList();
this.getHouseType();
} else {
if (!this.selected2.length) this.getHourPriceList();
this.getHourList();
}
} else {
if (!this.selected1.length) this.getPriceList();
this.getHouseType();
}
},
async getClassify() {
let res = await this.$http.homeClassify(this.id);
this.typesList = res.data;
let f = this.typesList.find(m => m.name.indexOf('钟点房') != -1)
if (f) this.hourRoomClassifyIds = f.roomClassifyIds;
this.changeType();
},
getDistance(lat1, lon1, lat2, lon2) {
const R = 6371; // 地球半径,单位为千米
const dLat = (lat2 - lat1) * Math.PI / 180;
const dLon = (lon2 - lon1) * Math.PI / 180;
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = R * c;
this.distance = distance.toFixed(2); // 保留两位小数
},
openLocation () {// 打开位置
if (this.detail.latitude && this.detail.longitude) {
let latitude = this.detail.latitude;
let longitude = this.detail.longitude;
uni.openLocation({
latitude: Number(latitude),
longitude: Number(longitude),
name: this.detail.name,
address: this.detail.address,
})
}
},
changeTab(i) {
this.isTabs = i;
if (i == 0) {
uni.pageScrollTo({
scrollTop: 0,
duration: 300
});
} else {
uni.pageScrollTo({
selector: `#${'target'}`,
duration: 300,
})
}
},
detailPage() {
uni.navigateTo({ url: `/pages/hotel/hotelDetail?id=${this.id}` });
},
changeSwiper(e) {
this.current = e.detail.current;
},
goDetail(id) {
if (this.isType.indexOf(this.hourRoomClassifyIds) == -1) {
uni.navigateTo({ url: `/pages/hotel/hotelSpecs?id=${id}&hotelId=${this.id}` });
} else {
uni.navigateTo({ url: `/pages/hotel/hotelSpecs?id=${id}&hotelId=${this.id}&hourDate=${this.startDateParamsHour}` });
}
},
async reserve(e) {
if (e.quantity) {
let info = await this.$http.getUserInfo()
if (info.code === 200) {
if (info.data.isBlack) {
uni.showToast({ mask: true, title: '您是黑名单用户,禁止购票', icon: 'none' })
} else if (!info.data.mobile || !info.data.name) {
uni.showToast({ mask: true, title: '请完善个人信息', icon: 'none' })
setTimeout(() => {
uni.navigateTo({ url: '/pages/my/myProfile' })
}, 1500)
} else {
if (this.isType.indexOf(this.hourRoomClassifyIds) == -1) {
uni.navigateTo({ url: `/pages/hotel/confirmOrder?id=${e.id}&hotelId=${this.id}` });
} else {
uni.navigateTo({ url: `/pages/hotel/confirmOrder?id=${e.id}&hotelId=${this.id}&hourDate=${this.startDateParamsHour}` });
}
}
} else {
uni.$u.toast(info.msg);
}
}
},
confirm1() {
if (!this.stopWeekActive) {
uni.showToast({ mask: true, title: '请选择离店日期', icon: 'none' });
} else {
this.startDateParams = this.startDate;
this.stopDateParams = this.stopDate;
this.startDatePage = this.startDateActive;
this.stopDatePage = this.stopDateActive;
this.startWeekPage = this.startWeekActive;
this.stopWeekPage = this.stopWeekActive;
this.nightsPage = this.nights;
this.showPopupDate = false;
this.getPriceList();
this.getHouseType();
uni.setStorageSync('hotel_date', [this.startDateParams, this.stopDateParams]);
}
},
checkInDate() {
this.showPopupDate = true;
},
selectNum() {
uni.navigateTo({ url: `/pages/hotel/condition` });
},
closePopup() {
this.showPopupDate = false;
if (this.isType.indexOf(this.hourRoomClassifyIds) == -1) {
this.startDate = this.startDateParams;
this.stopDate = this.stopDateParams;
this.startDateActive = this.startDatePage;
this.stopDateActive = this.stopDatePage;
this.startWeekActive = this.startWeekPage;
this.stopWeekActive = this.stopWeekPage;
this.nights = this.nightsPage;
} else {
this.startDateHour = this.startDateParamsHour;
this.startDateActiveHour = this.startDatePageHour;
this.startWeekActiveHour = this.startWeekPageHour;
}
},
calendarChange1(e) {
this.startDate = e.range.before;
this.startDateActive = this.$moment(e.range.before).format("MM月DD日");
this.startWeekActive = this.weekList[this.$moment(e.range.before).day()];
this.stopDate = e.range.after || '';
this.stopDateActive = e.range.after ? this.$moment(e.range.after).format("MM月DD日") : '-';
this.stopWeekActive = e.range.after ? this.weekList[this.$moment(e.range.after).day()] : '';
this.nights = e.range.data.length ? (e.range.data.length - 1) : '-';
},
calendarChange2(e) {
this.startDateHour = e.fulldate;
this.startDateActiveHour = this.$moment(e.fulldate).format("MM月DD日");
this.startWeekActiveHour = this.weekList[this.$moment(e.fulldate).day()];
},
confirm2() {
this.startDateParamsHour = this.startDateHour;
this.startDatePageHour = this.startDateActiveHour;
this.startWeekPageHour = this.startWeekActiveHour;
this.showPopupDate = false;
this.getHourPriceList();
this.getHourList();
}
}
}
</script>
<style lang="scss">
.fixed {
position: fixed; left: 0; top: 169rpx; width: 100%; background: #FFFFFF; padding: 24rpx; box-sizing: border-box; z-index: 6;
.tabs_box {
display: flex; align-items: center; padding-left: 21rpx; margin-bottom: 26rpx;
.tabs {
margin-right: 55rpx; font-size: 28rpx; color: rgba(0,0,0,0.65);
&:last-child { margin-right: 0; }
}
.activeTabs {
position: relative; font-weight: 500; font-size: 32rpx; color: #03AE80;
.line { position: absolute; width: 24rpx; height: 4rpx; background: #03AE80; border-radius: 3rpx; left: 50%; bottom: -10rpx; transform: translateX(-50%); }
}
}
.date{
width: 100%; background: rgba(71,175,195,0.1); border-radius: 18rpx; height: 94rpx; box-sizing: border-box; padding: 0 24rpx; display: flex; justify-content: space-between; align-items: center;
.left{
display: flex; align-items: center;
.time{
display: flex; align-items: center;
view{
&:nth-child(1){ color: rgba(0, 0, 0, 0.85); font-size: 32rpx; font-weight: 500; }
&:nth-child(2){ color: rgba(0, 0, 0, 0.45); margin-left: 4rpx; font-size: 24rpx; }
}
}
.site{
margin: 0 24rpx; position: relative; height: 24rpx; line-height: 20rpx; color: #03AE80; box-sizing: border-box; border: 2rpx solid #03AE80; border-radius: 18rpx; padding: 0 8rpx; font-size: 16rpx; font-weight: 500;
&::after{ content: ""; width: 8rpx; height: 2rpx; background: #03AE80; position: absolute; left: -8rpx; top: 50%; transform: translateY(-50%); }
&::before{ content: ""; width: 8rpx; height: 2rpx; background: #03AE80; position: absolute; right: -8rpx; top: 50%; transform: translateY(-50%); }
}
}
.right{ color: rgba(0, 0, 0, 0.85); font-size: 28rpx; }
}
}
.swiper{
width: 100%; height: 492rpx; 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: 122rpx; }
}
.content{
width: 100%; position: relative; z-index: 5; margin-top: -102rpx;
.info{
width: 100%; background: #fff; border-radius: 40rpx 40rpx 0 0; box-sizing: border-box; padding: 32rpx 24rpx 4rpx;
.title{ line-height: 60rpx; color: rgba(0, 0, 0, 0.85); font-size: 40rpx; font-weight: 600; }
.time{
width: 100%; margin-top: 24rpx; border-top: 2rpx solid #ECEAEA; height: 86rpx; box-sizing: border-box; padding-right: 156rpx; position: relative;
.left{
width: 100%; height: 100%; position: relative; box-sizing: border-box; padding-left: 145rpx;
.text{ color: rgba(0, 0, 0, 0.85); font-size: 24rpx; font-weight: 600; position: absolute; left: 0; bottom: 0; height: 84rpx; line-height: 84rpx; }
.tag{
width: 100%; font-size: 0; height: 36rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; top: 24rpx;
view{
display: inline-block; vertical-align: top; height: 36rpx; line-height: 36rpx; padding: 0 10rpx; background: #F4F4F4; border-radius: 4rpx; color: rgba(0, 0, 0, 0.45); font-size: 20rpx; margin-right: 10rpx;
&:last-child{ margin-right: 0; }
}
}
}
.right{
position: absolute; right: 0; top: 24rpx; height: 36rpx; display: flex; align-items: center;
.text{ color: #03AE80; font-size: 24rpx; margin-right: 4rpx; }
}
}
.address{
width: 100%; border-top: 2rpx solid #ECEAEA; box-sizing: border-box; padding: 24rpx 72rpx 24rpx 0; position: relative;
.left{
width: 100%; min-height: 88rpx; display: flex; flex-direction: column; justify-content: center;
.area{ width: 100%; line-height: 42rpx; color: rgba(0, 0, 0, 0.85); font-size: 28rpx; font-weight: 600; }
.msg{
margin-top: 8rpx; height: 36rpx; box-sizing: border-box; padding-left: 36rpx; position: relative;
.msg_icon{ position: absolute; left: 0; top: 6rpx; width: 24rpx; height: 24rpx; }
.text{ color: rgba(0, 0, 0, 0.45); font-size: 24rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 36rpx; }
}
}
.right{
position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; align-items: center;
.right_icon{
image{ width: 52rpx; height: 52rpx; }
}
.text{ margin-top: 4rpx; color: #03AE80; font-size: 24rpx; }
}
}
}
.content_waper{
width: 100%; box-sizing: border-box; padding: 22rpx 24rpx;
.date{
width: 100%; background: #fff; border-radius: 18rpx; height: 94rpx; box-sizing: border-box; padding: 0 24rpx; display: flex; justify-content: space-between; align-items: center;
.left{
display: flex; align-items: center;
.time{
display: flex; align-items: center;
view{
&:nth-child(1){ color: rgba(0, 0, 0, 0.85); font-size: 32rpx; font-weight: 500; }
&:nth-child(2){ color: rgba(0, 0, 0, 0.45); margin-left: 4rpx; font-size: 24rpx; }
}
}
.site{
margin: 0 24rpx; position: relative; height: 24rpx; line-height: 20rpx; color: #03AE80; box-sizing: border-box; border: 2rpx solid #03AE80; border-radius: 18rpx; padding: 0 8rpx; font-size: 16rpx; font-weight: 500;
&::after{ content: ""; width: 8rpx; height: 2rpx; background: #03AE80; position: absolute; left: -8rpx; top: 50%; transform: translateY(-50%); }
&::before{ content: ""; width: 8rpx; height: 2rpx; background: #03AE80; position: absolute; right: -8rpx; top: 50%; transform: translateY(-50%); }
}
}
.right{ color: rgba(0, 0, 0, 0.85); font-size: 28rpx; }
}
.types_box {
width: 100%; height: 96rpx;
.scroll_waper {width: 100%; height: 100%; white-space: nowrap;}
.types {
width: 155rpx; height: 70rpx; display: inline-block; background: #FFFFFF; border-radius: 10rpx; border: 2rpx solid #FFFFFF; margin-right: 22rpx; margin-top: 22rpx;position: relative;
&:last-child {margin-right: 0;}
text {position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 500; font-size: 24rpx; color: rgba(0,0,0,0.65); text-align: center; line-height: 1; }
}
.activeType {
border: 2rpx solid #03AE80;
text {font-size: 28rpx; color: #03AE80;}
.atvIcon {position: absolute; right: 0; bottom: 0; width: 40rpx; height: 40rpx;}
}
}
.shop{
width: 100%;
.list{
width: 100%; position: relative; box-sizing: border-box; padding: 24rpx; padding-left: 206rpx; border-radius: 18rpx; background: #fff; margin-bottom: 20rpx;
&:last-child { margin-bottom: 0; }
.img{
width: 158rpx; height: 200rpx; position: absolute; left: 24rpx; top: 24rpx;
image{ border-radius: 10rpx; }
view{ border-radius: 0 10rpx 0 10rpx; position: absolute; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); color: #fff; text-align: center; line-height: 30rpx; height: 30rpx; font-size: 24rpx; width: 50rpx; }
}
.text{
width: 100%; height: 200rpx; box-sizing: border-box; padding-top: 4rpx; position: relative;
.title{ line-height: 48rpx; height: 48rpx; color: rgba(0, 0, 0, 0.85); font-size: 32rpx; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag{
margin-top: 10rpx; font-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 36rpx;
view{
display: inline-block; vertical-align: top; color: rgba(0, 0, 0, 0.85); font-size: 24rpx; margin-right: 12rpx; line-height: 36rpx;
&:last-child{ margin-right: 0; }
}
}
.msg{ margin-top: 8rpx; height: 36rpx; color: #03AE80; line-height: 36rpx; font-size: 24rpx; box-sizing: border-box; padding-right: 92rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fot {
margin-top: 8rpx; height: 46rpx; display: flex; align-items: center; justify-content: space-between;
.surplus { font-size: 24rpx; color: #E54042; }
.money{
display: flex; align-items: baseline; box-sizing: border-box; padding-right: 92rpx;
view{
&:first-child { font-size: 20rpx; color: rgba(0,0,0,0.45); margin-right: 4rpx; text-decoration: line-through; }
&:last-child {
font-weight: bold; font-size: 40rpx; color: #E54042;
text { font-size: 24rpx; color: #E54042; }
}
}
}
}
.btn {
position: absolute; right: 0; bottom: 0; width: 78rpx; height: 82rpx; border-radius: 10rpx; border: 3rpx solid #03AE80; overflow: hidden; text-align: center; background-color: #03AE80;
view{
&:first-child { font-weight: 500; font-size: 32rpx; color: #FFFFFF; line-height: 52rpx; }
&:last-child { height: 30rxp; line-height: 30rpx; width: 100%; text-align: center; background-color: #FFFFFF; font-size: 20rpx; color: rgba(0,0,0,0.65); }
}
}
}
.grey {
.title {color: rgba(0,0,0,0.25);}
.tag {
view {color: rgba(0,0,0,0.25);}
}
.msg {color: rgba(0,0,0,0.25);}
.btn {
border: 3rpx solid #BFBFBF; background-color: #BFBFBF;
view{
&:last-child { color: rgba(0,0,0,0.25); }
}
}
}
}
}
.recommendText {
padding: 22rpx 24rpx; display: flex; align-items: center;
.tips {margin-left: 12rpx; font-size: 24rpx; color: #E54042;}
}
.col1 {
.tips {color: #03AE80;}
}
.active{
position: relative; display: inline-block; vertical-align: top; margin-bottom: 4rpx;
text{ font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); }
image{ width: 72rpx; height: 37rpx; position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); right: -46rpx; display: block; }
}
.facilities {
margin-top: 22rpx; background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx 24rpx; box-sizing: border-box;
.list_box {
display: flex; align-items: center; flex-wrap: wrap;
.item {
margin-top: 20rpx; text-align: center; width: 25%;
image { width: 40rpx; height: 40rpx; }
view { margin-top: 8rpx; font-size: 24rpx; color: rgba(0,0,0,0.85); }
}
}
.all { margin-top: 24rpx; display: flex; align-items: center; justify-content: center; font-size: 26rpx; color: #03AE80; }
}
.policy {
margin-top: 22rpx; background: #FFFFFF; border-radius: 18rpx; padding: 32rpx 24rpx 24rpx; box-sizing: border-box;
.row {
padding-bottom: 24rpx; border-bottom: 1rpx solid #ECEAEA; margin-bottom: 24rpx;
.label { font-size: 28rpx; color: rgba(0,0,0,0.85); margin: 20rpx 0 12rpx; }
.text { font-size: 26rpx; color: rgba(0,0,0,0.65); line-height: 30rpx; }
u-parse { font-size: 26rpx; color: rgba(0,0,0,0.65); line-height: 30rpx; }
}
.col {
margin-top: 20rpx; display: flex; align-items: baseline;
.right {
margin-left: 12rpx;
view {
&:first-child { font-size: 28rpx; color: rgba(0,0,0,0.85); }
&:last-child { margin-top: 12rpx; font-size: 26rpx; color: rgba(0,0,0,0.65); }
}
}
}
}
}
}
.date_con {
padding: 32rpx 0 10rpx; position: relative; max-height: 80vh; overflow: scroll;
.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%); }
}
.date_fot {
border-top: 1rpx solid #ECEAEA; padding: 30rpx 48rpx 0; box-sizing: border-box;
.bot_box {
display: flex; align-items: center; justify-content: space-between; padding: 0 12rpx;
.box1 {
flex: 1;
.text {font-size: 24rpx; color: rgba(0,0,0,0.45); margin-bottom: 8rpx;}
.date {font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85);}
}
.box2 {width: max-content; margin: 0 98rpx; font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85);}
}
.bot_box1 { text-align: center; font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85); }
.btn1 {height: 90rpx;line-height: 90rpx; background: #03AE80; border-radius: 49rpx; font-weight: 500; font-size: 32rpx; color: #FFFFFF; margin-top: 36rpx; text-align: center;}
.disBtn {background: #DCDCDC;}
}
}
</style>