index.vue 30 KB

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