支付功能模块显示优化

hookehuyr
Commit 2ca11cc0cecae478d031b4f11aedd582a6540f62 2ca11cc0 1 parent 9a7de063
Showing 5 changed files with 181 additions and 64 deletions
components.d.ts
src/components/orderCard.vue
src/components/payCard.vue
src/pages/confirm/index.vue
src/pages/my/index.vue
--- a/components.d.ts
View file @2ca11cc
+++ b/components.d.ts
View file @2ca11cc
@@ -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']
--- a/src/components/orderCard.vue
View file @2ca11cc
+++ b/src/components/orderCard.vue
View file @2ca11cc
@@ -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>
+      </nut-countdown> -->
-    </view> -->
+      <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>
--- a/src/components/payCard.vue 0 → 100644
View file @2ca11cc
+++ b/src/components/payCard.vue 0 → 100644
View file @2ca11cc
+<!--
+ * @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>
--- a/src/pages/confirm/index.vue
View file @2ca11cc
+++ b/src/pages/confirm/index.vue
View file @2ca11cc
 <!--
  * @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-left">￥{{ room_price_info.discount * book_count * booking_info.days }}</text>
-            <text class="price-text-right">￥1280</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');
+import payCard from '@/components/payCard.vue'
-const book_count = ref(1);
+
-const visible = ref(false);
+const booking_info = ref({
-const basicData = reactive({
+  days: 1, // 入住天数
-  name: '',
+  check_in: {
-  tel: '',
+    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({
+  if (!formData.name) {
-    url: '/pages/payInfo/index?id=123',
+    Taro.showToast({
-  });
+      title: '请填写联系人',
-}
+      icon: 'none',
+      duration: 1000
+    });
+    return;
+  } else if (!formData.tel) {
+    Taro.showToast({
+      title: '请填写联系电话',
+      icon: 'none',
+      duration: 1000
+    });
+    return;
+  } else {
-function showKeyBoard() {
+    show_pay.value = true;
-  console.warn(1);
+    payData.value.id = '123';
-  visible.value = true;
+    payData.value.price = room_price_info.value.discount * book_count.value * booking_info.value.days;
-}
+    payData.value.remain_time = '30:00';
-function close() {
+  }
-  visible.value = false;
 }
-const onBookCountBlur = (evt) => {
+const onPayClose = () => {
-  if (isNaN(evt.detail.value)){
+  show_pay.value = false;
-    book_count.value = 1;
+  Taro.navigateTo({
-  }
+    url: '/pages/payInfo/index?id=123',
+  });
 }
 </script>
--- a/src/pages/my/index.vue
View file @2ca11cc
+++ b/src/pages/my/index.vue
View file @2ca11cc
 <!--
  * @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;
+const onPayClose = () => {
-  Taro.navigateTo({
+  show_pay.value = false;
-    url: '/pages/payInfo/index?id=123',
-  });
 }
 </script>