|
@@ -5,38 +5,55 @@
|
|
|
<view class="name">{{ item.name }}</view>
|
|
|
<view class="address">
|
|
|
<view class="dz">{{ item.addres }}</view>
|
|
|
+ <view class="dh" @click="dh()">导航</view>
|
|
|
</view>
|
|
|
- <map
|
|
|
- style="width: 100%; height: 100px;margin-top: 20px;border-radius:5px;"
|
|
|
- :latitude="item.lat"
|
|
|
- :longitude="item.lng"
|
|
|
- :markers="[{ latitude: item.lat, longitude: item.lng }]"
|
|
|
- ></map>
|
|
|
+ <map class="map" :latitude="item.lat" :longitude="item.lng" :markers="[{ latitude: item.lat, longitude: item.lng }]"></map>
|
|
|
</view>
|
|
|
<view class="hotel_item">
|
|
|
<view class="v_title">
|
|
|
<image src="../../static/lo.png" class="lo" mode="widthFix"></image>
|
|
|
- <view class="hd">菜单</view>
|
|
|
+ <view class="hd">预订房间</view>
|
|
|
+ </view>
|
|
|
+ <view class="r_item" v-for="(it, index) in item.rooms" :key="index">
|
|
|
+ <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">还剩13间房</view>
|
|
|
+ <view class="btn" @click="popup(it)">预订</view>
|
|
|
+ </view>
|
|
|
+ <view class="clear"></view>
|
|
|
</view>
|
|
|
- <u-grid :col="3" class="cd">
|
|
|
- <u-grid-item>
|
|
|
- <view class="icon" style="background-color: red"></view>
|
|
|
- <view class="grid-text">店铺信息</view>
|
|
|
- </u-grid-item>
|
|
|
- <u-grid-item>
|
|
|
- <view class="icon" style="background-color: red"></view>
|
|
|
- <view class="grid-text">上报数据</view>
|
|
|
- </u-grid-item>
|
|
|
- <u-grid-item>
|
|
|
- <view class="icon" style="background-color: red"></view>
|
|
|
- <view class="grid-text">房间管理</view>
|
|
|
- </u-grid-item>
|
|
|
- <u-grid-item>
|
|
|
- <view class="icon" style="background-color: red"></view>
|
|
|
- <view class="grid-text">预订订单</view>
|
|
|
- </u-grid-item>
|
|
|
- </u-grid>
|
|
|
</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="show = true" />
|
|
|
+ <text class="day" v-if="book.days">{{ book.days }}天</text>
|
|
|
+ <u-calendar v-model="show" mode="range" :start-text="'入住'" :end-text="'退房'" @change="change" max-date="2050" :min-date="min_date"></u-calendar>
|
|
|
+ </view>
|
|
|
+ <button class="btn" @click="add()">确认</button>
|
|
|
+ </view>
|
|
|
+ </u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -45,13 +62,18 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
ip: this.$http.urls.ip,
|
|
|
- item: {}
|
|
|
+ numList: [{ name: '资料填写' }, { name: '酒店确认' }, { name: '登记入住' }],
|
|
|
+ item: {}, //酒店信息
|
|
|
+ book: {}, //预订房间
|
|
|
+ min_date: this.$util.getDate('day'),
|
|
|
+ popup_show: false,
|
|
|
+ show: false
|
|
|
};
|
|
|
},
|
|
|
onLoad(e) {
|
|
|
this.$http.request({
|
|
|
url: this.$http.urls.hotelDetail,
|
|
|
- data: { shopId: 30 },
|
|
|
+ data: { shopId: e.shopId },
|
|
|
success: res => {
|
|
|
this.item = res.data.data;
|
|
|
this.item.imgs = []; //轮播图
|
|
@@ -63,22 +85,79 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
- dh() {}
|
|
|
+ //导航
|
|
|
+ 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.$http.request({
|
|
|
+ method: 'POST',
|
|
|
+ url: this.$http.urls.hotelBook,
|
|
|
+ data: this.book,
|
|
|
+ success: res => {
|
|
|
+ uni.showToast({ title: '操作成功' });
|
|
|
+ this.popup_show = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss">
|
|
|
.page {
|
|
|
padding: 12px;
|
|
|
-}
|
|
|
-.cd {
|
|
|
- margin-top: 10px;
|
|
|
- .icon {
|
|
|
- font-size: 30px;
|
|
|
- padding: 5px 8px;
|
|
|
- background-color: red;
|
|
|
- color: white;
|
|
|
+ .map {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ margin-top: 20px;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
+ .r_item {
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0);
|
|
|
+ .btn {
|
|
|
+ float: right;
|
|
|
+ margin-top: -54px;
|
|
|
+ padding: 5px 25px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: orange;
|
|
|
+ margin-right: -34px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .day {
|
|
|
+ position: absolute;
|
|
|
+ color: orange;
|
|
|
+ right: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|