Hooke / meihua-island-book

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

支付功能模块显示优化

Inline Side-by-side
Showing 5 changed files with 180 additions and 63 deletions
......@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
NutCol: typeof import('@nutui/nutui-taro')['Col']
NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
NutCountdown: typeof import('@nutui/nutui-taro')['Countdown']
NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview']
NutInput: typeof import('@nutui/nutui-taro')['Input']
NutInputNumber: typeof import('@nutui/nutui-taro')['InputNumber']
......@@ -33,6 +34,7 @@ declare module '@vue/runtime-core' {
NutTag: typeof import('@nutui/nutui-taro')['Tag']
NutTextarea: typeof import('@nutui/nutui-taro')['Textarea']
OrderCard: typeof import('./src/components/orderCard.vue')['default']
PayCard: typeof import('./src/components/payCard.vue')['default']
Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
RoomCard: typeof import('./src/components/roomCard.vue')['default']
......
......@@ -59,12 +59,14 @@
</nut-col>
</nut-row>
</view>
<!-- <view v-if="flag" style="display: flex; justify-content: flex-end; font-size: 20rpx; margin-bottom: 1rem;">
<!-- <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;">
<text>支付剩余时间</text>&nbsp;
<nut-countdown v-model="resetTime" :end-time="end" @end="onEnd('id')">
<!-- <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>
</view> -->
</nut-countdown> -->
<text style="font-size: 20rpx; color: red;">30:00</text>
</view>
<view v-if="show_info">
<view style="border-bottom: 1px dashed #979797; padding: 0.5rem;">
<nut-row>
......@@ -118,14 +120,6 @@
</nut-row>
</view>
</view>
<!-- <nut-action-sheet v-model:visible="visible" title="">
<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;">980</text></view>
<view style="font-size: 28rpx; margin-bottom: 20rpx;">支付剩余时间 <text style="color: red;">29:59</text></view>
<nut-button block color="#6A4925">立即支付</nut-button>
</view>
</nut-action-sheet> -->
</view>
</template>
......
<!--
* @Date: 2023-12-20 14:11:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-20 14:56:37
* @FilePath: /meihuaApp/src/components/payCard.vue
* @Description: 文件描述
-->
<template>
<div class="pay-card">
<nut-action-sheet v-model:visible="props.visible" title="" @close="onClose">
<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>
<nut-button block color="#6A4925" @tap="goToPay">立即支付</nut-button>
</view>
</nut-action-sheet>
</div>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref, watch, onMounted } from 'vue'
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
data: {
type: Object,
default: {},
},
});
const emit = defineEmits(['close']);
const onClose = () => {
emit('close');
}
const id = ref('');
const price = ref('');
const remain_time = ref('');
watch(
() => props.visible,
(val) => {
if (val) {
id.value = props.data.id;
price.value = props.data.price;
remain_time.value = props.data.remain_time;
} else {
}
}
)
onMounted(() => {
})
const goToPay = () => {
Taro.navigateTo({
url: '/pages/payInfo/index?id=123',
});
}
</script>
<style lang="less">
</style>
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-20 13:35:22
* @LastEditTime: 2023-12-20 15:13:49
* @FilePath: /meihuaApp/src/pages/confirm/index.vue
* @Description: 确认订单页面
-->
......@@ -24,7 +24,7 @@
<view style="font-weight: bold; color: #0B0B0B; font-size: 1rem;">预定房间数</view>
</nut-col>
<nut-col :span="8" style="text-align: center;">
<nut-input-number v-model="book_count" min="1" button-size="30" input-width="50" @blur="onBookCountBlur" />
<nut-input-number v-model="book_count" min="1" button-size="30" input-width="50" @blur="onBookCountBlur" @change="onBookCountChange" />
</nut-col>
</nut-row>
</view>
......@@ -32,14 +32,18 @@
<nut-row gutter="10">
<nut-col span="9" class="calendar-select-left">
<view class="text">入住日期</view>
<view class="date">2023.12.07 星期四</view>
<view class="date">
{{ booking_info.check_in.year }}.{{ booking_info.check_in.month }}.{{ booking_info.check_in.day }} 星期{{ booking_info.check_in.day_of_week }}
</view>
</nut-col>
<nut-col span="5" class="calendar-select-center">
<view>共1晚</view>
<view>共{{ booking_info.days }}晚</view>
</nut-col>
<nut-col span="9" class="calendar-select-right">
<view class="text">退房日期</view>
<view class="date">2023.12.08 星期五</view>
<view class="date">
{{ booking_info.check_out.year }}.{{ booking_info.check_out.month }}.{{ booking_info.check_out.day }} 星期{{ booking_info.check_out.day_of_week }}
</view>
</nut-col>
</nut-row>
</view>
......@@ -49,7 +53,7 @@
<view class="check-in-text">入住时间</view>
</nut-col>
<nut-col span="12">
<view class="check-in-time">12月7日 14:00后</view>
<view class="check-in-time">{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 14:00后</view>
</nut-col>
</nut-row>
<nut-row>
......@@ -57,7 +61,7 @@
<view class="check-out-text">退房日期</view>
</nut-col>
<nut-col span="12">
<view class="check-out-time">12月8日 12:00前</view>
<view class="check-out-time">{{ booking_info.check_out.month }}月{{ booking_info.check_out.day }}日 12:00前</view>
</nut-col>
</nut-row>
<nut-row>
......@@ -65,17 +69,17 @@
<view class="meal-text">早餐</view>
</nut-col>
<nut-col span="12">
<view class="meal-count">3份</view>
<view class="meal-count">{{ booking_info.days }}份</view>
</nut-col>
</nut-row>
<view class="tip">
<view class="tip-red">*</view>
<view class="tip-text">12月7日 20:00后未入住，订单将被取消</view>
<view class="tip-text">{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 20:00后未入住，订单将被取消</view>
</view>
</view>
<view class="space-line"></view>
<view class="select-user">
<nut-radio-group v-model="radioVal" direction="horizontal">
<nut-radio-group v-model="use_type" direction="horizontal">
<nut-radio label="1">
本人入住
<template #icon><IconFont name="checked" color="gray"></IconFont></template>
......@@ -95,7 +99,7 @@
</nut-col>
<nut-col :span="18">
<view class="form-input">
<nut-input v-model="basicData.name" class="nut-input-text" placeholder="请输入联系人" type="text" :border="false" />
<nut-input v-model="formData.name" class="nut-input-text" placeholder="请输入联系人" type="text" :border="false" />
</view>
</nut-col>
</nut-row>
......@@ -105,7 +109,7 @@
</nut-col>
<nut-col :span="18">
<view class="form-input">
<nut-input v-model="basicData.tel" class="nut-input-text" placeholder="请输入联系电话" type="number" :border="false" />
<nut-input v-model="formData.tel" class="nut-input-text" placeholder="请输入联系电话" type="number" :border="false" />
</view>
</nut-col>
</nut-row>
......@@ -115,18 +119,17 @@
</nut-col>
<nut-col :span="18">
<view class="form-input">
<nut-textarea v-model="basicData.note" class="nut-input-text" placeholder="如有其他需求，请在此填写" :autosize="{ maxHeight: 100, minHeight: 50 }" />
<nut-textarea v-model="formData.note" class="nut-input-text" placeholder="如有其他需求，请在此填写" :autosize="{ maxHeight: 100, minHeight: 50 }" />
</view>
</nut-col>
</nut-row>
<nut-number-keyboard v-model:visible="visible" v-model="basicData.tel" maxlength="11" @close="close"> </nut-number-keyboard>
</view>
<view class="confirm-bar">
<nut-row>
<nut-col :span="18">
<view class="price">
<text class="price-text-left">￥980</text>
<text class="price-text-right">￥1280</text>
<text class="price-text-left">￥{{ room_price_info.discount * book_count * booking_info.days }}</text>
<text class="price-text-right">￥{{ room_price_info.price * book_count * booking_info.days }}</text>
</view>
</nut-col>
<nut-col :span="6">
......@@ -134,6 +137,7 @@
</nut-col>
</nut-row>
</view>
<payCard :visible="show_pay" :data="payData" @close="onPayClose"/>
</view>
</template>
......@@ -142,38 +146,85 @@ import Taro from '@tarojs/taro'
import { ref, reactive, onMounted } from "vue";
import { getCurrentPageParam } from "@/utils/weapp";
import { IconFont } from '@nutui/icons-vue-taro';
const radioVal = ref('1');
const book_count = ref(1);
const visible = ref(false);
const basicData = reactive({
name: '',
tel: '',
import payCard from '@/components/payCard.vue'
const booking_info = ref({
days: 1, // 入住天数
check_in: {
year: '2023',
month: '12',
day: '07',
day_of_week: '四'
},
check_out: {
year: '2023',
month: '12',
day: '08',
day_of_week: '五'
},
});
const room_price_info = ref({
discount: 980,
price: 1280,
});
const book_count = ref(1); // 预定房间数
const onBookCountBlur = (evt) => {
if (isNaN(evt.detail.value)){
book_count.value = 1;
}
}
const onBookCountChange = (count) => {
console.warn(count);
}
const use_type = ref('1'); // 本人入住或者帮别人订
const formData = reactive({
name: '11',
tel: '1',
note: ''
});
const show_pay = ref(false);
const payData = ref({});
onMounted(() => {
const { id } = getCurrentPageParam();
console.log(id);
});
const goPay = () => {
Taro.navigateTo({
url: '/pages/payInfo/index?id=123',
if (!formData.name) {
Taro.showToast({
title: '请填写联系人',
icon: 'none',
duration: 1000
});
}
return;
} else if (!formData.tel) {
Taro.showToast({
title: '请填写联系电话',
icon: 'none',
duration: 1000
});
return;
} else {
function showKeyBoard() {
console.warn(1);
visible.value = true;
}
function close() {
visible.value = false;
show_pay.value = true;
payData.value.id = '123';
payData.value.price = room_price_info.value.discount * book_count.value * booking_info.value.days;
payData.value.remain_time = '30:00';
}
}
const onBookCountBlur = (evt) => {
if (isNaN(evt.detail.value)){
book_count.value = 1;
}
const onPayClose = () => {
show_pay.value = false;
Taro.navigateTo({
url: '/pages/payInfo/index?id=123',
});
}
</script>
......
<!--
* @Date: 2023-12-13 11:13:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-19 16:57:41
* @LastEditTime: 2023-12-20 15:12:46
* @FilePath: /meihuaApp/src/pages/my/index.vue
* @Description: 文件描述
-->
......@@ -36,15 +36,10 @@
</nut-tabs>
</view>
</view>
<nut-action-sheet v-model:visible="visible" title="">
<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;">980</text></view>
<view style="font-size: 28rpx; margin-bottom: 20rpx;">支付剩余时间 <text style="color: red;">29:59</text></view>
<nut-button block color="#6A4925" @tap="goToPay">立即支付</nut-button>
</view>
</nut-action-sheet>
<nav-bar activated="my" />
<payCard :visible="show_pay" :data="payData" @close="onPayClose"/>
</view>
</template>
......@@ -54,6 +49,7 @@ import { ref } from "vue";
import { IconFont } from '@nutui/icons-vue-taro';
import navBar from '@/components/navBar.vue'
import orderCard from '@/components/orderCard.vue'
import payCard from '@/components/payCard.vue'
const refScrollView = ref(null);
......@@ -72,21 +68,24 @@ const tabList = ref([{
key: '3',
}]);
const visible = ref(false);
const show_pay = ref(false);
const payData = ref({});
const onPay = (id) => {
visible.value = !visible.value;
console.warn(id);
// Taro.showToast({
// title: '支付已超时',
// icon: 'error',
// duration: 2000
// });
show_pay.value = true;
payData.value.id = '123';
payData.value.price = 1200;
payData.value.remain_time = '30:00';
}
const goToPay = () => {
visible.value = false;
Taro.navigateTo({
url: '/pages/payInfo/index?id=123',
});
const onPayClose = () => {
show_pay.value = false;
}
</script>
......