Skip to content

S
sim
Commit 4d47d1fa authored by limeimei's avatar limeimei
Browse files
Options

1

parent 06f6682b
Pipeline #1932 canceled with stages
      Show whitespace changes
      Inline Side-by-side
      Showing with 875 additions and 27 deletions
      src/router/index.js
      View file @ 4d47d1fa
      ......@@ -21,6 +21,9 @@ import Card from "../views/visitor/card.vue";
      import Send from "../views/visitor/send.vue";
      import Sim from "../views/sim/index.vue";
      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";
      Vue.use(VueRouter);
      ......@@ -186,7 +189,31 @@ const routes = [
      name: "phone",
      component: Phone,
      meta: {
      title: "已预约",
      title: "自助办理sim卡系统",
      },
      },
      {
      path: "/choose",
      name: "choose",
      component: Choose,
      meta: {
      title: "自助办理sim卡系统",
      },
      },
      {
      path: "/auth",
      name: "auth",
      component: Authentify2,
      meta: {
      title: "自助办理sim卡系统",
      },
      },
      {
      path: "/realname",
      name: "realname",
      component: AuthSuccess2,
      meta: {
      title: "实名认证",
      },
      },
      ],
      ......
      src/views/common.vue
      View file @ 4d47d1fa
      ......@@ -73,6 +73,9 @@
      .common_btn {
      margin-left: 31px;
      margin-right: auto;
      font-size: 16px;
      }
      ......@@ -80,6 +83,8 @@
      margin-right: 50%;
      margin-left: auto;
      font-size: 22px;
      }
      .content_view {
      ......
      src/views/common2.vue
      View file @ 4d47d1fa
      ......@@ -27,7 +27,7 @@
      $route: {
      // $route可以用引号，也可以不用引号 监听的对象
      handler(to) {
      this.title = to.params.title
      this.title = to.meta.title
      },
      },
      ......@@ -44,7 +44,7 @@
      <style scoped>
      .wrapper {
      background: #F0F2F8;
      /* height: 1018px; */
      height: 1018px;
      box-sizing: border-box;
      }
      ......@@ -66,11 +66,14 @@
      display: flex;
      color: white;
      padding-left: 31px;
      box-sizing: border-box;
      }
      .common_btn {
      margin-left: 31px;
      margin-right: auto;
      font-size: 16px;
      }
      ......@@ -78,6 +81,7 @@
      margin-right: 50%;
      margin-left: auto;
      font-size: 22px;
      }
      .content_view {
      ......
      src/views/sim/authSuccess.vue 0 → 100644
      View file @ 4d47d1fa
      <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 class="auth_body">
      <div>
      <div class="auth_center">
      <img src="@/assets/visitor/camera.png" class="auth_img">
      <div class="auth_right">
      <div>姓名：<span style="color: #666666;">王大锤</span></div>
      <div>性别：<span style="color: #666666;">女</span></div>
      <div>民族：<span style="color: #666666;">汉</span></div>
      <div>出生：<span style="color: #666666;">1994年10月10日</span></div>
      <div>住址：<span style="color: #666666;">广东省广州市黄浦区黄埔大道129号</span></div>
      <div>身份证号码：<span style="color: #666666;">362421********5627</span></div>
      </div>
      </div>
      <div><el-button type="primary" @click="toNext">下一步</el-button>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>
      </template>
      <script>
      export default {
      data() {
      return {
      navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
      }
      },
      created() {
      },
      methods: {
      toBack() {
      this.$router.go(-1);
      },
      toNext() {
      this.$router.push({ name: "card", params: { title: '发放访客卡', } });
      },
      }
      }
      </script>
      <style scoped>
      .reserved {
      width: 100%;
      padding: 0 36px;
      /* height: calc(100vh - 150px); */
      box-sizing: border-box;
      }
      .auth_content {
      width: 100%;
      background: #FFFFFF;
      border-radius: 14px;
      height: 835px;
      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: #000000;
      font-size: 28px;
      width: 100%;
      text-align: center;
      }
      .auth_body {
      width: 100%;
      height: 90%;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      }
      .auth_center {
      display: flex;
      }
      .auth_img {
      width: 167px;
      height: 194px;
      }
      .auth_right {
      display: flex;
      flex-direction: column;
      margin-left: 40px;
      line-height: 40px;
      text-align: left;
      font-size: 20px;
      margin-top: -20px;
      }
      .auth_img_left {
      width: 64px;
      height: 12px;
      margin-right: 9px;
      margin-top: 7px;
      }
      .auth_right {
      display: flex;
      margin-bottom: 62px;
      }
      .auth_span {
      font-size: 20px;
      }
      .auth_span_a {
      color: #666666;
      line-height: 18px;
      font-size: 16px;
      }
      ::v-deep .el-button {
      width: 94px;
      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;
      }
      .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>
      \ No newline at end of file
      src/views/sim/authentify.vue 0 → 100644
      View file @ 4d47d1fa
      <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">
      <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">身份证</el-button>
      <el-button type="primary">粤居码</el-button>
      </div>
      </div>
      </div>
      </div>
      </div>
      </template>
      <script>
      export default {
      data() {
      return {
      navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
      }
      },
      created() {
      },
      methods: {
      toBack() {
      this.$router.go(-1);
      },
      }
      }
      </script>
      <style scoped>
      .reserved {
      width: 100%;
      padding: 0 36px;
      /* height: 1018px; */
      box-sizing: border-box;
      }
      .auth_content {
      width: 100%;
      background: #FFFFFF;
      border-radius: 14px;
      height: 835px;
      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: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      }
      .auth_center {
      display: flex;
      }
      .auth_img {
      width: 386.54px;
      height: 287.18px;
      }
      .auth_center_right {
      display: flex;
      flex-direction: column;
      margin-top: 38px;
      }
      .auth_img_left {
      width: 64px;
      height: 12px;
      margin-right: 9px;
      margin-top: 7px;
      }
      .auth_right {
      display: flex;
      margin-bottom: 62px;
      }
      .auth_span {
      font-size: 20px;
      }
      .auth_span_a {
      color: #666666;
      line-height: 18px;
      font-size: 16px;
      }
      .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;
      }
      .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;
      }
      </style>
      \ No newline at end of file
      src/views/sim/choose.vue 0 → 100644
      View file @ 4d47d1fa
      <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">
      <img src="@/assets/sim/check.png" class="no_check" @click="chooseItem(item.value)"
      v-if="currentindex==item.value">
      <img src="@/assets/sim/nocheck.png" class="no_check" @click="chooseItem(item.value)" v-else>
      <img :src="require('@/assets/sim/'+item.label)" class="list_item_img">
      </div>
      </div>
      <el-button type="primary" @click="toNext">下一步</el-button>
      </div>
      </div>
      </template>
      <script>
      // @ is an alias to /src
      export default {
      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" },]
      }
      },
      created() {
      },
      methods: {
      toBack() {
      this.$router.go(-1);
      },
      toNext() {
      this.$router.push({ name: 'auth' });
      },
      chooseItem(idx) {
      this.currentindex = idx
      },
      }
      }
      </script>
      <style scoped>
      .standby {
      height: 100%;
      width: 100%;
      position: relative;
      padding: 0 36px;
      box-sizing: border-box;
      }
      .phone {
      width: 100%;
      min-height: 818px;
      background: #FFFFFF;
      border-radius: 14px;
      opacity: 1;
      padding: 30px;
      box-sizing: border-box;
      text-align: center;
      }
      .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 {
      width: 44.81px;
      height: 64.16px;
      }
      .phone_first {
      height: 99px;
      display: flex;
      width: 100%;
      justify-content: space-between;
      }
      .phone_text {
      font-size: 28px;
      font-weight: 500;
      color: #000000;
      }
      .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;
      min-height: 471px;
      justify-content: space-between;
      box-sizing: border-box;
      /* align-content: space-between; */
      }
      .phone_list_item {
      align-items: center;
      margin: 0 100px 60px 0;
      display: flex;
      }
      .list_item_img {
      width: 454px;
      height: 140px;
      margin-left: 30px;
      }
      ::v-deep .el-button {
      width: 94px;
      height: 34px;
      padding: 0;
      font-size: 14px;
      }
      ::v-deep .el-button--primary {
      height: 50px;
      }
      .no_check {
      width: 30px;
      height: 30px;
      }
      </style>
      \ No newline at end of file
      src/views/sim/phone.vue
      View file @ 4d47d1fa
      <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"
      :class=" [index==currentindex?'item_active list_item_active phone_list_item':'phone_list_item']"
      @click="chooseItem(index)">{{item.label}}</div>
      </div>
      <el-button type="primary" @click="toNext">下一步</el-button>
      </div>
      </div>
      </template>
      <script>
      // @ is an alias to /src
      export default {
      data() {
      return {
      currentindex: null,
      navList: ['选择号码', '选择套餐', '实名认证', '订单支付', '发放SIM卡'],
      phoneList: [{ value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
      { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
      { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
      { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
      { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
      { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
      { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
      { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
      { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
      { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
      { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },
      { value: 0, label: "172-0728-2374" }, { value: 0, label: "172-0728-2374" },]
      }
      },
      created() {
      },
      methods: {
      toNext(name, type) {
      this.$router.push({ name: 'choose' });
      },
      chooseItem(idx) {
      this.currentindex = idx
      },
      }
      }
      </script>
      <style scoped>
      .standby {
      height: 100%;
      width: 100%;
      position: relative;
      padding: 0 36px;
      box-sizing: border-box;
      }
      .phone {
      width: 100%;
      min-height: 818px;
      background: #FFFFFF;
      border-radius: 14px;
      opacity: 1;
      padding: 30px;
      box-sizing: border-box;
      text-align: center;
      }
      .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 {
      width: 44.81px;
      height: 64.16px;
      }
      .phone_first {
      height: 99px;
      display: flex;
      width: 100%;
      }
      .phone_text {
      font-size: 28px;
      font-weight: 500;
      color: #000000;
      margin-left: 45%;
      }
      .content_time {
      width: 50px;
      height: 50px;
      background: #FFFFFF;
      opacity: 1;
      border: 3px solid #5A8FF6;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      margin: 0 0 0 auto;
      }
      .phone_list {
      display: flex;
      flex-wrap: wrap;
      min-height: 471px;
      align-content: start;
      }
      .phone_list_item {
      width: 166px;
      height: 56px;
      background: #F0F0F0;
      border-radius: 4px 4px 4px 4px;
      opacity: 1;
      margin: 0 30px 25px 0;
      text-align: center;
      font-weight: 500;
      color: #666666;
      font-size: 18px;
      line-height: 56px;
      cursor: pointer;
      }
      .list_item_active {
      color: #FFFFFF;
      }
      ::v-deep .el-button {
      width: 94px;
      height: 34px;
      padding: 0;
      font-size: 14px;
      }
      ::v-deep .el-button--primary {
      height: 50px;
      }
      </style>
      \ No newline at end of file
      src/views/visitor/authentify.vue
      View file @ 4d47d1fa
      ......@@ -36,7 +36,6 @@
      </div>
      <!-- <el-button type="primary" @click="toNext">下一步</el-button> -->
      </div>
      </div>
      </div>
      ......@@ -47,39 +46,17 @@
      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);
      },
      toNext() {
      this.$router.push({ name: "authentify", params: { title: '实名认证', } });
      },
      }
      }
      </script>
      ......
      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