Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
b98c3451 1 parent a7dbf1a5

房间列表API联调

Inline Side-by-side
Showing 4 changed files with 139 additions and 117 deletions
/*
* @Date: 2023-12-22 10:29:37
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-22 16:35:54
* @LastEditTime: 2023-12-26 09:40:57
* @FilePath: /meihuaApp/src/api/index.js
* @Description: 文件描述
*/
......@@ -13,6 +13,7 @@ const Api = {
SHOW_SESSION: '/srv/?a=room_order&t=show_session',
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',
}
/**
......@@ -48,3 +49,13 @@ export const saveCustomerInfoAPI = (params) => fn(fetch.post(Api.SAVE_CUSTOMER_I
* @returns
*/
export const sysParamAPI = (params) => fn(fetch.get(Api.SYS_PARAM, params));
/**
* @description: 获取房间列表
* @param start_date 入住时间
* @param end_date 离店时间
* @param offset 偏移量
* @param limit 条数
* @returns
*/
export const getListAPI = (params) => fn(fetch.get(Api.GET_LIST, params));
......
<!--
* @Date: 2023-12-13 13:42:23
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-25 13:33:45
* @LastEditTime: 2023-12-26 10:47:49
* @FilePath: /meihuaApp/src/components/roomCard.vue
* @Description: 房间详情组件
-->
<template>
<view class="room-card-component" @tap="handleTap">
<image class="room-cover" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/img1@2x.png" />
<image class="room-cover" mode="aspectFill" :src="cover" />
<view class="room-info">
<nut-row>
<nut-col span="18" class="room-info-left">
<view class="room-info-title">非凡魅力豪华总统套房</view>
<view class="room-info-desc">两室 宜住3人</view>
<view class="room-info-title">{{ title }}</view>
<view class="room-info-desc">{{ room_num }}室 宜住{{ capacity }}人</view>
</nut-col>
<nut-col span="6" class="room-info-right">
<nut-price :price="980" size="normal" style="font-weight: bold;" />
<nut-price :price="1280" size="small" strike-through style="color: #7D7C7C;" />
<nut-price :price="discount_price" size="normal" style="font-weight: bold;" />
<nut-price :price="original_price" size="small" strike-through style="color: #7D7C7C;" />
</nut-col>
</nut-row>
</view>
<view class="room-status">
<view v-if="!num" class="room-status">
<view class="room-status-wrapper">
<image mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/icon_checked@2x.png" />
</view>
......@@ -117,7 +117,22 @@ const handleTap = () => {
});
}
const cover = ref(''); // 封面图
const title = ref(''); // 标题
const original_price = ref(''); // 原价
const discount_price = ref(''); // 优惠价
const capacity = ref(''); // 能住几个人
const num = ref(''); // 可售数量
const room_num = ref(''); // 房间描述 两室
onMounted(() => {
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;
capacity.value = props.data.capacity;
num.value = props.data.num;
original_price.value = props.data.original_price;
discount_price.value = props.data.discount_price;
});
</script>
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-22 13:29:20
* @LastEditTime: 2023-12-26 11:15:09
* @FilePath: /meihuaApp/src/pages/book/index.vue
* @Description: 订房页面
-->
......@@ -37,66 +37,62 @@ import navBar from '@/components/navBar.vue'
import calendarSelect from '@/components/calendarSelect.vue'
import roomCard from '@/components/roomCard.vue'
const calenderInfo = ref({});
const onDatesChange = ({ startDate, endDate }) => {
// console.warn(startDate, endDate);
calenderInfo.value = {
startDate,
endDate
}
}
// const value = ref('0');
const value = ref('0');
const tabList = ref([{
title: '全部',
key: '0',
}, {
title: '总统套房',
key: '1',
}, {
title: '豪华套间',
key: '2',
}, {
title: '家庭豪华间',
key: '3',
}, {
title: '连排别墅',
key: '4',
}]);
const bookList = ref([]);
// const tabList = ref([{
// title: '全部',
// key: '0',
// }, {
// title: '总统套房',
// key: '1',
// }, {
// title: '豪华套间',
// key: '2',
// }, {
// title: '家庭豪华间',
// key: '3',
// }, {
// title: '连排别墅',
// key: '4',
// }]);
onMounted(() => {
for (let index = 0; index < 5; index++) {
bookList.value.push({
id: index,
title: '标题',
price: 100,
status: 'all',
});
}
});
const onTabClick = ({ title, paneKey, disabled }) => {
Taro.showLoading({
title: '加载中',
});
setTimeout(() => {
Taro.hideLoading();
}, 1000);
console.warn(title, paneKey);
}
// const onTabClick = ({ title, paneKey, disabled }) => {
// Taro.showLoading({
// title: '加载中',
// });
// setTimeout(() => {
// Taro.hideLoading();
// }, 1000);
// console.warn(title, paneKey);
// }
</script>
<script>
import "./index.less";
import { $ } from '@tarojs/extend'
import mixin from '@/utils/mixin';
import { getListAPI } from '@/api/index'
export default {
name: "bookPage",
mixins: [mixin.init],
async onShow () {
Taro.showLoading({ mask: true, title: "加载中..." })
// 获取活动和轮播信息
const { code, data } = await getListAPI({ page: this.page, limit: this.limit });
if (code) {
this.bookList = data;
this.page = this.page + 1;
Taro.hideLoading()
}
},
onHide () { // 离开当前页面
this.page = 1;
this.flag = true;
},
computed: {
scrollStyle() {
return {
......@@ -130,33 +126,48 @@ export default {
return {
showContent: false,
indexCoverHeight: 0,
calenderInfo: {},
bookList: [],
flag: true,
page: 1,
limit: 10,
};
},
methods: {
onDatesChange ({ startDate, endDate }) { // 订房日期变化回调
this.calenderInfo = {
startDate,
endDate
}
// 重置列表
this.flag = true;
this.page = 1;
this.bookList = [];
this.getList();
},
onScrollToLower () {
// if(!this.flag){
// return
// }
// this.flag = false;
// this.getList();
console.warn('onScrollToLower');
if(!this.flag){
return
}
this.flag = false;
this.getList();
},
getList () {
// const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
// if (code) {
// if (data.activity_list.length) {
// // 绑定服务器时间，判断状态
// data.activity_list.forEach(item => {
// item.server_time = data.server_time;
// });
// this.activity_list = this.activity_list.concat(data.activity_list);
// this.page = this.page + 1;
// this.flag = true;
// } else {
// Toast('没有数据')
// }
// }
async getList () {
// 获取列表
const { code, data } = await getListAPI({ page: this.page, limit: this.limit, start_date: this.calenderInfo.startDate, end_date: this.calenderInfo.endDate });
if (code) {
if (data.length) {
this.bookList = this.bookList.concat(data);
this.page = this.page + 1;
this.flag = true;
} else {
Taro.showToast({
title: '没有更多了',
icon: 'none'
});
}
}
},
}
};
</script>
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-22 17:09:11
* @LastEditTime: 2023-12-26 11:15:51
* @FilePath: /meihuaApp/src/pages/index/index.vue
* @Description: 首页
-->
......@@ -32,6 +32,7 @@ import roomCard from '@/components/roomCard.vue'
// import arrowDownImg from '@/assets/images/arrow-down.png'
import navBar from '@/components/navBar.vue'
import { useDidShow } from '@tarojs/taro'
import { getListAPI } from '@/api/index'
// TAG: 模拟onShow事件
useDidShow(() => {
......@@ -95,25 +96,17 @@ export default {
});
},
async onShow () {
// Taro.showLoading({ mask: true, title: "加载中..." })
// // 获取活动和轮播信息
// const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
// if (code) {
// // 绑定服务器时间，判断状态
// data.activity_list.forEach(item => {
// item.server_time = data.server_time;
// });
// this.activity_list = data.activity_list;
// this.carousel = data.carousel;
// this.page = this.page + 1;
// // 缺省页判断
// this.no_activity = this.activity_list.length ? false : true;
// this.no_carousel = this.carousel.length ? false : true;
// Taro.hideLoading()
// }
Taro.showLoading({ mask: true, title: "加载中..." })
// 获取活动和轮播信息
const { code, data } = await getListAPI({ page: this.page, limit: this.limit });
if (code) {
this.room_list = data;
this.page = this.page + 1;
Taro.hideLoading()
}
},
onHide () { // 离开当前页面
this.page = 0;
this.page = 1;
this.flag = true;
},
computed: {
......@@ -137,12 +130,6 @@ export default {
this.indexCoverHeight = windowHeight - navHeight;
}, 500);
//
for (let index = 0; index < 5; index++) {
this.room_list.push({
id: index,
status: 'enable'
})
}
const { code, data } = await sysParamAPI();
if (code) {
this.banner_url = data.home_banner ? data.home_banner : 'https://cdn.ipadbiz.cn/meihua/banner1@2x.png';
......@@ -155,7 +142,7 @@ export default {
scrollTop: 0,
room_list: [],
flag: true,
page: 0,
page: 1,
limit: 10,
};
},
......@@ -170,25 +157,23 @@ export default {
return
}
this.flag = false;
// this.getList();
this.getList();
},
async getList () {
// // 获取推荐活动列表
// const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
// if (code) {
// if (data.activity_list.length) {
// // 绑定服务器时间，判断状态
// data.activity_list.forEach(item => {
// item.server_time = data.server_time;
// });
// this.activity_list = this.activity_list.concat(data.activity_list);
// this.page = this.page + 1;
// this.flag = true;
// } else {
// Toast('没有数据')
// }
// }
// }
// 获取列表
const { code, data } = await getListAPI({ page: this.page, limit: this.limit });
if (code) {
if (data.length) {
this.room_list = this.room_list.concat(data);
this.page = this.page + 1;
this.flag = true;
} else {
Taro.showToast({
title: '没有更多了',
icon: 'none'
});
}
}
},
onArrowDown () {
this.scrollTop = this.indexCoverHeight; // 调整滚动控件高度
......