付款相关页面优化

hookehuyr
Commit b00e563787f93b77e3a6e092194bae38d8ff203d b00e5637 1 parent 9f8f954d
Showing 4 changed files with 68 additions and 12 deletions
components.d.ts
src/components/orderCard.vue
src/pages/my/index.vue
src/pages/payInfo/index.vue
--- a/components.d.ts
View file @b00e563
+++ b/components.d.ts
View file @b00e563
@@ -12,12 +12,14 @@ declare module '@vue/runtime-core' {
     CalendarSelect: typeof import('./src/components/calendarSelect.vue')['default']
     Counter: typeof import('./src/components/Counter.vue')['default']
     NavBar: typeof import('./src/components/navBar.vue')['default']
+    NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
     NutAvatar: typeof import('@nutui/nutui-taro')['Avatar']
     NutButton: typeof import('@nutui/nutui-taro')['Button']
     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']
+    NutEmpty: typeof import('@nutui/nutui-taro')['Empty']
     NutInput: typeof import('@nutui/nutui-taro')['Input']
     NutInputNumber: typeof import('@nutui/nutui-taro')['InputNumber']
     NutNumberKeyboard: typeof import('@nutui/nutui-taro')['NumberKeyboard']
--- a/src/components/orderCard.vue
View file @b00e563
+++ b/src/components/orderCard.vue
View file @b00e563
@@ -118,6 +118,14 @@
         </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>
@@ -126,6 +134,8 @@ import { ref } from 'vue'
 import Taro from '@tarojs/taro'
 import { IconFont } from '@nutui/icons-vue-taro';
+const emit = defineEmits(["onPay"]);
+
 const end = ref(Date.now() + 60 * 1000);
 const resetTime = ref({
   m: '00',
@@ -156,12 +166,15 @@ const cancelOrder = (id) => {
     }
   })
 }
+const visible = ref(false);
 const payOrder = (id) => {
-  Taro.showToast({
+  emit("onPay", id);
-    title: '支付已超时',
+  // visible.value = !visible.value;
-    icon: 'error',
+  // Taro.showToast({
-    duration: 2000
+  //   title: '支付已超时',
-  });
+  //   icon: 'error',
+  //   duration: 2000
+  // });
 }
 </script>
--- a/src/pages/my/index.vue
View file @b00e563
+++ b/src/pages/my/index.vue
View file @b00e563
 <!--
  * @Date: 2023-12-13 11:13:13
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-18 12:46:49
+ * @LastEditTime: 2023-12-18 16:20:57
  * @FilePath: /meihuaApp/src/pages/my/index.vue
  * @Description: 文件描述
 -->
@@ -27,7 +27,7 @@
             <view class="book-list">
               <scroll-view :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
                 <view v-for="(item, index) in 10" :key="index">
-                  <order-card :key="index"></order-card>
+                  <order-card :key="index" @onPay="onPay"></order-card>
                   <view v-if="index === 9" style="height: 2rem;"></view>
                 </view>
               </scroll-view>
@@ -36,6 +36,14 @@
         </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" />
   </view>
 </template>
@@ -60,7 +68,24 @@ const tabList = ref([{
 }, {
   title: '已取消',
   key: '3',
-}])
+}]);
+
+const visible = ref(false);
+const onPay = (id) => {
+  visible.value = !visible.value;
+  console.warn(id);
+  // Taro.showToast({
+  //   title: '支付已超时',
+  //   icon: 'error',
+  //   duration: 2000
+  // });
+}
+const goToPay = () => {
+  visible.value = false;
+  Taro.navigateTo({
+    url: '/pages/payInfo/index?id=123',
+  });
+}
 </script>
 <script>
--- a/src/pages/payInfo/index.vue
View file @b00e563
+++ b/src/pages/payInfo/index.vue
View file @b00e563
 <!--
  * @Date: 2023-12-15 14:03:40
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-15 14:04:06
+ * @LastEditTime: 2023-12-18 16:54:46
  * @FilePath: /meihuaApp/src/pages/payInfo/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <div class="red">{{ str }}</div>
+  <view class="pay-info-page">
+    <view style="display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 3rem;">
+      <image style="width: 8rem; height: 8rem; border-radius: 10rpx;" mode="aspectFill" src="https://cdn.ipadbiz.cn/meihua/edit-icon.png" />
+      <div style="margin-top: 1rem; text-align: center; color: #6A4925; font-size: 35rpx;">
+        <view>您的订单提交成功，</view>
+        <view> 期待您的入住！</view>
+      </div>
+    </view>
+  </view>
 </template>
 <script setup>
 import Taro from '@tarojs/taro'
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+
+onMounted(() => {
+  setTimeout(() => {
+    Taro.redirectTo({
+    url: '/pages/my/index',
+  })
+  }, 2000);
+})
 </script>
 <script>
 import "./index.less";
 export default {
-  name: "demoPage",
+  name: "payInfoPage",
 };
 </script>