订房页面，房间详情页API联调

hookehuyr
Commit 83194dc5ee22d82e77a1365f0b86a51df4eb0fed 83194dc5 1 parent b98c3451
Showing 5 changed files with 141 additions and 74 deletions
src/api/index.js
src/components/roomCard.vue
src/pages/confirm/index.vue
src/pages/detail/index.vue
src/pages/index/index.vue
--- a/src/api/index.js
View file @83194dc
+++ b/src/api/index.js
View file @83194dc
 /*
  * @Date: 2023-12-22 10:29:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-26 09:40:57
+ * @LastEditTime: 2023-12-26 16:09:24
  * @FilePath: /meihuaApp/src/api/index.js
  * @Description: 文件描述
  */
@@ -14,6 +14,7 @@ const Api = {
   SAVE_CUSTOMER_INFO: '/srv/?a=room_order&t=save_customer_info',
   SYS_PARAM: '/srv/?a=room_order&t=sys_param',
   GET_LIST: '/srv/?a=room_data&t=get_list',
+  GET_ROOM: '/srv/?a=room_data&t=get_room',
 }
 /**
@@ -59,3 +60,12 @@ export const sysParamAPI = (params) => fn(fetch.get(Api.SYS_PARAM, params));
  * @returns
  */
 export const getListAPI = (params) => fn(fetch.get(Api.GET_LIST, params));
+
+/**
+ * @description: 获取房间详情
+ * @param start_date 入住时间
+ * @param end_date 离店时间
+ * @param room_type floor/room
+ * @returns
+ */
+export const getRoomAPI = (params) => fn(fetch.get(Api.GET_ROOM, params));
--- a/src/components/roomCard.vue
View file @83194dc
+++ b/src/components/roomCard.vue
View file @83194dc
 <!--
  * @Date: 2023-12-13 13:42:23
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-26 10:47:49
+ * @LastEditTime: 2023-12-26 16:14:35
  * @FilePath: /meihuaApp/src/components/roomCard.vue
  * @Description: 房间详情组件
 -->
@@ -105,7 +105,6 @@ watch(
 const dates = getTodayAndTomorrow();
 const handleTap = () => {
-  let id = 'abc';
   if (!startDate.value) {
     startDate.value = dates.today;
   }
@@ -113,10 +112,11 @@ const handleTap = () => {
     endDate.value = dates.tomorrow;
   }
   Taro.navigateTo({
-    url: `../detail/index?id=${id}&start_date=${startDate.value}&end_date=${endDate.value}`,
+    url: `../detail/index?id=${id.value}&room_type=${room_type.value}&start_date=${startDate.value}&end_date=${endDate.value}`,
   });
 }
+const id = ref(''); // 房间id
 const cover = ref(''); // 封面图
 const title = ref(''); // 标题
 const original_price = ref(''); // 原价
@@ -124,8 +124,10 @@ const discount_price = ref(''); // 优惠价
 const capacity = ref(''); // 能住几个人
 const num = ref(''); // 可售数量
 const room_num = ref(''); // 房间描述 两室
+const room_type = ref(''); //
 onMounted(() => {
+  id.value = props.data.id;
   cover.value = props.data.cover ? props.data.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
   title.value = props.data.title;
   room_num.value = props.data.room_num;
@@ -133,6 +135,7 @@ onMounted(() => {
   num.value = props.data.num;
   original_price.value = props.data.original_price;
   discount_price.value = props.data.discount_price;
+  room_type.value = props.data.room_type;
 });
 </script>
--- a/src/pages/confirm/index.vue
View file @83194dc
+++ b/src/pages/confirm/index.vue
View file @83194dc
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-25 12:48:26
+ * @LastEditTime: 2023-12-26 17:21:40
  * @FilePath: /meihuaApp/src/pages/confirm/index.vue
  * @Description: 确认订单页面
 -->
@@ -10,11 +10,11 @@
     <view class="book-info-desc">
       <nut-row>
         <nut-col :span="16">
-          <view style="font-weight: bold; color: #0B0B0B; font-size: 1.15rem;">非凡魅力豪华总统套房</view>
+          <view style="font-weight: bold; color: #0B0B0B; font-size: 1.15rem;">{{ state.roomInfo.title }}</view>
-          <view style="color: #7D7C7C; font-size: 0.8rem; margin-top: 0.15rem;">两室 宜住3人</view>
+          <view style="color: #7D7C7C; font-size: 0.8rem; margin-top: 0.15rem;">{{ state.roomInfo.room_num }}室 宜住{{ state.roomInfo.capacity }}人</view>
         </nut-col>
         <nut-col :span="8">
-          <image style="width: 100%; height: 50px; border-radius: 0.25rem;" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/img1@2x.png" />
+          <image style="width: 100%; height: 50px; border-radius: 0.25rem;" mode="aspectFill" :src="state.roomInfo.cover" />
         </nut-col>
       </nut-row>
     </view>
@@ -53,7 +53,7 @@
           <view class="check-in-text">入住时间</view>
         </nut-col>
         <nut-col span="12">
-          <view class="check-in-time">{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 14:00 后</view>
+          <view class="check-in-time">{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 {{ state.sysInfo.check_in_time }} 后</view>
         </nut-col>
       </nut-row>
       <nut-row>
@@ -61,7 +61,7 @@
           <view class="check-out-text">退房日期</view>
         </nut-col>
         <nut-col span="12">
-          <view class="check-out-time">{{ booking_info.check_out.month }}月{{ booking_info.check_out.day }}日 12:00 前</view>
+          <view class="check-out-time">{{ booking_info.check_out.month }}月{{ booking_info.check_out.day }}日 {{ state.sysInfo.check_out_time }} 前</view>
         </nut-col>
       </nut-row>
       <nut-row>
@@ -69,12 +69,12 @@
           <view class="meal-text">早餐</view>
         </nut-col>
         <nut-col span="12">
-          <view class="meal-count">{{ booking_info.days }} 份</view>
+          <view class="meal-count">{{ state.roomInfo.capacity }} 份</view>
         </nut-col>
       </nut-row>
       <view class="tip">
         <view class="tip-red">*</view>
-        <view class="tip-text">{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 20:00后未入住，订单将被取消</view>
+        <view class="tip-text">{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 {{ state.sysInfo.last_check_time }}后未入住，订单将被取消</view>
       </view>
     </view>
     <view class="space-line"></view>
@@ -149,6 +149,7 @@ import { ref, reactive, onMounted, computed } from "vue";
 import { getCurrentPageParam } from "@/utils/weapp";
 import { IconFont } from '@nutui/icons-vue-taro';
 import payCard from '@/components/payCard.vue'
+import { getRoomAPI, showMyInfoAPI, sysParamAPI } from '@/api/index'
 const booking_info = ref({
   days: 1, // 入住天数
@@ -167,8 +168,8 @@ const booking_info = ref({
 });
 const room_price_info = ref({
-  discount: 980.18,
+  discount: 0,
-  price: 1280.25,
+  price: 0,
 });
 const price_discount = computed(() => {
@@ -193,15 +194,21 @@ const onBookCountChange = (count) => {
 const use_type = ref('1'); // 本人入住或者帮别人订
 const formData = reactive({
-  name: '11',
+  name: '',
-  tel: '1',
+  tel: '',
   note: ''
 });
+const state = reactive({
+  cover: '',
+  roomInfo: {},
+  sysInfo: {},
+});
+
 const show_pay = ref(false);
 const payData = ref({});
-onMounted(() => {
+onMounted(async () => {
   const { id, start_date, end_date, between_date, start_date_week, end_date_week } = getCurrentPageParam();
   booking_info.value.days = between_date;
   let check_in = start_date.split('-');
@@ -219,6 +226,25 @@ onMounted(() => {
     day: check_out[2],
     day_of_week: end_date_week ? JSON.parse(end_date_week) : ''
   }
+  // 获取房间详情
+  let params = getCurrentPageParam();
+  const roomData = await getRoomAPI({ i: params.id, start_date: params.start_date, end_date: params.end_date, room_type: params.room_type });
+  if (roomData.code) {
+    state.roomInfo = roomData.data;
+    room_price_info.value.discount = +roomData.data.discount_price;
+    room_price_info.value.price = +roomData.data.original_price;
+  }
+  // 获取系统参数
+  const sysData = await sysParamAPI();
+  if (sysData.code) {
+    state.sysInfo = sysData.data;
+  }
+  // 获取用户信息
+  const myInfoData = await showMyInfoAPI();
+  if (myInfoData.code) {
+    formData.name = myInfoData.data.wxapp_user_name;
+    formData.tel = myInfoData.data.wxapp_user_phone;
+  }
 });
 const goPay = () => {
@@ -237,22 +263,25 @@ const goPay = () => {
     });
     return;
   } else {
-    // TODO: 保存订房信息
+    // TODO: 先保存订房信息
     console.warn('保存订房信息', formData);
-    // TODO: 跳转支付页面
+    // TODO: 订房成功后，弹出支付页面
+    // let params = getCurrentPageParam();
     setTimeout(() => {
       show_pay.value = true;
-      payData.value.id = '123';
+      payData.value.id = '订单ID';
       payData.value.price = room_price_info.value.discount * book_count.value * booking_info.value.days;
-      payData.value.remain_time = '1000';
+      payData.value.remain_time = '1000'; // 支付失效秒数
     }, 1000);
   }
 }
+// 单击支付弹框关闭回调
 const onPayClose = () => {
   show_pay.value = false;
+  // 订房成功页面，不一定支付了
   Taro.navigateTo({
-    url: '/pages/payInfo/index?id=123',
+    url: '/pages/payInfo/index',
   });
 }
 </script>
--- a/src/pages/detail/index.vue
View file @83194dc
+++ b/src/pages/detail/index.vue
View file @83194dc
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-25 16:09:56
+ * @LastEditTime: 2023-12-26 17:11:50
  * @FilePath: /meihuaApp/src/pages/detail/index.vue
  * @Description: 房间详情页面
 -->
@@ -13,8 +13,8 @@
       </nut-swiper-item>
     </nut-swiper>
     <view class="detail-info-wrapper">
-      <view class="detail-info-title">非凡魅力豪华总统套房</view>
+      <view class="detail-info-title">{{ state.roomInfo.title }}</view>
-      <view class="detail-info-content">两室 宜住3人</view>
+      <view class="detail-info-content">{{ state.roomInfo.room_num }}室 宜住{{ state.roomInfo.capacity }}人</view>
     </view>
     <!-- 日历选择器 -->
     <view v-if="showBook" class="book-cal">
@@ -22,16 +22,16 @@
     </view>
     <view v-else class="no-calendar-border"></view>
     <!-- END -->
-    <view class="detail-introduce-title">房间介绍</view>
+    <view v-if="state.roomInfo.description" class="detail-introduce-title">房间介绍</view>
     <view class="detail-introduce-html">
-      <view id="taro_html" v-html="taro_html" class="taro_html"></view>
+      <view id="taro_html" v-html="state.roomInfo.description" class="taro_html"></view>
     </view>
     <view v-if="showBook" class="book-bar">
       <nut-row>
         <nut-col :span="18">
           <view class="book-price">
-            <view class="price"><nut-price :price="980" size="large" /></view>
+            <view class="price"><nut-price :price="state.roomInfo.discount_price" size="large" /></view>
-            <view class="old-price"><nut-price :price="1280" size="small" strike-through style="color: #7D7C7C;" /></view>
+            <view class="old-price"><nut-price :price="state.roomInfo.original_price" size="small" strike-through style="color: #7D7C7C;" /></view>
           </view>
         </nut-col>
         <nut-col :span="6">
@@ -48,6 +48,7 @@ import Taro from '@tarojs/taro'
 import { ref, computed, reactive, onMounted } from "vue";
 import calendarSelect from '@/components/calendarSelect.vue'
 import { getCurrentPageParam } from "@/utils/weapp";
+import { getRoomAPI, showMyInfoAPI } from '@/api/index'
 /**
  * 获取日期星期几
@@ -106,75 +107,99 @@ const getDayDifference = (startDate, endDate) => {
   return dayDiff;
 }
-const taro_html = ref('<div>123</div>');
+// 是否可以订房
-
-// TODO: 到时候根据后端实际字段修改
-// const book_status = ref('已约满');
-const book_status = ref('');
-
 const showBook = computed(() => {
-  return book_status.value !== '已约满'
+  return state.roomInfo.num > 0;
 });
+const page = ref('1'); // banner图索引
+
 const start_date = ref('');
 const end_date = ref('');
 const between_date = ref('');
 const start_date_week = ref('');
 const end_date_week = ref('');
-const onDatesChange = ({ startDate, endDate, betweenDate, startDateWeek, endDateWeek }) => {
+// 日期选择回调
+const onDatesChange = async ({ startDate, endDate, betweenDate, startDateWeek, endDateWeek }) => {
   start_date.value = startDate;
   end_date.value = endDate;
   start_date_week.value = startDateWeek;
   end_date_week.value = endDateWeek;
   between_date.value = betweenDate;
+  // 获取房间详情
+  let params = getCurrentPageParam();
+  const { code, data } = await getRoomAPI({ i: params.id, start_date: start_date.value, end_date: end_date.value, room_type: params.room_type });
+  if (code) {
+    state.roomInfo = data;
+    // 轮播图
+    if (state.roomInfo.banner.length) {
+      state.roomInfo.banner.forEach(item => {
+        state.imgData.push({
+          src: item
+        })
+      });
+    }
+  }
 }
-onMounted(() => {
+const state = reactive({
+  showPreview: false,
+  imgData: [],
+  roomInfo: {},
+  phone: '',
+});
+
+onMounted(async () => {
   let params = getCurrentPageParam();
-  console.warn('id', params.id);
+  // 日历控件日期初始化
-  console.warn('start_date', params.start_date);
-  console.warn('end_date', params.end_date);
   start_date.value = params.start_date;
   end_date.value = params.end_date;
   between_date.value = getDayDifference(params.start_date, params.end_date);
   start_date_week.value = JSON.stringify(getDayOfWeek(params.start_date));
   end_date_week.value = JSON.stringify(getDayOfWeek(params.end_date));
+  // 获取房间详情
+  const roomData = await getRoomAPI({ i: params.id, start_date: params.start_date, end_date: params.end_date, room_type: params.room_type });
+  if (roomData.code) {
+    state.roomInfo = roomData.data;
+    // 轮播图
+    if (state.roomInfo.banner.length) {
+      state.roomInfo.banner.forEach(item => {
+        state.imgData.push({
+          src: item
+        })
+      });
+    }
+  }
 });
-const page = ref(1);
+// 预定房间
-
+const goToConfirm = async () => {
-const goToConfirm = () => {
+  // 获取用户信息
-  // TODO: 需要查询个人信息是否留了手机号码
+  const myInfoData = await showMyInfoAPI();
-  let tel = '123';
+  if (myInfoData.code) {
-  if (tel) {
+    state.phone = myInfoData.data.wxapp_user_phone;
+  }
+  let params = getCurrentPageParam();
+  if (state.phone) {
     Taro.navigateTo({
-      url: `/pages/confirm/index?id=123&start_date=${start_date.value}&end_date=${end_date.value}&between_date=${between_date.value}&start_date_week=${start_date_week.value}&end_date_week=${end_date_week.value}`,
+      url: `/pages/confirm/index?id=${params.id}&start_date=${start_date.value}&end_date=${end_date.value}&between_date=${between_date.value}&start_date_week=${start_date_week.value}&end_date_week=${end_date_week.value}&room_type=${params.room_type}`,
     });
-  } else {
+  } else { // 没有手机号记录，需要绑定手机号后再预定房间
+    Taro.showToast({
+      title: '请先绑定手机号',
+      icon: 'none',
+      duration: 2000,
+      success: () => {
+        setTimeout(() => {
           Taro.navigateTo({
             url: `/pages/login/index?page=detail`,
           });
-  }
+        }, 1000);
-}
-
-const state = reactive({
-  showPreview: false,
-  imgData: [
-    {
-      src: 'https://cdn.ipadbiz.cn/meihua/img1@2x.png'
-    },
-    {
-      src: 'https://cdn.ipadbiz.cn/meihua/banner1@2x.png'
-    },
-    {
-      src: 'https://cdn.ipadbiz.cn/meihua/img1@2x.png'
       },
-    {
+    });
-      src: 'https://cdn.ipadbiz.cn/meihua/img1@2x.png'
   }
-  ]
+}
-});
 const showFn = () => {
   state.showPreview = true;
@@ -197,7 +222,7 @@ export default {
     // 设置菜单中的转发按钮触发转发事件时的转发内容
     var shareObj = {
       title: "梅花岛-房间详情",    // 默认是小程序的名称(可以写slogan等)
-      path: `pages/detail/index?id=${params.id}&start_date=${params.start_date}&end_date=${params.end_date}`,    // 默认是当前页面，必须是以‘/'开头的完整路径
+      path: `pages/detail/index?id=${params.id}&start_date=${params.start_date}&end_date=${params.end_date}&room_type=${params.room_type}`,    // 默认是当前页面，必须是以‘/'开头的完整路径
       imageUrl: '',   //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
       success: function (res) {
         // 转发成功之后的回调
--- a/src/pages/index/index.vue
View file @83194dc
+++ b/src/pages/index/index.vue
View file @83194dc
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-26 11:15:51
+ * @LastEditTime: 2023-12-26 16:11:45
  * @FilePath: /meihuaApp/src/pages/index/index.vue
  * @Description: 首页
 -->
@@ -129,7 +129,7 @@ export default {
       const navHeight = await $('#navbar-page').height();
       this.indexCoverHeight = windowHeight - navHeight;
     }, 500);
-    //
+    // 获取系统参数
     const { code, data } = await sysParamAPI();
     if (code) {
       this.banner_url = data.home_banner ? data.home_banner : 'https://cdn.ipadbiz.cn/meihua/banner1@2x.png';
@@ -168,10 +168,10 @@ export default {
           this.page = this.page + 1;
           this.flag = true;
         } else {
-          Taro.showToast({
+          // Taro.showToast({
-            title: '没有更多了',
+          //   title: '没有更多了',
-            icon: 'none'
+          //   icon: 'none'
-          });
+          // });
         }
       }
     },