Commit 2141460f authored by April's avatar April

更新页面

parent 008ba189
This diff is collapsed.
......@@ -10,6 +10,8 @@
"core-js": "^3.8.3",
"element-ui": "^2.15.14",
"vue": "^2.6.14",
"iscroll": "^5.2.0",
"lib-flexible": "^0.3.2",
"vue-router": "^3.5.1"
},
"devDependencies": {
......
......@@ -5,16 +5,18 @@
</template>
<style>
html,
body {
html,
body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
}
#app {
#app {
width: 100%;
height: 100%;
}
}
.el-progress-circle{
width: 75px !important;
height: 75px !important; /* 自定义高度 */
}
</style>
\ No newline at end of file
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.config.productionTip = false
import "./utils/fixle";
import VIscroll from "./utils/vIscroll";
Vue.use(VIscroll);
Vue.config.productionTip = false;
Vue.use(ElementUI);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
render: (h) => h(App),
data: function () {
return {
hotelType: null,
};
},
}).$mount("#app");
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Visitor from '../views/visitor/standby.vue'
import Reserved from '../views/visitor/reserved.vue'
import Comment from '../views/common.vue'
import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";
import Visitor from "../views/visitor/standby.vue";
import Reserved from "../views/visitor/reserved.vue";
import Comment from "../views/common.vue";
import Hotel from "../views/hotels/standbuy.vue";
import hotelCommon from "../views/hotels/common.vue";
import hotelReservation from "../views/hotels/bookroom.vue";
import hotelOrderComfim from "../views/hotels/order/comfim.vue";
import hotelIdentitySuccess from "../views/hotels/real/success.vue";
import hotelInfo from "../views/hotels/info/register.vue";
import hotelInfoPay from "../views/hotels/info/pay.vue";
import hotelInfoGrant from "../views/hotels/info/roomcard.vue";
import hotelInfoSuccess from "../views/hotels/info/success.vue";
Vue.use(VueRouter)
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'home',
component: HomeView
path: "/",
name: "home",
component: HomeView,
},
{
path: '/about',
name: 'about',
path: "/about",
name: "about",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
component: () =>
import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
},
{
path: '/visitor',
name: 'visitor',
component: Visitor
path: "/visitor",
name: "visitor",
component: Visitor,
},
{
path: "/comment",
......@@ -39,14 +49,91 @@ const routes = [
title: "已预约",
},
},
]
}
]
],
},
// 酒店页
{
path: "/hotel",
name: "hotel",
component: Hotel,
},
{
path: "/hotel/common",
redirect: "/hotel/reservation",
component: hotelCommon,
children: [
{
path: "/hotel/reservation",
name: "hotelReservation",
component: hotelReservation,
meta: {
title: "预定房间",
index: 0,
},
},
{
path: "/hotel/order/comfim",
name: "hotelOrderComfim",
component: hotelOrderComfim,
meta: {
title: "订单确认",
index: 0,
},
},
{
path: "/hotel/identity/success",
name: "hotelIdentitySuccess",
component: hotelIdentitySuccess,
meta: {
title: "身份采集成功",
index: 1,
},
},
{
path: "/hotel/info/checkin",
name: "hotelInfo",
component: hotelInfo,
meta: {
title: "确认信息",
index: 2,
},
},
{
path: "/hotel/info/pay",
name: "hotelInfoPay",
component: hotelInfoPay,
meta: {
title: "订单支付",
index: 3,
},
},
{
path: "/hotel/info/grant",
name: "hotelInfoGrant",
component: hotelInfoGrant,
meta: {
title: "发放房卡",
index: 4,
},
},
{
path: "/hotel/info/success",
name: "hotelInfoSuccess",
component: hotelInfoSuccess,
meta: {
title: "发放成功",
index: 4,
},
},
],
},
];
const router = new VueRouter({
mode: 'history',
mode: "history",
base: process.env.BASE_URL,
routes
})
routes,
});
export default router
export default router;
// 这段代码它又来了,完全可以单独丢一个js文件里面。
if (!/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
// 当前设备是移动设备
let width = window.innerWidth;
width = width <= 1200 ? 1200 : width;
const htmlObj = document.getElementsByTagName("html")[0];
htmlObj.style.fontSize = width / 120 + "px";
if (document.createEvent) {
var event = document.createEvent("HTMLEvents");
event.initEvent("resize", true, true);
window.dispatchEvent(event);
} else if (document.createEventObject) {
window.fireEvent("onresize");
}
window.addEventListener("resize", function () {
let width = window.innerWidth;
htmlObj.style.fontSize = width / 120 + "px";
});
}
const IScroll = require("iscroll");
const VIScroll = {
install: function (Vue, options) {
Vue.directive("iscroll", {
inserted: function (el, binding, vnode) {
let callBack;
let iscrollOptions = options;
const option = binding.value && binding.value.option;
const func = binding.value && binding.value.instance;
// 判断输入参数
const optionType = option ? [].toString.call(option) : undefined;
const funcType = func ? [].toString.call(func) : undefined;
// 兼容 google 浏览器拖动
el.addEventListener("touchmove", function (e) {
e.preventDefault();
});
// 将参数配置到new IScroll(el, iscrollOptions)中
if (optionType === "[object Object]") {
iscrollOptions = option;
}
if (funcType === "[object Function]") {
callBack = func;
}
// 使用vnode绑定iscroll是为了让iscroll对象能够夸状态传递,避免iscroll重复建立
// 这里面跟官方网站 const myScroll = new IScroll('#wrapper',option) 初始化一样
vnode.scroll = new IScroll(el, iscrollOptions);
// 如果指令传递函数进来,把iscroll实例传递出去
if (callBack) callBack(vnode.scroll);
},
componentUpdated: function (el, binding, vnode, oldVnode) {
// 将scroll绑定到新的vnode上,避免多次绑定
vnode.scroll = oldVnode.scroll;
// 使用 settimeout 让refresh跳到事件流结尾,保证refresh时数据已经更新完毕
setTimeout(() => {
vnode.scroll.refresh();
}, 0);
},
unbind: function (el, binding, vnode, oldVnode) {
// 解除绑定时要把iscroll销毁
vnode.scroll = oldVnode.scroll;
vnode.scroll.destroy();
vnode.scroll = null;
},
});
},
};
module.exports = VIScroll;
<template>
<div class="bookroom">
<div class="bookroom_top">
<div class="bookroom_title">选择房间</div>
<div
class="bookroom_room"
v-iscroll="{
option: iscrollConf,
instance: getIscroll,
}"
ref="scrollContainer"
>
<div class="room_all" ref="tabLiContainer">
<div
:class="[
'room_single',
currentIndex == item.id ? 'room_single_select' : '',
]"
v-for="item in roomList"
ref="tabItem"
@click="selectRoom(item.id)"
>
<img
src="https://img2.baidu.com/it/u=4226896243,3275827708&fm=253&fmt=auto&app=138&f=JPEG?w=350&h=350"
class="room_img"
/>
<div class="room_single_bottom">
<div>
<div class="room_single_name">{{ item.name }}</div>
<div class="room_single_people">可住2人</div>
</div>
<div class="room_single_price">
¥<span>{{ item.price }}</span
>/晚
</div>
<img
v-if="currentIndex == item.id"
src="@/assets/hotel/success.png"
class="room_single_success"
/>
</div>
</div>
</div>
<div class="bookroom_bto">确认</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
roomList: [
{
name: "精品大床房",
price: "388",
id: 1,
},
{
name: "精品双床房",
price: "488",
id: 2,
},
{
name: "豪华大床房",
price: "588",
id: 3,
},
{
name: "豪华双床房",
price: "688",
id: 4,
},
{
name: "豪华房",
price: "788",
id: 5,
},
],
currentId: null,
currentIndex: 0,
myScroll: null,
iscrollConf: {
bounce: true,
mouseWheel: true,
click: true,
scrollX: true,
scrollY: false,
},
};
},
mounted() {
this.$refs.tabLiContainer.style.width =
this.$refs.tabItem[0].offsetWidth * this.roomList.length * 1.13 + "px";
this.$nextTick(() => {
this.myScroll.refresh();
});
},
methods: {
getIscroll(iscroll) {
this.myScroll = iscroll;
},
// 选择房间
selectRoom(id) {
this.currentIndex = id;
},
},
};
</script>
<style scoped>
.bookroom {
width: 100%;
height: 100%;
padding: 0 45px;
box-sizing: border-box;
background: #f6f7fb;
border-radius: 21px;
}
.bookroom_top {
height: 132px;
width: 100%;
}
.bookroom_title {
font-size: 42px;
color: #000000;
width: 100%;
text-align: center;
line-height: 132px;
}
.bookroom_room {
height: 729px;
padding-top: 60px;
padding-left: 45px;
overflow: hidden;
box-sizing: border-box;
background: white;
}
.room_single {
width: 368px;
height: 454px;
position: relative;
margin-right: 45px;
flex-grow: 0;
flex-shrink: 0;
border-radius: 15px 15px 15px 15px;
border: 3px solid #e0e0e0;
}
.room_all {
display: flex;
width: 100%;
height: 460px;
}
.room_img {
width: 100%;
height: 315px;
border-radius: 15px 15px 0 0;
}
.room_single_bottom {
display: flex;
width: 100%;
padding: 0 24px;
margin-top: 27px;
box-sizing: border-box;
align-items: flex-end;
justify-content: space-between;
}
.room_single_name {
font-size: 30px;
color: #333333;
}
.room_single_people {
color: #999999;
margin-top: 5px;
font-size: 21px;
}
.room_single_price {
font-size: 26px;
color: #f29736;
}
.room_single_price span {
font-size: 48px;
}
.bookroom_bto {
width: 198px;
height: 75px;
text-align: center;
line-height: 75px;
font-size: 27px;
color: white;
background: #eb9c4e;
border-radius: 6px 6px 6px 6px;
margin: 69px auto 0;
}
.room_single_select {
border: 3px solid #5a8ff6 !important;
}
.room_single_success {
position: absolute;
top: 23px;
right: 23px;
width: 48px;
height: 48px;
}
</style>
\ No newline at end of file
<template>
<div class="hotel_common">
<div class="hotel_header">
<div class="go_home" @click="gohome">
<img src="@/assets/hotel/home.png" class="home" />
<div>返回主页</div>
</div>
<div class="hotel_header_title">陆瑞酒店智能化自助入住系统</div>
<div class="hotel_header_time">{{ date }}</div>
</div>
<div class="hotel_step">
<div class="hotel_step_single" v-for="(item, index) in step" :key="index">
<div
:class="[
'hotel_step_num',
currentIndex >= index ? 'hotel_step_num_s' : '',
]"
>
{{ index + 1 }}
</div>
<div
:class="[
'hotel_step_index',
currentIndex >= index ? 'hotel_step_index_s' : '',
]"
>
{{ item.name }}
</div>
<img
src="@/assets/hotel/righttrue.png"
v-if="item.next && currentIndex >= index"
class="hotel_step_right"
/>
<img src="@/assets/hotel/right.png" v-else class="hotel_step_right" />
</div>
</div>
<!-- 内容 -->
<div class="hotel_content">
<div class="hotel_content_frame">
<el-progress
type="circle"
color="#5A8FF6"
:format="format"
:percentage="percentage"
class="hotel_content_frame_countdown"
>
</el-progress>
<router-view />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
date: "", //年月日
percentage: 100,
currentIndex: "", //当前移动到的路径
time: 120, //时间设定为360
step: [
{
name: "订单查询",
path: "hotelOrderComfim",
next: true,
},
{
name: "订单确认",
path: "hotelOrderComfim",
next: true,
},
{
name: "身份核对",
next: true,
},
{
name: "登记入住",
path: "hotelInfo",
next: true,
},
{
name: "订单支付",
path: "hotelInfoPay",
next: true,
},
{
name: "发放房卡",
path: "hotelInfoGrant",
next: false,
},
],
};
},
created() {
this.getDate();
this.decrease();
var type = this.$root.hotelType;
if (type == 0) {
this.step.splice(0, 1);
}
this.currentIndex = this.$route.meta.index;
},
watch: {
$route: {
// $route可以用引号,也可以不用引号 监听的对象
handler(to) {
this.currentIndex = to.meta.index;
},
},
},
methods: {
// 获取当前日期
getDate() {
const now = new Date();
const year = now.getFullYear();
const month = ("0" + (now.getMonth() + 1)).slice(-2);
const day = ("0" + now.getDate()).slice(-2);
const hours = ("0" + now.getHours()).slice(-2);
const minutes = ("0" + now.getMinutes()).slice(-2);
const seconds = ("0" + now.getSeconds()).slice(-2);
this.date = year + "." + month + "." + day + " " + hours + ":" + minutes;
},
// 自定义进度条
format(percentage) {
const remainingTime = Math.ceil((percentage / 100) * 120);
return `${remainingTime}s`;
},
// 倒计时
decrease() {
var that = this;
that.timer = setInterval(() => {
that.time--;
// 计算进度百分比
that.percentage = (that.time / 120) * 100;
// 检查是否倒计时结束
if (that.time <= 0) {
clearInterval(that.timer); // 清除定时器
that.gohome();
}
}, 1000); // 每1000毫秒(1秒)更新一次
},
// 返回主页
gohome() {
this.$router.replace({
name: "hotel",
});
},
},
};
</script>
<style scoped>
.hotel_common {
width: 100%;
height: 100%;
padding-bottom: 69px;
background: linear-gradient(to bottom, #07122f, #2e246d);
}
.hotel_header {
width: 100%;
background: #17204b;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
box-sizing: border-box;
height: 70px;
}
.hotel_header_title {
font-size: 33px;
color: white;
}
.hotel_header_time {
font-size: 27px;
color: white;
}
.home {
width: 18px;
height: 20px;
margin-right: 7px;
}
.go_home {
display: flex;
align-items: center;
font-size: 24px;
color: white;
}
.hotel_step {
display: flex;
height: 80px;
justify-content: center;
align-items: center;
}
.hotel_step_index {
font-size: 23px;
color: #797f90;
}
.hotel_step_single {
display: flex;
align-items: center;
}
.hotel_step_num {
width: 24px;
height: 24px;
margin-right: 10px;
border-radius: 50%;
background: #797f90;
color: white;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.hotel_step_right {
width: 29x;
height: 7px;
margin: 0 21px;
}
.hotel_content {
width: 100%;
padding: 0 36px;
box-sizing: border-box;
border-radius: 21px;
height: 906px;
}
.hotel_content_frame {
width: 100%;
height: 100%;
position: relative;
border-radius: 21px;
background: white;
}
.hotel_content_frame_countdown {
position: absolute;
top: 36px;
right: 45px;
}
.hotel_step_index_s {
color: #f29736;
}
.hotel_step_num_s {
background: #f29736;
color: white;
}
</style>
\ No newline at end of file
<template>
<div class="order">
<div class="order_top">
<div class="goback" @click="goback">返回上一步</div>
<div class="order_title">订单支付</div>
</div>
<div class="collection">
<div class="price_title">支付金额</div>
<div class="price">¥<span>588</span></div>
<div class="price_type">
<div class="price_wechat">
<img src="" class="price_img" />
<div class="price_tips">使用<span>微信</span>扫一扫进行支付</div>
</div>
<div class="price_alipay">
<img src="" class="price_img" />
<div class="price_tips">使用<span>支付宝</span>扫一扫进行支付</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
goback() {
this.$router.go(-1);
},
},
};
</script>
<style scoped>
.order {
width: 100%;
height: 100%;
padding: 0 45px;
box-sizing: border-box;
background: #f6f7fb;
border-radius: 21px;
}
.order_top {
height: 132px;
width: 100%;
position: relative;
}
.goback {
width: 141px;
height: 51px;
position: absolute;
top: 45px;
left: 0;
cursor: pointer;
font-size: 21px;
color: #666666;
background: #ffffff;
border-radius: 6px 6px 6px 6px;
border: 2px solid #707070;
text-align: center;
line-height: 51px;
}
.order_title {
font-size: 42px;
color: #000000;
width: 100%;
text-align: center;
line-height: 132px;
}
.collection {
width: 100%;
background: white;
height: 729px;
padding-top: 60px;
box-sizing: border-box;
}
.price_title {
font-size: 24px;
color: #666666;
text-align: center;
}
.price {
color: #333333;
font-size: 33px;
margin-top: 27px;
text-align: center;
}
.price span {
font-size: 72px;
}
.price_type {
display: flex;
align-items: center;
justify-content: center;
margin-top: 44px;
}
.price_img {
width: 342px;
height: 342px;
}
.price_wechat {
margin-right: 210px;
}
.price_tips {
font-size: 24px;
color: #999999;
text-align: center;
}
.price_tips span {
color: #eb9c4e;
}
</style>
\ No newline at end of file
<template>
<div class="order">
<div class="order_top">
<div class="goback" @click="gobak">返回上一步</div>
<div class="order_title">确认信息</div>
</div>
<div class="collection">
<div class="roominfo">
<div class="roominfo_name">房间号</div>
<div class="roominfo_num">3602</div>
<div class="roominfo_type">豪华大床房</div>
</div>
<div class="roomcheck">
<div class="roomcheck_sin">
<div class="roomcheck_sin_name">入住人数:</div>
<div class="roomcheck_sin_people">1人</div>
</div>
<div class="roomcheck_sin">
<div class="roomcheck_sin_name">房客信息:</div>
<div class="roomcheck_sin_people">王大锤</div>
</div>
<div class="roomcheck_sin_bottom">
<div class="roomcheck_sin_name">入住时间</div>
<div class="roomcheck_sin_time">
2023.11.07(入住)——2023.11.08(离店)
</div>
</div>
</div>
<div class="shu"></div>
<div class="roomprice">
<div class="roomprice_title">支付金额</div>
<div class="roomprice_num">¥<span>588</span></div>
<div class="roomprice_tips">
<div class="heng"></div>
<div>费用明细</div>
<div class="heng"></div>
</div>
<div class="roomprice_specific">
<div class="roomprice_specific_name">房间费用</div>
<div class="roomprice_specific_num">200</div>
</div>
<div class="roomprice_specific">
<div class="roomprice_specific_name">房间费用</div>
<div class="roomprice_specific_num">200</div>
</div>
<div class="roomprice_bto" @click="pay">确认支付</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
pay() {
this.$router.push({
name: "hotelInfoPay",
});
},
goback() {
this.$router.go(-1);
},
},
};
</script>
<style scoped>
.order {
width: 100%;
height: 100%;
padding: 0 45px;
box-sizing: border-box;
background: #f6f7fb;
border-radius: 21px;
}
.order_top {
height: 132px;
width: 100%;
position: relative;
}
.goback {
width: 141px;
height: 51px;
position: absolute;
top: 45px;
left: 0;
cursor: pointer;
font-size: 21px;
color: #666666;
background: #ffffff;
border-radius: 6px 6px 6px 6px;
border: 2px solid #707070;
text-align: center;
line-height: 51px;
}
.order_title {
font-size: 42px;
color: #000000;
width: 100%;
text-align: center;
line-height: 132px;
}
.collection {
width: 100%;
background: white;
height: 729px;
display: flex;
align-items: center;
box-sizing: border-box;
}
.roominfo {
width: 467px;
height: 100%;
padding: 51px 0 0 53px;
box-sizing: border-box;
background: url("~@/assets/hotel/room.png");
background-size: 100% 100%;
}
.roominfo_name {
font-size: 30px;
color: #a28263;
}
.roominfo_num {
font-size: 90px;
color: #7f5321;
margin: 12px 0 15px;
}
.roominfo_type {
width: 141px;
height: 54px;
border-radius: 6px 6px 6px 6px;
text-align: center;
line-height: 54px;
color: #7f5321;
font-size: 21px;
border: 1px solid #7f5321;
}
.roomcheck {
width: 636px;
height: 100%;
padding: 0 60px 0 45px;
box-sizing: border-box;
}
.roomcheck_sin {
width: 531px;
height: 156px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e0e0e0;
}
.roomcheck_sin_name {
font-size: 24px;
color: #666666;
}
.roomcheck_sin_people {
font-size: 27px;
color: #333333;
}
.roomcheck_sin_time {
font-size: 24px;
margin-top: 45px;
color: #000000;
}
.roomcheck_sin_bottom {
margin-top: 60px;
}
.shu {
width: 1px;
height: 489px;
background: #e0e0e0;
}
.roomprice {
flex: 1;
height: 100%;
padding: 60px 77px 0;
box-sizing: content-box;
}
.roomprice_tips {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.heng {
width: 168px;
height: 1px;
background: #e0e0e0;
}
.roomprice_title {
font-size: 24px;
color: #666666;
text-align: center;
}
.roomprice_num {
color: #333333;
font-size: 33px;
text-align: center;
margin: 27px 0 84px;
}
.roomprice_num span {
font-size: 72px;
}
.roomprice_specific {
display: flex;
margin-top: 42px;
justify-content: space-between;
}
.roomprice_specific_name {
font-size: 24px;
color: #666666;
}
.roomprice_specific_num {
color: #000000;
font-size: 30px;
}
.roomprice_bto {
width: 198px;
height: 75px;
text-align: center;
line-height: 75px;
font-size: 27px;
cursor: pointer;
color: #ffffff;
margin: 150px auto 0;
background: #eb9c4e;
border-radius: 6px 6px 6px 6px;
}
</style>
\ No newline at end of file
<template>
<div class="order">
<div class="order_top">
<div class="order_title">发放房卡</div>
</div>
<div class="collection">
<img src="@/assets/hotel/grant.png" class="grant" />
<div class="waiting">房卡发放中,请耐心等待...</div>
<el-progress
:show-text="false"
color="#EB9C4E"
:percentage="50"
class="progress"
:stroke-width="21"
></el-progress>
<div class="progress_schedule">40%</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.order {
width: 100%;
height: 100%;
padding: 0 45px;
box-sizing: border-box;
background: #f6f7fb;
border-radius: 21px;
}
.order_top {
height: 132px;
width: 100%;
position: relative;
}
.order_title {
font-size: 42px;
color: #000000;
width: 100%;
text-align: center;
line-height: 132px;
}
.collection {
width: 100%;
background: white;
height: 729px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.grant {
width: 168px;
height: 137px;
}
.waiting {
font-size: 39px;
color: #333333;
margin: 80px 0 45px;
}
.progress {
width: 827px;
margin-bottom: 26px;
}
.progress_schedule{
font-size: 33px;
color: #333333;
}
</style>
\ No newline at end of file
<template>
<div class="order">
<div class="order_top">
<div class="order_title">发放成功</div>
</div>
<div class="collection">
<img src="@/assets/hotel/success2.png" class="success_icon" />
<div class="success_text">房卡发放成功,请拿好您的房卡</div>
<div class="success_text">感谢您的使用</div>
<div class="success_back" @click="goback">回到首页</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
// 回到首页
goback() {
this.$router.replace({
name: "hotel",
});
},
},
};
</script>
<style scoped>
.order {
width: 100%;
height: 100%;
padding: 0 45px;
box-sizing: border-box;
background: #f6f7fb;
border-radius: 21px;
}
.order_top {
height: 132px;
width: 100%;
position: relative;
}
.order_title {
font-size: 42px;
color: #000000;
width: 100%;
text-align: center;
line-height: 132px;
}
.collection {
width: 100%;
background: white;
height: 729px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.success_icon {
width: 119px;
height: 119px;
margin-bottom: 69px;
}
.success_text {
font-size: 39px;
color: #333333;
}
.success_back {
width: 312px;
height: 105px;
background: #eb9c4e;
text-align: center;
line-height: 105px;
color: white;
font-size: 36px;
cursor: pointer;
border-radius: 6px 6px 6px 6px;
margin-top: 98px;
}
</style>
\ No newline at end of file
<template>
<div class="order">
<div class="order_top">
<div class="order_title">确认订单信息</div>
</div>
<div>
<div class="order_info">
<div class="order_info_head">
<div class="order_info_head_left">
<div>
<div class="order_info_tip">联系人</div>
<div class="order_info_text">王大锤</div>
</div>
<div class="order_info_head_phone">
<div class="order_info_tip">联系电话</div>
<div class="order_info_text">172-0920-1829</div>
</div>
</div>
<div class="order_info_head_tips">
<div class="order_info_tip">温馨提示</div>
<div class="order_info_prompt">
信息有误需要更改请前往前台办理,请于中午14:00前办理入住,12:00前
办理离店,房间会一直为你保留
</div>
</div>
</div>
<div class="order_info_room">
<div class="order_info_room_conten">
<div class="order_info_room_conten_left">
<img
class="order_info_room_img"
src="https://img2.baidu.com/it/u=4226896243,3275827708&fm=253&fmt=auto&app=138&f=JPEG?w=350&h=350"
/>
<div>
<div class="order_info_room_name">豪华大床房</div>
<div class="order_info_room_time">
2023.11.07(入住)——2023.11.08(离店)
</div>
<div class="order_info_room_price">总价:¥<span>388</span></div>
</div>
</div>
<div class="order_info_room_conten_right">
<div>
<div class="order_people">入住人数</div>
<div class="order_info_room_conten_people">
<div
v-for="item in peopleList"
@click="selectPeople(item)"
:class="[
'order_info_room_conten_people_li',
currentPeople == item
? 'order_info_room_conten_people_li_select'
: '',
]"
>
{{ item }}
</div>
<div class="order_info_checkin">
<div class="order_info_room_conten_bto">直接入住</div>
<div class="order_info_room_conten_btotios">
房间将默认分配
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
peopleList: [1, 2, 3],
currentPeople: 1,
};
},
methods: {
selectPeople(value) {
this.currentPeople = value;
},
},
};
</script>
<style scoped>
.order {
width: 100%;
height: 100%;
padding: 0 45px;
box-sizing: border-box;
background: #f6f7fb;
border-radius: 21px;
}
.order_top {
height: 132px;
width: 100%;
}
.order_title {
font-size: 42px;
color: #000000;
width: 100%;
text-align: center;
line-height: 132px;
}
.order_info {
width: 100%;
height: 729px;
background: white;
}
.order_info_head {
width: 100%;
height: 174px;
display: flex;
padding: 45px 0 0 0;
box-sizing: border-box;
align-items: flex-start;
border-bottom: 2px solid #e0e0e0;
}
.order_info_head_left {
width: 50%;
padding-left: 60px;
box-sizing: border-box;
display: flex;
align-items: flex-start;
}
.order_info_tip {
font-size: 24px;
color: #666666;
}
.order_info_text {
font-size: 33px;
color: #333333;
margin-top: 24px;
}
.order_info_prompt {
font-size: 21px;
margin-top: 21px;
width: 672px;
color: #666666;
}
.order_info_head_phone {
margin-left: 195px;
}
.order_info_head_tips {
margin-left: 42px;
}
.order_info_room {
width: 100%;
height: 275px;
padding: 0 60px;
box-sizing: border-box;
}
.order_info_room_conten {
width: 100%;
height: 100%;
display: flex;
align-items: center;
border-bottom: 2px solid #e0e0e0;
}
.order_info_room_img {
width: 251px;
height: 185px;
border-radius: 6px;
margin-right: 45px;
}
.order_info_room_conten_left {
width: 50%;
display: flex;
border-right: 2px solid #e0e0e0;
align-items: flex-end;
}
.order_info_room_price {
color: #666666;
margin-top: 36px;
}
.order_info_room_price span {
font-size: 42px;
line-height: 22px;
color: #000000;
}
.order_info_room_time {
font-size: 24px;
color: #666666;
margin-top: 18px;
}
.order_info_room_name {
font-size: 33px;
color: #333333;
}
.order_info_room_conten_right {
padding-left: 42px;
display: flex;
box-sizing: border-box;
}
.order_people {
font-size: 24px;
color: #666666;
}
.order_info_room_conten_people {
display: flex;
align-items: center;
margin-top: 23px;
}
.order_info_room_conten_people_li {
width: 123px;
height: 56px;
margin-right: 30px;
background: #eaeaea;
border-radius: 6px 6px 6px 6px;
text-align: center;
line-height: 56px;
color: #717171;
cursor: pointer;
font-size: 24px;
}
.order_info_room_conten_people_li_select {
background: #eb9c4e;
color: white;
}
.order_info_room_conten_bto {
width: 198px;
height: 75px;
background: #eb9c4e;
cursor: pointer;
text-align: center;
line-height: 75px;
color: white;
font-size: 27px;
border-radius: 6px 6px 6px 6px;
}
.order_info_checkin {
margin-left: 105px;
position: relative;
}
.order_info_room_conten_btotios {
position: absolute;
width: 140px;
bottom: -37px;
left: 50%;
font-size: 20px;
color: #666666;
transform: translateX(-50%);
text-align: center;
}
</style>
\ No newline at end of file
<template>
<div class="order">
<div class="order_top">
<div class="goback">返回上一步</div>
<div class="order_title">身份采集成功</div>
</div>
<div class="collection">
<div class="collection_info">
<img src="" class="collection_info_head" />
<div>
<div class="collection_info_single">
<div class="collection_info_single_title">姓名:</div>
<div class="collection_info_single_text">网达成</div>
</div>
<div class="collection_info_single">
<div class="collection_info_single_title">性别:</div>
<div class="collection_info_single_text"></div>
</div>
<div class="collection_info_single">
<div class="collection_info_single_title">民族:</div>
<div class="collection_info_single_text"></div>
</div>
<div class="collection_info_single">
<div class="collection_info_single_title">出生:</div>
<div class="collection_info_single_text">1994年10月10日</div>
</div>
<div class="collection_info_single">
<div class="collection_info_single_title">住址:</div>
<div class="collection_info_single_text">
广东省广州市黄浦区黄埔大道129号
</div>
</div>
<div class="collection_info_single">
<div class="collection_info_single_title">身份证号码:</div>
<div class="collection_info_single_text">362421********5627</div>
</div>
</div>
</div>
<div class="collection_bto">下一步</div>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.order {
width: 100%;
height: 100%;
padding: 0 45px;
box-sizing: border-box;
background: #f6f7fb;
border-radius: 21px;
}
.order_top {
height: 132px;
width: 100%;
position: relative;
}
.goback {
width: 141px;
height: 51px;
position: absolute;
top: 45px;
left: 0;
cursor: pointer;
font-size: 21px;
color: #666666;
background: #ffffff;
border-radius: 6px 6px 6px 6px;
border: 2px solid #707070;
text-align: center;
line-height: 51px;
}
.order_title {
font-size: 42px;
color: #000000;
width: 100%;
text-align: center;
line-height: 132px;
}
.collection {
width: 100%;
background: white;
height: 729px;
padding-top: 150px;
box-sizing: border-box;
}
.collection_info {
display: flex;
align-items: flex-start;
justify-content: center;
}
.collection_info_head {
width: 251px;
height: 291px;
margin-right: 60px;
}
.collection_info_single {
display: flex;
align-items: center;
margin-bottom: 18px;
}
.collection_info_single_title {
font-size: 30px;
color: #333333;
margin-right: 10px;
}
.collection_info_single_text {
font-size: 30px;
color: #666666;
}
.collection_bto {
width: 198px;
height: 75px;
background: #eb9c4e;
border-radius: 6px 6px 6px 6px;
text-align: center;
line-height: 75px;
cursor: pointer;
font-size: 27px;
color: white;
margin: 50px auto 0;
}
</style>
\ No newline at end of file
<template>
<div class="hotel">
<div class="hotel_top">
<div class="hotel_left">
<img src="" />
<div>陆瑞酒店</div>
</div>
<div class="hotel_right">
<div class="hotel_right_date">
<div>{{ dayOfWeek }}</div>
<div>{{ date }}</div>
</div>
<div class="hotel_right_l">|</div>
<div class="hotel_right_time">{{ time }}</div>
</div>
</div>
<div class="hotel_welcome">
<div class="hotel_welcome_tips1">欢迎使用</div>
<div class="hotel_welcome_tips2">酒店智能化自助入住系统</div>
</div>
<div class="hotel_option">
<div class="hotel_option_all">
<div class="hotel_option_reserve" @click="reserve(1)">
<div class="hotel_reser">有预定</div>
<div class="hotel_reser_english">Express Check-in</div>
<img src="@/assets/hotel/reservation.png" class="hotel_option_icon" />
</div>
<img src="@/assets/hotel/r.png" class="hotel_option_icon_h" />
</div>
<div class="hotel_option_all">
<div class="hotel_option_noreserve" @click="reserve(0)">
<div class="hotel_reser">无预定</div>
<div class="hotel_reser_english">No appointment</div>
<img
src="@/assets/hotel/noreservation.png"
class="hotel_option_icon"
/>
</div>
<img src="@/assets/hotel/n.png" class="hotel_option_icon_h" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
date: "", //年月日
time: "", //时间
dayOfWeek: "", //星期几
};
},
created() {
this.getDate();
},
methods: {
// 获取当前日期
getDate() {
const now = new Date();
const year = now.getFullYear();
const month = ("0" + (now.getMonth() + 1)).slice(-2);
const day = ("0" + now.getDate()).slice(-2);
const hours = ("0" + now.getHours()).slice(-2);
const minutes = ("0" + now.getMinutes()).slice(-2);
const seconds = ("0" + now.getSeconds()).slice(-2);
const weekDays = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
];
const dayOfWeek = weekDays[now.getDay()];
this.dayOfWeek = dayOfWeek;
this.date = year + "." + month + "." + day;
this.time = hours + ":" + minutes;
},
reserve(type) {
this.$root.hotelType = type;
this.$router.replace({
path: "/hotel/common",
});
},
},
};
</script>
<style scoped>
.hotel {
width: 100%;
padding: 24px 20px;
box-sizing: border-box;
height: 100%;
background: linear-gradient(to bottom, #07122f, #2e246d);
}
.hotel_top {
display: flex;
align-items: center;
justify-content: space-between;
}
.hotel_right {
display: flex;
color: white;
align-items: center;
}
.hotel_left {
display: flex;
align-items: center;
font-size: 16px;
color: white;
}
.hotel_right_l {
width: 1px;
height: 18px;
background: #ffffff;
opacity: 0.29;
margin: 0 16px 0 18px;
}
.hotel_right_date {
font-size: 13px;
font-weight: 400;
}
.hotel_right_time {
font-size: 30px;
font-weight: bold;
}
.hotel_welcome {
margin-top: 83px;
}
.hotel_welcome_tips1 {
font-size: 34px;
color: white;
text-align: center;
}
.hotel_welcome_tips2 {
font-size: 52px;
color: white;
font-weight: 400;
margin-top: 23px;
text-align: center;
}
.hotel_option {
margin-top: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.hotel_option_reserve {
width: 260px;
height: 342px;
background: linear-gradient(to bottom, #6297f6 0%, #2d41f3);
border-radius: 10px;
padding: 32px 0 0 24px;
box-sizing: border-box;
margin-right: 100px;
position: relative;
}
.hotel_option_noreserve {
width: 260px;
height: 342px;
background: linear-gradient(to bottom, #ae5df2 0%, #8a31d9);
padding: 32px 0 0 24px;
box-sizing: border-box;
border-radius: 10px;
position: relative;
}
.hotel_reser {
font-size: 28px;
color: white;
}
.hotel_reser_english {
font-size: 18px;
color: white;
}
.hotel_option_icon {
width: 166px;
height: 174px;
position: absolute;
right: 0;
bottom: 0;
}
.hotel_option_icon_h {
height: 111px;
width: 260px;
object-fit: cover;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment