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' { ...@@ -15,6 +15,13 @@ declare module '@vue/runtime-core' {
15 NutCalendar: typeof import('@nutui/nutui-taro')['Calendar'] 15 NutCalendar: typeof import('@nutui/nutui-taro')['Calendar']
16 NutCol: typeof import('@nutui/nutui-taro')['Col'] 16 NutCol: typeof import('@nutui/nutui-taro')['Col']
17 NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider'] 17 NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
18 + NutForm: typeof import('@nutui/nutui-taro')['Form']
19 + NutFormItem: typeof import('@nutui/nutui-taro')['FormItem']
20 + NutInput: typeof import('@nutui/nutui-taro')['Input']
21 + NutInputNumber: typeof import('@nutui/nutui-taro')['InputNumber']
22 + NutNumberKeyboard: typeof import('@nutui/nutui-taro')['NumberKeyboard']
23 + NutRadio: typeof import('@nutui/nutui-taro')['Radio']
24 + NutRadioGroup: typeof import('@nutui/nutui-taro')['RadioGroup']
18 NutRow: typeof import('@nutui/nutui-taro')['Row'] 25 NutRow: typeof import('@nutui/nutui-taro')['Row']
19 NutSwiper: typeof import('@nutui/nutui-taro')['Swiper'] 26 NutSwiper: typeof import('@nutui/nutui-taro')['Swiper']
20 NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem'] 27 NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem']
...@@ -22,6 +29,7 @@ declare module '@vue/runtime-core' { ...@@ -22,6 +29,7 @@ declare module '@vue/runtime-core' {
22 NutTabbarItem: typeof import('@nutui/nutui-taro')['TabbarItem'] 29 NutTabbarItem: typeof import('@nutui/nutui-taro')['TabbarItem']
23 NutTabPane: typeof import('@nutui/nutui-taro')['TabPane'] 30 NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
24 NutTabs: typeof import('@nutui/nutui-taro')['Tabs'] 31 NutTabs: typeof import('@nutui/nutui-taro')['Tabs']
32 + NutTextarea: typeof import('@nutui/nutui-taro')['Textarea']
25 Picker: typeof import('./src/components/time-picker-data/picker.vue')['default'] 33 Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
26 PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default'] 34 PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
27 RoomCard: typeof import('./src/components/roomCard.vue')['default'] 35 RoomCard: typeof import('./src/components/roomCard.vue')['default']
......
1 -.red { 1 +.calendar-select-page {
2 - color: red; 2 + margin: 1rem;
3 + background-color: #F6ECE1;
4 + border-radius: 0.5rem;
5 + padding: 1rem 0;
6 + padding-left: 0.5rem;
7 +}
8 +
9 +.confirm-form {
10 + padding-right: 1rem;
11 + .form-text {
12 + 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;
13 + }
14 + .nut-input-text {
15 + border-radius: 10rpx;
16 + }
17 + .nut-textarea {
18 + border-radius: 10rpx;
19 + }
3 } 20 }
......
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: 2022-09-30 10:00:57 4 + * @LastEditTime: 2023-12-15 17:10:25
5 - * @FilePath: /swx/src/pages/demo/index.vue 5 + * @FilePath: /meihuaApp/src/pages/confirm/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="red">{{ str }}</div> 9 + <view>
10 + <view style="padding: 1rem;">
11 + <nut-row>
12 + <nut-col :span="16">
13 + <view style="font-weight: bold; color: #0B0B0B; font-size: 1.15rem;">非凡魅力豪华总统套房</view>
14 + <view style="color: #7D7C7C; font-size: 0.8rem; margin-top: 0.15rem;">两室 宜住3人</view>
15 + </nut-col>
16 + <nut-col :span="8">
17 + <image style="width: 100%; height: 50px; border-radius: 0.25rem;" mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
18 + </nut-col>
19 + </nut-row>
20 + </view>
21 + <view style="padding: 0 1rem;">
22 + <nut-row>
23 + <nut-col :span="16">
24 + <view style="font-weight: bold; color: #0B0B0B; font-size: 1rem;">预定房间数</view>
25 + </nut-col>
26 + <nut-col :span="8" style="text-align: center;">
27 + <nut-input-number v-model="value" min="1" button-size="30" input-width="50" />
28 + </nut-col>
29 + </nut-row>
30 + </view>
31 + <view class="calendar-select-page">
32 + <nut-row gutter="10">
33 + <nut-col span="9">
34 + <view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
35 + <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.07 星期四</view>
36 + </nut-col>
37 + <nut-col span="5">
38 + <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;">
39 + 共1晚
40 + </view>
41 + </nut-col>
42 + <nut-col span="9">
43 + <view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
44 + <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.08 星期五</view>
45 + </nut-col>
46 + </nut-row>
47 + </view>
48 + <view style="padding: 0 1rem 1rem;">
49 + <nut-row>
50 + <nut-col span="12">
51 + <view style="color: #060606; font-size: 0.85rem;">入住时间</view>
52 + </nut-col>
53 + <nut-col span="12">
54 + <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold; text-align: right;">12月7日 14:00后</view>
55 + </nut-col>
56 + </nut-row>
57 + <nut-row>
58 + <nut-col span="12">
59 + <view style="color: #060606; font-size: 0.85rem; margin: 0.25rem 0;">退房日期</view>
60 + </nut-col>
61 + <nut-col span="12">
62 + <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold; text-align: right; margin: 0.25rem 0;">12月8日 12:00前</view>
63 + </nut-col>
64 + </nut-row>
65 + <nut-row>
66 + <nut-col span="12">
67 + <view style="color: #060606; font-size: 0.85rem;">早餐</view>
68 + </nut-col>
69 + <nut-col span="12">
70 + <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold; text-align: right;">3份</view>
71 + </nut-col>
72 + </nut-row>
73 + <view style="font-size: 0.85rem; margin-top: 0.25rem;">
74 + <view style="color: red; margin: auto; display: inline-block;">*</view> <view style="color: #6A4925; margin: auto; display: inline-block;">12月7日 20:00后未入住，订单将被取消</view>
75 + </view>
76 + </view>
77 + <view style="height: 1rem; background-color: #F6F6F6;"></view>
78 + <view style="text-align: center; padding: 1rem 0;">
79 + <nut-radio-group v-model="radioVal" direction="horizontal">
80 + <nut-radio label="1">
81 + 本人入住
82 + <template #icon> <Checklist /> </template>
83 + <template #checkedIcon> <Checklist color="red" /> </template>
84 + </nut-radio>
85 + <nut-radio label="2">
86 + 帮别人订
87 + <template #icon> <Checklist /> </template>
88 + <template #checkedIcon> <Checklist color="red" /> </template>
89 + </nut-radio>
90 + </nut-radio-group>
91 + </view>
92 + <view class="confirm-form">
93 + <nut-row>
94 + <nut-col :span="8">
95 + <view class="form-text"><view style="color: red; margin-right: 0.1rem;display: inline-block;">*</view>联系人</view>
96 + </nut-col>
97 + <nut-col :span="16">
98 + <view style="border: 1px solid #DEDEDE; border-radius: 10rpx;">
99 + <nut-input v-model="basicData.name" class="nut-input-text" placeholder="请输入联系人" type="text" :border="false" />
100 + </view>
101 + </nut-col>
102 + </nut-row>
103 + <nut-row style="margin: 30rpx 0;">
104 + <nut-col :span="8">
105 + <view class="form-text"><view style="color: red; margin-right: 0.1rem;display: inline-block;">*</view>联系电话</view>
106 + </nut-col>
107 + <nut-col :span="16">
108 + <view style="border: 1px solid #DEDEDE; border-radius: 10rpx;" @tap="showKeyBoard">
109 + <nut-input v-model="basicData.tel" class="nut-input-text" placeholder="请输入联系电话" type="text" :border="false" readonly />
110 + </view>
111 + </nut-col>
112 + </nut-row>
113 + <nut-row>
114 + <nut-col :span="8">
115 + <view class="form-text">备注</view>
116 + </nut-col>
117 + <nut-col :span="16">
118 + <view style="border: 1px solid #DEDEDE; border-radius: 10rpx;">
119 + <nut-textarea v-model="basicData.note" class="nut-input-text" placeholder="如有其他需求，请在此填写" :autosize="{ maxHeight: 100, minHeight: 50 }" />
120 + </view>
121 + </nut-col>
122 + </nut-row>
123 +
124 + <!-- <nut-textarea v-model="basicData.note" class="nut-input-text" placeholder="如有其他需求，请在此填写" :autosize="{ maxHeight: 100, minHeight: 50 }" /> -->
125 + <nut-number-keyboard v-model:visible="visible" v-model="basicData.tel" maxlength="11" @close="close"> </nut-number-keyboard>
126 + </view>
127 + <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);">
128 + <nut-row>
129 + <nut-col :span="18">
130 + <view style="height: 2rem; margin-left: 0.5rem; display: flex; align-items: center;">
131 + <text style="color: #EB2E2E; font-size: 1.3rem; font-weight: bold;">￥980</text>
132 + <text style="color: #7D7C7C; text-decoration: line-through; font-size: 0.85rem; margin-left: 5px;">￥1280</text>
133 + </view>
134 + </nut-col>
135 + <nut-col :span="6">
136 + <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>
137 + </nut-col>
138 + </nut-row>
139 + </view>
140 + </view>
10 </template> 141 </template>
11 142
12 <script setup> 143 <script setup>
13 import Taro from '@tarojs/taro' 144 import Taro from '@tarojs/taro'
14 -import { ref } from "vue"; 145 +import { ref, reactive, onMounted } from "vue";
146 +import { getCurrentPageParam } from "@/utils/weapp";
147 +import { Checklist } from '@nutui/icons-vue-taro';
148 +const radioVal = ref('1');
149 +const value = ref(1);
150 +const visible = ref(false);
151 +const basicData = reactive({
152 + name: '',
153 + tel: '',
154 + note: ''
155 +});
156 +
157 +onMounted(() => {
158 + const { id } = getCurrentPageParam();
159 + console.log(id);
160 +});
161 +
162 +const goPay = () => {
163 +
164 +}
165 +
166 +function showKeyBoard() {
167 + console.warn(1);
168 + visible.value = true;
169 +}
170 +function close() {
171 + visible.value = false;
172 +}
15 </script> 173 </script>
16 174
17 <script> 175 <script>
18 import "./index.less"; 176 import "./index.less";
19 export default { 177 export default {
20 - name: "demoPage", 178 + name: "confirmPage",
21 }; 179 };
22 </script> 180 </script>
......
...@@ -5,11 +5,6 @@ ...@@ -5,11 +5,6 @@
5 width: 100%; 5 width: 100%;
6 height: 100%; 6 height: 100%;
7 } 7 }
8 - 8 +.book-cal {
9 -.calendar-select-page { 9 + padding: 0 0.75rem;
10 - margin: 0 1rem;
11 - background-color: #F6ECE1;
12 - border-radius: 0.5rem;
13 - padding: 1rem 0;
14 - padding-left: 0.5rem;
15 } 10 }
......
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-15 14:44:29 4 + * @LastEditTime: 2023-12-15 17:10:51
5 * @FilePath: /meihuaApp/src/pages/detail/index.vue 5 * @FilePath: /meihuaApp/src/pages/detail/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -16,26 +16,12 @@ ...@@ -16,26 +16,12 @@
16 <view style="color: #0B0B0B; font-size: 1rem; font-weight: bold;">非凡魅力豪华总统套房</view> 16 <view style="color: #0B0B0B; font-size: 1rem; font-weight: bold;">非凡魅力豪华总统套房</view>
17 <view style="color: #7D7C7C; font-size: 0.8rem;">两室 宜住3人</view> 17 <view style="color: #7D7C7C; font-size: 0.8rem;">两室 宜住3人</view>
18 </view> 18 </view>
19 - <view class="calendar-select-page"> 19 + <view id="book-cal" class="book-cal">
20 - <nut-row gutter="10"> 20 + <calendar-select @on-dates-change="onDatesChange"></calendar-select>
21 - <nut-col span="9">
22 - <view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
23 - <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.07 星期四</view>
24 - </nut-col>
25 - <nut-col span="5">
26 - <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;">
27 - 共1晚
28 - </view>
29 - </nut-col>
30 - <nut-col span="9">
31 - <view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
32 - <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.08 星期五</view>
33 - </nut-col>
34 - </nut-row>
35 </view> 21 </view>
36 <view style="padding: 1rem; text-align: center; font-weight: bold;">房间介绍</view> 22 <view style="padding: 1rem; text-align: center; font-weight: bold;">房间介绍</view>
37 <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> 23 <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>
38 - <view style="position: absolute; bottom: 0; left: 0; right: 0; background-color: #fff; height: 4rem; padding: 0 0.5rem;"> 24 + <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);">
39 <nut-row> 25 <nut-row>
40 <nut-col :span="18"> 26 <nut-col :span="18">
41 <view style="height: 2rem; margin-left: 0.5rem; display: flex; align-items: center;"> 27 <view style="height: 2rem; margin-left: 0.5rem; display: flex; align-items: center;">
...@@ -44,7 +30,7 @@ ...@@ -44,7 +30,7 @@
44 </view> 30 </view>
45 </nut-col> 31 </nut-col>
46 <nut-col :span="6"> 32 <nut-col :span="6">
47 - <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> 33 + <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>
48 </nut-col> 34 </nut-col>
49 </nut-row> 35 </nut-row>
50 </view> 36 </view>
...@@ -54,8 +40,18 @@ ...@@ -54,8 +40,18 @@
54 <script setup> 40 <script setup>
55 import Taro from '@tarojs/taro' 41 import Taro from '@tarojs/taro'
56 import { ref } from "vue"; 42 import { ref } from "vue";
43 +import calendarSelect from '@/components/calendarSelect.vue'
44 +
45 +const onDatesChange = ({ startDate, endDate }) => {
46 + console.warn(startDate, endDate);
47 +}
48 +const page = ref(1);
57 49
58 -const page = ref(2); 50 +const goToConfirm = () => {
51 + Taro.navigateTo({
52 + url: '/pages/confirm/index?id=123',
53 + })
54 +}
59 </script> 55 </script>
60 56
61 <script> 57 <script>
......