index.vue 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929
  1. <template>
  2. <view class="content">
  3. <!-- 背景图 -->
  4. <view class="index_bg">
  5. <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
  6. <swiper-item v-for="(item,index) in apartList.coverPicture" :key="index">
  7. <image class="welcome_img" :src="item.url"></image>
  8. <!-- <view class="swiper-item">1</view> -->
  9. </swiper-item>
  10. </swiper>
  11. <!-- <view class="welcome" v-for="(item,index) in apartList.coverPicture" :key="index">
  12. <image class="welcome_img" :src="item.url"></image>
  13. </view> -->
  14. </view>
  15. <!-- 第一层公寓名称卡片 -->
  16. <view class="uni-ka" style="margin-top: -40px;margin-bottom:0px;">
  17. <text class="uni-title">{{apartList.name}}(南昌交通学院)</text>
  18. <text class="uni-sub-title">2021年装修 | 智能门锁 | 房间wifi | 免费停车</text>
  19. <text class="uni-extra" @click="navigateToXiangqing">设施/详情></text>
  20. <text class="uni-body">江西省宜春市靖安县墨轩湖大道1号</text>
  21. <image class="uni-phone" @click="telphone(phone)" src="../../static/index/index_phone.svg"></image>
  22. <a href="https://uri.amap.com/marker?position=115.387261,28.788671&name=南昌交通学院智慧公寓">
  23. <image class="uni-map" @click="mapDaohang('115.387261','28.788671')" src="../../static/index/index_map.svg"></image>
  24. </a>
  25. <br><text class="uni-body2">距离我{{distance}}km</text>
  26. </view>
  27. <!-- 第二层工具 -->
  28. <!-- <view class="item-list">
  29. <view class="item-list-one" @click="navigateToXuzhi">
  30. <image src="../../static/index/xuzhi.png" class="img-btn" height="100%" width="100%"></image>
  31. <text class="list-txt">入住须知</text>
  32. </view>
  33. <view class="item-list-one" @click="navigateToDairuzhu('warn')">
  34. <image src="../../static/index/ruzhu.png" class="img-btn"></image>
  35. <text class="list-txt">办理入住</text>
  36. </view> -->
  37. <!-- <view class="item-list-one" @click="navigateToXuzhu">
  38. <image src="../../static/index/index_xuzhu.svg" class="img-btn"></image>
  39. <text class="list-txt">办理续住</text>
  40. </view> -->
  41. <!-- <view class="item-list-one" @click="navigateToTuifang('warn')">
  42. <image src="../../static/index/tuifang.png" class="img-btn"></image>
  43. <text class="list-txt">办理退房</text>
  44. </view>
  45. </view> -->
  46. <!-- 退房失败时弹框 -->
  47. <!-- <uni-popup ref="popup_tui" type="center" width="300rpx" height="300rpx" background-color="#fff">
  48. <view class="kuang_txt_tui">
  49. <text>请先订房</text>
  50. </view>
  51. </uni-popup> -->
  52. <uni-popup ref="popup_tui" type="dialog">
  53. <uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" content="请先订房!" @confirm="dialogConfirm"
  54. @close="dialogClose"></uni-popup-dialog>
  55. </uni-popup>
  56. <!-- 切换全日房和钟点房 -->
  57. <view class="select-type" v-if="roomtype==1" @click="changeType">
  58. <view class="allday">全日房</view>
  59. <view class="hourday_no">钟点房</view>
  60. </view>
  61. <view class="select-type" v-else-if="roomtype==2" @click="changeType">
  62. <view class="allday2">全日房</view>
  63. <view class="hourday_no2">钟点房</view>
  64. </view>
  65. <!-- 第三层订房 -->
  66. <view class="room-list">
  67. <!-- 选择住房日期 -->
  68. <!-- 全日房 -->
  69. <view class="select-time" @click="openCalendar" v-if="roomtype==1">
  70. <view class="select-time-one">
  71. <text class="select-list">{{startWeek}}入住</text>
  72. <text class="select-list-time">{{startTime}}</text>
  73. </view>
  74. <view class="select-center">
  75. <view class="select-line1"></view>
  76. <view class="select-circle">{{ruzhu_num}}晚</view>
  77. <view class="select-line2"></view>
  78. </view>
  79. <view class="select-time-one">
  80. <text class="select-list">{{endWeek}}离店</text>
  81. <text class="select-list-time">{{endTime}}</text>
  82. </view>
  83. </view>
  84. <!-- 钟点房 -->
  85. <view class="select-time" v-else>
  86. <view class="hourtime">
  87. <uni-datetime-picker type="date" v-model="hourruzhu" @change="changezhong" :start="mindate">
  88. 入住时段
  89. <text class="select-list-time" style="margin-left: 26rpx;">{{hourruzhu}}</text>
  90. <image class="hour_right" src="../../static/index/hour_right.png"></image>
  91. </uni-datetime-picker>
  92. <view class="hour_line"></view>
  93. </view>
  94. </view>
  95. <!-- 全日房选择时间 -->
  96. <uni-popup ref="popup_picker" :mask-click="true">
  97. <view class=popup_bg_picker>
  98. <!-- <text class="popup_title">取消</text>
  99. <text class="popup_error" style="margin-left: 272px;" @click="popup_pickerClose">确定</text> -->
  100. <uni-calendar :selected="info.selected" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
  101. :endDate="info.endDate" :range="info.range" @change="change"/>
  102. </view>
  103. </uni-popup>
  104. <!-- 房型列表-->
  105. <view class="room-kuang">
  106. <view class="room-xinxi" v-for="(item,index) in roomType" :key="index">
  107. <image class="room-image" :src="item.roomPicture" @click="inputDialogToggle(item.id)"></image>
  108. <view class="room-name">{{item.roomName}}</view>
  109. <view class="room-mark" v-if="item.roomConfiguration.length>11">{{item.roomConfiguration.substring(0,11)}}...</view>
  110. <view class="room-mark" v-else>{{item.roomConfiguration}}</view>
  111. <view class="room-time2" v-if="item.roomType==2">{{apartList.hourTime}}</view>
  112. <view class="room-time3" v-if="item.roomType==2">{{item.roomLiveTime}}小时</view>
  113. <view class="room-icon">
  114. <image src="../../static/index/index_wifi.svg" style="width: 30rpx;height: 30rpx;"></image>
  115. <image src="../../static/index/index_kongtiao.svg" style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>
  116. <image src="../../static/index/index_nosmoking.svg" style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"></image>
  117. <image src="../../static/index/index_lock.svg" style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"></image>
  118. </view>
  119. <!-- <view class="before-price"><strike>¥{{item.usualPrice}}</strike></view> -->
  120. <view class="room-price">¥{{item.roomPrice}}</view>
  121. <view class="room-button" :class="{'room-button2': item.houseStatus == 2}">
  122. <text v-if="item.houseStatus==2">已满</text>
  123. <text v-else-if="item.houseStatus==1" @click="navigateToOrderRoom(item.houseStatus,item.id,item.roomName,item)">订</text>
  124. </view>
  125. <view class="room-line" v-if="index<(roomType.length-1)"></view>
  126. </view>
  127. </view>
  128. </view>
  129. <!-- 订房时弹框 -->
  130. <!-- <uni-popup ref="popup_order" type="center" width="300rpx" height="300rpx" background-color="#fff">
  131. <view class="kuang_txt">
  132. <text>{{order_txt}}</text>
  133. </view>
  134. </uni-popup> -->
  135. <uni-popup ref="popup_order" type="dialog">
  136. <uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" :content="order_txt" @confirm="dialogConfirm"
  137. @close="dialogClose"></uni-popup-dialog>
  138. </uni-popup>
  139. <!-- 房间样式弹窗页面 -->
  140. <uni-popup ref="popup" type="dialog" :mask-click="false">
  141. <view class="popup_bg">
  142. <text class="popup_title">户型详情</text>
  143. <text class="popup_error" @click="popupClose"></text>
  144. <!-- 轮播图 -->
  145. <swiper class="swiper" circular :indicator-dots="indicatorDots">
  146. <swiper-item v-for="(item, index) in img" :key="index">
  147. <view class="swiper-item">
  148. <image :src="item" class="swiper-img"></image>
  149. </view>
  150. </swiper-item>
  151. </swiper>
  152. <text class="popup_title2">便利设施</text>
  153. <view class="popup_txt"><view class="popup_txt_in">{{typeText}}</view></view>
  154. </view>
  155. </uni-popup>
  156. <!-- 有一个可续住订单时办理续住弹窗页面 -->
  157. <uni-popup ref="popup_xuzhu" type="dialog" :mask-click="false">
  158. <view class="popup_bg_xu">
  159. <text class="popup_title">办理续住</text>
  160. <text class="popup_error" @click="popupXuzhuClose"></text>
  161. <text class="popup_xu_line"></text>
  162. <!-- 时间选择 -->
  163. <view class="select-time-xu" @click="openXuCalendar">
  164. <view class="select-time-one-xu">
  165. <text class="select-list">周四入住</text>
  166. <text class="select-list-time">07月21日</text>
  167. </view>
  168. <view class="select-center">
  169. <view class="select-line1"></view>
  170. <view class="select-circle">1晚</view>
  171. <view class="select-line2"></view>
  172. </view>
  173. <view class="select-time-one-xu">
  174. <text class="select-list">周五离店</text>
  175. <text class="select-list-time">07月22日</text>
  176. </view>
  177. </view>
  178. <text class="popup_xu_txt">注:办理续住最多7天,如超过7天需要重新预定</text>
  179. <!-- 支付框 -->
  180. <view class="fukuan">
  181. <view class="fu-price"><text style="font-size: 28rpx;">总计:</text>¥20.00</view>
  182. <view class="fu-zhifu">立即支付</view>
  183. </view>
  184. </view>
  185. </uni-popup>
  186. <uni-popup ref="popup_xu" :mask-click="true">
  187. <uni-calendar :selected="infoXu.selected" class="uni-calendar--hook" :clear-date="true" :date="infoXu.date" :insert="infoXu.insert" :lunar="infoXu.lunar" :startDate="infoXu.startDate"
  188. :endDate="infoXu.endDate" :range="infoXu.range" @change="changeXu"/>
  189. </uni-popup>
  190. <!-- 无可续住订单时办理续住弹窗页面 -->
  191. <uni-popup ref="popup_xuzhu_no" type="dialog">
  192. <uni-popup-dialog cancelText="关闭" confirmText="确定" content="请先订房"
  193. @close="dialogClose"></uni-popup-dialog>
  194. </uni-popup>
  195. </view>
  196. </template>
  197. <script>
  198. /**
  199. * 获取任意时间
  200. */
  201. function getDate(date, AddDayCount = 0) {
  202. if (!date) {
  203. date = new Date()
  204. }
  205. if (typeof date !== 'object') {
  206. date = date.replace(/-/g, '/')
  207. }
  208. const dd = new Date(date)
  209. dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
  210. var a = new Array("日", "一", "二", "三", "四", "五", "六","日");
  211. var week = new Date().getDay();
  212. var week2 = new Date().getDay()+1;
  213. const y = dd.getFullYear()
  214. const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期,不足10补0
  215. const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号,不足10补0
  216. const h = dd.getHours() < 10 ? '0' + dd.getHours() : dd.getHours()
  217. const f = dd.getMinutes() < 10 ? '0' + dd.getMinutes() : dd.getMinutes()
  218. const s = dd.getSeconds() < 10 ? '0' + dd.getSeconds() : dd.getSeconds()
  219. return {
  220. fullDate: y + '-' + m + '-' + d,
  221. fullDate2: y + '-' + m + '-' + d+' '+h+':'+f+':'+s,
  222. fullTime: m + '月' + d + '日',
  223. year: y,
  224. month: m,
  225. date: d,
  226. day: dd.getDay(),
  227. sWeek:"周"+ a[week],
  228. eWeek:"周"+ a[week2]
  229. }
  230. }
  231. import {
  232. getroomtype,
  233. getroomtypeinfo,
  234. getorderpage,
  235. apartSet
  236. } from '../../utils/api_hotel.js'
  237. // 导入图片
  238. import AMap from "../../lib/qqmap-wx-jssdk.js"
  239. export default {
  240. data() {
  241. return {
  242. indicatorDots: true,
  243. autoplay: true,
  244. interval: 2000,
  245. duration: 500,
  246. showCalendar: false,
  247. info: {
  248. lunar: true,
  249. range: true,
  250. insert: true,
  251. selected: [],
  252. startDate:'',
  253. date:'',
  254. endDate:''
  255. },
  256. msgType: 'warn',
  257. distance: 0, //"距离"
  258. startTime:'',//默认到店日期
  259. endTime:'',//默认离店日期
  260. startDate:'',//默认到店日期接口数据
  261. endDate:'',//默认离店日期接口数据
  262. startWeek:'',// 默认入店日
  263. endWeek:'',// 默认离店
  264. payMount:0,//房间价格
  265. freeRoom:0,//房间剩余
  266. ruzhu_num:1,//入住夜晚数
  267. //续住里选择器
  268. infoXu: {
  269. lunar: true,
  270. range: true,
  271. insert: true,
  272. selected: [],
  273. startDate:'',
  274. date:'',
  275. endDate:''
  276. },
  277. roomType:[
  278. {
  279.                 "id": 1,
  280.                 "roomName": "标准房",
  281.                 "roomType": 1,
  282.                 "roomPrice": 250,
  283.                 "number": 3,
  284.                 "roomArea": "25",
  285.                 "roomLiveTime": "1",
  286.                 "receivingTime": "15:08-16:08",
  287.                 "visible": "1,2",
  288.                 "roomConfiguration": "1,浴室,投影机",
  289.                 "roomPicture": "http://192.168.161.224:12345/6/f/5/6f51cacb44f94ef09acd08ad65135371.jpg",
  290.                 "houseStatus": "1",
  291.                 "surplusCount": 1
  292.             },
  293.             {
  294.                 "id": 4,
  295.                 "roomName": "豪华别墅",
  296.                 "roomType": 1,
  297.                 "roomPrice": 2500,
  298.                 "number": 6,
  299.                 "roomArea": "100",
  300.                 "roomLiveTime": "1",
  301.                 "receivingTime": "16:31-17:31",
  302.                 "visible": "1,2,3",
  303.                 "roomConfiguration": "2",
  304.                 "roomPicture": "http://192.168.161.224:12345/1/b/3/1b38ab1658724de0875fd575f6533c42.jpg",
  305.                 "houseStatus": "1",
  306.                 "surplusCount": 6
  307.             },
  308.             {
  309.                 "id": 5,
  310.                 "roomName": "豪华单间",
  311.                 "roomType": 1,
  312.                 "roomPrice": 800,
  313.                 "number": 2,
  314.                 "roomArea": "50",
  315.                 "roomLiveTime": "1",
  316.                 "receivingTime": "16:52-17:52",
  317.                 "visible": "1,2",
  318.                 "roomConfiguration": "2",
  319.                 "roomPicture": "http://192.168.161.224:12345/f/6/4/f64bd3ee73ef4c03a1d266bba3ac4a0f.jpg",
  320.                 "houseStatus": "1",
  321.                 "surplusCount": 2
  322.             }
  323. ],
  324. typeText:'',//房型详细描述
  325. indicatorDots: true,//滚动图片提示条默认出现
  326. img:[],//轮播图里图片
  327. phone:'',//电话
  328. latitude: '', // 默认当前纬度
  329. longitude:'',
  330. scale: 12, // 默认16
  331. markers: [],
  332. markerHeight: 30,
  333. xuzhu_type:[],// 办理续住判断条件
  334. xuzhu_panduan:[],// 办理续住判断条件赋值
  335. tui_type:[],// 办理退房判断条件
  336. tui_panduan:[],// 办理退房判断条件赋值
  337. dai_type:[],// 办理入住判断条件
  338. dai_panduan:[],// 办理入住判断条件赋值
  339. order_txt:'',//订房事故时信息
  340. roomtype:1,//区分房型,1全日房 ;2钟点房
  341. hourruzhu:'',//钟点房入住时间
  342. mindate:new Date().toISOString().slice(0, 10),
  343. page:1,
  344. size:10,
  345. totalCount: 0,
  346. apartList:{},
  347. hourTime:'',//钟点房营业时间
  348. }
  349. },
  350. onLoad() {
  351. this.getAllset()
  352. this.handleUrlCode()
  353. // uni.showToast({
  354. // title: 'openId'+localStorage.getItem('openId')
  355. // })
  356. },
  357. mounted() {
  358. },
  359. onReady() {
  360. this.$nextTick(() => {
  361. this.showCalendar = true
  362. })
  363. // TODO 模拟请求异步同步数据
  364. setTimeout(() => {
  365. // console.log('date:'+getDate(new Date()).fullDate)
  366. // console.log('startDate:'+getDate(new Date()).fullDate)
  367. // console.log('endDate:'+getDate(new Date(),6).fullDate)
  368. this.info.date = getDate(new Date()).fullDate
  369. this.info.startDate = getDate(new Date()).fullDate
  370. this.info.endDate = getDate(new Date(),6).fullDate
  371. this.infoXu.date = getDate(new Date()).fullDate
  372. this.infoXu.startDate = getDate(new Date()).fullDate
  373. this.infoXu.endDate = getDate(new Date(),6).fullDate
  374. this.startTime = getDate(new Date()).fullTime
  375. this.endTime = getDate(new Date(),1).fullTime
  376. this.hourruzhu= getDate(new Date()).fullDate
  377. this.startWeek = getDate(new Date()).sWeek
  378. this.endWeek = getDate(new Date(),1).eWeek
  379. }, 1)
  380. // wx请求获取位置权限
  381. this.getAuthorize()
  382. .then(() => {
  383. // 同意后获取
  384. this.getLocationInfo();
  385. })
  386. .catch(() => {
  387. const that = this;
  388. uni.getLocation({
  389. type: "gcj02",
  390. success: function(res) {
  391. // 暂时
  392. that.longitude = res.longitude;
  393. that.latitude = res.latitude;
  394. var long = 0;
  395. var lat = 0;
  396. //小数点保留六位 经度
  397. if (that.longitude.toString().indexOf('.') > 0) {
  398. const longlatsplit = that.longitude.toString().split('.');
  399. if (longlatsplit.length >= 2) {
  400. long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat("." + longlatsplit[1].slice(0,6));
  401. }
  402. }
  403. if (that.latitude.toString().indexOf('.') > 0) {
  404. const longlatsplit1 = that.latitude.toString().split('.');
  405. if (longlatsplit1.length >= 2) {
  406. lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));
  407. }
  408. }
  409. that.distance = that.getMapDistance(lat,long,'28.788671','115.387261');
  410. that.markers = [{
  411. id: "",
  412. latitude: res.latitude,
  413. longitude: res.longitude,
  414. iconPath: "../../static/img/phone.png",
  415. width: that.markerHeight, //宽
  416. height: that.markerHeight, //高
  417. }, ];
  418. },
  419. });
  420. // 不同意给出弹框,再次确认
  421. // this.openConfirm()
  422. // .then(() => {
  423. // this.getLocationInfo();
  424. // })
  425. // .catch(() => {
  426. // this.rejectGetLocation();
  427. // });
  428. });
  429. },
  430. methods: {
  431. // 截取 url中的code方法
  432. handleUrlCode() {
  433. var url = location.href; //获取打开的公众号的路径
  434. // alert(url)
  435. var theRequest = new Object();
  436. if (url.indexOf('?') != -1) {
  437. var str = url.substr(url.indexOf('?') + 1);
  438. var strs = str.split('&');
  439. for (var i = 0; i < strs.length; i++) {
  440. var items = strs[i].split('=');
  441. if(strs[i].split('=')[0]=='code'){
  442. var code=strs[i].split('=')[1]
  443. localStorage.setItem('code',code)
  444. }
  445. theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
  446. theRequest[i] = strs[i].split('=')[1];
  447. }
  448. // alert(code+'p'+localStorage.getItem('code'))
  449. }
  450. },
  451. //公寓整体配置
  452. getAllset(){
  453. let _self = this
  454. _self.roomType = []
  455. apartSet().then((res) => {
  456. if (res.success) {
  457. this.apartList=res.data
  458. this.phone=this.apartList.phoneNumbr
  459. localStorage.setItem('liveTime',this.apartList.liveTime)
  460. localStorage.setItem('leaveTime',this.apartList.leaveTime)
  461. this.startDate = getDate(new Date()).fullDate+" "+this.apartList.liveTime
  462. this.endDate = getDate(new Date(),1).fullDate+" "+this.apartList.leaveTime
  463. this.hourTime=this.apartList.hourTime
  464. this.getRoomType()
  465. return;
  466. } else {
  467. uni.showModal({
  468. content:"没有符合条件的数据!"
  469. })
  470. }
  471. }).catch((err) => {
  472. uni.showModal({
  473. content:err.message
  474. })
  475. });
  476. },
  477. onReachBottom: function() {
  478. console.log('当前长度',this.roomType.length)
  479. if (this.roomType.length < this.totalCount) {
  480. wx.showLoading({
  481. title: '加载中...',
  482. })
  483. this.page = this.page + 1;
  484. this.getRoomType()
  485. } else {
  486. }
  487. },
  488. onPullDownRefresh: function() {
  489. this.page = 1;
  490. this.getRoomType();
  491. },
  492. //切换房型
  493. changeType(){
  494. if(this.roomtype==1){
  495. this.roomtype=2
  496. this.page = 1;
  497. this.startDate = getDate(new Date()).fullDate+" "+getDate(new Date()).fullDate2.substring(11,19)
  498. this.endDate = getDate(new Date()).fullDate+" "+"23:59:00"
  499. this.startTime = getDate(new Date()).fullDate.substring(5,7)+'月'+getDate(new Date()).fullDate.substring(8,10)+'日'
  500. this.getRoomType();
  501. }else if(this.roomtype==2){
  502. this.roomtype=1
  503. this.page = 1;
  504. this.startDate = getDate(new Date()).fullDate+" "+this.apartList.liveTime
  505. this.endDate = getDate(new Date(),1).fullDate+" "+this.apartList.leaveTime
  506. this.getRoomType();
  507. }
  508. },
  509. //钟点房选择日期
  510. changezhong(e){
  511. console.log(e,getDate(new Date()).fullDate,getDate(new Date()).fullDate<e,'l')
  512. this.hourruzhu=e
  513. if(getDate(new Date()).fullDate<e){
  514. this.startDate = e+" "+"00:00:00"
  515. this.endDate = e+" "+"23:59:00"
  516. }else{
  517. this.startDate = e+" "+getDate(new Date()).fullDate2.substring(11,19)
  518. this.endDate = e+" "+"23:59:00"
  519. }
  520. this.startTime = e.substring(5,7)+'月'+e.substring(8,10)+'日'
  521. this.getRoomType();
  522. },
  523. // 房型接口
  524. getRoomType() {
  525. let _self = this
  526. _self.roomType = []
  527. var data="?page="+_self.page+"&size="+_self.size+"&type="+_self.roomtype+"&startTime="+_self.startDate+"&endTime="+_self.endDate
  528. getroomtype(data).then((res) => {
  529. if (res.success) {
  530. this.totalCount = res.data.total
  531. // res.data.records.forEach(data => {
  532. // // if (data.houseStatus == '1') {//房间可订
  533. // _self.roomType.push(data)
  534. // // }
  535. // })
  536. if (this.page == 1) {
  537. _self.roomType = res.data.records
  538. } else {
  539. _self.roomType = [..._self.roomType, ...res.data.records]
  540. }
  541. uni.stopPullDownRefresh();
  542. uni.hideLoading()
  543. } else {
  544. uni.showModal({
  545. content:"没有符合条件的数据!"
  546. })
  547. // this.$message.warning('没有符合条件的数据!')
  548. }
  549. }).catch((err) => {
  550. uni.showModal({
  551. content:err.message
  552. })
  553. // this.$message.error(err.message)
  554. });
  555. },
  556. // 房型详情接口
  557. getRoomTypeInfo(id) {
  558. let _self = this
  559. _self.typeText=''
  560. _self.img=[]
  561. var data="?houseId="+id
  562. getroomtypeinfo(data).then((res) => {
  563. if (res.success) {
  564. _self.typeText=res.data.introductory
  565. _self.img=res.data.housePicture.split(',')
  566. return;
  567. } else {
  568. this.$message.warning('没有符合条件的数据!')
  569. }
  570. }).catch((err) => {
  571. this.$message.error(err.message)
  572. });
  573. },
  574. // 订单列表
  575. getOrderPage() {
  576. let _self = this
  577. _self.xuzhu_type=[]
  578. _self.tui_type=[]
  579. _self.dai_type=[]
  580. var data='?curPage=1&pageSize=100'
  581. getorderpage(data).then((res) => {
  582. if (res.success) {
  583. console.log(res)
  584. res.data.list.forEach(data => {
  585. if (data.flag !== '-1') {
  586. _self.xuzhu_type.push(data.orderStatu)
  587. _self.tui_type.push(data.orderStatu)
  588. _self.dai_type.push(data.orderStatu)
  589. // console.log(_self.xuzhu_type)
  590. }
  591. })
  592. return;
  593. } else {
  594. this.$message.warning('没有符合条件的数据!')
  595. }
  596. }).catch((err) => {
  597. this.$message.error(err.message)
  598. });
  599. // this.$axios.get("/hotel/ihotel-api/ihotel/hotelOrder/user/order/page?curPage=1&pageSize=100",
  600. // {
  601. // headers:{
  602. // 'user_token':localStorage.getItem('token')
  603. // }
  604. // }).then(res => {
  605. // res = res.data
  606. // if (res.success) {
  607. // res.data.list.forEach(data => {
  608. // if (data.flag !== '-1') {
  609. // _self.xuzhu_type.push(data.orderStatu)
  610. // _self.tui_type.push(data.orderStatu)
  611. // _self.dai_type.push(data.orderStatu)
  612. // // console.log(_self.xuzhu_type)
  613. // }
  614. // })
  615. // } else {
  616. // console.log('获取订单列表失败')
  617. // }
  618. // });
  619. },
  620. // 跳转到入住须知
  621. navigateToXuzhi(){
  622. uni.navigateTo({
  623. url: "../ruzhuxuzhi/ruzhuxuzhi",
  624. });
  625. },
  626. // 跳转到公寓详情
  627. navigateToXiangqing(){
  628. uni.navigateTo({
  629. url: "../gongyuxiangqing/gongyuxiangqing",
  630. });
  631. },
  632. // 订房间
  633. navigateToOrderRoom(houseStatus,id,roomName,item) {
  634. let _self = this
  635. _self.roomType = []
  636. if (houseStatus==1){
  637. uni.navigateTo({
  638. url: "../order_room/order_room?roomTypeId="+id +"&enableStartTime="+this.startDate+"&enableEndTime="+this.endDate+"&startTime="+this.startTime+"&endTime="+this.endTime+"&typeName="+roomName+"&ruzhu_num="+this.ruzhu_num+"&roomArea="
  639. +item.roomArea+"&roomType="+item.roomType+"&roomConfiguration="+item.roomConfiguration+"&roomPrice="+item.roomPrice+'&surplusCount='+item.surplusCount+'&zhongTime='+this.apartList.hourTime+'&zhongshi='+item.roomLiveTime,
  640. });
  641. }
  642. // this.getRoomType()
  643. },
  644. //办理入住跳转
  645. navigateToDairuzhu(type){
  646. this.dai_panduan=[]
  647. setTimeout(() => {
  648. this.getOrderPage()
  649. },1)
  650. setTimeout(() => {
  651. for (let i=0;i<this.dai_type.length;i++){
  652. this.dai_type.forEach(val => {
  653. if(val[i]==2) {
  654. this.dai_panduan.push(val)
  655. }
  656. })
  657. }
  658. if(this.dai_panduan.length>=1) {
  659. uni.navigateTo({
  660. url:"../my_orderlist/my_orderlist?Inv=2"
  661. })
  662. }else if(this.dai_panduan.length<1) {
  663. this.msgType = type
  664. this.order_txt='请先订房!'
  665. this.$refs.popup_order.open()
  666. }
  667. },150)
  668. },
  669. //办理退房
  670. navigateToTuifang(type){
  671. this.tui_panduan=[]
  672. setTimeout(() => {
  673. this.getOrderPage()
  674. },1)
  675. setTimeout(() => {
  676. for (let i=0;i<this.tui_type.length;i++){
  677. this.tui_type.forEach(val => {
  678. if(val[i]==3) {
  679. this.tui_panduan.push(val)
  680. }
  681. })
  682. }
  683. if(this.tui_panduan.length>=1) {
  684. uni.navigateTo({
  685. url:"../my_orderlist/my_orderlist?Inv=3"
  686. })
  687. }else if(this.tui_panduan.length<1) {
  688. this.msgType = type
  689. this.$refs.popup_tui.open()
  690. }
  691. },150)
  692. },
  693. //户型详情弹窗
  694. inputDialogToggle(id) {
  695. this.$refs.popup.open()
  696. this.getRoomTypeInfo(id)
  697. },
  698. popupClose() {
  699. this.$refs.popup.close()
  700. },
  701. //办理续住弹窗
  702. navigateToXuzhu(){
  703. this.xuzhu_panduan=[]
  704. setTimeout(() => {
  705. this.getOrderPage()
  706. },1)
  707. setTimeout(() => {
  708. for (let i=0;i<this.xuzhu_type.length;i++){
  709. this.xuzhu_type.forEach(val => {
  710. if(val[i]==3) {
  711. this.xuzhu_panduan.push(val)
  712. }
  713. })
  714. }
  715. console.log(this.xuzhu_panduan)
  716. if(this.xuzhu_panduan.length>1) {
  717. uni.navigateTo({
  718. url:"../my_orderlist/my_orderlist?Inv=3"
  719. })
  720. }else if(this.xuzhu_panduan.length==1) {
  721. this.$refs.popup_xuzhu.open()
  722. }else if(this.xuzhu_panduan.length==0) {
  723. this.$refs.popup_xuzhu_no.open()
  724. }
  725. },150)
  726. },
  727. popupXuzhuClose() {
  728. this.$refs.popup_xuzhu.close()
  729. },
  730. // 不可续住关闭弹窗
  731. dialogClose(){
  732. this.$refs.popup_xuzhu_no.close()
  733. },
  734. // 日期选择器弹窗开启
  735. openCalendar() {
  736. this.$refs.popup_picker.open()
  737. },
  738. change(e) {
  739. this.info.selected=[
  740. {
  741. date: e.range.before,
  742. info: '到店'
  743. },
  744. {
  745. date: e.range.after,
  746. info: '离店'
  747. }
  748. ]
  749. if(e.range.before!=''&&e.range.after=='') {
  750. this.startWeek='周'+e.lunar.ncWeek.substring(2,3)
  751. } else if(e.range.before!=''&&e.range.after!=''){
  752. if((new Date(e.range.after).getTime())<(new Date(e.range.before).getTime())) {
  753. this.order_txt='离店日期不能小于到店日期'
  754. this.$refs.popup_order.open()
  755. }else{
  756. this.endWeek='周'+e.lunar.ncWeek.substring(2,3)
  757. this.startTime=e.range.before.substring(5,7)+'月'+e.range.before.substring(8,10)+'日'
  758. this.endTime=e.range.after.substring(5,7)+'月'+e.range.after.substring(8,10)+'日'
  759. this.startDate = e.range.before +' '+this.apartList.liveTime
  760. this.endDate = e.range.after +' '+this.apartList.leaveTime
  761. this.ruzhu_num=parseInt(((new Date(e.range.after).getTime())-(new Date(e.range.before).getTime()))/1000/60/60/24)
  762. if(this.endDate !=this.apartList.leaveTime) {
  763. this.getRoomType()
  764. }
  765. }
  766. }
  767. },
  768. // 续住里日期选择器弹窗
  769. openXuCalendar() {
  770. this.$refs.popup_xu.open()
  771. },
  772. changeXu(e) {
  773. console.log('1change 返回:', e)
  774. // 模拟动态打卡
  775. if (this.infoXu.selected.length > 5) return
  776. this.infoXu.selected.push({
  777. date: e.range.before,
  778. info: '到店'
  779. })
  780. this.infoXu.selected.push({
  781. date: e.range.after,
  782. info: '离店'
  783. })
  784. },
  785. //拨打电话
  786. telphone(phone){
  787. uni.makePhoneCall({
  788. phoneNumber: phone ,
  789. }) // 传参带入号码即可
  790. },
  791. // 初次位置授权
  792. getAuthorize() {
  793. return new Promise((resolve, reject) => {
  794. uni.authorize({
  795. scope: "scope.userLocation",
  796. success: () => {
  797. resolve(); // 允许授权
  798. },
  799. fail: () => {
  800. reject(); // 拒绝授权
  801. },
  802. });
  803. });
  804. },
  805. // 确认授权后,获取用户位置
  806. getLocationInfo() {
  807. const that = this;
  808. uni.getLocation({
  809. type: "gcj02",
  810. success: function(res) {
  811. // 暂时
  812. that.longitude = res.longitude; //118.787575;
  813. that.latitude = res.latitude; //32.05024;
  814. console.log("获取当前的用户经度", that.longitude);
  815. console.log("获取当前的用户纬度", that.latitude);
  816. var long = 0;
  817. var lat = 0;
  818. //小数点保留六位 经度
  819. if (that.longitude.toString().indexOf('.') > 0) {
  820. const longlatsplit = that.longitude.toString().split('.');
  821. if (longlatsplit.length >= 2) {
  822. long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat("." + longlatsplit[1].slice(0,6));
  823. }
  824. }
  825. if (that.latitude.toString().indexOf('.') > 0) {
  826. const longlatsplit1 = that.latitude.toString().split('.');
  827. if (longlatsplit1.length >= 2) {
  828. lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));
  829. }
  830. }
  831. console.log("纬度", lat);
  832. that.distance = that.getMapDistance(lat,long,'28.788671','115.387261');
  833. console.log(that.distance)
  834. that.markers = [{
  835. id: "",
  836. latitude: res.latitude,
  837. longitude: res.longitude,
  838. iconPath: "../../static/img/phone.png",
  839. width: that.markerHeight, //宽
  840. height: that.markerHeight, //高
  841. }, ];
  842. },
  843. });
  844. },
  845. // 拒绝授权后,弹框提示是否手动打开位置授权
  846. openConfirm() {
  847. return new Promise((resolve, reject) => {
  848. uni.showModal({
  849. title: "请求授权当前位置",
  850. content: "我们需要获取地理位置信息,为您推荐路线",
  851. success: (res) => {
  852. // if (res.confirm) {
  853. // uni.openSetting().then((res) => {
  854. // if (res[1].authSetting["scope.userLocation"] === true) {
  855. // resolve(); // 打开地图权限设置
  856. // } else {
  857. // reject();
  858. // console.log('reject')
  859. // }
  860. // });
  861. // } else if (res.cancel) {
  862. // reject();
  863. // }
  864. },
  865. });
  866. });
  867. },
  868. // 彻底拒绝位置获取
  869. rejectGetLocation() {
  870. uni.showToast({
  871. title: "你拒绝了授权,无法获得周边信息",
  872. icon: "none",
  873. duration: 2000,
  874. });
  875. },
  876. //打开地图导航
  877. mapDaohang(lon,lat){
  878. },
  879. //进行经纬度转换为距离的计算
  880. Rad(d) {
  881. return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
  882. },
  883. /*
  884. 计算距离,参数分别为第一点的纬度,经度;第二点的纬度,经度
  885. 默认单位km
  886. */
  887. getMapDistance(lat1, lng1, lat2, lng2) {
  888. // console.log(this.Rad(lat1))
  889. // console.log(this.Rad(lng1))
  890. // console.log(this.Rad(lat2))
  891. // console.log(this.Rad(lng2))
  892. // console.log(this.Rad(28.678651))
  893. var radLat1 = this.Rad(lat1);
  894. var radLat2 = this.Rad(lat2);
  895. var a = radLat1 - radLat2;
  896. var b = this.Rad(lng1) - this.Rad(lng2);
  897. var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
  898. Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
  899. s = s * 6378.137; // EARTH_RADIUS;
  900. s = Math.round(s * 10000) / 10000; //输出为公里
  901. s=s.toFixed(2);
  902. return s;
  903. },
  904. }
  905. }
  906. </script>
  907. <style>
  908. @import url("./css/index.css");
  909. </style>