我的页面完善

hookehuyr
Commit 9f8f954d5e5d12dc255033558656fb53ea4ed42c 9f8f954d 1 parent e2ad0f64
Showing 3 changed files with 198 additions and 7 deletions
components.d.ts
src/components/orderCard.vue
src/pages/my/index.vue
--- a/components.d.ts
View file @9f8f954
+++ b/components.d.ts
View file @9f8f954
@@ -13,9 +13,11 @@ declare module '@vue/runtime-core' {
     Counter: typeof import('./src/components/Counter.vue')['default']
     NavBar: typeof import('./src/components/navBar.vue')['default']
     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']
     NutInput: typeof import('@nutui/nutui-taro')['Input']
     NutInputNumber: typeof import('@nutui/nutui-taro')['InputNumber']
     NutNumberKeyboard: typeof import('@nutui/nutui-taro')['NumberKeyboard']
@@ -26,7 +28,10 @@ declare module '@vue/runtime-core' {
     NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem']
     NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
     NutTabs: typeof import('@nutui/nutui-taro')['Tabs']
+    NutTag: typeof import('@nutui/nutui-taro')['Tag']
     NutTextarea: typeof import('@nutui/nutui-taro')['Textarea']
+    NutToast: typeof import('@nutui/nutui-taro')['Toast']
+    OrderCard: typeof import('./src/components/orderCard.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 0 → 100644
View file @9f8f954
+++ b/src/components/orderCard.vue 0 → 100644
View file @9f8f954
+<template>
+  <view class="order-card-component">
+    <view style="padding: 0.5rem;">
+      <nut-row>
+        <nut-col span="16">
+          <view style="font-weight: bold; font-size: 34rpx;">家庭豪华连排三室套房</view>
+          <view style="color: #7D7C7C; font-size: 24rpx;">两室  宜住3人 </view>
+        </nut-col>
+        <nut-col span="8">
+          <image style="width: 100%; height: 3rem; border-radius: 10rpx;" mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
+        </nut-col>
+      </nut-row>
+    </view>
+    <view style="padding: 0 0.5rem;"><nut-tag color="#FA685D">待支付</nut-tag></view>
+    <view style="padding: 0.5rem;">
+      <nut-row>
+        <nut-col span="18">
+          <view style="height: 2rem; 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" style="text-align: right;">
+          <text style="font-size: 28rpx;">x1</text>
+        </nut-col>
+      </nut-row>
+    </view>
+    <view class="calendar-select-page">
+      <nut-row gutter="">
+        <nut-col span="9">
+          <view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
+          <view style="color: #7D7C7C; font-size: 0.85rem; font-weight: bold;">2023.12.07 星期四</view>
+        </nut-col>
+        <nut-col span="5" style="padding: 0 10rpx;">
+          <view style="color: #7D7C7C; 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" style="margin-left: 10rpx;">
+          <view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
+          <view style="color: #7D7C7C; font-size: 0.85rem; font-weight: bold;">2023.12.08 星期五</view>
+        </nut-col>
+      </nut-row>
+    </view>
+    <view style="padding: 0.5rem;">
+      <nut-row>
+        <nut-col span="6">
+          <view @tap="showOrderInfo('id')" style="display: flex; align-items: center; margin: 20rpx 0;height: 60rpx;">
+            <text style="font-size: 26rpx; color: #7D7C7C;">入住信息</text>&nbsp;
+            <IconFont v-if="show_info" name="rect-up" size="12" color="#7D7C7C"></IconFont>
+            <IconFont v-else name="rect-down" size="12" color="#7D7C7C"></IconFont>
+          </view>
+        </nut-col>
+        <nut-col span="18">
+          <view style="display: flex; align-items: center;height: 100rpx; justify-content: flex-end;">
+            <nut-button @tap="cancelOrder('id')" plain color="#6A4925" size="small">取消订单</nut-button>&nbsp;
+            <nut-button @tap="payOrder('id')" color="#6A4925" size="small">立即支付</nut-button>
+          </view>
+        </nut-col>
+      </nut-row>
+    </view>
+    <!-- <view v-if="flag" 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')">
+        <text style="font-size: 20rpx; color: red;">{{ resetTime.m }}:{{ resetTime.s }}</text>
+      </nut-countdown>
+    </view> -->
+    <view v-if="show_info">
+      <view style="border-bottom: 1px dashed #979797; padding: 0.5rem;">
+        <nut-row>
+          <nut-col span="12">
+            <view style="color: #7D7C7C; font-size: 0.85rem;">入住时间</view>
+          </nut-col>
+          <nut-col span="12">
+            <view style="color: #7D7C7C; font-size: 0.85rem; text-align: right;">12月7日 14:00后</view>
+          </nut-col>
+        </nut-row>
+        <nut-row>
+          <nut-col span="12">
+            <view style="color: #7D7C7C; font-size: 0.85rem; margin: 0.25rem 0;">退房日期</view>
+          </nut-col>
+          <nut-col span="12">
+            <view style="color: #7D7C7C; font-size: 0.85rem; 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: #7D7C7C; font-size: 0.85rem;">早餐</view>
+          </nut-col>
+          <nut-col span="12">
+            <view style="color: #7D7C7C; font-size: 0.85rem; 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: #7D7C7C; margin: auto; display: inline-block;">12月7日 20:00后未入住，订单将被取消</view>
+        </view>
+      </view>
+      <view style="padding: 0.5rem; font-size: 28rpx; color: #7D7C7C;">
+        <nut-row style="margin-bottom: 10rpx;">
+          <nut-col span="6">联系人：</nut-col>
+          <nut-col span="18" style="text-align: right;">王二虎</nut-col>
+        </nut-row>
+        <nut-row style="margin-bottom: 10rpx;">
+          <nut-col span="6">联系电话：</nut-col>
+          <nut-col span="18" style="text-align: right;">18996999786</nut-col>
+        </nut-row>
+        <nut-row style="margin-bottom: 10rpx;">
+          <nut-col span="6">备注：</nut-col>
+          <nut-col span="18" style="text-align: right;"></nut-col>
+        </nut-row>
+        <nut-row style="margin-bottom: 10rpx;">
+          <nut-col span="6">下单时间：</nut-col>
+          <nut-col span="18" style="text-align: right;">2023-12-06</nut-col>
+        </nut-row>
+        <nut-row style="margin-bottom: 10rpx;">
+          <nut-col span="6">订单号：</nut-col>
+          <nut-col span="18" style="text-align: right;">20231206</nut-col>
+        </nut-row>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Taro from '@tarojs/taro'
+import { IconFont } from '@nutui/icons-vue-taro';
+
+const end = ref(Date.now() + 60 * 1000);
+const resetTime = ref({
+  m: '00',
+  s: '00'
+});
+
+const flag = ref(false);
+const onEnd = (id) => {
+  console.warn(id);
+  flag.value = false;
+}
+
+const show_info = ref(false);
+const showOrderInfo = (id) => {
+  show_info.value = !show_info.value;
+}
+
+const cancelOrder = (id) => {
+  Taro.showModal({
+    title: '温馨提示',
+    content: '是否确认取消订单？',
+    success: function (res) {
+      if (res.confirm) {
+        console.log('用户点击确定')
+      } else if (res.cancel) {
+        console.log('用户点击取消')
+      }
+    }
+  })
+}
+const payOrder = (id) => {
+  Taro.showToast({
+    title: '支付已超时',
+    icon: 'error',
+    duration: 2000
+  });
+}
+</script>
+
+<style lang="less">
+.order-card-component {
+  margin: 0 1rem;
+  // padding: 0.5rem;
+  background-color: white;
+  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
+  border: 1px solid #f9f9f9;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  .calendar-select-page {
+    margin: 0 0.5rem;
+    background-color: #F6ECE1;
+    border-radius: 10rpx;
+    padding: 1rem 0;
+    padding-left: 0.5rem;
+  }
+}
+</style>
--- a/src/pages/my/index.vue
View file @9f8f954
+++ b/src/pages/my/index.vue
View file @9f8f954
 <!--
  * @Date: 2023-12-13 11:13:13
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-18 10:26:00
+ * @LastEditTime: 2023-12-18 12:46:49
  * @FilePath: /meihuaApp/src/pages/my/index.vue
  * @Description: 文件描述
 -->
@@ -19,15 +19,15 @@
       </view>
       <view style="position: absolute; left: 0%; right: 0%; bottom: 0%; height: 20rpx; width: 100%; background-color: #FFF; border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"></view>
     </view>
-    <view>
+    <view v-if="showContent">
       <view id="title" style="padding-left: 1.5rem; font-size: 35rpx; font-weight: bold;">我的订单</view>
       <view>
-        <nut-tabs v-model="value" title-scroll title-gutter="10" name="tabName" background="#FFF" color="#6A4925" animated-time="0">
+        <nut-tabs v-model="value" title-scroll title-gutter="0" name="tabName" background="#FFF" color="#6A4925" animated-time="0">
           <nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key">
             <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">
-                  <room-card :key="index"></room-card>
+                  <order-card :key="index"></order-card>
                   <view v-if="index === 9" style="height: 2rem;"></view>
                 </view>
               </scroll-view>
@@ -45,7 +45,7 @@ import Taro from '@tarojs/taro'
 import { ref } from "vue";
 import { IconFont } from '@nutui/icons-vue-taro';
 import navBar from '@/components/navBar.vue'
-import roomCard from '@/components/roomCard.vue'
+import orderCard from '@/components/orderCard.vue'
 const value = ref('0');
 const tabList = ref([{
@@ -81,9 +81,10 @@ export default {
     // 设置首页封面高度
     const windowHeight = wx.getSystemInfoSync().windowHeight;
     // 处理切换显示白屏问题
-    setTimeout(() => {
+    // setTimeout(() => {
+    //   this.showContent = true;
+    // }, 1);
     this.showContent = true;
-    }, 100);
     setTimeout(async () => {
       const navHeight = await $('#navbar-page').height();
       const avatorHeight = await $('#avator').height();