Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
de5a5ad2 1 parent 05b1e537

fix

Inline Side-by-side
Showing 3 changed files with 106 additions and 40 deletions
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-21 13:13:32 4 + * @LastEditTime: 2023-12-21 14:52:06
5 * @FilePath: /meihuaApp/src/pages/book/index.vue 5 * @FilePath: /meihuaApp/src/pages/book/index.vue
6 - * @Description: 文件描述 6 + * @Description: 订房页面
7 --> 7 -->
8 <template> 8 <template>
9 <view class="book-page"> 9 <view class="book-page">
...@@ -79,6 +79,12 @@ onMounted(() => { ...@@ -79,6 +79,12 @@ onMounted(() => {
79 }); 79 });
80 80
81 const onTabClick = ({ title, paneKey, disabled }) => { 81 const onTabClick = ({ title, paneKey, disabled }) => {
82 + Taro.showLoading({
83 + title: '加载中',
84 + });
85 + setTimeout(() => {
86 + Taro.hideLoading();
87 + }, 1000);
82 console.warn(title, paneKey); 88 console.warn(title, paneKey);
83 } 89 }
84 </script> 90 </script>
...@@ -108,11 +114,6 @@ export default { ...@@ -108,11 +114,6 @@ export default {
108 setTimeout(() => { 114 setTimeout(() => {
109 this.showContent = true; 115 this.showContent = true;
110 }, 100); 116 }, 100);
111 - // setTimeout(async () => {
112 - // const navHeight = await $('#navbar-page').height();
113 - // const calHeight = await $('#book-cal').height();
114 - // this.indexCoverHeight = windowHeight - navHeight - calHeight - 50;
115 - // }, 500);
116 this.$nextTick(async () => { 117 this.$nextTick(async () => {
117 const navHeight = await $('#navbar-page').height(); 118 const navHeight = await $('#navbar-page').height();
118 const calHeight = await $('#book-cal').height(); 119 const calHeight = await $('#book-cal').height();
...@@ -138,6 +139,22 @@ export default { ...@@ -138,6 +139,22 @@ export default {
138 // this.getList(); 139 // this.getList();
139 console.warn('onScrollToLower'); 140 console.warn('onScrollToLower');
140 }, 141 },
142 + getList () {
143 + // const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
144 + // if (code) {
145 + // if (data.activity_list.length) {
146 + // // 绑定服务器时间，判断状态
147 + // data.activity_list.forEach(item => {
148 + // item.server_time = data.server_time;
149 + // });
150 + // this.activity_list = this.activity_list.concat(data.activity_list);
151 + // this.page = this.page + 1;
152 + // this.flag = true;
153 + // } else {
154 + // Toast('没有数据')
155 + // }
156 + // }
157 + }
141 } 158 }
142 }; 159 };
143 </script> 160 </script>
......
1 +.my-page {
2 + .user-wrapper {
3 + position: relative;
4 + display: flex;
5 + align-items: center;
6 + background-color: #3a2013;
7 + color: #fff;
8 + padding: 40rpx 0 40rpx 25rpx;
9 + .user-info {
10 + flex: 6;
11 + display: flex;
12 + align-items: center;
13 + }
14 + .edit {
15 + flex: 1;
16 + }
17 + .wrapper-bottom {
18 + position: absolute;
19 + left: 0%;
20 + right: 0%;
21 + bottom: 0%;
22 + height: 20rpx;
23 + width: 100%;
24 + background-color: #fff;
25 + border-top-left-radius: 20rpx;
26 + border-top-right-radius: 20rpx;
27 + }
28 + }
29 + .list-wrapper {
30 + .title {
31 + padding-left: 1.5rem;
32 + font-size: 35rpx;
33 + font-weight: bold;
34 + }
35 + }
36 +}
37 +
1 .nut-tab-pane { 38 .nut-tab-pane {
2 padding: 0; 39 padding: 0;
3 } 40 }
4 41
5 :root, 42 :root,
6 page { 43 page {
7 - --nut-tabs-titles-item-active-color: #6A4925; 44 + --nut-tabs-titles-item-active-color: #6a4925;
8 } 45 }
......
1 <!-- 1 <!--
2 * @Date: 2023-12-13 11:13:13 2 * @Date: 2023-12-13 11:13:13
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-21 09:08:58 4 + * @LastEditTime: 2023-12-21 15:04:09
5 * @FilePath: /meihuaApp/src/pages/my/index.vue 5 * @FilePath: /meihuaApp/src/pages/my/index.vue
6 - * @Description: 文件描述 6 + * @Description: 我的页面
7 --> 7 -->
8 <template> 8 <template>
9 - <view> 9 + <view class="my-page">
10 - <view id="avator" style="position: relative; display: flex; align-items: center; background-color: #3A2013; color: #FFF; padding: 40rpx 0 40rpx 25rpx;"> 10 + <view id="avator" class="user-wrapper">
11 - <view style="flex: 6; display: flex; align-items: center;"> 11 + <view class="user-info">
12 <nut-avatar size="60" style="border: 1px solid #fff;"> 12 <nut-avatar size="60" style="border: 1px solid #fff;">
13 <img style="border-radius: 50%;" src="https://img.yzcdn.cn/vant/cat.jpeg" /> 13 <img style="border-radius: 50%;" src="https://img.yzcdn.cn/vant/cat.jpeg" />
14 </nut-avatar> 14 </nut-avatar>
15 <text style="margin-left: 30rpx;">阿忆妞妞</text> 15 <text style="margin-left: 30rpx;">阿忆妞妞</text>
16 </view> 16 </view>
17 - <view style="flex: 1;"> 17 + <view class="edit">
18 <IconFont name="edit" @tap="goToEdit"></IconFont> 18 <IconFont name="edit" @tap="goToEdit"></IconFont>
19 </view> 19 </view>
20 - <view style="position: absolute; left: 0%; right: 0%; bottom: 0%; height: 20rpx; width: 100%; background-color: #FFF; border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"></view> 20 + <view class="wrapper-bottom"></view>
21 </view> 21 </view>
22 - <view> 22 + <view class="list-wrapper">
23 - <view id="title" style="padding-left: 1.5rem; font-size: 35rpx; font-weight: bold;">我的订单</view> 23 + <view id="title" class="title">我的订单</view>
24 - <view> 24 + <nut-tabs v-model="value" @click="onTabClick" title-scroll title-gutter="0" name="tabName" background="#FFF" color="#6A4925" animated-time="0">
25 - <nut-tabs v-model="value" @click="onTabClick" title-scroll title-gutter="0" name="tabName" background="#FFF" color="#6A4925" animated-time="0"> 25 + <nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key" />
26 - <nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key"> 26 + </nut-tabs>
27 - </nut-tab-pane> 27 + <view v-if="showContent" class="book-list">
28 - </nut-tabs> 28 + <scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
29 - <view v-if="showContent" class="book-list"> 29 + <view v-for="(item, index) in orderList" :key="index">
30 - <scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower"> 30 + <order-card :key="index" :data="item" @onPay="onPay"></order-card>
31 - <view v-for="(item, index) in orderList" :key="index"> 31 + <view v-if="index === orderList.length-1" style="height: 2rem;"></view>
32 - <order-card :key="index" :data="item" @onPay="onPay"></order-card> 32 + </view>
33 - <view v-if="index === orderList.length-1" style="height: 2rem;"></view> 33 + </scroll-view>
34 - </view>
35 - </scroll-view>
36 - </view>
37 </view> 34 </view>
38 </view> 35 </view>
39 -
40 <nav-bar activated="my" /> 36 <nav-bar activated="my" />
41 -
42 <payCard :visible="show_pay" :data="payData" @close="onPayClose"/> 37 <payCard :visible="show_pay" :data="payData" @close="onPayClose"/>
43 </view> 38 </view>
44 </template> 39 </template>
...@@ -73,8 +68,6 @@ const orderList = ref([ ...@@ -73,8 +68,6 @@ const orderList = ref([
73 id: 1, 68 id: 1,
74 name: '阿忆妞妞1', 69 name: '阿忆妞妞1',
75 phone: '138****8888', 70 phone: '138****8888',
76 - address: '北京市朝阳区',
77 - time: '2023-12-13 11:13:13',
78 price: 1200, 71 price: 1200,
79 remain_time: 10, 72 remain_time: 10,
80 status: 'no-pay', 73 status: 'no-pay',
...@@ -83,8 +76,6 @@ const orderList = ref([ ...@@ -83,8 +76,6 @@ const orderList = ref([
83 id: 2, 76 id: 2,
84 name: '阿忆妞妞2', 77 name: '阿忆妞妞2',
85 phone: '138****8888', 78 phone: '138****8888',
86 - address: '北京市朝阳区',
87 - time: '2023-12-13 11:13:13',
88 price: 1200, 79 price: 1200,
89 remain_time: 100, 80 remain_time: 100,
90 status: 'apply', 81 status: 'apply',
...@@ -93,8 +84,6 @@ const orderList = ref([ ...@@ -93,8 +84,6 @@ const orderList = ref([
93 id: 3, 84 id: 3,
94 name: '阿忆妞妞3', 85 name: '阿忆妞妞3',
95 phone: '138****8888', 86 phone: '138****8888',
96 - address: '北京市朝阳区',
97 - time: '2023-12-13 11:13:13',
98 price: 1200, 87 price: 1200,
99 remain_time: 100, 88 remain_time: 100,
100 status: 'enable', 89 status: 'enable',
...@@ -103,8 +92,6 @@ const orderList = ref([ ...@@ -103,8 +92,6 @@ const orderList = ref([
103 id: 4, 92 id: 4,
104 name: '阿忆妞妞4', 93 name: '阿忆妞妞4',
105 phone: '138****8888', 94 phone: '138****8888',
106 - address: '北京市朝阳区',
107 - time: '2023-12-13 11:13:13',
108 price: 1200, 95 price: 1200,
109 remain_time: 100, 96 remain_time: 100,
110 status: 'cancel', 97 status: 'cancel',
...@@ -155,6 +142,10 @@ export default { ...@@ -155,6 +142,10 @@ export default {
155 }; 142 };
156 }, 143 },
157 }, 144 },
145 + onHide () { // 离开当前页面
146 + this.page = 0;
147 + this.flag = true;
148 + },
158 mounted () { 149 mounted () {
159 Taro.showLoading({ 150 Taro.showLoading({
160 title: '加载中', 151 title: '加载中',
...@@ -186,6 +177,9 @@ export default { ...@@ -186,6 +177,9 @@ export default {
186 return { 177 return {
187 showContent: false, 178 showContent: false,
188 indexCoverHeight: 0, 179 indexCoverHeight: 0,
180 + flag: true,
181 + page: 0,
182 + limit: 10,
189 }; 183 };
190 }, 184 },
191 methods: { 185 methods: {
...@@ -197,6 +191,24 @@ export default { ...@@ -197,6 +191,24 @@ export default {
197 // this.getList(); 191 // this.getList();
198 console.warn('onScrollToLower'); 192 console.warn('onScrollToLower');
199 }, 193 },
194 + async getList () {
195 + // // 获取推荐活动列表
196 + // const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
197 + // if (code) {
198 + // if (data.activity_list.length) {
199 + // // 绑定服务器时间，判断状态
200 + // data.activity_list.forEach(item => {
201 + // item.server_time = data.server_time;
202 + // });
203 + // this.activity_list = this.activity_list.concat(data.activity_list);
204 + // this.page = this.page + 1;
205 + // this.flag = true;
206 + // } else {
207 + // Toast('没有数据')
208 + // }
209 + // }
210 + // }
211 + },
200 } 212 }
201 }; 213 };
202 </script> 214 </script>
......