Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d5cc4fcf 1 parent 22f745ba

细节调整

Inline Side-by-side
Showing 3 changed files with 228 additions and 143 deletions
......@@ -3,8 +3,10 @@
<view class="order-card-header">
<nut-row>
<nut-col span="16">
<view style="font-weight: bold; font-size: 34rpx;">{{ title }}</view>
<view style="color: #7D7C7C; font-size: 24rpx;">{{ room_num }}室 宜住{{ capacity }}人</view>
<view style="font-weight: bold; font-size: 34rpx">{{ title }}</view>
<view style="color: #7d7c7c; font-size: 24rpx"
>{{ room_num }}室 宜住{{ capacity }}人</view
>
</nut-col>
<nut-col span="8">
<image mode="aspectFill" :src="cover" />
......@@ -12,54 +14,101 @@
</nut-row>
</view>
<view class="order-card-status">
<nut-tag :color="STATUS_COLOR[props.data.status]">{{ STATUS_TEXT[props.data.status] }}</nut-tag>
<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 class="order-card-price-text">
<view class="left"><nut-price :price="order_price" size="normal" /></view>
<view class="right" style="margin-top: 10rpx;"><nut-price :price="original_total" size="small" strike-through style="color: #7D7C7C;" /></view>
<view class="right" style="margin-top: 10rpx"
><nut-price
:price="original_total"
size="small"
strike-through
style="color: #7d7c7c"
/></view>
</view>
</nut-col>
<nut-col span="6" class="order-card-price-num">
<IconFont name="close" size="7" color="#000" style="margin-right: 5rpx; margin-bottom: 0.5rpx;"></IconFont><text>{{ order_num }}</text>
<IconFont
name="close"
size="7"
color="#000"
style="margin-right: 5rpx; margin-bottom: 0.5rpx"
></IconFont
><text>{{ order_num }}</text>
</nut-col>
</nut-row>
</view>
<view :class="['calendar-select-page', calcBgColor ? 'bg-gray' : '']">
<nut-row gutter="0">
<!-- <nut-row gutter="0">
<nut-col span="9">
<view class="check-in-text">入住日期</view>
<view class="check-in-info">{{ plan_in }} {{ getDayOfWeek(plan_in) }}</view>
</nut-col>
<nut-col span="5" class="book-days" style="padding: 0 15rpx;">
<view class="book-days-text">共{{ getDayDifference(plan_in, plan_out) }}晚</view>
<nut-col span="5" class="book-days" style="padding: 0 15rpx">
<view class="book-days-text"
>共{{ getDayDifference(plan_in, plan_out) }}晚</view
>
</nut-col>
<nut-col span="9" style="text-align: right;">
<nut-col span="9" style="text-align: right">
<view class="check-in-text">退房日期</view>
<view class="check-in-info">{{ plan_out }} {{ getDayOfWeek(plan_out) }}</view>
</nut-col>
</nut-row>
</nut-row> -->
<view style="display: flex;">
<view style="flex: 2;">
<view class="check-in-text">入住日期</view>
<view class="check-in-info" style="margin-top: 5rpx;">{{ plan_in }} {{ getDayOfWeek(plan_in) }}</view>
</view>
<view style="flex: 1;" class="book-days">
<view class="book-days-text"
>共{{ getDayDifference(plan_in, plan_out) }}晚</view
>
</view>
<view style="flex: 2; text-align: right;">
<view class="check-in-text">退房日期</view>
<view class="check-in-info" style="margin-top: 5rpx;">{{ plan_out }} {{ getDayOfWeek(plan_out) }}</view>
</view>
</view>
</view>
<view class="order-card-control">
<nut-row>
<nut-col span="6">
<view class="order-info" @tap="showOrderInfo(order_id)">
<text>入住信息</text>&nbsp;
<IconFont v-if="show_info" name="rect-up" size="12" color="#7D7C7C"></IconFont>
<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 v-if="showBtn" class="order-control">
<nut-button v-if="pay_show || props.data.status === 5" @tap="cancelOrder(order_id)" plain color="#6A4925" size="small">取消订单</nut-button>&nbsp;
<nut-button v-if="pay_show" @tap="payOrder(order_id)" color="#6A4925" size="small">立即支付</nut-button>
<nut-button
v-if="pay_show || props.data.status === 5"
@tap="cancelOrder(order_id)"
plain
color="#6A4925"
size="small"
>取消订单</nut-button
>&nbsp;
<nut-button
v-if="pay_show"
@tap="payOrder(order_id)"
color="#6A4925"
size="small"
>立即支付</nut-button
>
<view v-if="delay_pay_show">
<text style="font-size: 23rpx; color: red;">
支付超时，请重新下单！
</text>
<text style="font-size: 23rpx; color: red"> 支付超时，请重新下单！ </text>
</view>
</view>
</nut-col>
......@@ -68,7 +117,7 @@
<!-- 待支付状态下，剩余时间归零 显示隐藏 -->
<view v-if="pay_show" class="order-remain-time">
<text>支付剩余时间</text>&nbsp;
<text style="font-size: 23rpx; color: red;">
<text style="font-size: 23rpx; color: red">
{{ formatTime(remain_time) }}
</text>
</view>
......@@ -79,7 +128,10 @@
<view class="check-in-text">入住时间</view>
</nut-col>
<nut-col span="12">
<view class="check-in-info">{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 {{ state.sysInfo.check_in_time }} 后</view>
<view class="check-in-info"
>{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日
{{ state.sysInfo.check_in_time }} 后</view
>
</nut-col>
</nut-row>
<nut-row>
......@@ -87,7 +139,10 @@
<view class="check-out-text">退房日期</view>
</nut-col>
<nut-col span="12">
<view class="check-out-info">{{ booking_info.check_out.month }}月{{ booking_info.check_out.day }}日 {{ state.sysInfo.check_out_time }} 前</view>
<view class="check-out-info"
>{{ booking_info.check_out.month }}月{{ booking_info.check_out.day }}日
{{ state.sysInfo.check_out_time }} 前</view
>
</nut-col>
</nut-row>
<nut-row>
......@@ -99,7 +154,10 @@
</nut-col>
</nut-row>
<view class="order-info-detail-tip">
<view>{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日 {{ state.sysInfo.last_check_time }}后未入住，订单将被取消</view>
<view
>{{ booking_info.check_in.month }}月{{ booking_info.check_in.day }}日
{{ state.sysInfo.last_check_time }}后未入住，订单将被取消</view
>
</view>
</view>
<view class="order-detail">
......@@ -129,10 +187,10 @@
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, computed, watch } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
import { orderCancelAPI } from '@/api/index'
import { ref, reactive, onMounted, onUnmounted, computed, watch } from "vue";
import Taro from "@tarojs/taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { orderCancelAPI } from "@/api/index";
/**
* 房间状态（9=已入住，2=已取消，3=未支付，5=已支付）
......@@ -144,7 +202,7 @@ import { orderCancelAPI } from '@/api/index'
* @param {String} dateString 日期字符串
*/
const getDayOfWeek = (dateString) => {
var dateParts = dateString.split('-');
var dateParts = dateString.split("-");
var year = parseInt(dateParts[0]);
var month = parseInt(dateParts[1]) - 1; // 月份从 0 开始，所以要减去 1
var day = parseInt(dateParts[2]);
......@@ -153,10 +211,10 @@ const getDayOfWeek = (dateString) => {
var dayOfWeek = date.getDay();
// 定义星期几的名称数组
var days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
return days[dayOfWeek];
}
};
/**
* 计算日期间隔
......@@ -164,12 +222,12 @@ const getDayOfWeek = (dateString) => {
* @param {*} endDate
*/
const getDayDifference = (startDate, endDate) => {
var startParts = startDate.split('-');
var startParts = startDate.split("-");
var startYear = parseInt(startParts[0]);
var startMonth = parseInt(startParts[1]) - 1; // 月份从 0 开始，所以要减去 1
var startDay = parseInt(startParts[2]);
var endParts = endDate.split('-');
var endParts = endDate.split("-");
var endYear = parseInt(endParts[0]);
var endMonth = parseInt(endParts[1]) - 1; // 月份从 0 开始，所以要减去 1
var endDay = parseInt(endParts[2]);
......@@ -194,53 +252,53 @@ const getDayDifference = (startDate, endDate) => {
var dayDiff = Math.floor(timeDiff / (1000 * 3600 * 24));
return dayDiff;
}
};
const STATUS_COLOR = {
2: '#CECECE',
3: '#D5842D',
5: '#6A4925',
9: '#656565',
}
2: "#CECECE",
3: "#D5842D",
5: "#6A4925",
9: "#656565",
};
const STATUS_TEXT = {
2: '已取消',
5: '待入住',
9: '已入住',
3: '待支付',
}
const id = ref(''); // 房间id
const cover = ref(''); // 封面图
const title = ref(''); // 标题
const original_total = ref(''); // 原价
const order_price = ref(''); // 优惠价
const capacity = ref(''); // 能住几个人
const num = ref(''); // 可售数量
const room_num = ref(''); // 房间描述 两室
const room_type = ref(''); //
const order_num = ref(''); // 订房数量
const plan_in = ref(''); //
const plan_out = ref(''); //
const contact_name = ref(''); //
const contact_phone = ref(''); //
const order_remark = ref(''); //
const order_created_time = ref(''); //
const order_id = ref(''); //
2: "已取消",
5: "待入住",
9: "已入住",
3: "待支付",
};
const id = ref(""); // 房间id
const cover = ref(""); // 封面图
const title = ref(""); // 标题
const original_total = ref(""); // 原价
const order_price = ref(""); // 优惠价
const capacity = ref(""); // 能住几个人
const num = ref(""); // 可售数量
const room_num = ref(""); // 房间描述 两室
const room_type = ref(""); //
const order_num = ref(""); // 订房数量
const plan_in = ref(""); //
const plan_out = ref(""); //
const contact_name = ref(""); //
const contact_phone = ref(""); //
const order_remark = ref(""); //
const order_created_time = ref(""); //
const order_id = ref(""); //
const booking_info = ref({
days: 1, // 入住天数
check_in: {
year: '',
month: '',
day: '',
day_of_week: ''
year: "",
month: "",
day: "",
day_of_week: "",
},
check_out: {
year: '',
month: '',
day: '',
day_of_week: ''
year: "",
month: "",
day: "",
day_of_week: "",
},
});
......@@ -281,12 +339,12 @@ function formatTime(seconds) {
const props = defineProps({
data: {
type: Object,
default: {}
default: {},
},
sys: {
type: Object,
default: {}
}
default: {},
},
});
const emit = defineEmits(["onPay"]);
......@@ -295,14 +353,16 @@ const remain_time = ref(0); // 剩余时间秒数
const show_info = ref(false);
const showOrderInfo = (id) => {
show_info.value = !show_info.value;
}
};
// 控制待支付状态下的显示
const pay_show = computed(() => {
let flag = false;
if (props.data.status === 3 && remain_time.value) { // 倒计时进行时
if (props.data.status === 3 && remain_time.value) {
// 倒计时进行时
flag = true;
} else if (props.data.status === 3 && !remain_time.value) { // 倒计时结束
} else if (props.data.status === 3 && !remain_time.value) {
// 倒计时结束
flag = false;
}
return flag;
......@@ -311,43 +371,37 @@ const pay_show = computed(() => {
// 支付超时显示
const delay_pay_show = computed(() => {
return props.data.status === 3 && !remain_time.value;
})
});
const cancelOrder = (id) => {
Taro.showModal({
title: '温馨提示',
content: '是否确认取消订单？',
title: "温馨提示",
content: "是否确认取消订单？",
success: async (res) => {
if (res.confirm) {
if (id) {
// 取消订单
const { code, data } = await orderCancelAPI({id});
const { code, data } = await orderCancelAPI({ id });
if (code) {
Taro.showToast({
title: '取消成功',
icon:'success',
duration: 2000
title: "取消成功",
icon: "success",
duration: 2000,
});
props.data.status = 2; // 取消订单状态置为已取消
}
}
} else if (res.cancel) {
console.log('用户点击取消')
console.log("用户点击取消");
}
}
})
}
},
});
};
const payOrder = (id) => {
// TODO: 把剩余支付时间发到支付组件上显示
emit("onPay", { id, remain_time: remain_time.value });
// visible.value = !visible.value;
// Taro.showToast({
// title: '支付已超时',
// icon: 'error',
// duration: 2000
// });
}
// 订单的支付信息
emit("onPay", { id, remain_time: remain_time.value, price: order_price.value });
};
let timeId = null;
......@@ -357,7 +411,9 @@ const state = reactive({
onMounted(async () => {
id.value = props.data.id;
cover.value = props.data.cover ? props.data.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
cover.value = props.data.cover
? props.data.cover
: "https://cdn.ipadbiz.cn/meihua/img1@2x.png";
title.value = props.data.title;
room_num.value = props.data.room_num;
capacity.value = props.data.capacity;
......@@ -375,22 +431,22 @@ onMounted(async () => {
order_id.value = props.data.id;
order_created_time.value = props.data._created_time;
//
let check_in = plan_in.value.split('-');
let check_out = plan_out.value.split('-');
let check_in = plan_in.value.split("-");
let check_out = plan_out.value.split("-");
//
booking_info.value.check_in = {
year: check_in[0],
month: check_in[1],
day: check_in[2],
}
};
booking_info.value.check_out = {
year: check_out[0],
month: check_out[1],
day: check_out[2],
}
};
// 进入页面后，开始倒计时
timeId = setInterval(() => {
remain_time.value ? remain_time.value -= 1 : 0;
remain_time.value ? (remain_time.value -= 1) : 0;
}, 1000);
});
......@@ -399,7 +455,7 @@ watch(
(val) => {
if (val) {
id.value = val.id;
cover.value = val.cover ? val.cover : 'https://cdn.ipadbiz.cn/meihua/img1@2x.png';
cover.value = val.cover ? val.cover : "https://cdn.ipadbiz.cn/meihua/img1@2x.png";
title.value = val.title;
room_num.value = val.room_num;
capacity.value = val.capacity;
......@@ -420,7 +476,7 @@ watch(
},
{
deep: true,
immediate: true
immediate: true,
}
);
......@@ -433,13 +489,13 @@ watch(
},
{
deep: true,
immediate: true
immediate: true,
}
);
onUnmounted(() => {
timeId && clearInterval(timeId);
})
});
</script>
<style lang="less">
......@@ -453,14 +509,16 @@ page {
margin-top: 0.5rem;
// padding: 0.5rem 0;
background-color: white;
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
border: 1px solid #f9f9f9;
border-radius: 0.5rem;
overflow: hidden;
.order-card-header {
padding: 0.5rem;
image {
width: 100%; height: 3rem; border-radius: 10rpx;
width: 100%;
height: 3rem;
border-radius: 10rpx;
}
}
.order-card-status {
......@@ -473,12 +531,12 @@ page {
display: flex;
align-items: center;
.left {
color: #EB2E2E;
color: #eb2e2e;
font-size: 1.3rem;
font-weight: bold;
}
.right {
color: #7D7C7C;
color: #7d7c7c;
text-decoration: line-through;
font-size: 0.85rem;
margin-left: 5px;
......@@ -493,23 +551,33 @@ page {
}
.calendar-select-page {
margin: 0 0.5rem;
background-color: #F6ECE1;
background-color: #f6ece1;
border-radius: 10rpx;
padding: 1rem 0;
padding-left: 0.5rem;
padding-right: 0.5rem;
&.bg-gray {
background-color: #F0F0F0;
background-color: #f0f0f0;
}
.check-in-text {
color: #7D7C7C; font-size: 0.8rem;
color: #7d7c7c;
font-size: 3.5vw;;
}
.check-in-info{
color: #7D7C7C; font-size: 0.85rem; font-weight: bold;
.check-in-info {
color: #7d7c7c;
font-size: 3.5vw;
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;
color: #7d7c7c;
margin-top: 15%;
font-size: 0.8rem;
text-align: center;
background-color: #fff;
padding: 0.25rem 0;
border-radius: 0.5rem;
}
}
}
......@@ -517,13 +585,20 @@ page {
padding: 0.5rem;
padding-bottom: 0;
.order-info {
display: flex; align-items: center; margin: 20rpx 0;height: 60rpx;
display: flex;
align-items: center;
margin: 20rpx 0;
height: 60rpx;
text {
font-size: 26rpx; color: #7D7C7C;
font-size: 26rpx;
color: #7d7c7c;
}
}
.order-control {
display: flex; align-items: center;height: 100rpx; justify-content: flex-end;
display: flex;
align-items: center;
height: 100rpx;
justify-content: flex-end;
}
}
.order-remain-time {
......@@ -535,40 +610,58 @@ page {
}
.order-info-detail {
.order-info {
border-bottom: 1px dashed #979797; padding: 0.5rem; padding-top: 0;
border-bottom: 1px dashed #979797;
padding: 0.5rem;
padding-top: 0;
.check-in-text {
color: #7D7C7C; font-size: 0.85rem;
color: #7d7c7c;
font-size: 0.85rem;
}
.check-in-info {
color: #7D7C7C; font-size: 0.85rem; text-align: right;
color: #7d7c7c;
font-size: 0.85rem;
text-align: right;
}
.check-out-text {
color: #7D7C7C; font-size: 0.85rem; margin: 0.25rem 0;
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;
color: #7d7c7c;
font-size: 0.85rem;
text-align: right;
margin: 0.25rem 0;
}
.breakfast-text {
color: #7D7C7C; font-size: 0.85rem;
color: #7d7c7c;
font-size: 0.85rem;
}
.breakfast-num {
color: #7D7C7C; font-size: 0.85rem; text-align: right;
color: #7d7c7c;
font-size: 0.85rem;
text-align: right;
}
.order-info-detail-tip {
font-size: 0.85rem; margin-top: 0.25rem;
font-size: 0.85rem;
margin-top: 0.25rem;
&::before {
content: '*';
content: "*";
color: red;
margin: auto;
display: inline-block;
}
view {
color: #7D7C7C; margin: auto; display: inline-block;
color: #7d7c7c;
margin: auto;
display: inline-block;
}
}
}
.order-detail {
padding: 0.5rem; font-size: 28rpx; color: #7D7C7C;
padding: 0.5rem;
font-size: 28rpx;
color: #7d7c7c;
.wrapper {
margin-bottom: 10rpx;
.right {
......
<!--
* @Date: 2023-12-20 14:11:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-27 18:21:06
* @LastEditTime: 2023-12-28 13:40:59
* @FilePath: /meihuaApp/src/components/payCard.vue
* @Description: 文件描述
-->
......@@ -78,8 +78,6 @@ watch(
id.value = props.data.id;
price.value = props.data.price;
remain_time.value = props.data.remain_time;
} else {
}
}
)
......@@ -149,7 +147,7 @@ const goToPay = async () => {
// if (current_page === 'pages/my/index') { // 我的页面打开
// // 刷新当前页面
// Taro.reLaunch({
// url: '/pages/my/index?tab_index=1'
// url: '/pages/my/index?tab_index=5'
// });
// }
// if (current_page === 'pages/detail/index') { // 订房确认页打开
......
<!--
* @Date: 2023-12-13 11:13:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-27 19:45:07
* @LastEditTime: 2023-12-28 13:40:29
* @FilePath: /meihuaApp/src/pages/my/index.vue
* @Description: 我的页面
-->
......@@ -72,17 +72,11 @@ onMounted(async () => {
}
});
const onPay = ({ id, remain_time }) => {
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 = remain_time;
const onPay = ({ id, remain_time, price }) => { // 发送订单支付信息到支付组件
show_pay.value = true; // 打开支付组件
payData.value.id = id; // ID
payData.value.price = price; // 价格
payData.value.remain_time = remain_time; // 剩余时间
}
const onPayClose = () => {
......@@ -156,7 +150,7 @@ export default {
this.indexCoverHeight = windowHeight - navHeight - avatarHeight - titleHeight - 50;
if (this.$refs.refScrollView) {
Taro.hideLoading();
console.warn('加载完成');
// console.warn('加载完成');
}
});
// 默认勾选栏目
......