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
1 /* 1 /*
2 * @Date: 2023-12-22 10:29:37 2 * @Date: 2023-12-22 10:29:37
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-22 16:35:54 4 + * @LastEditTime: 2023-12-26 09:40:57
5 * @FilePath: /meihuaApp/src/api/index.js 5 * @FilePath: /meihuaApp/src/api/index.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -13,6 +13,7 @@ const Api = { ...@@ -13,6 +13,7 @@ const Api = {
13 SHOW_SESSION: '/srv/?a=room_order&t=show_session', 13 SHOW_SESSION: '/srv/?a=room_order&t=show_session',
14 SAVE_CUSTOMER_INFO: '/srv/?a=room_order&t=save_customer_info', 14 SAVE_CUSTOMER_INFO: '/srv/?a=room_order&t=save_customer_info',
15 SYS_PARAM: '/srv/?a=room_order&t=sys_param', 15 SYS_PARAM: '/srv/?a=room_order&t=sys_param',
16 + GET_LIST: '/srv/?a=room_data&t=get_list',
16 } 17 }
17 18
18 /** 19 /**
...@@ -48,3 +49,13 @@ export const saveCustomerInfoAPI = (params) => fn(fetch.post(Api.SAVE_CUSTOMER_I ...@@ -48,3 +49,13 @@ export const saveCustomerInfoAPI = (params) => fn(fetch.post(Api.SAVE_CUSTOMER_I
48 * @returns 49 * @returns
49 */ 50 */
50 export const sysParamAPI = (params) => fn(fetch.get(Api.SYS_PARAM, params)); 51 export const sysParamAPI = (params) => fn(fetch.get(Api.SYS_PARAM, params));
52 +
53 +/**
54 + * @description: 获取房间列表
55 + * @param start_date 入住时间
56 + * @param end_date 离店时间
57 + * @param offset 偏移量
58 + * @param limit 条数
59 + * @returns
60 + */
61 +export const getListAPI = (params) => fn(fetch.get(Api.GET_LIST, params));
......
1 <!-- 1 <!--
2 * @Date: 2023-12-13 13:42:23 2 * @Date: 2023-12-13 13:42:23
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-25 13:33:45 4 + * @LastEditTime: 2023-12-26 10:47:49
5 * @FilePath: /meihuaApp/src/components/roomCard.vue 5 * @FilePath: /meihuaApp/src/components/roomCard.vue
6 * @Description: 房间详情组件 6 * @Description: 房间详情组件
7 --> 7 -->
8 <template> 8 <template>
9 <view class="room-card-component" @tap="handleTap"> 9 <view class="room-card-component" @tap="handleTap">
10 - <image class="room-cover" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/img1@2x.png" /> 10 + <image class="room-cover" mode="aspectFill" :src="cover" />
11 <view class="room-info"> 11 <view class="room-info">
12 <nut-row> 12 <nut-row>
13 <nut-col span="18" class="room-info-left"> 13 <nut-col span="18" class="room-info-left">
14 - <view class="room-info-title">非凡魅力豪华总统套房</view> 14 + <view class="room-info-title">{{ title }}</view>
15 - <view class="room-info-desc">两室 宜住3人</view> 15 + <view class="room-info-desc">{{ room_num }}室 宜住{{ capacity }}人</view>
16 </nut-col> 16 </nut-col>
17 <nut-col span="6" class="room-info-right"> 17 <nut-col span="6" class="room-info-right">
18 - <nut-price :price="980" size="normal" style="font-weight: bold;" /> 18 + <nut-price :price="discount_price" size="normal" style="font-weight: bold;" />
19 - <nut-price :price="1280" size="small" strike-through style="color: #7D7C7C;" /> 19 + <nut-price :price="original_price" size="small" strike-through style="color: #7D7C7C;" />
20 </nut-col> 20 </nut-col>
21 </nut-row> 21 </nut-row>
22 </view> 22 </view>
23 - <view class="room-status"> 23 + <view v-if="!num" class="room-status">
24 <view class="room-status-wrapper"> 24 <view class="room-status-wrapper">
25 <image mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/icon_checked@2x.png" /> 25 <image mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/icon_checked@2x.png" />
26 </view> 26 </view>
...@@ -117,7 +117,22 @@ const handleTap = () => { ...@@ -117,7 +117,22 @@ const handleTap = () => {
117 }); 117 });
118 } 118 }
119 119
120 +const cover = ref(''); // 封面图
121 +const title = ref(''); // 标题
122 +const original_price = ref(''); // 原价
123 +const discount_price = ref(''); // 优惠价
124 +const capacity = ref(''); // 能住几个人
125 +const num = ref(''); // 可售数量
126 +const room_num = ref(''); // 房间描述 两室
127 +
120 onMounted(() => { 128 onMounted(() => {
129 + cover.value = props.data.cover ? props.data.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
130 + title.value = props.data.title;
131 + room_num.value = props.data.room_num;
132 + capacity.value = props.data.capacity;
133 + num.value = props.data.num;
134 + original_price.value = props.data.original_price;
135 + discount_price.value = props.data.discount_price;
121 }); 136 });
122 137
123 </script> 138 </script>
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-22 13:29:20 4 + * @LastEditTime: 2023-12-26 11:15:09
5 * @FilePath: /meihuaApp/src/pages/book/index.vue 5 * @FilePath: /meihuaApp/src/pages/book/index.vue
6 * @Description: 订房页面 6 * @Description: 订房页面
7 --> 7 -->
...@@ -37,66 +37,62 @@ import navBar from '@/components/navBar.vue' ...@@ -37,66 +37,62 @@ import navBar from '@/components/navBar.vue'
37 import calendarSelect from '@/components/calendarSelect.vue' 37 import calendarSelect from '@/components/calendarSelect.vue'
38 import roomCard from '@/components/roomCard.vue' 38 import roomCard from '@/components/roomCard.vue'
39 39
40 -const calenderInfo = ref({}); 40 +// const value = ref('0');
41 -const onDatesChange = ({ startDate, endDate }) => {
42 - // console.warn(startDate, endDate);
43 - calenderInfo.value = {
44 - startDate,
45 - endDate
46 - }
47 -}
48 41
49 -const value = ref('0'); 42 +// const tabList = ref([{
50 - 43 +// title: '全部',
51 -const tabList = ref([{ 44 +// key: '0',
52 - title: '全部', 45 +// }, {
53 - key: '0', 46 +// title: '总统套房',
54 -}, { 47 +// key: '1',
55 - title: '总统套房', 48 +// }, {
56 - key: '1', 49 +// title: '豪华套间',
57 -}, { 50 +// key: '2',
58 - title: '豪华套间', 51 +// }, {
59 - key: '2', 52 +// title: '家庭豪华间',
60 -}, { 53 +// key: '3',
61 - title: '家庭豪华间', 54 +// }, {
62 - key: '3', 55 +// title: '连排别墅',
63 -}, { 56 +// key: '4',
64 - title: '连排别墅', 57 +// }]);
65 - key: '4',
66 -}]);
67 -
68 -const bookList = ref([]);
69 58
70 onMounted(() => { 59 onMounted(() => {
71 - for (let index = 0; index < 5; index++) {
72 - bookList.value.push({
73 - id: index,
74 - title: '标题',
75 - price: 100,
76 - status: 'all',
77 - });
78 - }
79 }); 60 });
80 61
81 -const onTabClick = ({ title, paneKey, disabled }) => { 62 +// const onTabClick = ({ title, paneKey, disabled }) => {
82 - Taro.showLoading({ 63 +// Taro.showLoading({
83 - title: '加载中', 64 +// title: '加载中',
84 - }); 65 +// });
85 - setTimeout(() => { 66 +// setTimeout(() => {
86 - Taro.hideLoading(); 67 +// Taro.hideLoading();
87 - }, 1000); 68 +// }, 1000);
88 - console.warn(title, paneKey); 69 +// console.warn(title, paneKey);
89 -} 70 +// }
90 </script> 71 </script>
91 72
92 <script> 73 <script>
93 import "./index.less"; 74 import "./index.less";
94 import { $ } from '@tarojs/extend' 75 import { $ } from '@tarojs/extend'
95 import mixin from '@/utils/mixin'; 76 import mixin from '@/utils/mixin';
77 +import { getListAPI } from '@/api/index'
96 78
97 export default { 79 export default {
98 name: "bookPage", 80 name: "bookPage",
99 mixins: [mixin.init], 81 mixins: [mixin.init],
82 + async onShow () {
83 + Taro.showLoading({ mask: true, title: "加载中..." })
84 + // 获取活动和轮播信息
85 + const { code, data } = await getListAPI({ page: this.page, limit: this.limit });
86 + if (code) {
87 + this.bookList = data;
88 + this.page = this.page + 1;
89 + Taro.hideLoading()
90 + }
91 + },
92 + onHide () { // 离开当前页面
93 + this.page = 1;
94 + this.flag = true;
95 + },
100 computed: { 96 computed: {
101 scrollStyle() { 97 scrollStyle() {
102 return { 98 return {
...@@ -130,33 +126,48 @@ export default { ...@@ -130,33 +126,48 @@ export default {
130 return { 126 return {
131 showContent: false, 127 showContent: false,
132 indexCoverHeight: 0, 128 indexCoverHeight: 0,
129 + calenderInfo: {},
130 + bookList: [],
131 + flag: true,
132 + page: 1,
133 + limit: 10,
133 }; 134 };
134 }, 135 },
135 methods: { 136 methods: {
137 + onDatesChange ({ startDate, endDate }) { // 订房日期变化回调
138 + this.calenderInfo = {
139 + startDate,
140 + endDate
141 + }
142 + // 重置列表
143 + this.flag = true;
144 + this.page = 1;
145 + this.bookList = [];
146 + this.getList();
147 + },
136 onScrollToLower () { 148 onScrollToLower () {
137 - // if(!this.flag){ 149 + if(!this.flag){
138 - // return 150 + return
139 - // } 151 + }
140 - // this.flag = false; 152 + this.flag = false;
141 - // this.getList(); 153 + this.getList();
142 - console.warn('onScrollToLower');
143 }, 154 },
144 - getList () { 155 + async getList () {
145 - // const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit }); 156 + // 获取列表
146 - // if (code) { 157 + const { code, data } = await getListAPI({ page: this.page, limit: this.limit, start_date: this.calenderInfo.startDate, end_date: this.calenderInfo.endDate });
147 - // if (data.activity_list.length) { 158 + if (code) {
148 - // // 绑定服务器时间，判断状态 159 + if (data.length) {
149 - // data.activity_list.forEach(item => { 160 + this.bookList = this.bookList.concat(data);
150 - // item.server_time = data.server_time; 161 + this.page = this.page + 1;
151 - // }); 162 + this.flag = true;
152 - // this.activity_list = this.activity_list.concat(data.activity_list); 163 + } else {
153 - // this.page = this.page + 1; 164 + Taro.showToast({
154 - // this.flag = true; 165 + title: '没有更多了',
155 - // } else { 166 + icon: 'none'
156 - // Toast('没有数据') 167 + });
157 - // }
158 - // }
159 } 168 }
160 } 169 }
170 + },
171 + }
161 }; 172 };
162 </script> 173 </script>
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-22 17:09:11 4 + * @LastEditTime: 2023-12-26 11:15:51
5 * @FilePath: /meihuaApp/src/pages/index/index.vue 5 * @FilePath: /meihuaApp/src/pages/index/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -32,6 +32,7 @@ import roomCard from '@/components/roomCard.vue' ...@@ -32,6 +32,7 @@ import roomCard from '@/components/roomCard.vue'
32 // import arrowDownImg from '@/assets/images/arrow-down.png' 32 // import arrowDownImg from '@/assets/images/arrow-down.png'
33 import navBar from '@/components/navBar.vue' 33 import navBar from '@/components/navBar.vue'
34 import { useDidShow } from '@tarojs/taro' 34 import { useDidShow } from '@tarojs/taro'
35 +import { getListAPI } from '@/api/index'
35 36
36 // TAG: 模拟onShow事件 37 // TAG: 模拟onShow事件
37 useDidShow(() => { 38 useDidShow(() => {
...@@ -95,25 +96,17 @@ export default { ...@@ -95,25 +96,17 @@ export default {
95 }); 96 });
96 }, 97 },
97 async onShow () { 98 async onShow () {
98 - // Taro.showLoading({ mask: true, title: "加载中..." }) 99 + Taro.showLoading({ mask: true, title: "加载中..." })
99 - // // 获取活动和轮播信息 100 + // 获取活动和轮播信息
100 - // const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit }); 101 + const { code, data } = await getListAPI({ page: this.page, limit: this.limit });
101 - // if (code) { 102 + if (code) {
102 - // // 绑定服务器时间，判断状态 103 + this.room_list = data;
103 - // data.activity_list.forEach(item => { 104 + this.page = this.page + 1;
104 - // item.server_time = data.server_time; 105 + Taro.hideLoading()
105 - // }); 106 + }
106 - // this.activity_list = data.activity_list;
107 - // this.carousel = data.carousel;
108 - // this.page = this.page + 1;
109 - // // 缺省页判断
110 - // this.no_activity = this.activity_list.length ? false : true;
111 - // this.no_carousel = this.carousel.length ? false : true;
112 - // Taro.hideLoading()
113 - // }
114 }, 107 },
115 onHide () { // 离开当前页面 108 onHide () { // 离开当前页面
116 - this.page = 0; 109 + this.page = 1;
117 this.flag = true; 110 this.flag = true;
118 }, 111 },
119 computed: { 112 computed: {
...@@ -137,12 +130,6 @@ export default { ...@@ -137,12 +130,6 @@ export default {
137 this.indexCoverHeight = windowHeight - navHeight; 130 this.indexCoverHeight = windowHeight - navHeight;
138 }, 500); 131 }, 500);
139 // 132 //
140 - for (let index = 0; index < 5; index++) {
141 - this.room_list.push({
142 - id: index,
143 - status: 'enable'
144 - })
145 - }
146 const { code, data } = await sysParamAPI(); 133 const { code, data } = await sysParamAPI();
147 if (code) { 134 if (code) {
148 this.banner_url = data.home_banner ? data.home_banner : 'https://cdn.ipadbiz.cn/meihua/banner1@2x.png'; 135 this.banner_url = data.home_banner ? data.home_banner : 'https://cdn.ipadbiz.cn/meihua/banner1@2x.png';
...@@ -155,7 +142,7 @@ export default { ...@@ -155,7 +142,7 @@ export default {
155 scrollTop: 0, 142 scrollTop: 0,
156 room_list: [], 143 room_list: [],
157 flag: true, 144 flag: true,
158 - page: 0, 145 + page: 1,
159 limit: 10, 146 limit: 10,
160 }; 147 };
161 }, 148 },
...@@ -170,25 +157,23 @@ export default { ...@@ -170,25 +157,23 @@ export default {
170 return 157 return
171 } 158 }
172 this.flag = false; 159 this.flag = false;
173 - // this.getList(); 160 + this.getList();
174 }, 161 },
175 async getList () { 162 async getList () {
176 - // // 获取推荐活动列表 163 + // 获取列表
177 - // const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit }); 164 + const { code, data } = await getListAPI({ page: this.page, limit: this.limit });
178 - // if (code) { 165 + if (code) {
179 - // if (data.activity_list.length) { 166 + if (data.length) {
180 - // // 绑定服务器时间，判断状态 167 + this.room_list = this.room_list.concat(data);
181 - // data.activity_list.forEach(item => { 168 + this.page = this.page + 1;
182 - // item.server_time = data.server_time; 169 + this.flag = true;
183 - // }); 170 + } else {
184 - // this.activity_list = this.activity_list.concat(data.activity_list); 171 + Taro.showToast({
185 - // this.page = this.page + 1; 172 + title: '没有更多了',
186 - // this.flag = true; 173 + icon: 'none'
187 - // } else { 174 + });
188 - // Toast('没有数据') 175 + }
189 - // } 176 + }
190 - // }
191 - // }
192 }, 177 },
193 onArrowDown () { 178 onArrowDown () {
194 this.scrollTop = this.indexCoverHeight; // 调整滚动控件高度 179 this.scrollTop = this.indexCoverHeight; // 调整滚动控件高度
......