Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d69070fd 1 parent 2ca11cc0

订房和我的列表展示方式调整，支付倒计时功能优化调整

Inline Side-by-side
Showing 4 changed files with 136 additions and 35 deletions
......@@ -42,7 +42,7 @@
</nut-col>
</nut-row>
</view>
<view style="padding: 0.5rem;">
<view style="padding: 0.5rem; padding-bottom: 0;">
<nut-row>
<nut-col span="6">
<view @tap="showOrderInfo('id')" style="display: flex; align-items: center; margin: 20rpx 0;height: 60rpx;">
......@@ -59,13 +59,9 @@
</nut-col>
</nut-row>
</view>
<!-- <view v-if="flag" style="display: flex; justify-content: flex-end; font-size: 20rpx; margin-bottom: 1rem;"> -->
<view style="display: flex; justify-content: flex-end; font-size: 20rpx; margin-bottom: 1rem;">
<view style="display: flex; justify-content: flex-end; font-size: 23rpx; margin-bottom: 1rem; margin-right: 1rem;">
<text>支付剩余时间</text>&nbsp;
<!-- <nut-countdown v-model="resetTime" :end-time="end" @end="onEnd('id')">
<text style="font-size: 20rpx; color: red;">{{ resetTime.m }}:{{ resetTime.s }}</text>
</nut-countdown> -->
<text style="font-size: 20rpx; color: red;">30:00</text>
<text style="font-size: 23rpx; color: red;">{{ formatTime(remain_time) }}</text>
</view>
<view v-if="show_info">
<view style="border-bottom: 1px dashed #979797; padding: 0.5rem;">
......@@ -124,24 +120,44 @@
</template>
<script setup>
import { ref } from 'vue'
import { ref, onMounted, onUnmounted } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
const emit = defineEmits(["onPay"]);
/**
* 格式化时间
* @param {*} seconds
*/
function formatTime(seconds) {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const remainingSeconds = seconds % 60;
const end = ref(Date.now() + 60 * 1000);
const resetTime = ref({
m: '00',
s: '00'
});
let formattedTime = "";
if (hours > 0) {
formattedTime += hours.toString().padStart(2, "0") + ":";
}
const flag = ref(false);
const onEnd = (id) => {
console.warn(id);
flag.value = false;
if (minutes > 0 || hours > 0) {
formattedTime += minutes.toString().padStart(2, "0") + ":";
}
formattedTime += remainingSeconds.toString().padStart(2, "0");
return formattedTime;
}
const props = defineProps({
data: {
type: Object,
default: {}
}
});
const emit = defineEmits(["onPay"]);
const remain_time = ref(0); // 剩余时间秒数
const show_info = ref(false);
const showOrderInfo = (id) => {
show_info.value = !show_info.value;
......@@ -160,9 +176,10 @@ const cancelOrder = (id) => {
}
})
}
const visible = ref(false);
const payOrder = (id) => {
emit("onPay", id);
// TODO: 把剩余支付时间发到支付组件上显示
emit("onPay", { id, remain_time: remain_time.value });
// visible.value = !visible.value;
// Taro.showToast({
// title: '支付已超时',
......@@ -170,6 +187,21 @@ const payOrder = (id) => {
// duration: 2000
// });
}
let timeId = null;
onMounted(() => {
console.warn(props.data)
remain_time.value = props.data.remain_time;
// 进入页面后，开始倒计时
timeId = setInterval(() => {
remain_time.value ? remain_time.value -= 1 : 0;
}, 1000);
});
onUnmounted(() => {
timeId && clearInterval(timeId);
})
</script>
<style lang="less">
......
<!--
* @Date: 2023-12-20 14:11:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-20 14:56:37
* @LastEditTime: 2023-12-20 16:25:26
* @FilePath: /meihuaApp/src/components/payCard.vue
* @Description: 文件描述
-->
......@@ -11,7 +11,7 @@
<view style="padding: 2rem 1rem; text-align: center;">
<view style="font-size: 32rpx;">实付金额</view>
<view style="color: red; margin: 10rpx 0;"><text style="font-size: 50rpx;">￥</text><text style="font-size: 80rpx;">{{ price }}</text></view>
<view style="font-size: 28rpx; margin-bottom: 20rpx;">支付剩余时间 <text style="color: red;">{{ remain_time }}</text></view>
<view style="font-size: 28rpx; margin-bottom: 20rpx;">支付剩余时间 <text style="color: red;">{{ formatTime(remain_time) }}</text></view>
<nut-button block color="#6A4925" @tap="goToPay">立即支付</nut-button>
</view>
</nut-action-sheet>
......@@ -20,7 +20,31 @@
<script setup>
import Taro from '@tarojs/taro'
import { ref, watch, onMounted } from 'vue'
import { ref, watch, onMounted, onUnmounted } from 'vue'
/**
* 格式化时间
* @param {*} seconds
*/
function formatTime(seconds) {
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const remainingSeconds = seconds % 60;
let formattedTime = "";
if (hours > 0) {
formattedTime += hours.toString().padStart(2, "0") + ":";
}
if (minutes > 0 || hours > 0) {
formattedTime += minutes.toString().padStart(2, "0") + ":";
}
formattedTime += remainingSeconds.toString().padStart(2, "0");
return formattedTime;
}
const props = defineProps({
visible: {
......@@ -43,6 +67,8 @@ const id = ref('');
const price = ref('');
const remain_time = ref('');
let timeId = null;
watch(
() => props.visible,
(val) => {
......@@ -57,6 +83,14 @@ watch(
)
onMounted(() => {
// 进入页面后，开始倒计时
timeId = setInterval(() => {
remain_time.value ? remain_time.value -= 1 : 0;
}, 1000);
})
onUnmounted(() => {
timeId && clearInterval(timeId);
})
const goToPay = () => {
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-19 15:01:47
* @LastEditTime: 2023-12-20 16:31:30
* @FilePath: /meihuaApp/src/pages/book/index.vue
* @Description: 文件描述
-->
......@@ -14,6 +14,8 @@
<view class="book-type">
<nut-tabs v-model="value" @click="onTabClick" title-scroll title-gutter="10" name="tabName" background="#FFF" color="#4C2E08" 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 bookList" :key="index">
......@@ -22,8 +24,6 @@
</view>
</scroll-view>
</view>
</nut-tab-pane>
</nut-tabs>
</view>
</view>
<nav-bar activated="book" />
......
<!--
* @Date: 2023-12-13 11:13:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-20 15:12:46
* @LastEditTime: 2023-12-20 16:16:11
* @FilePath: /meihuaApp/src/pages/my/index.vue
* @Description: 文件描述
-->
......@@ -15,7 +15,7 @@
<text style="margin-left: 30rpx;">阿忆妞妞</text>
</view>
<view style="flex: 1;">
<IconFont name="edit"></IconFont>
<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>
......@@ -24,16 +24,16 @@
<view>
<nut-tabs v-model="value" 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 5" :key="index">
<order-card :key="index" @onPay="onPay"></order-card>
<view v-if="index === 4" style="height: 2rem;"></view>
<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>
</nut-tab-pane>
</nut-tabs>
</view>
</view>
......@@ -68,10 +68,39 @@ const tabList = ref([{
key: '3',
}]);
const orderList = ref([
{
id: 1,
name: '阿忆妞妞1',
phone: '138****8888',
address: '北京市朝阳区',
time: '2023-12-13 11:13:13',
price: 1200,
remain_time: 10,
},
{
id: 2,
name: '阿忆妞妞2',
phone: '138****8888',
address: '北京市朝阳区',
time: '2023-12-13 11:13:13',
price: 1200,
remain_time: 100,
},
{
id: 3,
name: '阿忆妞妞3',
phone: '138****8888',
address: '北京市朝阳区',
time: '2023-12-13 11:13:13',
price: 1200,
remain_time: 100,
},
])
const show_pay = ref(false);
const payData = ref({});
const onPay = (id) => {
const onPay = ({ id, remain_time }) => {
console.warn(id);
// Taro.showToast({
// title: '支付已超时',
......@@ -81,12 +110,18 @@ const onPay = (id) => {
show_pay.value = true;
payData.value.id = '123';
payData.value.price = 1200;
payData.value.remain_time = '30:00';
payData.value.remain_time = remain_time;
}
const onPayClose = () => {
show_pay.value = false;
}
const goToEdit = () => {
Taro.navigateTo({
url: '/pages/myInfo/index',
});
}
</script>
<script>
......