Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
9f8f954d 1 parent e2ad0f64

我的页面完善

Inline Side-by-side
Showing 3 changed files with 199 additions and 8 deletions
......@@ -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']
......
<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>
<!--
* @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(() => {
this.showContent = true;
}, 100);
// setTimeout(() => {
// this.showContent = true;
// }, 1);
this.showContent = true;
setTimeout(async () => {
const navHeight = await $('#navbar-page').height();
const avatorHeight = await $('#avator').height();
......