123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- <template>
- <view class="page">
- <u-swiper :list="item.imgs" :effect3d="true" :height="300"></u-swiper>
- <view class="hotel_item">
- <view class="name">{{ item.name }}</view>
- <view class="address">
- <view class="dz">{{ item.addres }}</view>
- <view class="dh" @click="dh()">导航</view>
- </view>
- <map class="map" :latitude="item.lat" :longitude="item.lng" :markers="[{ latitude: item.lat, longitude: item.lng }]"></map>
- </view>
- <view class="hotel_item" v-if="item.shopType == 2">
- <view class="v_title">
- <image src="../../static/lo.png" class="lo" mode="widthFix"></image>
- <view class="hd">预订房间</view>
- </view>
- <view v-if="item.rooms.length > 0 && item.enableFlag == 0">
- <view class="r_item" v-for="(it, index) in item.rooms" :key="index" @click="popup(it)">
- <image :src="ip + it.pic" mode="aspectFill" class="pic"></image>
- <view class="con">
- <view class="title omit">{{ it.title }}</view>
- <view class="ms">
- <text class="rmb">¥{{ it.price }}</text>
- <text>起</text>
- </view>
- <view class="ms">{{ it.nums }}间房</view>
- <view class="btn">预订</view>
- </view>
- <view class="clear"></view>
- </view>
- </view>
- <view class="noLogin" v-else>
- <image class="u-error-icon" src="../../static/sj.png" mode="widthFix"></image>
- <view class="dll" style="border: 0px;padding-bottom: 20px;">暂无服务</view>
- </view>
- </view>
- <!--预订房间-->
- <u-popup v-model="popup_show" :mask-close-able="false" mode="center" border-radius="14" width="90%" height="auto" :closeable="true">
- <view class="u-popup">
- <view class="tttt" style="font-weight: bolder;">预订房间</view>
- <u-steps :list="numList" mode="number" :current="0" active-color="#c74547" style="margin: 20px 0px 20px 0px;"></u-steps>
- <view class="form_group hr">
- <view class="lable">房型</view>
- <input :value="book.room + '(¥' + book.price + '起)'" :disabled="true" />
- </view>
- <view class="form_group hr">
- <view class="lable">姓名</view>
- <input placeholder="请输入姓名" v-model="book.name" />
- </view>
- <view class="form_group hr">
- <view class="lable">手机号</view>
- <input type="number" placeholder="请输入手机号" v-model="book.phone" />
- </view>
- <view class="form_group">
- <view class="lable">入住日期</view>
- <input placeholder="请选择入住日期" v-model="book.day" :disabled="true" @click="calendar_show = true" />
- <text class="day" v-if="book.days">{{ book.days }}天</text>
- <u-calendar v-model="calendar_show" mode="range" :start-text="'入住'" :end-text="'退房'" @change="change" max-date="2050" :min-date="min_date"></u-calendar>
- </view>
- <view class="tk" style="background-color: #DCDFE6;color: #7d7d7d;">仅作基本的订房操作,实际情况以酒店方为准</view>
- <button class="btn" @click="add()">确认</button>
- </view>
- </u-popup>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- ip: this.$http.urls.ip,
- numList: [{ name: '资料填写' }, { name: '酒店确认' }, { name: '登记入住' }],
- item: {}, //酒店信息
- book: {}, //预订房间
- min_date: this.$util.getDate('day'),
- popup_show: false,
- calendar_show: false
- };
- },
- onLoad(e) {
- this.$http.request({
- url: this.$http.urls.hotelDetail,
- data: { shopId: e.shopId },
- success: res => {
- this.item = res.data.data;
- this.item.imgs = []; //轮播图
- this.item.showPictures = this.item.showPictures.split(',');
- this.item.showPictures.forEach(item => {
- this.item.imgs.push({ image: this.ip + item });
- });
- }
- });
- },
- methods: {
- //导航
- dh() {
- uni.openLocation({
- latitude: Number(this.item.lat),
- longitude: Number(this.item.lng),
- address: this.item.addres,
- success: res => {},
- fail: error => {
- console.log(error);
- }
- });
- },
- change(e) {
- this.book.day = e.startMonth + '-' + e.startDay + ' 至 ' + e.endMonth + '-' + e.endDay;
- this.book.min = e.startDate;
- this.book.max = e.endDate;
- this.book.days = this.$util.getDaysBetween(e.startDate, e.endDate);
- },
- popup(item) {
- this.book = {};
- this.book.room = item.title;
- this.book.price = item.price;
- this.book.roomId = item.id;
- this.popup_show = true;
- },
- //房间预定
- add() {
- let rule = [
- { name: 'name', checkType: 'notnull', errorMsg: '请输入你的姓名' },
- { name: 'phone', checkType: 'notnull', errorMsg: '请输入你的手机号' },
- { name: 'day', checkType: 'notnull', errorMsg: '请选择入住日期' }
- ];
- if (!this.$verify.check(this.book, rule)) {
- uni.showModal({ content: this.$verify.error, showCancel: false });
- return;
- }
- this.book.memberId = this.$getUser().memberId;
- this.book.openid = this.$getUser().openid;
- //订阅通知
- uni.requestSubscribeMessage({
- tmplIds: ['Lh41ftWaZxG8mycje0XQLpylac30ftS4nAXM28iwi8I', 'iEMHyeeuqs-MFa1J4QgT7n0mfnOb-h93oc21b1O3pK8'],
- complete: c => {
- this.$http.request({
- method: 'POST',
- url: this.$http.urls.hotelBook,
- data: this.book,
- success: res => {
- uni.showToast({ title: '操作成功' });
- this.popup_show = false;
- uni.redirectTo({
- url: '/pages/order/my'
- });
- }
- });
- }
- });
- }
- }
- };
- </script>
- <style lang="scss">
- .page {
- padding: 12px;
- .map {
- width: 100%;
- height: 100px;
- margin-top: 20px;
- border-radius: 5px;
- }
- .r_item {
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0);
- border-radius: 0px;
- }
- .day {
- position: absolute;
- color: orange;
- right: 12px;
- }
- }
- </style>
|