Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
83194dc5 1 parent b98c3451

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

Inline Side-by-side
Showing 5 changed files with 141 additions and 74 deletions
/*
* @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));
......
<!--
* @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>
......
<!--
* @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="color: #7D7C7C; font-size: 0.8rem; margin-top: 0.15rem;">两室 宜住3人</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;">{{ 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,
price: 1280.25,
discount: 0,
price: 0,
});
const price_discount = computed(() => {
......@@ -193,15 +194,21 @@ const onBookCountChange = (count) => {
const use_type = ref('1'); // 本人入住或者帮别人订
const formData = reactive({
name: '11',
tel: '1',
name: '',
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>
......
<!--
* @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-content">两室 宜住3人</view>
<view class="detail-info-title">{{ state.roomInfo.title }}</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="old-price"><nut-price :price="1280" size="small" strike-through style="color: #7D7C7C;" /></view>
<view class="price"><nut-price :price="state.roomInfo.discount_price" size="large" /></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 = () => {
// TODO: 需要查询个人信息是否留了手机号码
let tel = '123';
if (tel) {
// 预定房间
const goToConfirm = async () => {
// 获取用户信息
const myInfoData = await showMyInfoAPI();
if (myInfoData.code) {
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`,
});
}
}
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'
}, 1000);
},
{
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) {
// 转发成功之后的回调
......
<!--
* @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({
title: '没有更多了',
icon: 'none'
});
// Taro.showToast({
// title: '没有更多了',
// icon: 'none'
// });
}
}
},
......