Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
96e47fdb 1 parent f7374d4f

完善确认订单页

Inline Side-by-side
Showing 5 changed files with 208 additions and 34 deletions
......@@ -15,6 +15,13 @@ 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']
NutForm: typeof import('@nutui/nutui-taro')['Form']
NutFormItem: typeof import('@nutui/nutui-taro')['FormItem']
NutInput: typeof import('@nutui/nutui-taro')['Input']
NutInputNumber: typeof import('@nutui/nutui-taro')['InputNumber']
NutNumberKeyboard: typeof import('@nutui/nutui-taro')['NumberKeyboard']
NutRadio: typeof import('@nutui/nutui-taro')['Radio']
NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup']
NutRow: typeof import('@nutui/nutui-taro')['Row']
NutSwiper: typeof import('@nutui/nutui-taro')['Swiper']
NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem']
......@@ -22,6 +29,7 @@ declare module '@vue/runtime-core' {
NutTabbarItem: typeof import('@nutui/nutui-taro')['TabbarItem']
NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
NutTabs: typeof import('@nutui/nutui-taro')['Tabs']
NutTextarea: typeof import('@nutui/nutui-taro')['Textarea']
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']
......
.red {
color: red;
.calendar-select-page {
margin: 1rem;
background-color: #F6ECE1;
border-radius: 0.5rem;
padding: 1rem 0;
padding-left: 0.5rem;
}
.confirm-form {
padding-right: 1rem;
.form-text {
position: relative; width: 100%; padding: 20rpx 30rpx; display: -webkit-flex; display: -ms-flexbox; display: flex; line-height: 40rpx; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 27rpx;
}
.nut-input-text {
border-radius: 10rpx;
}
.nut-textarea {
border-radius: 10rpx;
}
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-09-30 10:00:57
* @FilePath: /swx/src/pages/demo/index.vue
* @LastEditTime: 2023-12-15 17:10:25
* @FilePath: /meihuaApp/src/pages/confirm/index.vue
* @Description: 文件描述
-->
<template>
<div class="red">{{ str }}</div>
<view>
<view style="padding: 1rem;">
<nut-row>
<nut-col :span="16">
<view style="font-weight: bold; color: #0B0B0B; font-size: 1.15rem;">非凡魅力豪华总统套房</view>
<view style="color: #7D7C7C; font-size: 0.8rem; margin-top: 0.15rem;">两室 宜住3人</view>
</nut-col>
<nut-col :span="8">
<image style="width: 100%; height: 50px; border-radius: 0.25rem;" mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
</nut-col>
</nut-row>
</view>
<view style="padding: 0 1rem;">
<nut-row>
<nut-col :span="16">
<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="value" min="1" button-size="30" input-width="50" />
</nut-col>
</nut-row>
</view>
<view class="calendar-select-page">
<nut-row gutter="10">
<nut-col span="9">
<view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
<view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.07 星期四</view>
</nut-col>
<nut-col span="5">
<view style="color: #6A4925; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;">
共1晚
</view>
</nut-col>
<nut-col span="9">
<view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
<view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.08 星期五</view>
</nut-col>
</nut-row>
</view>
<view style="padding: 0 1rem 1rem;">
<nut-row>
<nut-col span="12">
<view style="color: #060606; font-size: 0.85rem;">入住时间</view>
</nut-col>
<nut-col span="12">
<view style="color: #6A4925; font-size: 0.85rem; font-weight: bold; text-align: right;">12月7日 14:00后</view>
</nut-col>
</nut-row>
<nut-row>
<nut-col span="12">
<view style="color: #060606; font-size: 0.85rem; margin: 0.25rem 0;">退房日期</view>
</nut-col>
<nut-col span="12">
<view style="color: #6A4925; font-size: 0.85rem; font-weight: bold; text-align: right; margin: 0.25rem 0;">12月8日 12:00前</view>
</nut-col>
</nut-row>
<nut-row>
<nut-col span="12">
<view style="color: #060606; font-size: 0.85rem;">早餐</view>
</nut-col>
<nut-col span="12">
<view style="color: #6A4925; font-size: 0.85rem; font-weight: bold; text-align: right;">3份</view>
</nut-col>
</nut-row>
<view style="font-size: 0.85rem; margin-top: 0.25rem;">
<view style="color: red; margin: auto; display: inline-block;">*</view> <view style="color: #6A4925; margin: auto; display: inline-block;">12月7日 20:00后未入住，订单将被取消</view>
</view>
</view>
<view style="height: 1rem; background-color: #F6F6F6;"></view>
<view style="text-align: center; padding: 1rem 0;">
<nut-radio-group v-model="radioVal" direction="horizontal">
<nut-radio label="1">
本人入住
<template #icon> <Checklist /> </template>
<template #checkedIcon> <Checklist color="red" /> </template>
</nut-radio>
<nut-radio label="2">
帮别人订
<template #icon> <Checklist /> </template>
<template #checkedIcon> <Checklist color="red" /> </template>
</nut-radio>
</nut-radio-group>
</view>
<view class="confirm-form">
<nut-row>
<nut-col :span="8">
<view class="form-text"><view style="color: red; margin-right: 0.1rem;display: inline-block;">*</view>联系人</view>
</nut-col>
<nut-col :span="16">
<view style="border: 1px solid #DEDEDE; border-radius: 10rpx;">
<nut-input v-model="basicData.name" class="nut-input-text" placeholder="请输入联系人" type="text" :border="false" />
</view>
</nut-col>
</nut-row>
<nut-row style="margin: 30rpx 0;">
<nut-col :span="8">
<view class="form-text"><view style="color: red; margin-right: 0.1rem;display: inline-block;">*</view>联系电话</view>
</nut-col>
<nut-col :span="16">
<view style="border: 1px solid #DEDEDE; border-radius: 10rpx;" @tap="showKeyBoard">
<nut-input v-model="basicData.tel" class="nut-input-text" placeholder="请输入联系电话" type="text" :border="false" readonly />
</view>
</nut-col>
</nut-row>
<nut-row>
<nut-col :span="8">
<view class="form-text">备注</view>
</nut-col>
<nut-col :span="16">
<view style="border: 1px solid #DEDEDE; border-radius: 10rpx;">
<nut-textarea v-model="basicData.note" class="nut-input-text" placeholder="如有其他需求，请在此填写" :autosize="{ maxHeight: 100, minHeight: 50 }" />
</view>
</nut-col>
</nut-row>
<!-- <nut-textarea v-model="basicData.note" class="nut-input-text" placeholder="如有其他需求，请在此填写" :autosize="{ maxHeight: 100, minHeight: 50 }" /> -->
<nut-number-keyboard v-model:visible="visible" v-model="basicData.tel" maxlength="11" @close="close"> </nut-number-keyboard>
</view>
<view style="position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; height: 4rem; padding: 30rpx 30rpx 20rpx 30rpx;box-shadow: 0px -5px 4px 0px rgba(0,0,0,0.07);">
<nut-row>
<nut-col :span="18">
<view style="height: 2rem; margin-left: 0.5rem; display: flex; align-items: center;">
<text style="color: #EB2E2E; font-size: 1.3rem; font-weight: bold;">￥980</text>
<text style="color: #7D7C7C; text-decoration: line-through; font-size: 0.85rem; margin-left: 5px;">￥1280</text>
</view>
</nut-col>
<nut-col :span="6">
<view @tap="goPay" style="background-color: #6A4925; border-radius: 1.25rem; padding: 0.25rem 0.5rem; color: #fff; text-align: center; height: 2rem; line-height: 2rem;">提交订单</view>
</nut-col>
</nut-row>
</view>
</view>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref } from "vue";
import { ref, reactive, onMounted } from "vue";
import { getCurrentPageParam } from "@/utils/weapp";
import { Checklist } from '@nutui/icons-vue-taro';
const radioVal = ref('1');
const value = ref(1);
const visible = ref(false);
const basicData = reactive({
name: '',
tel: '',
note: ''
});
onMounted(() => {
const { id } = getCurrentPageParam();
console.log(id);
});
const goPay = () => {
}
function showKeyBoard() {
console.warn(1);
visible.value = true;
}
function close() {
visible.value = false;
}
</script>
<script>
import "./index.less";
export default {
name: "demoPage",
name: "confirmPage",
};
</script>
......
......@@ -5,11 +5,6 @@
width: 100%;
height: 100%;
}
.calendar-select-page {
margin: 0 1rem;
background-color: #F6ECE1;
border-radius: 0.5rem;
padding: 1rem 0;
padding-left: 0.5rem;
.book-cal {
padding: 0 0.75rem;
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-15 14:44:29
* @LastEditTime: 2023-12-15 17:10:51
* @FilePath: /meihuaApp/src/pages/detail/index.vue
* @Description: 文件描述
-->
......@@ -16,26 +16,12 @@
<view style="color: #0B0B0B; font-size: 1rem; font-weight: bold;">非凡魅力豪华总统套房</view>
<view style="color: #7D7C7C; font-size: 0.8rem;">两室 宜住3人</view>
</view>
<view class="calendar-select-page">
<nut-row gutter="10">
<nut-col span="9">
<view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
<view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.07 星期四</view>
</nut-col>
<nut-col span="5">
<view style="color: #6A4925; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;">
共1晚
</view>
</nut-col>
<nut-col span="9">
<view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
<view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.08 星期五</view>
</nut-col>
</nut-row>
<view id="book-cal" class="book-cal">
<calendar-select @on-dates-change="onDatesChange"></calendar-select>
</view>
<view style="padding: 1rem; text-align: center; font-weight: bold;">房间介绍</view>
<view style="padding: 0 1rem;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem quibusdam nostrum numquam quaerat corporis totam similique expedita, omnis ratione aut magnam nihil. Modi repudiandae at minus enim beatae fugit. Modi.</view>
<view style="position: absolute; bottom: 0; left: 0; right: 0; background-color: #fff; height: 4rem; padding: 0 0.5rem;">
<view style="position: fixed; bottom: 0; left: 0; right: 0; background-color: #fff; height: 4rem; padding: 30rpx 30rpx 20rpx 30rpx;box-shadow: 0px -5px 4px 0px rgba(0,0,0,0.07);">
<nut-row>
<nut-col :span="18">
<view style="height: 2rem; margin-left: 0.5rem; display: flex; align-items: center;">
......@@ -44,7 +30,7 @@
</view>
</nut-col>
<nut-col :span="6">
<view style="background-color: #6A4925; border-radius: 1.25rem; padding: 0.25rem 0.5rem; color: #fff; text-align: center; height: 2rem; line-height: 2rem;">预定</view>
<view @tap="goToConfirm" style="background-color: #6A4925; border-radius: 1.25rem; padding: 0.25rem 0.5rem; color: #fff; text-align: center; height: 2rem; line-height: 2rem;">预定</view>
</nut-col>
</nut-row>
</view>
......@@ -54,8 +40,18 @@
<script setup>
import Taro from '@tarojs/taro'
import { ref } from "vue";
import calendarSelect from '@/components/calendarSelect.vue'
const onDatesChange = ({ startDate, endDate }) => {
console.warn(startDate, endDate);
}
const page = ref(1);
const page = ref(2);
const goToConfirm = () => {
Taro.navigateTo({
url: '/pages/confirm/index?id=123',
})
}
</script>
<script>
......