feat: 个人信息页改造，我绑定的用户

src/pages/myInfo/my-info.vue

@@ -18,18 +18,38 @@
         <img :src="upLoadObj" @click="checkType" >
         <div class="sign">
           <span>{{ user_phone }}</span>
-          <div>
-            电子签
+          <div class="now-bind">
+            <!-- 电子签
             <p
               :class="[elecStatus ? 'across' : 'un-across']"
               @click="certification"
             >
               {{ elecStatusDesceibe }}
-            </p>
+            </p> -->
+
+            <span> {{nowBind.name ? `${nowBind.name} (当前)` : '未绑定'}}</span>
+            <div v-show="nowBind.name" @click="changeUser">切换</div>
           </div>
         </div>
       </div>
     </div>
+
+    <div class="bind-user">
+       <div class="box"> 
+         <p class="title">我绑定的用户</p>
+         <div v-if="!bindUserList.length" class="no-user">暂无绑定用户,  <router-link to="/">去绑定~</router-link> </div>
+
+          <template v-else>
+            <div v-for="item of bindUserList" class="bind-item">
+              <p>{{item.name}}</p> 
+              <div>{{item.isPerson ? '个人认证通过' : '企业认证通过'}}</div>
+            </div>
+
+            <div class="more" @click="$router.push('/myBindUser')"> 更多操作 </div>
+          </template>
+       </div>
+    </div>
+
     <h-content class="my-content has-footer">
       <div class="content-top">
         <list-item :item-height="44" class="list">
@@ -135,7 +155,7 @@
           </item>
         </list-item>
         <div class="version">版本号:{{ currentVersion }}</div>
-        <button
+        <!-- <button
           v-if="!popSetect" v-show="user_bp_type !== 'MANAGER'"
           @click="approveBtn ? unBind() : changePageHead()"
         >
@@ -143,7 +163,7 @@
         </button>
         <button v-if="popSetect" v-show="user_bp_type !== 'MANAGER'" @click="popSetectBox = true">
           {{ description }}
-        </button>
+        </button> -->
       </div>
     </h-content>
     <role-switch
@@ -211,6 +231,21 @@ export default {
           bp_type_n: '重新选择用户类型',
         },
       ],
+
+      //绑定的用户列表
+      bindUserList: [
+        {
+          name: "上海汉得信息技术有限公司",
+          isPerson: false
+        },
+        {
+          name: "黄嘉娜",
+          isPerson: true
+        },
+      ], 
+      nowBind: {
+        name: '上海汉得信息技术有限公司'
+      },
     }
   },
   computed: {
@@ -304,6 +339,29 @@ export default {
     next()
   },
   methods: {
+    changeUser() {
+      this.hlsPopup.selectList({
+        list: [
+          {
+            code_name: '黄嘉娜',
+            code: '3'
+          },
+          {
+            code_name: '上海汉得信息技术有限公司',
+             code: '4'
+          },
+          {
+            code_name: 'xxxx有限责任公司',
+             code: '38'
+          },
+        ],
+        code: 'code',
+        object: {},
+        returnItem: (index, obj) => { 
+          this.nowBind = {name: obj.code_n}; 
+        },
+      })
+    },
     openTest () {
       // cordova.InAppBrowser.open('http://www.baidu.com', '_blank', 'location=yes')
       var date = '2019.11.23'
@@ -1110,7 +1168,7 @@ export default {
   .card-top {
     width: 330px;
     margin: 0 auto;
-    height: 170px;
+    height: 2.4rem;
     display: flex;
     align-items: center;
     .sign {
@@ -1125,7 +1183,7 @@ export default {
       div {
         display: flex;
         align-items: center;
-        margin-top: 20px;
+        margin-top: 10px;
         font-family: PingFangSC-Regular;
         font-size: 12px;
         color: #ffffff;
@@ -1151,6 +1209,28 @@ export default {
           background: #0523ce;
         }
       }
+
+      .now-bind {
+          display: flex;
+          min-width: 220px;
+          justify-content: space-between;
+          align-items: center;
+
+          span {
+            font-size: 85%; 
+            color: orange;
+            margin: 0;
+          }
+
+          div {
+            color: orange;
+            border: 1px solid orange;
+            padding: 2px 5px;
+            border-radius: 2px;
+            cursor: pointer;
+            margin: 0;
+          }
+      }
     }
     img {
       width: 59px;
@@ -1159,6 +1239,67 @@ export default {
       border: 1px solid #00469c;
     }
   }
+
+  .bind-user { 
+    background-color: #efefef;  
+    .box {
+      box-sizing: border-box;
+      width: 90%;
+      background-color: #fff;
+      margin: 0 auto;
+      transform: translateY(-12px);
+      min-height: 70px;
+      border-radius: 10px;
+      padding: 10px 10px 0 10px;
+    }
+    .title {
+      color: rgb(252, 205, 46);
+      font-size: 90%;
+      font-weight: 600;
+      margin-bottom: 10px;
+    }
+
+    .no-user { 
+      line-height: 50px;
+      text-align: center;
+      color: rgb(205, 209, 213);
+       font-size: 90%;
+
+      a {
+        text-decoration: underline;
+      }
+    }
+
+    .bind-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 30px;
+      font-size: 85%;
+      border-bottom: 1px solid rgb(242, 242, 242);
+      color: #333;
+      p { 
+      } 
+
+      div {
+        font-size: 75%;
+        border-radius: 3px;
+        border: 1px solid blue;
+        padding: 2px 3px;
+        color: blue
+      }
+    }
+
+    .more {
+      height: 31px;
+      color: rgb(213, 217, 224);
+      font-size: 85%;
+      text-align: center;
+      line-height: 31px;
+      font-weight: 600;
+    }
+  }
+
   .has {
     height: 206px;
   }

src/pages/myInfo/myBindUser.vue

+ <template>
+    <h-view id="my-bind-user" class="public-style" title="我绑定的用户">
+        <h-header class="bar-custom">
+            <div slot="left" class="h-header-btn">
+                <img src="@/assets/userBind/arrow.png" @click="$router.go(-1)" />
+            </div>
+            <div slot="center" class="top-word">我绑定的用户</div>
+        </h-header>
+
+        <scroll ref="scrollLists" :updateData="[prolists]" :pullUp="false">
+            <div class="scroll-box">
+                <div class="box" v-for="item of list" @click="doCheck(item.id)">
+                    <div class="name">
+                        <img v-if="item.person" src="../../assets/login/person.png" alt="自然人" />
+                        <img v-else src="../../assets/login/bank.png" alt="bank" />
+                        <span>{{ item.name }}</span>
+                    </div>
+                    <div class="flag">
+                         <div>{{item.person ? '个人认证通过': '企业认证通过'}}</div>
+                         <div :class="['normal',{unbind: item.status === '× 解绑'}]">{{item.status}}</div>
+                    </div>
+                </div>
+            </div>
+        </scroll>
+
+        <button class="submit" @click="$router.push('/user-bind')">
+            <img src="../../assets/login/addUser.png" alt="自然人" /> 添加新用户
+        </button>
+    </h-view>
+</template>
+
+<script> 
+
+export default {
+    name: 'myBindUser',
+    data() {
+        return {
+            prolists: [],
+
+            list: [
+                {
+                    id: 1,
+                    name: '上海汉得信息技术股份有限公司',
+                    checked: false,
+                    person: true,
+                    status: '审批中'
+                },
+                {
+                    id: 2,
+                    name: '上海汉得信息技术股份有限公司',
+                    checked: false,
+                    person: true,
+                     status: '审批拒绝'
+                },
+                {
+                    id: 3,
+                    name: '上海汉得信息技术股份有限公司',
+                    checked: false,
+                    person: true,
+                    status: '× 解绑'
+                },
+                {
+                    id: 4,
+                    name: '上海汉得信息技术股份有限公司',
+                    checked: false,
+                    person: false,
+                    status: '× 解绑'
+                },
+            ]
+        }
+    }, 
+    beforeRouteEnter(to, from, next) {
+        next(vm => {
+        })
+    },
+    methods: {
+        doCheck(id) {
+            this.list = this.list.map(item => {
+                item.checked = item.id == id;
+                return item;
+            })
+        }, 
+    },
+}
+</script>
+
+<style lang='less'>
+#my-bind-user{
+     background-color: rgb(242, 242, 242);
+    .scrollContent {
+        background-color: rgb(242, 242, 242);
+    }
+
+    .scroll-box {
+        padding: 8px;
+
+        .box {
+            display: flex;
+            justify-content: space-between;
+
+            width: 99.9%;
+            height: 60px;
+            padding: 0 15px 0 10px;
+            background-color: #fff;
+            border-radius: 8px;
+            line-height: 60px;
+            font-size: 80%;
+            color: rgb(58, 58, 58);
+            margin-bottom: 0.15rem;
+
+            img {
+                height: 20px;
+                vertical-align: text-bottom;
+            }
+        }
+    }
+
+    .flag {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        padding-left: 10px;
+        border-left: 1px transparent solid ;
+        border-image: linear-gradient(to bottom, #fff 10%, #f2f2f2 10% , #f2f2f2 50%,  #f2f2f2 90%, #fff 90%) 1 10;
+
+        & > div {
+            height: 20px;
+            border-radius: 3px;
+            border: 1px solid #1d3fff;
+            line-height: 19.5px;
+            text-align: center;
+            font-size:  .12rem;
+            padding: 0 4px;
+            color: #1d3fff; 
+        }
+
+        .normal {
+            background-color: #1d3fff;
+            color: white;
+        }
+
+        .unbind {
+            background-color: rgb(255, 206, 206);
+            color: red;
+             border: 1px solid rgb(255, 206, 206);
+        }
+    }
+
+    .submit {
+        position: absolute;
+        box-sizing: border-box;
+        height: 35px;
+        bottom: 10px;
+        left: 50%;
+        transform: translateX(-50%);
+        color: white;
+        padding: 6px 40px;
+        font-size: 85%;
+        border-radius: 20px;
+        background-color: #1d3fff;
+        img {
+            height: 18px;
+            vertical-align: text-bottom;
+        }
+    } 
+
+    .content {
+        position: absolute;
+        top: 0;
+    }
+
+    .scrollContent {
+        //padding-top: 1.92rem;
+        padding-bottom: 20px;
+    }
+}
+
+.platform-ios {
+    #query {
+        .scrollContent {
+            padding-top: 2.32rem;
+        }
+    }
+}
+
+// iPhoneX适配
+@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
+    .platform-ios {
+        #query {
+            .scrollContent {
+                padding-top: 2.72rem;
+            }
+        }
+    }
+
+    #my-bind-user .submit {
+        bottom: 44px;
+    }
+}
+
+// iPhoneXR适配
+@media (device-width: 414px) and (device-height: 896px) {
+    .platform-ios {
+        #query {
+            .scrollContent {
+                padding-top: 2.72rem;
+            }
+        }
+    }
+
+    #my-bind-user .submit {
+        bottom: 44px;
+    }
+}
+</style>

src/router/index.js

@@ -23,6 +23,7 @@ const Location = resolve => require.ensure([], () => { resolve(require('@/pages/
 
 // 我的
 const MyInfo = resolve => require.ensure([], () => { resolve(require('@/pages/myInfo/my-info')) }, 'myInfo')
+const myBindUser = resolve => require.ensure([], () => { resolve(require('@/pages/myInfo/myBindUser')) }, 'myInfo')
 const Certification = resolve => require.ensure([], () => { resolve(require('@/pages/myInfo/certification')) }, 'myInfo')
 // 我的收藏
 const MyProductList = resolve => require.ensure([], () => { resolve(require('@/pages/myProductCollection/my-product-list')) }, 'myProductCollection')
@@ -180,6 +181,8 @@ export default new Router({
     },
     // 待办审核
     {path: '/ToDoList', component: ToDoList, name: 'ToDoList', meta: {keepAlive: true}},
+    // 我绑定的用户
+    {path: '/myBindUser', component: myBindUser, name: 'myBindUser', meta: {keepAlive: true}},
     // 资讯动态
     {path: '/NewsList', component: NewsList, name: 'NewsList', meta: {keepAlive: true}},
     {path: '/NewsInfo', component: NewsInfo, name: 'NewsInfo', meta: {keepAlive: true}},