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
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-21 13:13:32
* @LastEditTime: 2023-12-21 14:52:06
* @FilePath: /meihuaApp/src/pages/book/index.vue
* @Description: 文件描述
* @Description: 订房页面
-->
<template>
<view class="book-page">
......@@ -79,6 +79,12 @@ onMounted(() => {
});
const onTabClick = ({ title, paneKey, disabled }) => {
Taro.showLoading({
title: '加载中',
});
setTimeout(() => {
Taro.hideLoading();
}, 1000);
console.warn(title, paneKey);
}
</script>
......@@ -108,11 +114,6 @@ export default {
setTimeout(() => {
this.showContent = true;
}, 100);
// setTimeout(async () => {
// const navHeight = await $('#navbar-page').height();
// const calHeight = await $('#book-cal').height();
// this.indexCoverHeight = windowHeight - navHeight - calHeight - 50;
// }, 500);
this.$nextTick(async () => {
const navHeight = await $('#navbar-page').height();
const calHeight = await $('#book-cal').height();
......@@ -138,6 +139,22 @@ export default {
// this.getList();
console.warn('onScrollToLower');
},
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('没有数据')
// }
// }
}
}
};
</script>
......
.my-page {
.user-wrapper {
position: relative;
display: flex;
align-items: center;
background-color: #3a2013;
color: #fff;
padding: 40rpx 0 40rpx 25rpx;
.user-info {
flex: 6;
display: flex;
align-items: center;
}
.edit {
flex: 1;
}
.wrapper-bottom {
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;
}
}
.list-wrapper {
.title {
padding-left: 1.5rem;
font-size: 35rpx;
font-weight: bold;
}
}
}
.nut-tab-pane {
padding: 0;
}
:root,
page {
--nut-tabs-titles-item-active-color: #6A4925;
--nut-tabs-titles-item-active-color: #6a4925;
}
......
<!--
* @Date: 2023-12-13 11:13:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-21 09:08:58
* @LastEditTime: 2023-12-21 15:04:09
* @FilePath: /meihuaApp/src/pages/my/index.vue
* @Description: 文件描述
* @Description: 我的页面
-->
<template>
<view>
<view id="avator" style="position: relative; display: flex; align-items: center; background-color: #3A2013; color: #FFF; padding: 40rpx 0 40rpx 25rpx;">
<view style="flex: 6; display: flex; align-items: center;">
<view class="my-page">
<view id="avator" class="user-wrapper">
<view class="user-info">
<nut-avatar size="60" style="border: 1px solid #fff;">
<img style="border-radius: 50%;" src="https://img.yzcdn.cn/vant/cat.jpeg" />
</nut-avatar>
<text style="margin-left: 30rpx;">阿忆妞妞</text>
</view>
<view style="flex: 1;">
<view class="edit">
<IconFont name="edit" @tap="goToEdit"></IconFont>
</view>
<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>
<view class="wrapper-bottom"></view>
</view>
<view>
<view id="title" style="padding-left: 1.5rem; font-size: 35rpx; font-weight: bold;">我的订单</view>
<view>
<nut-tabs v-model="value" @click="onTabClick" title-scroll title-gutter="0" name="tabName" background="#FFF" color="#6A4925" animated-time="0">
<nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key">
</nut-tab-pane>
</nut-tabs>
<view v-if="showContent" class="book-list">
<scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
<view v-for="(item, index) in orderList" :key="index">
<order-card :key="index" :data="item" @onPay="onPay"></order-card>
<view v-if="index === orderList.length-1" style="height: 2rem;"></view>
</view>
</scroll-view>
</view>
<view class="list-wrapper">
<view id="title" class="title">我的订单</view>
<nut-tabs v-model="value" @click="onTabClick" title-scroll title-gutter="0" name="tabName" background="#FFF" color="#6A4925" animated-time="0">
<nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key" />
</nut-tabs>
<view v-if="showContent" class="book-list">
<scroll-view ref="refScrollView" :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
<view v-for="(item, index) in orderList" :key="index">
<order-card :key="index" :data="item" @onPay="onPay"></order-card>
<view v-if="index === orderList.length-1" style="height: 2rem;"></view>
</view>
</scroll-view>
</view>
</view>
<nav-bar activated="my" />
<payCard :visible="show_pay" :data="payData" @close="onPayClose"/>
</view>
</template>
......@@ -73,8 +68,6 @@ const orderList = ref([
id: 1,
name: '阿忆妞妞1',
phone: '138****8888',
address: '北京市朝阳区',
time: '2023-12-13 11:13:13',
price: 1200,
remain_time: 10,
status: 'no-pay',
......@@ -83,8 +76,6 @@ const orderList = ref([
id: 2,
name: '阿忆妞妞2',
phone: '138****8888',
address: '北京市朝阳区',
time: '2023-12-13 11:13:13',
price: 1200,
remain_time: 100,
status: 'apply',
......@@ -93,8 +84,6 @@ const orderList = ref([
id: 3,
name: '阿忆妞妞3',
phone: '138****8888',
address: '北京市朝阳区',
time: '2023-12-13 11:13:13',
price: 1200,
remain_time: 100,
status: 'enable',
......@@ -103,8 +92,6 @@ const orderList = ref([
id: 4,
name: '阿忆妞妞4',
phone: '138****8888',
address: '北京市朝阳区',
time: '2023-12-13 11:13:13',
price: 1200,
remain_time: 100,
status: 'cancel',
......@@ -155,6 +142,10 @@ export default {
};
},
},
onHide () { // 离开当前页面
this.page = 0;
this.flag = true;
},
mounted () {
Taro.showLoading({
title: '加载中',
......@@ -186,6 +177,9 @@ export default {
return {
showContent: false,
indexCoverHeight: 0,
flag: true,
page: 0,
limit: 10,
};
},
methods: {
......@@ -197,6 +191,24 @@ export default {
// this.getList();
console.warn('onScrollToLower');
},
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('没有数据')
// }
// }
// }
},
}
};
</script>
......