Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
62f6d4c3 1 parent d69070fd

优化订单卡组件显示

Inline Side-by-side
Showing 2 changed files with 174 additions and 47 deletions
<template>
<view class="order-card-component">
<view style="padding: 0.5rem;">
<view class="order-card-header">
<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" />
<image 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;">
<view class="order-card-status">
<nut-tag :color="STATUS_COLOR[props.data.status]">{{ STATUS_TEXT[props.data.status] }}</nut-tag>
</view>
<view class="order-card-price">
<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 class="order-card-price-text">
<text class="left">￥980</text>
<text class="right">￥1280</text>
</view>
</nut-col>
<nut-col span="6" style="text-align: right;">
<text style="font-size: 28rpx;">x1</text>
<nut-col span="6" class="order-card-price-num">
<text>x1</text>
</nut-col>
</nut-row>
</view>
<view class="calendar-select-page">
<nut-row gutter="">
<nut-row gutter="10">
<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>
<view class="check-in-text">入住日期</view>
<view class="check-in-info">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 span="5" class="book-days">
<view class="book-days-text">共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>
<view class="check-in-text">退房日期</view>
<view class="check-in-info">2023.12.08 星期五</view>
</nut-col>
</nut-row>
</view>
<view style="padding: 0.5rem; padding-bottom: 0;">
<view class="order-card-control">
<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;
<view class="order-info" @tap="showOrderInfo('id')">
<text>入住信息</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;">
<view v-if="props.data.status !== 'cancel'" class="order-control">
<nut-button @tap="cancelOrder('id')" plain color="#6A4925" size="small">取消订单</nut-button>&nbsp;
<nut-button @tap="payOrder('id')" color="#6A4925" size="small">立即支付</nut-button>
<nut-button v-if="props.data.status !== 'enable'" @tap="payOrder('id')" color="#6A4925" size="small">立即支付</nut-button>
</view>
</nut-col>
</nut-row>
</view>
<view style="display: flex; justify-content: flex-end; font-size: 23rpx; margin-bottom: 1rem; margin-right: 1rem;">
<view class="order-remain-time">
<text>支付剩余时间</text>&nbsp;
<text style="font-size: 23rpx; color: red;">{{ formatTime(remain_time) }}</text>
<text style="font-size: 23rpx; color: red;">
{{ formatTime(remain_time) }}
</text>
</view>
<view v-if="show_info">
<view style="border-bottom: 1px dashed #979797; padding: 0.5rem;">
<view class="order-info-detail" v-if="show_info">
<view class="order-info">
<nut-row>
<nut-col span="12">
<view style="color: #7D7C7C; font-size: 0.85rem;">入住时间</view>
<view class="check-in-text">入住时间</view>
</nut-col>
<nut-col span="12">
<view style="color: #7D7C7C; font-size: 0.85rem; text-align: right;">12月7日 14:00后</view>
<view class="check-in-info">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>
<view class="check-out-text">退房日期</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>
<view class="check-out-info">12月8日 12:00前</view>
</nut-col>
</nut-row>
<nut-row>
<nut-col span="12">
<view style="color: #7D7C7C; font-size: 0.85rem;">早餐</view>
<view class="breakfast-text">早餐</view>
</nut-col>
<nut-col span="12">
<view style="color: #7D7C7C; font-size: 0.85rem; text-align: right;">3份</view>
<view class="breakfast-num">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 class="order-info-detail-tip">
<view>12月7日 20:00后未入住，订单将被取消</view>
</view>
</view>
<view style="padding: 0.5rem; font-size: 28rpx; color: #7D7C7C;">
<nut-row style="margin-bottom: 10rpx;">
<view class="order-detail">
<nut-row class="wrapper">
<nut-col span="6">联系人：</nut-col>
<nut-col span="18" style="text-align: right;">王二虎</nut-col>
<nut-col span="18" class="right">王二虎</nut-col>
</nut-row>
<nut-row style="margin-bottom: 10rpx;">
<nut-row class="wrapper">
<nut-col span="6">联系电话：</nut-col>
<nut-col span="18" style="text-align: right;">18996999786</nut-col>
<nut-col span="18" class="right">18996999786</nut-col>
</nut-row>
<nut-row style="margin-bottom: 10rpx;">
<nut-row class="wrapper">
<nut-col span="6">备注：</nut-col>
<nut-col span="18" style="text-align: right;"></nut-col>
<nut-col span="18" class="right"></nut-col>
</nut-row>
<nut-row style="margin-bottom: 10rpx;">
<nut-row class="wrapper">
<nut-col span="6">下单时间：</nut-col>
<nut-col span="18" style="text-align: right;">2023-12-06</nut-col>
<nut-col span="18" class="right">2023-12-06</nut-col>
</nut-row>
<nut-row style="margin-bottom: 10rpx;">
<nut-row class="wrapper">
<nut-col span="6">订单号：</nut-col>
<nut-col span="18" style="text-align: right;">20231206</nut-col>
<nut-col span="18" class="right">20231206</nut-col>
</nut-row>
</view>
</view>
......@@ -124,6 +126,18 @@ import { ref, onMounted, onUnmounted } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
const STATUS_COLOR = {
'cancel': '#CECECE',
'no-pay': '#D5842D',
'enable': '#6A4925',
}
const STATUS_TEXT = {
'cancel': '已取消',
'enable': '待入住',
'no-pay': '待支付',
}
/**
* 格式化时间
* @param {*} seconds
......@@ -214,12 +228,122 @@ onUnmounted(() => {
border: 1px solid #f9f9f9;
border-radius: 0.5rem;
overflow: hidden;
.order-card-header {
padding: 0.5rem;
image {
width: 100%; height: 3rem; border-radius: 10rpx;
}
}
.order-card-status {
padding: 0 0.5rem;
}
.order-card-price {
padding: 0.5rem;
.order-card-price-text {
height: 2rem;
display: flex;
align-items: center;
.left {
color: #EB2E2E;
font-size: 1.3rem;
font-weight: bold;
}
.right {
color: #7D7C7C;
text-decoration: line-through;
font-size: 0.85rem;
margin-left: 5px;
}
}
.order-card-price-num {
text-align: right;
text {
font-size: 28rpx;
}
}
}
.calendar-select-page {
margin: 0 0.5rem;
background-color: #F6ECE1;
border-radius: 10rpx;
padding: 1rem 0;
padding-left: 0.5rem;
.check-in-text {
color: #7D7C7C; font-size: 0.8rem;
}
.check-in-info{
color: #7D7C7C; font-size: 0.85rem; font-weight: bold;
}
.book-days {
padding: 0 10rpx;
.book-days-text {
color: #7D7C7C; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;
}
}
}
.order-card-control {
padding: 0.5rem;
padding-bottom: 0;
.order-info {
display: flex; align-items: center; margin: 20rpx 0;height: 60rpx;
text {
font-size: 26rpx; color: #7D7C7C;
}
}
.order-control {
display: flex; align-items: center;height: 100rpx; justify-content: flex-end;
}
}
.order-remain-time {
display: flex;
justify-content: flex-end;
font-size: 23rpx;
margin-bottom: 1rem;
margin-right: 1rem;
}
.order-info-detail {
.order-info {
border-bottom: 1px dashed #979797; padding: 0.5rem;
.check-in-text {
color: #7D7C7C; font-size: 0.85rem;
}
.check-in-info {
color: #7D7C7C; font-size: 0.85rem; text-align: right;
}
.check-out-text {
color: #7D7C7C; font-size: 0.85rem; margin: 0.25rem 0;
}
.check-out-info {
color: #7D7C7C; font-size: 0.85rem; text-align: right; margin: 0.25rem 0;
}
.breakfast-text {
color: #7D7C7C; font-size: 0.85rem;
}
.breakfast-num {
color: #7D7C7C; font-size: 0.85rem; text-align: right;
}
.order-info-detail-tip {
font-size: 0.85rem; margin-top: 0.25rem;
&::before {
content: '*';
color: red;
margin: auto;
display: inline-block;
}
view {
color: #7D7C7C; margin: auto; display: inline-block;
}
}
}
.order-detail {
padding: 0.5rem; font-size: 28rpx; color: #7D7C7C;
.wrapper {
margin-bottom: 10rpx;
.right {
text-align: right;
}
}
}
}
}
</style>
......
<!--
* @Date: 2023-12-13 11:13:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-20 16:16:11
* @LastEditTime: 2023-12-20 17:02:35
* @FilePath: /meihuaApp/src/pages/my/index.vue
* @Description: 文件描述
-->
......@@ -77,6 +77,7 @@ const orderList = ref([
time: '2023-12-13 11:13:13',
price: 1200,
remain_time: 10,
status: 'no-pay',
},
{
id: 2,
......@@ -86,6 +87,7 @@ const orderList = ref([
time: '2023-12-13 11:13:13',
price: 1200,
remain_time: 100,
status: 'enable',
},
{
id: 3,
......@@ -95,6 +97,7 @@ const orderList = ref([
time: '2023-12-13 11:13:13',
price: 1200,
remain_time: 100,
status: 'cancel',
},
])
......