2

src/router/index.js

@@ -24,6 +24,8 @@ import Phone from "../views/sim/phone.vue";
 import Choose from "../views/sim/choose.vue";
 import Authentify2 from "../views/sim/authentify.vue";
 import AuthSuccess2 from "../views/sim/authSuccess.vue";
+import Payment from "../views/sim/register.vue";
+
 
 Vue.use(VueRouter);
 
@@ -190,6 +192,7 @@ const routes = [
         component: Phone,
         meta: {
           title: "自助办理sim卡系统",
+          index: 0,
         },
       },
       {
@@ -198,6 +201,7 @@ const routes = [
         component: Choose,
         meta: {
           title: "自助办理sim卡系统",
+          index: 1,
         },
       },
       {
@@ -206,6 +210,7 @@ const routes = [
         component: Authentify2,
         meta: {
           title: "自助办理sim卡系统",
+          index: 2,
         },
       },
       {
@@ -213,7 +218,17 @@ const routes = [
         name: "realname",
         component: AuthSuccess2,
         meta: {
-          title: "实名认证",
+          title: "自助办理sim卡系统",
+          index: 2,
+        },
+      },
+      {
+        path: "/pay",
+        name: "pay",
+        component: Payment,
+        meta: {
+          title: "自助办理sim卡系统",
+          index: 3,
         },
       },
     ],

src/views/common2.vue

 <template>
     <div class="wrapper ">
         <div class="common">
-            <img src="@/assets/sim/home.png" alt="" class="home">
-            <div class="common_btn">返回主页</div>
+            <img src="@/assets/hotel/home.png" alt="" class="home">
+            <div class="common_btn" @click="gohome">返回主页</div>
             <div class="common_title">
-                {{title}}
+                自助办理sim卡系统
             </div>
 
         </div>
         <div class="content_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>
 
 </template>
 
@@ -21,23 +36,58 @@
     export default {
         data() {
             return {
-                title: ""
+                title: "",
+                navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
+                percentage: 100,
+                currentIndex: "", //当前移动到的路径
+                time: 120, //时间设定为360
             }
         }, watch: {
             $route: {
                 // $route可以用引号，也可以不用引号  监听的对象
                 handler(to) {
-                    this.title = to.meta.title
+                    this.currentIndex = to.meta.index;
                 },
             },
 
         },
         created() {
+            this.decrease();
 
+
+
+            this.currentIndex = this.$route.meta.index;
         },
 
         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>
@@ -74,6 +124,7 @@
         margin-right: auto;
 
         font-size: 16px;
+        cursor: pointer;
     }
 
 
@@ -88,4 +139,71 @@
 
         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>
\ No newline at end of file

src/views/sim/authSuccess.vue

 <template>
     <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_top">
                 <div><el-button @click="toBack">返回上一步</el-button>
                 </div>
-                <div class="content_time">118s</div>
-            </div>
                 <div class="auth_title">实名认证成功</div>
+            </div>
+
             <div class="auth_body">
                 <div>
 
@@ -43,7 +36,6 @@
     export default {
         data() {
             return {
-                navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
 
             }
         },
@@ -86,8 +78,8 @@
         width: 100%;
         display: flex;
         height: 50px;
-        align-items: center;
-        justify-content: space-between !important;
+        position: relative;
+        justify-content: center;
     }
 
     .auth_title {
@@ -157,54 +149,16 @@
         height: 34px;
         padding: 0;
         font-size: 14px;
-    }
 
-    ::v-deep .el-button--primary {
-        height: 50px;
     }
 
-
-    .phone_title {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 80px;
+    ::v-deep .auth_top .el-button {
+        position: absolute;
+        left: 0;
+        top: 0;
     }
 
-    .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;
+    ::v-deep .el-button--primary {
+        height: 50px;
     }
 </style>
\ No newline at end of file

src/views/sim/authentify.vue

 <template>
     <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_top">
                 <div><el-button @click="toBack">返回上一步</el-button>
                 </div>
                 <div class="auth_title">您可通过刷<span style="color: #5A8FF6;">
                         身份证、粤居码</span>任意一种进行实名认证</div>
-                <div class="content_time">118s</div>
             </div>
             <div class="auth_body">
                 <div class="auth_center">
@@ -54,7 +45,6 @@
     export default {
         data() {
             return {
-                navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
             }
         },
 
@@ -93,8 +83,9 @@
         width: 100%;
         display: flex;
         height: 50px;
-        align-items: center;
-        justify-content: space-between !important;
+        /* align-items: center; */
+        position: relative;
+        justify-content: center;
     }
 
     .auth_title {
@@ -169,53 +160,16 @@
         height: 34px;
         padding: 0;
         font-size: 14px;
-    }
 
-    ::v-deep .el-button--primary {
-        height: 50px;
     }
 
-    .phone_title {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 80px;
-    }
-
-    .phone_title_item {
-        display: flex;
-        margin-right: 26px;
-        align-items: center;
+    ::v-deep .auth_top .el-button {
+        position: absolute;
+        left: 0;
+        top: 0;
     }
 
-    .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;
+    ::v-deep .el-button--primary {
+        height: 50px;
     }
 </style>
\ No newline at end of file

src/views/sim/choose.vue

 <template>
     <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_first">
                 <div><el-button @click="toBack">返回上一步</el-button>
                 </div><span class="phone_text">选择套餐</span>
-                <div class="content_time">118s</div>
             </div>
             <div class="phone_list">
                 <div v-for="item in phoneList" :key="item.value" class=" phone_list_item">
@@ -36,7 +28,6 @@
         data() {
             return {
                 currentindex: null,
-                navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
                 phoneList: [{ value: 1, label: "card1.png" }, { value: 2, label: "card2.png" }, { value: 3, label: "card3.png" },
                 { value: 4, label: "card4.png" },]
             }
@@ -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 {
@@ -137,7 +85,8 @@
         height: 99px;
         display: flex;
         width: 100%;
-        justify-content: space-between;
+        position: relative;
+        justify-content: center;
     }
 
     .phone_text {
@@ -145,19 +94,11 @@
         font-size: 28px;
         font-weight: 500;
         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 {
         display: flex;
         flex-wrap: wrap;
@@ -191,6 +132,20 @@
         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 {
         height: 50px;
     }

src/views/sim/phone.vue

 <template>
     <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_first"><span class="phone_text">选择号码</span>
-                <div class="content_time">118s</div>
             </div>
             <div class="phone_list">
                 <div v-for="(item,index) in phoneList" :key="index"
@@ -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 {

src/views/sim/register.vue

+<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