Skip to content

S
sim
Commit 2257c295 authored by limeimei's avatar limeimei
Browse files
Options

2

parent 4d47d1fa
Hide whitespace changes
Inline Side-by-side
Showing with 410 additions and 232 deletions
src/router/index.js
View file @ 2257c295
...@@ -24,6 +24,8 @@ import Phone from "../views/sim/phone.vue"; ...@@ -24,6 +24,8 @@ import Phone from "../views/sim/phone.vue";
import Choose from "../views/sim/choose.vue"; import Choose from "../views/sim/choose.vue";
import Authentify2 from "../views/sim/authentify.vue"; import Authentify2 from "../views/sim/authentify.vue";
import AuthSuccess2 from "../views/sim/authSuccess.vue"; import AuthSuccess2 from "../views/sim/authSuccess.vue";
import Payment from "../views/sim/register.vue";
Vue.use(VueRouter); Vue.use(VueRouter);
...@@ -190,6 +192,7 @@ const routes = [ ...@@ -190,6 +192,7 @@ const routes = [
component: Phone, component: Phone,
meta: { meta: {
title: "自助办理sim卡系统", title: "自助办理sim卡系统",
index: 0,
}, },
}, },
{ {
...@@ -198,6 +201,7 @@ const routes = [ ...@@ -198,6 +201,7 @@ const routes = [
component: Choose, component: Choose,
meta: { meta: {
title: "自助办理sim卡系统", title: "自助办理sim卡系统",
index: 1,
}, },
}, },
{ {
...@@ -206,6 +210,7 @@ const routes = [ ...@@ -206,6 +210,7 @@ const routes = [
component: Authentify2, component: Authentify2,
meta: { meta: {
title: "自助办理sim卡系统", title: "自助办理sim卡系统",
index: 2,
}, },
}, },
{ {
...@@ -213,7 +218,17 @@ const routes = [ ...@@ -213,7 +218,17 @@ const routes = [
name: "realname", name: "realname",
component: AuthSuccess2, component: AuthSuccess2,
meta: { meta: {
title: "实名认证", title: "自助办理sim卡系统",
index: 2,
},
},
{
path: "/pay",
name: "pay",
component: Payment,
meta: {
title: "自助办理sim卡系统",
index: 3,
}, },
}, },
], ],
......
src/views/common2.vue
View file @ 2257c295
<template> <template>
<div class="wrapper "> <div class="wrapper ">
<div class="common"> <div class="common">
<img src="@/assets/sim/home.png" alt="" class="home"> <img src="@/assets/hotel/home.png" alt="" class="home">
<div class="common_btn">返回主页</div> <div class="common_btn" @click="gohome">返回主页</div>
<div class="common_title"> <div class="common_title">
{{title}} 自助办理sim卡系统
</div> </div>
</div> </div>
<div class="content_view"> <div class="content_view">
<router-view /> <div class="phone_title">
<div v-for="(item,index) in navList" :key="index" class="phone_title_item">
<div :class="[index<=currentIndex?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}
</div>
<span :class="[index<=currentIndex?'item_active_text title_item ':'title_item ']">{{item}}</span>
<img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
</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> </div>
</div> </div>
...@@ -21,23 +36,58 @@ ...@@ -21,23 +36,58 @@
export default { export default {
data() { data() {
return { return {
title: "" title: "",
navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
percentage: 100,
currentIndex: "", //当前移动到的路径
time: 120, //时间设定为360
} }
}, watch: { }, watch: {
$route: { $route: {
// $route可以用引号，也可以不用引号 监听的对象 // $route可以用引号，也可以不用引号 监听的对象
handler(to) { handler(to) {
this.title = to.meta.title this.currentIndex = to.meta.index;
}, },
}, },
}, },
created() { created() {
this.decrease();
this.currentIndex = this.$route.meta.index;
}, },
methods: { methods: {
// 自定义进度条
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: "sim",
});
},
} }
} }
</script> </script>
...@@ -74,6 +124,7 @@ ...@@ -74,6 +124,7 @@
margin-right: auto; margin-right: auto;
font-size: 16px; font-size: 16px;
cursor: pointer;
} }
...@@ -88,4 +139,71 @@ ...@@ -88,4 +139,71 @@
flex: 1; flex: 1;
} }
.phone_title {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
}
.phone_title_item {
display: flex;
margin-right: 26px;
align-items: center;
}
.title_item_idx {
width: 16px;
height: 16px;
background: #797F90;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
font-size: 13px;
}
.item_active {
background: #437AE5 !important;
}
.item_active_text {
color: #437AE5 !important;
}
.title_item {
color: #797F90;
font-size: 15px;
margin: 0 21px 0 15px;
}
.title_item_img {
width: 19.24px;
height: 4.37px;
}
.hotel_content {
width: 100%;
padding: 0 36px;
box-sizing: border-box;
}
.hotel_content_frame {
width: 100%;
height: 100%;
position: relative;
border-radius: 21px;
background: white;
z-index: 999;
}
.hotel_content_frame_countdown {
position: absolute;
top: 36px;
right: 45px;
z-index: 999;
}
</style> </style>
\ No newline at end of file
src/views/sim/authSuccess.vue
View file @ 2257c295
<template> <template>
<div class="reserved"> <div class="reserved">
<div class="phone_title">
<div v-for="(item,index) in navList" :key="index" class="phone_title_item">
<div :class="[index<=2?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}</div>
<span :class="[index<=2?'item_active_text title_item ':'title_item ']">{{item}}</span>
<img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
</div>
</div>
<div class="auth_content"> <div class="auth_content">
<div class="auth_top"> <div class="auth_top">
<div><el-button @click="toBack">返回上一步</el-button> <div><el-button @click="toBack">返回上一步</el-button>
</div> </div>
<div class="content_time">118s</div> <div class="auth_title">实名认证成功</div>
</div> </div>
<div class="auth_title">实名认证成功</div>
<div class="auth_body"> <div class="auth_body">
<div> <div>
...@@ -43,7 +36,6 @@ ...@@ -43,7 +36,6 @@
export default { export default {
data() { data() {
return { return {
navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
} }
}, },
...@@ -86,8 +78,8 @@ ...@@ -86,8 +78,8 @@
width: 100%; width: 100%;
display: flex; display: flex;
height: 50px; height: 50px;
align-items: center; position: relative;
justify-content: space-between !important; justify-content: center;
} }
.auth_title { .auth_title {
...@@ -157,54 +149,16 @@ ...@@ -157,54 +149,16 @@
height: 34px; height: 34px;
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
}
::v-deep .el-button--primary {
height: 50px;
} }
::v-deep .auth_top .el-button {
.phone_title { position: absolute;
display: flex; left: 0;
justify-content: center; top: 0;
align-items: center;
height: 80px;
} }
.phone_title_item { ::v-deep .el-button--primary {
display: flex; height: 50px;
margin-right: 26px;
align-items: center;
}
.title_item_idx {
width: 16px;
height: 16px;
background: #797F90;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
font-size: 13px;
}
.item_active {
background: #437AE5 !important;
}
.item_active_text {
color: #437AE5 !important;
}
.title_item {
color: #797F90;
font-size: 15px;
margin: 0 21px 0 15px;
}
.title_item_img {
width: 19.24px;
height: 4.37px;
} }
</style> </style>
\ No newline at end of file
src/views/sim/authentify.vue
View file @ 2257c295
<template> <template>
<div class="reserved"> <div class="reserved">
<div class="phone_title">
<div v-for="(item,index) in navList" :key="index" class="phone_title_item">
<div :class="[index<=2?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}</div>
<span :class="[index<=2?'item_active_text title_item ':'title_item ']">{{item}}</span>
<img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
</div>
</div>
<div class="auth_content"> <div class="auth_content">
<div class="auth_top"> <div class="auth_top">
<div><el-button @click="toBack">返回上一步</el-button> <div><el-button @click="toBack">返回上一步</el-button>
</div> </div>
<div class="auth_title">您可通过刷<span style="color: #5A8FF6;"> <div class="auth_title">您可通过刷<span style="color: #5A8FF6;">
身份证、粤居码</span>任意一种进行实名认证</div> 身份证、粤居码</span>任意一种进行实名认证</div>
<div class="content_time">118s</div>
</div> </div>
<div class="auth_body"> <div class="auth_body">
<div class="auth_center"> <div class="auth_center">
...@@ -54,7 +45,6 @@ ...@@ -54,7 +45,6 @@
export default { export default {
data() { data() {
return { return {
navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
} }
}, },
...@@ -93,8 +83,9 @@ ...@@ -93,8 +83,9 @@
width: 100%; width: 100%;
display: flex; display: flex;
height: 50px; height: 50px;
align-items: center; /* align-items: center; */
justify-content: space-between !important; position: relative;
justify-content: center;
} }
.auth_title { .auth_title {
...@@ -169,53 +160,16 @@ ...@@ -169,53 +160,16 @@
height: 34px; height: 34px;
padding: 0; padding: 0;
font-size: 14px; font-size: 14px;
}
::v-deep .el-button--primary {
height: 50px;
} }
.phone_title { ::v-deep .auth_top .el-button {
display: flex; position: absolute;
justify-content: center; left: 0;
align-items: center; top: 0;
height: 80px;
}
.phone_title_item {
display: flex;
margin-right: 26px;
align-items: center;
} }
.title_item_idx { ::v-deep .el-button--primary {
width: 16px; height: 50px;
height: 16px;
background: #797F90;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
font-size: 13px;
}
.item_active {
background: #437AE5 !important;
}
.item_active_text {
color: #437AE5 !important;
}
.title_item {
color: #797F90;
font-size: 15px;
margin: 0 21px 0 15px;
}
.title_item_img {
width: 19.24px;
height: 4.37px;
} }
</style> </style>
\ No newline at end of file
src/views/sim/choose.vue
View file @ 2257c295
<template> <template>
<div class="standby"> <div class="standby">
<div class="phone_title">
<div v-for="(item,index) in navList" :key="index" class="phone_title_item">
<div :class="[index<2?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}</div>
<span :class="[index<2?'item_active_text title_item ':'title_item ']">{{item}}</span>
<img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
</div>
</div>
<div class="phone"> <div class="phone">
<div class="phone_first"> <div class="phone_first">
<div><el-button @click="toBack">返回上一步</el-button> <div><el-button @click="toBack">返回上一步</el-button>
</div><span class="phone_text">选择套餐</span> </div><span class="phone_text">选择套餐</span>
<div class="content_time">118s</div>
</div> </div>
<div class="phone_list"> <div class="phone_list">
<div v-for="item in phoneList" :key="item.value" class=" phone_list_item"> <div v-for="item in phoneList" :key="item.value" class=" phone_list_item">
...@@ -36,7 +28,6 @@ ...@@ -36,7 +28,6 @@
data() { data() {
return { return {
currentindex: null, currentindex: null,
navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
phoneList: [{ value: 1, label: "card1.png" }, { value: 2, label: "card2.png" }, { value: 3, label: "card3.png" }, phoneList: [{ value: 1, label: "card1.png" }, { value: 2, label: "card2.png" }, { value: 3, label: "card3.png" },
{ value: 4, label: "card4.png" },] { value: 4, label: "card4.png" },]
} }
...@@ -82,49 +73,6 @@ ...@@ -82,49 +73,6 @@
} }
.phone_title {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
}
.phone_title_item {
display: flex;
margin-right: 26px;
align-items: center;
}
.title_item_idx {
width: 16px;
height: 16px;
background: #797F90;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
font-size: 13px;
}
.item_active {
background: #437AE5 !important;
}
.item_active_text {
color: #437AE5 !important;
}
.title_item {
color: #797F90;
font-size: 15px;
margin: 0 21px 0 15px;
}
.title_item_img {
width: 19.24px;
height: 4.37px;
}
.phone_img { .phone_img {
...@@ -137,7 +85,8 @@ ...@@ -137,7 +85,8 @@
height: 99px; height: 99px;
display: flex; display: flex;
width: 100%; width: 100%;
justify-content: space-between; position: relative;
justify-content: center;
} }
.phone_text { .phone_text {
...@@ -145,19 +94,11 @@ ...@@ -145,19 +94,11 @@
font-size: 28px; font-size: 28px;
font-weight: 500; font-weight: 500;
color: #000000; color: #000000;
} /* margin-left: 35%; */
.content_time {
width: 50px;
height: 50px;
background: #FFFFFF;
opacity: 1;
border: 3px solid #5A8FF6;
border-radius: 50%;
text-align: center;
line-height: 50px;
} }
.phone_list { .phone_list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -191,6 +132,20 @@ ...@@ -191,6 +132,20 @@
font-size: 14px; font-size: 14px;
} }
::v-deep .el-button {
width: 94px;
height: 34px;
padding: 0;
font-size: 14px;
}
::v-deep .phone_first .el-button {
position: absolute;
left: 0;
top: 0;
}
::v-deep .el-button--primary { ::v-deep .el-button--primary {
height: 50px; height: 50px;
} }
......
src/views/sim/phone.vue
View file @ 2257c295
<template> <template>
<div class="standby"> <div class="standby">
<div class="phone_title">
<div v-for="(item,index) in navList" :key="index" class="phone_title_item">
<div :class="[index==0?'item_active title_item_idx ':'title_item_idx ']">{{index+1}}</div>
<span :class="[index==0?'item_active_text title_item ':'title_item ']">{{item}}</span>
<img src="@/assets/sim/right2.png" class="title_item_img" v-if="item!=='发放SIM卡'">
</div>
</div>
<div class="phone"> <div class="phone">
<div class="phone_first"><span class="phone_text">选择号码</span> <div class="phone_first"><span class="phone_text">选择号码</span>
<div class="content_time">118s</div>
</div> </div>
<div class="phone_list"> <div class="phone_list">
<div v-for="(item,index) in phoneList" :key="index" <div v-for="(item,index) in phoneList" :key="index"
...@@ -83,49 +76,6 @@ ...@@ -83,49 +76,6 @@
} }
.phone_title {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
}
.phone_title_item {
display: flex;
margin-right: 26px;
align-items: center;
}
.title_item_idx {
width: 16px;
height: 16px;
background: #797F90;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
font-size: 13px;
}
.item_active {
background: #437AE5 !important;
}
.item_active_text {
color: #437AE5 !important;
}
.title_item {
color: #797F90;
font-size: 15px;
margin: 0 21px 0 15px;
}
.title_item_img {
width: 19.24px;
height: 4.37px;
}
.phone_img { .phone_img {
......
src/views/sim/register.vue 0 → 100644
View file @ 2257c295
<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
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