detail.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <template>
  2. <view class="page">
  3. <u-swiper :list="item.imgs" :effect3d="true" :height="300"></u-swiper>
  4. <view class="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. <view class="">
  11. <map
  12. style="width: 100%; height: 100px;margin-top: 20px;border-radius:5px;"
  13. :latitude="item.lat"
  14. :longitude="item.lng"
  15. :markers="[{ latitude: item.lat, longitude: item.lng }]"
  16. ></map>
  17. </view>
  18. </view>
  19. <view class="item">
  20. <view class="title">
  21. <image src="../../../static/lo.png" class="lo" mode="widthFix"></image>
  22. <view class="hd">预订房间</view>
  23. </view>
  24. <view class="r_item" v-for="(it, index) in item.rooms" :key="index">
  25. <image :src="ip + it.pic" mode="aspectFill" class="pic"></image>
  26. <view class="con">
  27. <view class="title omit">{{ it.title }}</view>
  28. <view class="ms">
  29. <text class="rmb">¥{{ it.price }}</text>
  30. <text>起</text>
  31. </view>
  32. <view class="ms">还剩13间房</view>
  33. <view class="btn" @click="popup(it)">预订</view>
  34. </view>
  35. <view class="clear"></view>
  36. </view>
  37. </view>
  38. <!--预订房间-->
  39. <u-popup v-model="popup_show" :mask-close-able="false" mode="center" border-radius="14" width="90%" height="auto" :closeable="true">
  40. <view class="u-popup">
  41. <view class="tttt" style="font-weight: bolder;">预订房间</view>
  42. <u-steps :list="numList" mode="number" :current="0" active-color="#c74547" style="margin: 20px 0px 20px 0px;"></u-steps>
  43. <view class="form_group hr">
  44. <view class="lable">房型</view>
  45. <input :value="book.room + '(¥' + book.price + '起)'" :disabled="true" />
  46. </view>
  47. <view class="form_group hr">
  48. <view class="lable">姓名</view>
  49. <input placeholder="请输入姓名" v-model="book.name" />
  50. </view>
  51. <view class="form_group hr">
  52. <view class="lable">手机号</view>
  53. <input type="number" placeholder="请输入手机号" v-model="book.phone" />
  54. </view>
  55. <view class="form_group">
  56. <view class="lable">入住日期</view>
  57. <input placeholder="请选择入住日期" v-model="book.day" :disabled="true" @click="show = true" />
  58. <text class="day" v-if="book.days">{{ book.days }}天</text>
  59. <u-calendar v-model="show" mode="range" :start-text="'入住'" :end-text="'退房'" @change="change" max-date="2050" :min-date="min_date"></u-calendar>
  60. </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. show: false
  77. };
  78. },
  79. onLoad(e) {
  80. this.$http.request({
  81. url: this.$http.urls.hotelDetail,
  82. data: { shopId: 30 },
  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. add() {
  120. let rule = [
  121. { name: 'name', checkType: 'notnull', errorMsg: '请输入你的姓名' },
  122. { name: 'phone', checkType: 'notnull', errorMsg: '请输入你的手机号' },
  123. { name: 'day', checkType: 'notnull', errorMsg: '请选择入住日期' }
  124. ];
  125. if (!this.$verify.check(this.book, rule)) {
  126. uni.showModal({ content: this.$verify.error, showCancel: false });
  127. return;
  128. }
  129. this.book.memberId = this.$getUser().memberId;
  130. this.$http.request({
  131. method: 'POST',
  132. url: this.$http.urls.hotelBook,
  133. data: this.book,
  134. success: res => {
  135. uni.showToast({ title: '操作成功' });
  136. this.popup_show = false;
  137. }
  138. });
  139. }
  140. }
  141. };
  142. </script>
  143. <style lang="scss">
  144. .page {
  145. padding: 12px;
  146. .item {
  147. margin-top: 10px;
  148. padding: 10px;
  149. border-radius: 5px;
  150. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  151. .name {
  152. font-size: 20px;
  153. font-weight: bold;
  154. border-bottom: 1px solid #f2e6e6;
  155. padding: 0px 10px 10px 10px;
  156. }
  157. .address {
  158. color: $dar2;
  159. padding: 10px;
  160. .dz {
  161. width: 87%;
  162. float: left;
  163. }
  164. .dh {
  165. width: 13%;
  166. float: left;
  167. color: #03a9f4;
  168. text-align: right;
  169. }
  170. }
  171. .title {
  172. font-size: 20px;
  173. font-weight: bold;
  174. color: #333;
  175. .lo {
  176. width: 150px;
  177. }
  178. .hd {
  179. position: absolute;
  180. left: 35px;
  181. margin-top: -36px;
  182. }
  183. }
  184. .r_item {
  185. box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0);
  186. .btn {
  187. float: right;
  188. margin-top: -54px;
  189. padding: 5px 25px;
  190. border-radius: 20px;
  191. background-color: orange;
  192. margin-right: -34px;
  193. }
  194. }
  195. }
  196. .day {
  197. position: absolute;
  198. color: orange;
  199. right: 12px;
  200. }
  201. }
  202. </style>