add:延期申请开发

src/pages/extensionApply/tab.vue

+<!--
+ * @Description: In User Settings Edit
+ * @Author: your name
+ * @Date: 2019-09-25 11:10:34
+ * @LastEditTime: 2019-09-25 21:05:24
+ * @LastEditors: Please set LastEditors
+ -->
+<template>
+  <div class="tab-style">
+    <div :class="{'tab-content-bg':tabNum == 0}" class="tab-content" @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?signed:sign"><span
+      :class="{'colored':tabNum == 0}">{{ title.first }}</span></div>
+    <div :class="{'tab-content-bg':tabNum == 1}" class="tab-content" @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?finished:finish"><span
+      :class="{'colored':tabNum == 1}">{{ title.second }}</span></div>
+  </div>
+</template>
+<script>
+import signed from '@/assets/contractStart/noY.png'
+import finished from '@/assets/contractStart/confirmY.png'
+import sign from '@/assets/contractStart/noN.png'
+import finish from '@/assets/contractStart/confirmN.png'
+
+export default {
+  props: {
+    title: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+  },
+  data () {
+    return {
+      tabNum: 0,
+      signed: signed,
+      finished: finished,
+      sign: sign,
+      finish: finish,
+    }
+  },
+  methods: {
+    sendTabNum () {
+      this.$emit('getTabNum', this.tabNum)
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+  .tab-style {
+    position: relative;
+    z-index: 50;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    padding-top: 12px;
+    padding-bottom: 8px;
+    align-items: center;
+    box-shadow: 0 2px 3px 0 rgba(220, 220, 221, 0.50);
+    .tab-content {
+      display: block;
+      width: 45.9%;
+      height: 32px;
+      background: rgba(220, 220, 221, 0.26);
+      border-radius: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      span {
+        margin-left: 2%;
+        font-size: 14px;
+        color: #383F45;
+        font-weight: 600;
+        font-family: PingFangSC-Semibold;
+      }
+
+      .colored {
+        color: #1D3FFF
+      }
+    }
+    .tab-content-bg{
+      background: rgba(0,70,156,0.10);
+    }
+    img {
+        width:16px;
+      height: 16px;
+      // margin-right:5.7px;
+    }
+    .tab-content:nth-of-type(2) {
+      margin-left: 7px;
+    }
+  }
+</style>

src/pages/functionCenter/function-list.vue

@@ -98,6 +98,15 @@
             <img src="@/assets/functionCenter/in@2x.png" alt="">
           </div>
         </div>
+        <div class="info-content">
+          <div class="add-name">
+            <img src="@/assets/functionCenter/car@2x.png" alt="">
+            <div class="name-title">延期申请</div>
+          </div>
+          <div class="add-content" @click="goExtensionApply">
+            <img src="@/assets/functionCenter/in@2x.png" alt="">
+          </div>
+        </div>
         <!-- <div class="info-content">
           <div class="add-name">
             <img src="@/assets/functionCenter/con-sign@2x.png" alt="">
@@ -606,6 +615,21 @@ export default {
         hlsPopup.showLongCenter('请先进行用户绑定')
       }
     },
+    // 进入延期申请
+    goExtensionApply () {
+      let vm = this
+      if (vm.bp_id) {
+        if (vm.user_bp_type === 'OFFICE' || vm.user_bp_type === 'FACTORY') {
+          hlsPopup.showLongCenter('您当前角色非承租人或担保人或经销商，无法使用该功能！')
+        } else {
+          vm.$router.push({
+            name: 'extensionApplyList',
+          })
+        }
+      } else {
+        hlsPopup.showLongCenter('请先进行用户绑定')
+      }
+    },
   },
 }
 </script>
@@ -844,8 +868,8 @@ export default {
       border-radius: 0.4rem;
       width: 80%;
       margin-left: 10%;
-      // margin-top: 10.8rem;
-      margin-top: 9.8rem;
+       margin-top: 10.8rem;
+      //margin-top: 9.8rem;
       margin-bottom: 1.5rem;
       //  position: absolute;
       // z-index: 2;

src/router/index.js

@@ -165,6 +165,9 @@ const overTimeQueryDetail = resolve => require.ensure([], () => { resolve(requir
 const overTimeApplyList = resolve => require.ensure([], () => { resolve(require('@/pages/overTimeApply/list')) }, 'overTimeApply')
 const overTimeApplyDetail = resolve => require.ensure([], () => { resolve(require('@/pages/overTimeApply/detail')) }, 'overTimeApply')
 
+// 延期申请
+const extensionApplyList = resolve => require.ensure([], () => { resolve(require('@/pages/extensionApply/apply-list')) }, 'extensionApply')
+const extensionApplyDetail = resolve => require.ensure([], () => { resolve(require('@/pages/extensionApply/apply-detail')) }, 'extensionApply')
 Vue.use(Router)
 
 export default new Router({
@@ -431,6 +434,18 @@ export default new Router({
       name: 'overTimeApplyDetail',
       meta: { keepAlive: false },
     },
+    {
+      path: '/extension-apply-list',
+      component: extensionApplyList,
+      name: 'extensionApplyList',
+      meta: { keepAlive: false },
+    },
+    {
+      path: '/extension-apply-detail',
+      component: extensionApplyDetail,
+      name: 'extensionApplyDetail',
+      meta: { keepAlive: false },
+    },
   ],
   scrollBehavior (to, from, savedPosition) {
     if (to.hash) {