detail.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <view class="page">
  3. <u-swiper :list="item.imgs" :effect3d="true" :height="300"></u-swiper>
  4. <view class="hotel_item">
  5. <view class="name">{{ item.name }}</view>
  6. <view class="address">
  7. <view class="dz">{{ item.addres }}</view>
  8. <view class="dh" @click="dh()">导航</view>
  9. </view>
  10. <map class="map" :latitude="item.lat" :longitude="item.lng" :markers="[{ latitude: item.lat, longitude: item.lng }]"></map>
  11. </view>
  12. <view class="hotel_item" v-if="item.shopType == 2">
  13. <view class="v_title">
  14. <image src="../../static/lo.png" class="lo" mode="widthFix"></image>
  15. <view class="hd">预订房间</view>
  16. </view>
  17. <view v-if="item.rooms.length > 0 && item.enableFlag == 0">
  18. <view class="r_item" v-for="(it, index) in item.rooms" :key="index" @click="popup(it)">
  19. <image :src="ip + it.pic" mode="aspectFill" class="pic"></image>
  20. <view class="con">
  21. <view class="title omit">{{ it.title }}</view>
  22. <view class="ms">
  23. <text class="rmb">¥{{ it.price }}</text>
  24. <text>起</text>
  25. </view>
  26. <view class="ms">{{ it.nums }}间房</view>
  27. <view class="btn">预订</view>
  28. </view>
  29. <view class="clear"></view>
  30. </view>
  31. </view>
  32. <view class="noLogin" v-else>
  33. <image class="u-error-icon" src="../../static/sj.png" mode="widthFix"></image>
  34. <view class="dll" style="border: 0px;padding-bottom: 20px;">暂无服务</view>
  35. </view>
  36. </view>
  37. <!--预订房间-->
  38. <u-popup v-model="popup_show" :mask-close-able="false" mode="center" border-radius="14" width="90%" height="auto" :closeable="true">
  39. <view class="u-popup">
  40. <view class="tttt" style="font-weight: bolder;">预订房间</view>
  41. <u-steps :list="numList" mode="number" :current="0" active-color="#c74547" style="margin: 20px 0px 20px 0px;"></u-steps>
  42. <view class="form_group hr">
  43. <view class="lable">房型</view>
  44. <input :value="book.room + '(¥' + book.price + '起)'" :disabled="true" />
  45. </view>
  46. <view class="form_group hr">
  47. <view class="lable">姓名</view>
  48. <input placeholder="请输入姓名" v-model="book.name" />
  49. </view>
  50. <view class="form_group hr">
  51. <view class="lable">手机号</view>
  52. <input type="number" placeholder="请输入手机号" v-model="book.phone" />
  53. </view>
  54. <view class="form_group">
  55. <view class="lable">入住日期</view>
  56. <input placeholder="请选择入住日期" v-model="book.day" :disabled="true" @click="calendar_show = true" />
  57. <text class="day" v-if="book.days">{{ book.days }}天</text>
  58. <u-calendar v-model="calendar_show" mode="range" :start-text="'入住'" :end-text="'退房'" @change="change" max-date="2050" :min-date="min_date"></u-calendar>
  59. </view>
  60. <view class="tk" style="background-color: #DCDFE6;color: #7d7d7d;">仅作基本的订房操作,实际情况以酒店方为准</view>
  61. <button class="btn" @click="add()">确认</button>
  62. </view>
  63. </u-popup>
  64. </view>
  65. </template>
  66. <script>
  67. export default {
  68. data() {
  69. return {
  70. ip: this.$http.urls.ip,
  71. numList: [{ name: '资料填写' }, { name: '酒店确认' }, { name: '登记入住' }],
  72. item: {}, //酒店信息
  73. book: {}, //预订房间
  74. min_date: this.$util.getDate('day'),
  75. popup_show: false,
  76. calendar_show: false
  77. };
  78. },
  79. onLoad(e) {
  80. this.$http.request({
  81. url: this.$http.urls.hotelDetail,
  82. data: { shopId: e.shopId },
  83. success: res => {
  84. this.item = res.data.data;
  85. this.item.imgs = []; //轮播图
  86. this.item.showPictures = this.item.showPictures.split(',');
  87. this.item.showPictures.forEach(item => {
  88. this.item.imgs.push({ image: this.ip + item });
  89. });
  90. }
  91. });
  92. },
  93. methods: {
  94. //导航
  95. dh() {
  96. uni.openLocation({
  97. latitude: Number(this.item.lat),
  98. longitude: Number(this.item.lng),
  99. address: this.item.addres,
  100. success: res => {},
  101. fail: error => {
  102. console.log(error);
  103. }
  104. });
  105. },
  106. change(e) {
  107. this.book.day = e.startMonth + '-' + e.startDay + ' 至 ' + e.endMonth + '-' + e.endDay;
  108. this.book.min = e.startDate;
  109. this.book.max = e.endDate;
  110. this.book.days = this.$util.getDaysBetween(e.startDate, e.endDate);
  111. },
  112. popup(item) {
  113. this.book = {};
  114. this.book.room = item.title;
  115. this.book.price = item.price;
  116. this.book.roomId = item.id;
  117. this.popup_show = true;
  118. },
  119. //房间预定
  120. add() {
  121. let rule = [
  122. { name: 'name', checkType: 'notnull', errorMsg: '请输入你的姓名' },
  123. { name: 'phone', checkType: 'notnull', errorMsg: '请输入你的手机号' },
  124. { name: 'day', checkType: 'notnull', errorMsg: '请选择入住日期' }
  125. ];
  126. if (!this.$verify.check(this.book, rule)) {
  127. uni.showModal({ content: this.$verify.error, showCancel: false });
  128. return;
  129. }
  130. this.book.memberId = this.$getUser().memberId;
  131. this.book.openid = this.$getUser().openid;
  132. //订阅通知
  133. uni.requestSubscribeMessage({
  134. tmplIds: ['Lh41ftWaZxG8mycje0XQLpylac30ftS4nAXM28iwi8I', 'iEMHyeeuqs-MFa1J4QgT7n0mfnOb-h93oc21b1O3pK8'],
  135. complete: c => {
  136. this.$http.request({
  137. method: 'POST',
  138. url: this.$http.urls.hotelBook,
  139. data: this.book,
  140. success: res => {
  141. uni.showToast({ title: '操作成功' });
  142. this.popup_show = false;
  143. uni.redirectTo({
  144. url: '/pages/order/my'
  145. });
  146. }
  147. });
  148. }
  149. });
  150. }
  151. }
  152. };
  153. </script>
  154. <style lang="scss">
  155. .page {
  156. padding: 12px;
  157. .map {
  158. width: 100%;
  159. height: 100px;
  160. margin-top: 20px;
  161. border-radius: 5px;
  162. }
  163. .r_item {
  164. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0);
  165. border-radius: 0px;
  166. }
  167. .day {
  168. position: absolute;
  169. color: orange;
  170. right: 12px;
  171. }
  172. }
  173. </style>