Skip to content

S
sim
Commit bc46282b authored by April's avatar April
Browse files
Options

123

parent 2c55f3b9
Hide whitespace changes
Inline Side-by-side
Showing with 3439 additions and 2034 deletions
package-lock.json
View file @ bc46282b
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ bc46282b
...@@ -9,15 +9,18 @@ ...@@ -9,15 +9,18 @@
"dependencies": { "dependencies": {
"core-js": "^3.8.3", "core-js": "^3.8.3",
"element-ui": "^2.15.14", "element-ui": "^2.15.14",
"vue": "^2.6.14",
"iscroll": "^5.2.0", "iscroll": "^5.2.0",
"lib-flexible": "^0.3.2", "lib-flexible": "^0.3.2",
"v-calendar": "^2.4.2",
"vue": "^2.6.14",
"vue-router": "^3.5.1" "vue-router": "^3.5.1"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"postcss-pxtorem": "^6.0.0",
"px2rem-loader": "^0.1.9",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"
}, },
"browserslist": [ "browserslist": [
......
postcss.config.js 0 → 100644
View file @ bc46282b
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: ["last 2 versions", "Android >= 4.0", "iOS >= 8"],
},
"postcss-pxtorem": {
rootValue: 16,
propList: ["*"],
},
},
};
src/main.js
View file @ bc46282b
...@@ -2,11 +2,17 @@ import Vue from "vue"; ...@@ -2,11 +2,17 @@ import Vue from "vue";
import App from "./App.vue"; import App from "./App.vue";
import router from "./router"; import router from "./router";
import ElementUI from "element-ui"; import ElementUI from "element-ui";
import VCalendar from "v-calendar";
import "element-ui/lib/theme-chalk/index.css"; import "element-ui/lib/theme-chalk/index.css";
import "./utils/fixle"; import "./utils/fixle";
import VIscroll from "./utils/vIscroll"; import VIscroll from "./utils/vIscroll";
Vue.use(VCalendar, {
componentPrefix: "vc",
});
Vue.use(VIscroll); Vue.use(VIscroll);
Vue.config.productionTip = false; Vue.config.productionTip = false;
......
src/router/index.js
View file @ bc46282b
...@@ -19,6 +19,9 @@ import AuthSuccess from "../views/visitor/authSuccess.vue"; ...@@ -19,6 +19,9 @@ import AuthSuccess from "../views/visitor/authSuccess.vue";
import Card from "../views/visitor/card.vue"; import Card from "../views/visitor/card.vue";
import Send from "../views/visitor/send.vue"; import Send from "../views/visitor/send.vue";
import Sim from "../views/sim/index.vue"; import Sim from "../views/sim/index.vue";
import hotelOrderCheck from "../views/hotels/order/check.vue";
import hotelRegistration from "../views/hotels/registration.vue";
import hotelIdcardCheck from "../views/hotels/real/check.vue";
Vue.use(VueRouter); Vue.use(VueRouter);
...@@ -83,13 +86,40 @@ const routes = [ ...@@ -83,13 +86,40 @@ const routes = [
index: 0, index: 0,
}, },
}, },
{
path: "/hotel/registration",
name: "hotelRegistration",
component: hotelRegistration,
meta: {
title: "信息登记",
index: 0,
},
},
{
path: "/hotel/order/check",
name: "hotelOrderCheck",
component: hotelOrderCheck,
meta: {
title: "订单查询",
index: 0,
},
},
{ {
path: "/hotel/order/comfim", path: "/hotel/order/comfim",
name: "hotelOrderComfim", name: "hotelOrderComfim",
component: hotelOrderComfim, component: hotelOrderComfim,
meta: { meta: {
title: "订单确认", title: "订单确认",
index: 0, index: 1,
},
},
{
path: "/hotel/identity/check",
name: "hotelIdcardCheck",
component: hotelIdcardCheck,
meta: {
title: "身份核对",
index: 2,
}, },
}, },
{ {
...@@ -98,7 +128,7 @@ const routes = [ ...@@ -98,7 +128,7 @@ const routes = [
component: hotelIdentitySuccess, component: hotelIdentitySuccess,
meta: { meta: {
title: "身份采集成功", title: "身份采集成功",
index: 1, index: 2,
}, },
}, },
{ {
...@@ -107,7 +137,7 @@ const routes = [ ...@@ -107,7 +137,7 @@ const routes = [
component: hotelInfo, component: hotelInfo,
meta: { meta: {
title: "确认信息", title: "确认信息",
index: 2, index: 3,
}, },
}, },
{ {
...@@ -116,7 +146,7 @@ const routes = [ ...@@ -116,7 +146,7 @@ const routes = [
component: hotelInfoPay, component: hotelInfoPay,
meta: { meta: {
title: "订单支付", title: "订单支付",
index: 3, index: 4,
}, },
}, },
{ {
...@@ -125,7 +155,7 @@ const routes = [ ...@@ -125,7 +155,7 @@ const routes = [
component: hotelInfoGrant, component: hotelInfoGrant,
meta: { meta: {
title: "发放房卡", title: "发放房卡",
index: 4, index: 5,
}, },
}, },
{ {
...@@ -134,7 +164,7 @@ const routes = [ ...@@ -134,7 +164,7 @@ const routes = [
component: hotelInfoSuccess, component: hotelInfoSuccess,
meta: { meta: {
title: "发放成功", title: "发放成功",
index: 4, index: 6,
}, },
}, },
], ],
...@@ -177,9 +207,13 @@ const routes = [ ...@@ -177,9 +207,13 @@ const routes = [
]; ];
const router = new VueRouter({ const router = new VueRouter({
// history模式，去除URL中#
mode: "history", mode: "history",
base: process.env.BASE_URL,
routes, routes,
// 解决路由跳转后，不显示在首行
scrollBehavior() {
return { x: 0, y: 0 };
},
}); });
export default router; export default router;
src/views/hotels/bookroom.vue
View file @ bc46282b
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bookroom_bto">确认</div> <div class="bookroom_bto" @click="comfin">确认</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -105,6 +105,13 @@ export default { ...@@ -105,6 +105,13 @@ export default {
this.myScroll = iscroll; this.myScroll = iscroll;
}, },
// 信息登记
comfin() {
this.$router.push({
name: "hotelRegistration",
});
},
// 选择房间 // 选择房间
selectRoom(id) { selectRoom(id) {
this.currentIndex = id; this.currentIndex = id;
...@@ -188,6 +195,7 @@ export default { ...@@ -188,6 +195,7 @@ export default {
} }
.bookroom_bto { .bookroom_bto {
width: 198px; width: 198px;
cursor: pointer;
height: 75px; height: 75px;
text-align: center; text-align: center;
line-height: 75px; line-height: 75px;
......
src/views/hotels/common.vue
View file @ bc46282b
...@@ -31,7 +31,11 @@ ...@@ -31,7 +31,11 @@
v-if="item.next && currentIndex >= index" v-if="item.next && currentIndex >= index"
class="hotel_step_right" class="hotel_step_right"
/> />
<img src="@/assets/hotel/right.png" v-else class="hotel_step_right" /> <img
src="@/assets/hotel/right.png"
v-else-if="item.next"
class="hotel_step_right"
/>
</div> </div>
</div> </div>
<!-- 内容 --> <!-- 内容 -->
...@@ -59,10 +63,11 @@ export default { ...@@ -59,10 +63,11 @@ export default {
percentage: 100, percentage: 100,
currentIndex: "", //当前移动到的路径 currentIndex: "", //当前移动到的路径
time: 120, //时间设定为360 time: 120, //时间设定为360
timer: null, //定时器
step: [ step: [
{ {
name: "订单查询", name: "订单查询",
path: "hotelOrderComfim", path: "hotelOrderCheck",
next: true, next: true,
}, },
{ {
...@@ -101,6 +106,10 @@ export default { ...@@ -101,6 +106,10 @@ export default {
var type = this.$root.hotelType; var type = this.$root.hotelType;
if (type == 0) { if (type == 0) {
this.step.splice(0, 1); this.step.splice(0, 1);
} else {
this.$router.replace({
name: "hotelOrderCheck",
});
} }
this.currentIndex = this.$route.meta.index; this.currentIndex = this.$route.meta.index;
...@@ -111,6 +120,7 @@ export default { ...@@ -111,6 +120,7 @@ export default {
// $route可以用引号，也可以不用引号 监听的对象 // $route可以用引号，也可以不用引号 监听的对象
handler(to) { handler(to) {
this.currentIndex = to.meta.index; this.currentIndex = to.meta.index;
this.time = 120;
}, },
}, },
}, },
...@@ -132,21 +142,20 @@ export default { ...@@ -132,21 +142,20 @@ export default {
// 自定义进度条 // 自定义进度条
format(percentage) { format(percentage) {
const remainingTime = Math.ceil((percentage / 100) * 120); return `${this.time}s`;
return `${remainingTime}s`;
}, },
// 倒计时 // 倒计时
decrease() { decrease() {
var that = this; var that = this;
that.timer = setInterval(() => { that.timer = setInterval(() => {
that.time--; that.time--;
console.log(123)
// 计算进度百分比 // 计算进度百分比
that.percentage = (that.time / 120) * 100; that.percentage = (that.time / 120) * 100;
// 检查是否倒计时结束 // 检查是否倒计时结束
if (that.time <= 0) { if (that.time <= 0) {
clearInterval(that.timer); // 清除定时器
that.gohome(); that.gohome();
} }
}, 1000); // 每1000毫秒（1秒）更新一次 }, 1000); // 每1000毫秒（1秒）更新一次
...@@ -154,6 +163,7 @@ export default { ...@@ -154,6 +163,7 @@ export default {
// 返回主页 // 返回主页
gohome() { gohome() {
clearInterval(this.timer);
this.$router.replace({ this.$router.replace({
name: "hotel", name: "hotel",
}); });
...@@ -173,6 +183,7 @@ export default { ...@@ -173,6 +183,7 @@ export default {
width: 100%; width: 100%;
background: #17204b; background: #17204b;
display: flex; display: flex;
cursor: pointer;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 30px; padding: 0 30px;
......
src/views/hotels/info/pay.vue
View file @ bc46282b
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
</div> </div>
</div> </div>
</div> </div>
<button @click="comfim">发放房卡</button>
</div> </div>
</template> </template>
...@@ -27,6 +28,12 @@ export default { ...@@ -27,6 +28,12 @@ export default {
goback() { goback() {
this.$router.go(-1); this.$router.go(-1);
}, },
comfim() {
this.$router.push({
name: "hotelInfoGrant",
});
},
}, },
}; };
</script> </script>
......
src/views/hotels/info/register.vue
View file @ bc46282b
<template> <template>
<div class="order"> <div class="order">
<div class="order_top"> <div class="order_top">
<div class="goback" @click="gobak">返回上一步</div> <div class="goback" @click="goback">返回上一步</div>
<div class="order_title">确认信息</div> <div class="order_title">确认信息</div>
</div> </div>
<div class="collection"> <div class="collection">
......
src/views/hotels/info/roomcard.vue
View file @ bc46282b
...@@ -15,11 +15,20 @@ ...@@ -15,11 +15,20 @@
></el-progress> ></el-progress>
<div class="progress_schedule">40%</div> <div class="progress_schedule">40%</div>
</div> </div>
<button @click="comfim">成功</button>
</div> </div>
</template> </template>
<script> <script>
export default {}; export default {
methods: {
comfim() {
this.$router.push({
name: "hotelInfoSuccess",
});
},
},
};
</script> </script>
<style scoped> <style scoped>
...@@ -66,8 +75,8 @@ export default {}; ...@@ -66,8 +75,8 @@ export default {};
width: 827px; width: 827px;
margin-bottom: 26px; margin-bottom: 26px;
} }
.progress_schedule{ .progress_schedule {
font-size: 33px; font-size: 33px;
color: #333333; color: #333333;
} }
</style> </style>
\ No newline at end of file
src/views/hotels/order/check.vue 0 → 100644
View file @ bc46282b
<template>
<div class="reserved">
<div class="content">
<div class="content_card">
<div class="card_left">
<div class="card_tip">请输入手机号查询订单</div>
<el-input :value="phone" disabled
><template slot="prepend">
<div style="display: flex; align-items: center">
<span class="card_pre">+86</span>
<div class="card_center"></div>
</div> </template
></el-input>
<div class="card_btn">
<div @click="clickBtn(11)" type="info" class="reset">重置</div>
<div @click="comfirm" type="primary" class="comfin">确认</div>
</div>
</div>
<div class="card_right">
<el-button
v-for="item in numList"
:key="item.value"
@click="clickBtn(item.value)"
>{{ item.label }}</el-button
>
</div>
</div>
</div>
</div>
</template>
<script>
// @ is an alias to /src
export default {
data() {
return {
phone: "",
numList: [
{ label: "1", value: 1 },
{ label: "2", value: 2 },
{ label: "3", value: 3 },
{ label: "4", value: 4 },
{ label: "5", value: 5 },
{ label: "6", value: 6 },
{ label: "7", value: 7 },
{ label: "8", value: 8 },
{ label: "9", value: 9 },
{ label: "退格", value: 10 },
{ label: "0", value: 0 },
{ label: "删除", value: 11 },
],
};
},
methods: {
clickBtn(val) {
val == 11 ? (this.phone = "") : "";
if (this.phone.length > 10) return;
val <= 9 ? (this.phone = this.phone + val.toString()) : "";
val == 10 && this.phone.length >= 1
? (this.phone = this.phone.substring(0, this.phone.length - 1))
: "";
},
comfirm() {
this.$router.push({
name: "hotelOrderComfim",
});
},
},
};
</script>
<style scoped>
.reserved {
width: 100%;
padding-top: 150px;
background: #f6f7fb;
height: 906px;
box-sizing: border-box;
}
.content {
border-radius: 14px;
box-sizing: border-box;
}
.content_time {
width: 50px;
height: 50px;
background: #ffffff;
opacity: 1;
border: 3px solid #5a8ff6;
margin: 0 30px 0 auto;
border-radius: 50%;
text-align: center;
line-height: 50px;
}
.content_card {
display: flex;
padding: 0 105px;
box-sizing: border-box;
}
.card_tip {
font-size: 42px;
color: #000000;
}
::v-deep .content_card .el-input__inner {
width: 377px;
height: 78px;
background: none;
opacity: 1;
border: none;
padding-left: 0;
font-size: 24px;
}
::v-deep .content_card .el-input {
width: 723px;
height: 117px;
background: #ffffff;
border-radius: 10px 10px 10px 10px;
opacity: 1;
border: 1px solid #cbc7c7;
margin: 40px 0 120px 0;
}
::v-deep .content_card .el-input-group__prepend {
background-color: white;
border: 0;
line-height: 117px;
border-radius: 50%;
}
::v-deep .content_card .el-input.is-disabled .el-input__inner {
border-color: white;
height: 100%;
font-size: 36px;
background-color: white;
border-radius: 10%;
cursor: default;
color: #000000;
}
.card_pre {
color: #000000;
font-size: 36px;
}
.card_center {
width: 2px;
height: 117px;
background: #d6d6d6;
margin-left: 30px;
}
.card_btn {
display: flex;
align-items: center;
}
.card_right {
width: 674px;
height: 587px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
padding: 45px;
background: white;
margin-right: 0;
margin-left: auto;
box-sizing: border-box;
}
::v-deep .card_right .el-button {
width: 170px;
height: 96px;
background: #ffffff;
border-radius: 6px 6px 6px 6px;
margin-bottom: 45px;
border: 1px solid #cbc7c7;
font-weight: bold;
color: #000000;
font-size: 54px;
}
.comfin {
background: #eb9c4e;
width: 312px;
height: 105px;
text-align: center;
line-height: 105px;
color: white;
font-size: 36px;
background: #eb9c4e;
cursor: pointer;
border-radius: 6px 6px 6px 6px;
}
.reset {
width: 312px;
height: 105px;
text-align: center;
line-height: 105px;
color: #717171;
font-size: 36px;
background: #dcdcdc;
border-radius: 6px 6px 6px 6px;
margin-right: 60px;
cursor: pointer;
}
</style>
\ No newline at end of file
src/views/hotels/order/comfim.vue
View file @ bc46282b
<template> <template>
<div class="order"> <div class="order">
<div class="order_top"> <div class="order_top">
<div class="goback" @click="goback">返回上一步</div>
<div class="order_title">确认订单信息</div> <div class="order_title">确认订单信息</div>
</div> </div>
<div> <div>
...@@ -56,7 +57,9 @@ ...@@ -56,7 +57,9 @@
{{ item }}人 {{ item }}人
</div> </div>
<div class="order_info_checkin"> <div class="order_info_checkin">
<div class="order_info_room_conten_bto">直接入住</div> <div class="order_info_room_conten_bto" @click="comfin">
直接入住
</div>
<div class="order_info_room_conten_btotios"> <div class="order_info_room_conten_btotios">
房间将默认分配 房间将默认分配
</div> </div>
...@@ -84,6 +87,16 @@ export default { ...@@ -84,6 +87,16 @@ export default {
selectPeople(value) { selectPeople(value) {
this.currentPeople = value; this.currentPeople = value;
}, },
// 返回上一步
goback() {
this.$router.go(-1);
},
// 直接入住
comfin() {
this.$router.push({
name: "hotelIdcardCheck",
});
},
}, },
}; };
</script> </script>
...@@ -99,8 +112,24 @@ export default { ...@@ -99,8 +112,24 @@ export default {
} }
.order_top { .order_top {
height: 132px; height: 132px;
position: relative;
width: 100%; width: 100%;
} }
.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 { .order_title {
font-size: 42px; font-size: 42px;
color: #000000; color: #000000;
......
src/views/hotels/real/check.vue 0 → 100644
View file @ bc46282b
<template>
<div class="order">
<div class="order_top">
<div class="goback" @click="toBack">返回上一步</div>
<div class="order_title">请将证件放置识别区域</div>
</div>
<div class="collection">
<div class="auth_body">
<div class="collection_title">
您可通过刷<span>身份证、护照</span>任意一种证件进行实名认证
</div>
<div class="auth_center">
<img src="@/assets/visitor/auth.png" class="auth_img" />
<div class="auth_center_right">
<div class="auth_right">
<img src="@/assets/visitor/left.png" class="auth_img_left" />
<div>
<span class="auth_span">身份证读取处</span>
<div class="auth_span_a">请将您的身份证放置此区域</div>
</div>
</div>
<div class="auth_right">
<img src="@/assets/visitor/left.png" class="auth_img_left" />
<div>
<span class="auth_span">粤居码读取处</span>
<div class="auth_span_a">请将您的粤居码放置此区域</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 70px">
<el-button type="primary" @click="verify">身份证</el-button>
<el-button type="primary">粤居码</el-button>
</div>
</div>
<!-- <el-button type="primary" @click="toNext">下一步</el-button> -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
type: 1,
phone: "",
vform: {},
options: [
{
value: "选项1",
label: "黄金糕",
},
{
value: "选项2",
label: "双皮奶",
},
{
value: "选项3",
label: "蚵仔煎",
},
{
value: "选项4",
label: "龙须面",
},
{
value: "选项5",
label: "北京烤鸭",
},
],
};
},
created() {
this.type = this.$route.params.type;
},
methods: {
toBack() {
this.$router.go(-1);
},
verify() {
this.$router.push({ name: "hotelIdentitySuccess" });
},
},
};
</script>
<style scoped>
.order {
width: 100%;
height: 100%;
padding: 0 45px;
box-sizing: border-box;
background: #f6f7fb;
border-radius: 21px;
}
.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_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;
}
.auth_content {
width: 100%;
background: #ffffff;
border-radius: 14px;
height: 100%;
padding: 30px;
box-sizing: border-box;
}
.auth_top {
width: 100%;
display: flex;
height: 50px;
align-items: center;
justify-content: space-between !important;
}
.auth_title {
color: #666666;
font-size: 18px;
}
.auth_body {
width: 100%;
height: 100%;
padding-top: 36px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
.auth_center {
display: flex;
}
.auth_img {
width: 580px;
height: 431px;
}
.auth_center_right {
display: flex;
flex-direction: column;
margin-top: 60px;
}
.auth_img_left {
width: 64px;
height: 12px;
margin-right: 9px;
margin-top: 15px;
}
.auth_right {
display: flex;
margin-bottom: 62px;
}
.auth_span {
font-size: 30px;
}
.auth_span_a {
color: #666666;
font-size: 24px;
margin-top: 15px;
}
.content_time {
width: 50px;
height: 50px;
background: #ffffff;
opacity: 1;
border: 3px solid #5a8ff6;
border-radius: 50%;
text-align: center;
line-height: 50px;
}
::v-deep .el-button {
width: 94px;
height: 34px;
padding: 0;
font-size: 14px;
}
::v-deep .el-button--primary {
height: 50px;
}
.collection_title {
font-size: 27px;
color: #666666;
margin-bottom: 69px;
}
.collection_title span {
color: #437ae5;
}
</style>
\ No newline at end of file
src/views/hotels/real/success.vue
View file @ bc46282b
<template> <template>
<div class="order"> <div class="order">
<div class="order_top"> <div class="order_top">
<div class="goback">返回上一步</div> <div class="goback" @click="goback">返回上一步</div>
<div class="order_title">身份采集成功</div> <div class="order_title">身份采集成功</div>
</div> </div>
<div class="collection"> <div class="collection">
...@@ -36,13 +36,25 @@ ...@@ -36,13 +36,25 @@
</div> </div>
</div> </div>
</div> </div>
<div class="collection_bto">下一步</div> <div class="collection_bto" @click="comfin">下一步</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default {}; export default {
methods: {
// 返回上一步
goback() {
this.$router.go(-1);
},
comfin() {
this.$router.push({
name: "hotelInfo",
});
},
},
};
</script> </script>
<style scoped> <style scoped>
......
src/views/hotels/registration.vue 0 → 100644
View file @ bc46282b
<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="collection_top">
<div class="rooom_left">
<div class="rooom_left_sing">
<div class="rooom_left_title">选择房间</div>
<div class="rooom_left_text">3018</div>
</div>
<div class="rooom_left_sing">
<div class="rooom_left_title">入住时间</div>
<div class="rooom_left_date">
<div class="rooom_left_text" v-if="startDate">
{{ startDate }}
</div>
<div v-else class="rooom_left_text_plase">请选择入住时间</div>
<img src="@/assets/hotel/right2.png" class="rooom_left_img" />
<div class="rooom_left_text" v-if="endDate">{{ endDate }}</div>
<div v-else class="rooom_left_text_plase">请选择离店时间</div>
</div>
</div>
<div>
<div class="rooom_left_title">入住人数</div>
<div class="rooom_left_people">
<div
@click="selectPeople(item.people)"
:class="[
'rooom_left_people_sin',
select == item.people ? 'rooom_left_people_sin_select' : '',
]"
v-for="item in peopleList"
:key="item.people"
>
<img :src="item.selectimg" v-if="select == item.people" />
<img :src="item.img" v-else />
<div class="rooom_left_people_sin_text">
{{ item.people }}人
</div>
</div>
</div>
</div>
</div>
<div class="rooom_right">
<vc-date-picker v-model="range" is-range class="rooom_right_date" />
</div>
</div>
<div class="collection_bto" @click="comfin">下一步</div>
</div>
</div>
</template>
<script>
import people from "@/assets/hotel/people.png";
import people2 from "@/assets/hotel/people2.png";
import people3 from "@/assets/hotel/people3.png";
import peopleselect from "@/assets/hotel/peopleselect.png";
import peopleselect2 from "@/assets/hotel/peopleselect2.png";
import peopleselect3 from "@/assets/hotel/peopleselect3.png";
export default {
data() {
return {
range: {},
select: 1, //当前选择的人数
startDate: null, //开始日期
endDate: null, //结束日期
peopleList: [
{
img: people,
selectimg: peopleselect,
people: 1,
},
{
img: people2,
selectimg: peopleselect2,
people: 2,
},
{
img: people3,
selectimg: peopleselect3,
people: 3,
},
],
};
},
watch: {
range: {
handler(newValue) {
if (newValue) {
console.log(newValue);
var begin = newValue.start;
var end = newValue.end;
this.startDate = this.convertISODateToYMD(begin);
this.endDate = this.convertISODateToYMD(end);
}
},
},
},
methods: {
// 返回上一步
goback() {
this.$router.go(-1);
},
// 选择人数
selectPeople(value) {
this.select = value;
},
// 时间转换
convertISODateToYMD(isoDateString) {
const date = new Date(isoDateString); // 添加时区信息
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
return `${year}-${month}-${day}`;
},
comfin() {
if (!this.startDate || !this.endDate) {
this.$message.error("请先选择日期");
return;
}
this.$router.push({
name: "hotelIdcardCheck",
});
},
},
};
</script>
<style scoped>
.order {
width: 100%;
height: 100%;
padding: 0 45px;
box-sizing: border-box;
background: #f6f7fb;
border-radius: 21px;
}
.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_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;
}
.collection_top {
width: 100%;
display: flex;
padding-top: 45px;
box-sizing: border-box;
align-items: flex-start;
}
.rooom_left {
width: 50%;
height: 519px;
padding-left: 45px;
box-sizing: border-box;
border-right: 1px solid #e0e0e0;
}
.rooom_right {
flex: 1;
padding: 0 55px;
box-sizing: border-box;
height: 519px;
}
.rooom_left_title {
font-size: 24px;
color: #666666;
margin-bottom: 25px;
}
.rooom_left_text {
width: 302px;
height: 75px;
background: #ffffff;
border-radius: 6px 6px 6px 6px;
border: 1px solid #e0e0e0;
color: #000;
font-size: 27px;
padding-left: 24px;
line-height: 75px;
box-sizing: border-box;
}
.rooom_left_date {
display: flex;
align-items: center;
}
.rooom_left_img {
width: 75px;
height: 17px;
margin: 0 35px;
}
.rooom_left_sing {
margin-bottom: 30px;
}
.rooom_left_people {
display: flex;
align-items: center;
}
.rooom_left_people_sin {
width: 132px;
height: 132px;
display: flex;
margin-right: 60px;
flex-direction: column;
justify-content: center;
align-items: center;
background: #ffffff;
color: #999999;
border-radius: 6px 6px 6px 6px;
border: 1px solid #e0e0e0;
}
.rooom_left_people_sin_text {
font-size: 21px;
margin-top: 10px;
}
.rooom_right_date {
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 0px 0px 0px 0px;
opacity: 1;
border: 2px solid #e0e0e0;
}
::v-deep .vc-day-box-center-center {
width: 107px;
height: 70px;
}
.rooom_left_people_sin_select {
background: #eb9c4e;
color: white;
border: none;
}
.collection_bto {
margin: 45px auto 0;
width: 198px;
height: 75px;
background: #eb9c4e;
border-radius: 6px 6px 6px 6px;
text-align: center;
color: white;
line-height: 75px;
font-size: 27px;
cursor: pointer;
}
.rooom_left_text_plase {
font-size: 27px;
color: #b7b7b7;
width: 302px;
height: 75px;
line-height: 75px;
padding-left: 24px;
box-sizing: border-box;
background: #ffffff;
border-radius: 6px 6px 6px 6px;
border: 1px solid #e0e0e0;
}
</style>
\ No newline at end of file
src/views/hotels/standbuy.vue
View file @ bc46282b
...@@ -97,13 +97,14 @@ export default { ...@@ -97,13 +97,14 @@ export default {
<style scoped> <style scoped>
.hotel { .hotel {
width: 100%; width: 100%;
padding: 24px 20px; padding: 0 20px;
height: 100vh;
box-sizing: border-box; box-sizing: border-box;
height: 100%;
background: linear-gradient(to bottom, #07122f, #2e246d); background: linear-gradient(to bottom, #07122f, #2e246d);
} }
.hotel_top { .hotel_top {
display: flex; display: flex;
height: 70px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
...@@ -115,22 +116,22 @@ export default { ...@@ -115,22 +116,22 @@ export default {
.hotel_left { .hotel_left {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 16px; font-size: 24px;
color: white; color: white;
} }
.hotel_right_l { .hotel_right_l {
width: 1px; width: 1px;
height: 18px; height: 27px;
background: #ffffff; background: #ffffff;
opacity: 0.29; opacity: 0.29;
margin: 0 16px 0 18px; margin: 0 16px 0 18px;
} }
.hotel_right_date { .hotel_right_date {
font-size: 13px; font-size: 20px;
font-weight: 400; font-weight: 400;
} }
.hotel_right_time { .hotel_right_time {
font-size: 30px; font-size: 45px;
font-weight: bold; font-weight: bold;
} }
.hotel_welcome { .hotel_welcome {
......
src/views/visitor/authentify.vue
View file @ bc46282b
...@@ -43,150 +43,146 @@ ...@@ -43,150 +43,146 @@
</template> </template>
<script> <script>
export default {
export default { data() {
data() { return {
return { type: 1,
type: 1, phone: "",
phone: '', vform: {},
vform: {}, options: [
options: [{ {
value: '选项1', value: "选项1",
label: '黄金糕' label: "黄金糕",
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
}
}, },
{
created() { value: "选项2",
this.type = this.$route.params.type; label: "双皮奶",
},
{
value: "选项3",
label: "蚵仔煎",
},
{
value: "选项4",
label: "龙须面",
},
{
value: "选项5",
label: "北京烤鸭",
}, },
methods: { ],
toBack() { };
this.$router.go(-1); },
},
toNext() { created() {
this.$router.push({ name: "authentify", params: { title: '实名认证', } }); this.type = this.$route.params.type;
},
}, methods: {
} toBack() {
} this.$router.go(-1);
},
toNext() {
this.$router.push({ name: "authentify", params: { title: "实名认证" } });
},
},
};
</script> </script>
<style scoped> <style scoped>
.reserved { .reserved {
width: 100%;
width: 100%; padding: 36px;
padding: 36px;
height: calc(100vh - 70px);
height: calc(100vh - 70px); box-sizing: border-box;
box-sizing: border-box; }
} .auth_content {
width: 100%;
.auth_content { background: #ffffff;
width: 100%; border-radius: 14px;
background: #FFFFFF; height: 100%;
border-radius: 14px; padding: 30px;
height: 100%; box-sizing: border-box;
padding: 30px; }
box-sizing: border-box;
.auth_top {
} width: 100%;
display: flex;
.auth_top { height: 50px;
width: 100%; align-items: center;
display: flex; justify-content: space-between !important;
height: 50px; }
align-items: center;
justify-content: space-between !important; .auth_title {
} color: #666666;
font-size: 18px;
.auth_title { }
color: #666666; .auth_body {
font-size: 18px; width: 100%;
} height: 90%;
display: flex;
.auth_body { flex-direction: column;
width: 100%; align-items: center;
height: 90%; justify-content: center;
display: flex; }
flex-direction: column;
align-items: center; .auth_center {
justify-content: center; display: flex;
} }
.auth_center { .auth_img {
display: flex; width: 386.54px;
} height: 287.18px;
}
.auth_img {
width: 386.54px; .auth_center_right {
height: 287.18px; display: flex;
} flex-direction: column;
margin-top: 38px;
.auth_center_right { }
display: flex;
flex-direction: column; .auth_img_left {
margin-top: 38px; width: 64px;
} height: 12px;
margin-right: 9px;
.auth_img_left { margin-top: 7px;
width: 64px; }
height: 12px;
margin-right: 9px; .auth_right {
margin-top: 7px; display: flex;
} margin-bottom: 62px;
}
.auth_right {
display: flex; .auth_span {
margin-bottom: 62px; font-size: 20px;
} }
.auth_span { .auth_span_a {
color: #666666;
font-size: 20px; line-height: 18px;
font-size: 16px;
} }
.auth_span_a { .content_time {
width: 50px;
color: #666666; height: 50px;
line-height: 18px; background: #ffffff;
font-size: 16px; opacity: 1;
} border: 3px solid #5a8ff6;
border-radius: 50%;
.content_time { text-align: center;
width: 50px; line-height: 50px;
height: 50px; }
background: #FFFFFF;
opacity: 1; ::v-deep .el-button {
border: 3px solid #5A8FF6; width: 94px;
border-radius: 50%; height: 34px;
text-align: center; padding: 0;
line-height: 50px; font-size: 14px;
}
}
::v-deep .el-button--primary {
::v-deep .el-button { height: 50px;
width: 94px; }
height: 34px;
padding: 0;
font-size: 14px;
}
::v-deep .el-button--primary {
height: 50px;
}
</style> </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