'绑定查询功能'

src/pages/home.vue

@@ -54,6 +54,11 @@ export default {
           functionName: '用户绑定',
           functionState: 'UserBind',
         },
+        {
+          functionIcon: require('@/assets/intoApproval/introduce.png'),
+          functionName: '绑定查询',
+          functionState: 'NaturePersonReadOnly',
+        },
         {
           functionIcon: require('@/assets/intoApproval/introduce.png'),
           functionName: '进件审批',
@@ -81,14 +86,26 @@ export default {
       area: {},
       box1: {},
       box2: {},
-      searchInput: '',
+      user_bp_status: '',
+      user_bp_class: '',
+      bp_id: '',
     }
   },
   beforeCreate: function () {
   },
   created: function () {
-    this.imgList = [...functionState.bannerList]
+    /* this.imgList = [...functionState.bannerList]
     this.moduleSeparateList = [...functionState.moduleSeparateList]
+    this.userQuery() */
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      if (from.name === 'Login') {
+        vm.imgList = [...functionState.bannerList]
+        vm.moduleSeparateList = [...functionState.moduleSeparateList]
+        vm.userQuery()
+      }
+    })
   },
   updated: function () {
   },
@@ -102,8 +119,43 @@ export default {
       })
     },
     goFunctionHome (data) {
-      this.$router.push({
-        name: data.functionState,
+      if (data.functionState === 'NaturePersonReadOnly') {
+        if (this.user_bp_status === 'APPROVED' && this.user_bp_class === 'NP') {
+          this.$router.push({
+            name: 'NaturePersonReadOnly',
+            params: {
+              'bp_id': this.bp_id,
+            },
+          })
+        } else if (this.user_bp_status === 'APPROVED' && this.user_bp_class === 'ORG') {
+          this.$router.push({
+            name: 'EnterpriseReadOnly',
+            params: {
+              'bp_id': this.bp_id,
+            },
+          })
+        } else {
+          this.hlsPopup.showLongCenter('您的绑定申请还在流程中')
+        }
+      } else {
+        this.$router.push({
+          name: data.functionState,
+        })
+      }
+    },
+    // 用户信息查询
+    userQuery () {
+      let vm = this
+      let url = $config.basePath + 'user_query'
+      let param = {
+        'phone': window.localStorage.getItem('user_phone'),
+      }
+      vm.$post(url, param).then(function (res) {
+        if (res.result === 'S') {
+          vm.user_bp_status = res.info.user_bp_status
+          vm.user_bp_class = res.info.user_bp_class
+          vm.bp_id = res.info.user_bp_id
+        }
       })
     },
   },

src/pages/pwd-forgotten.vue

@@ -12,7 +12,7 @@
         <item>
           <img slot="left-icon" src="../assets/login/phone.png" class="left-icon">
           <div slot="name" class="required">手机号码</div>
-          <div slot="content">{{ phone_number }}</div>
+          <input slot="content" v-model="phone_number" placeholder="请输入手机号码">
         </item>
         <item>
           <img slot="left-icon" src="../assets/login/phone_code.png" class="left-icon">
@@ -50,7 +50,7 @@
 export default {
   data () {
     return {
-      phone_number: window.localStorage.getItem('user_phone'),
+      phone_number: '',
       verifiedCode: '',
 
       username: '',

src/pages/userBind/npReadOnly/bankInfoReadOnly.vue

+<template>
+  <div id="bank-card-read">
+    <div class="info">
+      <div class="info-icon">
+        <img src="@/assets/userBind/info.png" >
+        <span>温馨提示</span>
+      </div>
+      <p>推荐使用农行卡，农行卡支付免收手续费!</p>
+    </div>
+    <div class="my-card">
+      <div class="top">
+        <div class="left">
+          <img src="@/assets/userBind/bankIcon.png" class="icon" >
+          <span class="top-word">
+            我的卡
+            <span class="sum">(共{{ bankList.length }}张)</span>
+          </span>
+        </div>
+      </div>
+      <div class="clear" />
+      <div class="card-content">
+        <ul>
+          <li v-for="(item,index) in bankList" :key="index" @click="sendFlag(item)">
+            <div class="slider">
+              <div
+                :style="'background-image: url('+ changeBgImg (item) +')'"
+                class="my-bank-card"
+              >
+                <div class="card-info">
+                  <span class="name">{{ item.bank_full_name }}</span>
+                  <span class="card-type">{{ item.bank_card_type }}</span>
+                  <span class="number">卡号</span>
+                  <span class="card-number">**** **** **** {{ selectLast (item) }}</span>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import backImg1 from '@/assets/userBind/nong.png'
+import backImg2 from '@/assets/userBind/unNong.png'
+export default {
+  props: {
+    'bankList': {
+      default: [],
+      type: Array,
+    },
+  },
+  data () {
+    return {
+      backImg: null,
+      showModalValue: true,
+    }
+  },
+  created () {
+  },
+  methods: {
+    sendFlag (bank) {
+      this.showModalValue = true
+      this.$emit('getInfo', this.showModalValue,bank)
+    },
+    selectLast (item) {
+      let num = item.bank_account_num
+      return num.substring(num.length - 4)
+    },
+    changeBgImg (item) {
+      if (item.bank_full_name === '中国农业银行') {
+        return backImg1
+      } else {
+        return backImg2
+      }
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+  #bank-card-read {
+      .info {
+        height: 70px;
+        background-color: rgba(142, 195, 30, 0.1);
+        .info-icon {
+          height: 20px;
+          padding-top: 20px;
+          display: flex;
+          align-items: center;
+          img {
+            width: 15.8px;
+            height: 15.8px;
+            margin-left: 17.1px;
+          }
+          span {
+            font-family: PingFangSC-Semibold;
+            font-size: 14px;
+            color: #8ec31e;
+            margin-left: 9px;
+            letter-spacing: 0.5px;
+            line-height: 20px;
+          }
+        }
+        p {
+          font-family: PingFangSC-Regular;
+          font-size: 13px;
+          color: #656464;
+          width: 310px;
+          margin-left: 42px;
+          letter-spacing: 0.4px;
+          line-height: 18px;
+          margin-top: 8px;
+        }
+      }
+      .my-card {
+        .top {
+          width: 320px;
+          margin: 0 auto;
+          margin-top: 13px;
+          .left {
+            height: 32px;
+            display: flex;
+            align-items: center;
+            float: left;
+            .icon {
+              width: 18px;
+              height: 20px;
+              margin-right: 4px;
+            }
+            .top-word {
+              font-family: PingFangSC-Semibold;
+              font-size: 15px;
+              color: #00469c;
+              letter-spacing: 0.46px;
+              .sum {
+                font-family: PingFangSC-Semibold;
+                font-size: 15px;
+                color: #4d5d6c;
+                letter-spacing: 0.46px;
+              }
+            }
+          }
+          .icon-right {
+            width: 34px;
+            height: 34px;
+            float: right;
+          }
+        }
+        .clear {
+          clear: both;
+        }
+        .card-content {
+          width: 350px;
+          padding-left: 28px;
+          overflow: hidden;
+          margin-top: 16px;
+          li {
+            margin-bottom: 10px;
+            .slider {
+              height: 100%;
+              //margin-left: -14px;
+            }
+          }
+          .my-bank-card {
+            width: 320px;
+            height: 190px;
+            box-shadow: 0 5px 20px 0 rgba(101, 101, 101, 0.25);
+            border-radius: 6px;
+            background-size: 320px 190px;
+            .card-info {
+              font-family: PingFangSC-Medium;
+              color: #ffffff;
+              margin-left: 18px;
+              padding-top: 15px;
+              .name,
+              .card-type {
+                font-size: 16px;
+                letter-spacing: 5.5px;
+                line-height: 24px;
+              }
+              .card-type {
+                display: block;
+                margin-top: 9px;
+              }
+              .number {
+                font-size: 12px;
+                letter-spacing: 0;
+                line-height: 16px;
+                margin-top: 33px;
+                display: block;
+                margin-top: 33px;
+              }
+              .card-number {
+                display: block;
+                font-family: Avenir-Heavy;
+                font-size: 16px;
+                color: #ffffff;
+                letter-spacing: 6px;
+                line-height: 24px;
+              }
+            }
+          }
+        }
+      }
+      .swipeout-list .item .function {
+        left: 330px;
+        border-radius: 6px;
+        width: 54px;
+        height: 190px;
+        background: url("../../../assets/userBind/delete.png") 16px 84.9px #fde5e8
+        no-repeat;
+        background-size: 20px 20px;
+      }
+    }
+</style>

src/pages/userBind/npReadOnly/invoiceInfoReadOnly.vue

+<template>
+  <list-item :item-height="44">
+    <item :showArrow="true">
+      <div slot="name">纳税人类型</div>
+      <div slot="content">{{baseInfo.taxpayer_type}}</div>
+    </item>
+    <item :showArrow="true">
+      <div slot="name">发票类型</div>
+      <div slot="content">{{baseInfo.invoice_kind}}</div>
+    </item>
+    <item>
+      <div slot="name">发票抬头</div>
+      <div slot="content">{{baseInfo.invoice_title}}</div>
+    </item>
+    <item>
+      <div slot="name">发票地址及电话</div>
+      <div slot="content">{{baseInfo.invoice_bp_address_phone_num}}</div>
+    </item>
+    <item>
+      <div slot="name">发票开户行及账号</div>
+      <div slot="content">{{baseInfo.invoice_bp_bank_account}}</div>
+    </item>
+    <item>
+      <div slot="name">纳税人识别号</div>
+      <div slot="content">{{baseInfo.organization_code}}</div>
+    </item>
+  </list-item>
+</template>
+<script>
+export default {
+  props:['baseInfo'],
+  data () {
+    return {
+
+    }
+  },
+  created () {
+
+  },
+  updated () {
+
+  },
+  methods: {
+
+  },
+}
+</script>
+<style scoped>
+input::placeholder{
+    color: #B4B4B5;
+}
+</style>

src/pages/userBind/orgReadOnly/bankInfoReadOnly.vue

+
+<template>
+  <div id="bank-card">
+    <div class="info">
+      <div class="info-icon">
+        <img src="@/assets/userBind/info.png" >
+        <span>温馨提示</span>
+      </div>
+      <p>推荐使用农行卡，农行卡支付免收手续费!</p>
+    </div>
+    <div class="my-card">
+      <div class="top">
+        <div class="left">
+          <img src="@/assets/userBind/bankIcon.png" class="icon" >
+          <span class="top-word">
+            我的卡
+            <span class="sum">(共{{ bankList.length }}张)</span>
+          </span>
+        </div>
+      </div>
+      <div class="clear" />
+      <div class="card-content">
+        <ul>
+          <li v-for="(item,index) in bankList" :key="index" @click="sendFlag(item)">
+            <div class="slider">
+              <div
+                :style="'background-image: url('+ changeBgImg (item) +')'"
+                class="my-bank-card"
+              >
+                <div class="card-info">
+                  <span class="name">{{ item.bank_full_name }}</span>
+                  <span class="card-type">{{ item.bank_card_type }}</span>
+                  <span class="number">卡号</span>
+                  <span class="card-number">**** **** **** {{ selectLast (item) }}</span>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import backImg1 from '@/assets/userBind/nong.png'
+import backImg2 from '@/assets/userBind/unNong.png'
+export default {
+  props: {
+    'bankList': {
+      default: [],
+      type: Array,
+    },
+  },
+  data () {
+    return {
+      backImg: null,
+      showModalValue: true,
+    }
+  },
+  methods: {
+    sendFlag (bank) {
+      this.showModalValue = true
+      this.$emit('getInfo', this.showModalValue,bank)
+    },
+    changeBgImg (item) {
+      if (item.bank_full_name === '中国农业银行') {
+        return backImg1
+      } else {
+        return backImg2
+      }
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+  #bank-card {
+      .info {
+        height: 70px;
+        background-color: rgba(142, 195, 30, 0.1);
+        .info-icon {
+          height: 20px;
+          padding-top: 20px;
+          display: flex;
+          align-items: center;
+          img {
+            width: 15.8px;
+            height: 15.8px;
+            margin-left: 17.1px;
+          }
+          span {
+            font-family: PingFangSC-Semibold;
+            font-size: 14px;
+            color: #8ec31e;
+            margin-left: 9px;
+            letter-spacing: 0.5px;
+            line-height: 20px;
+          }
+        }
+        p {
+          font-family: PingFangSC-Regular;
+          font-size: 13px;
+          color: #656464;
+          width: 310px;
+          margin-left: 42px;
+          letter-spacing: 0.4px;
+          line-height: 18px;
+          margin-top: 8px;
+        }
+      }
+      .my-card {
+        .top {
+          width: 320px;
+          margin: 0 auto;
+          margin-top: 13px;
+          .left {
+            height: 32px;
+            display: flex;
+            align-items: center;
+            float: left;
+            .icon {
+              width: 18px;
+              height: 20px;
+              margin-right: 4px;
+            }
+            .top-word {
+              font-family: PingFangSC-Semibold;
+              font-size: 15px;
+              color: #00469c;
+              letter-spacing: 0.46px;
+              .sum {
+                font-family: PingFangSC-Semibold;
+                font-size: 15px;
+                color: #4d5d6c;
+                letter-spacing: 0.46px;
+              }
+            }
+          }
+          .icon-right {
+            width: 34px;
+            height: 34px;
+            float: right;
+          }
+        }
+        .clear {
+          clear: both;
+        }
+        .card-content {
+          width: 350px;
+          padding-left: 28px;
+          overflow: hidden;
+          margin-top: 16px;
+          li {
+            margin-bottom: 10px;
+            .slider {
+              height: 100%;
+              //margin-left: -14px;
+            }
+          }
+          .my-bank-card {
+            width: 320px;
+            height: 190px;
+            box-shadow: 0 5px 20px 0 rgba(101, 101, 101, 0.25);
+            border-radius: 6px;
+            background-size: 320px 190px;
+            .card-info {
+              font-family: PingFangSC-Medium;
+              color: #ffffff;
+              margin-left: 18px;
+              padding-top: 15px;
+              .name,
+              .card-type {
+                font-size: 16px;
+                letter-spacing: 5.5px;
+                line-height: 24px;
+              }
+              .card-type {
+                display: block;
+                margin-top: 9px;
+              }
+              .number {
+                font-size: 12px;
+                letter-spacing: 0;
+                line-height: 16px;
+                margin-top: 33px;
+                display: block;
+                margin-top: 33px;
+              }
+              .card-number {
+                display: block;
+                font-family: Avenir-Heavy;
+                font-size: 16px;
+                color: #ffffff;
+                letter-spacing: 6px;
+                line-height: 24px;
+              }
+            }
+          }
+        }
+      }
+      .swipeout-list .item .function {
+        left: 330px;
+        border-radius: 6px;
+        width: 54px;
+        height: 190px;
+        background: url("../../../assets/userBind/delete.png") 16px 84.9px #fde5e8
+        no-repeat;
+        background-size: 20px 20px;
+      }
+    }
+</style>

src/pages/userBind/orgReadOnly/invoiceInfoReadOnly.vue

+
+<template>
+  <list-item :item-height="44">
+    <item :showArrow="true">
+      <div slot="name" class="font-color">纳税人类型</div>
+      <div slot="content">{{baseInfo.taxpayer_type}}</div>
+    </item>
+    <item :showArrow="true">
+      <div slot="name" class="font-color">发票类型</div>
+      <div slot="content">{{baseInfo.invoice_kind_n}}</div>
+    </item>
+    <item>
+      <div slot="name" class="font-color">发票抬头</div>
+      <div slot="content">{{baseInfo.invoice_title}}</div>
+    </item>
+    <item>
+      <div slot="name" class="font-color">发票地址及电话</div>
+      <div slot="content">{{baseInfo.invoice_bp_address_phone_num}}</div>
+    </item>
+    <item>
+      <div slot="name" class="font-color">发票开户行及账号</div>
+      <div slot="content">{{baseInfo.invoice_bp_bank_account}}</div>
+    </item>
+    <item>
+      <div slot="name" class="font-color">纳税人识别号</div>
+      <div slot="content">{{baseInfo.organization_code}}</div>
+    </item>
+  </list-item>
+</template>
+<script>
+export default {
+  name: 'InvoiceInfo',
+  props: ['baseInfo'],
+  data () {
+    return {}
+  },
+  watch: {
+
+  },
+  created () {
+
+  },
+  updated () {
+
+  },
+  methods: {
+
+  },
+}
+</script>
+<style scoped>
+input::placeholder{
+    color: #B4B4B5;
+}
+.font-color {
+        color: #656464;
+    }
+</style>

src/router/index.js

@@ -26,7 +26,9 @@ import HlsPopup from '@/pages/hlsPopup'
 import UserBind from '@/pages/userBind/userBind'
 import NaturePerson from '@/pages/userBind/np/naturePerson'
 import Enterprise from '@/pages/userBind/org/enterprise'
-
+// 用户绑定查询
+import NaturePersonReadOnly from '@/pages/userBind/npReadOnly/naturePersonReadOnly'
+import EnterpriseReadOnly from '@/pages/userBind/orgReadOnly/enterpriseReadOnly'
 // 进件审批
 import Base from '@/pages/intoApproval/intoApproval/base'
 import IntoList from '@/pages/intoApproval/intoList'
@@ -108,6 +110,9 @@ export default new Router({
     {path: '/user-bind', component: UserBind, name: 'UserBind', meta: {keepAlive: false}},
     {path: '/nature-person', component: NaturePerson, name: 'NaturePerson', meta: {keepAlive: false}},
     {path: '/enterprise', component: Enterprise, name: 'Enterprise', meta: {keepAlive: false}},
+    // 用户绑定查询
+    {path: '/nature-person-readonly', component: NaturePersonReadOnly, name: 'NaturePersonReadOnly', meta: {keepAlive: false}},
+    {path: '/enterprise-readonly', component: EnterpriseReadOnly, name: 'EnterpriseReadOnly', meta: {keepAlive: false}},
     // 进件审批
     {path: '/base', component: Base, name: 'Base', meta: {keepAlive: false}},
     {path: '/refund', component: Refund, name: 'Refund', meta: {keepAlive: false}},