1.名片夹页面 2.企业认证页面

assets/css/otherpage/user/userCard.scss

@@ -7,6 +7,7 @@
   overflow-y: scroll;
   background-color: #fff;
   margin: 0;
+  -webkit-overflow-scrolling: touch;
 
   position: relative;
 
@@ -33,7 +34,7 @@
 
       &:last-child {
         .right {
-          border-bottom: 0;
+          //border-bottom: 0;
         }
       }
 
@@ -80,6 +81,21 @@
     }
   }
 
+  .noneList {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+
+    p {
+      height: pxtovw(21);
+      font-size: pxtovw(15);
+      color: #999;
+      line-height: pxtovw(21);
+    }
+  }
+
   .popUp {
     position: absolute;
     z-index: 100;
@@ -192,3 +208,29 @@
   }
 
 }
+
+
+.page-infinite-loading {
+  text-align: center;
+  height: pxtovw(50);
+  line-height: pxtovw(50);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  span {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: pxtovw(5);
+  }
+}
+
+.pageLoading {
+  width: 100vw;
+  height: 100vh;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

pages/otherpage/companyVerifyInput/index.vue

@@ -50,13 +50,6 @@
 
 <script>
 
-  // name: "有人中敏"
-  // register_number: "55666红"
-  // phone: "18372513272"
-  // member_roles: []
-  // is_paid: "1"
-  // price: "58"
-  // photo_url
   export default {
     name: 'companyVerifyInput',
     data() {
@@ -164,10 +157,10 @@
           let data = res.data
           if (data.status === 1) {
             //跳转到支付58元钱，之后提交
-            if (Number(this.dataInfo.status === 0)) {
+            if (Number(this.dataInfo.need_pay) === 1) {
               let appUrl = "proginn://pay?product_type=5"
               let url = '/pay?product_type=5'
-              if (!this.deviceType.app) {
+              if (!this.$deviceType.app) {
                 window.open(url, '_black')
               } else {
                 location.href = appUrl

pages/otherpage/user/card.vue

@@ -1,36 +1,58 @@
 <template>
   <div class="userCard">
-    <div class="userList">
-      <div class="cell" v-for="(item, index) in userList" :key="'userList' + index" @click="openDialog(item)">
-        <div class="userImg">
-          <img src="" alt="">
-        </div>
-        <div class="right">
-          <div class="userInfo">
-            <p class="name">前端开发大王</p>
-            <p class="tips">程序客栈 前端工程师</p>
+    <mt-loadmore :top-method="refresh">
+      <div
+        class="userList"
+        v-infinite-scroll="loadMore"
+        infinite-scroll-disabled="loading"
+        infinite-scroll-distance="10"
+        infinite-scroll-immediate-check="true"
+        v-if="userList.length > 0"
+      >
+        <div class="cell" v-for="(item, index) in userList" :key="'userList' + index" @click="openDialog(item)">
+          <div class="userImg">
+            <img src="" alt="">
           </div>
-          <div class="addTime">
-            <p>4天钱</p>
+          <div class="right">
+            <div class="userInfo">
+              <p class="name">{{item.nickname || ''}}</p>
+              <p class="tips">{{item.company || ''}} {{item.title}}</p>
+            </div>
+            <div class="addTime">
+              <p>{{item.processTimeName || ''}}</p>
+            </div>
           </div>
         </div>
       </div>
-    </div>
+      <div v-else-if="!loadingPage" class="noneList">
+        <p>暂无名片</p>
+      </div>
+      <div v-else class="pageLoading">
+        <mt-spinner type="fading-circle"></mt-spinner>
+      </div>
+    </mt-loadmore>
+    <no-ssr>
+      <p v-show="loading" class="page-infinite-loading">
+        <mt-spinner type="fading-circle"></mt-spinner>
+        加载中...
+      </p>
+    </no-ssr>
+
     <div class="popUp" v-if="showToast">
       <div class="toastBox">
         <div class="content">
           <div class="userImg">
-            <img src="" alt="">
+            <img :src="selectedItem.iconUrl" alt="">
           </div>
-          <p class="name">{{'jmimi'}}</p>
+          <p class="name">{{selectedItem.nickname}}</p>
           <div class="userInfo">
             <div class="cell" v-for="(item, index) in userData" :key="'uT'+index">
-              <p class="cname">{{item.name}}</p>
+              <p class="cname">{{item.title}}</p>
               <p class="cvalue">{{item.value}}</p>
               <p class="cbutton" @click="copyItem(item)">复制</p>
             </div>
           </div>
-          <div class="button">
+          <div class="button" @click="jumpUserPage">
             <p>个人主页</p>
           </div>
         </div>
@@ -44,39 +66,102 @@
   /**
    * 名片夹
    */
+  import Vue from 'vue'
+  import { InfiniteScroll, Loadmore } from 'mint-ui';
+  import MintUI from 'mint-ui';
+  import "mint-ui/lib/style.css";
+
+  Vue.use(InfiniteScroll);
+  Vue.use(MintUI);
+  Vue.component(Loadmore.name, Loadmore);
 
   export default {
     name: 'UserCard',
     data() {
       return {
-        userList:[
-          {},{},{},{},{}
-        ],
+        userList: [],
         userData: [
-          {name: '邮箱', value: 'work2018@qq.com'},
-          {name: '电话', value: '14765409653'},
-          {name: '微信', value: 'jimli334'},
-          {name: 'QQ', value: '356898148'},
+          { title: '邮箱', name: 'email', value: '' },
+          { title: '电话', name: 'mobile', value: '' },
+          { title: '微信', name: 'weixin', value: '' },
+          { title: 'QQ', name: 'qq', value: '' },
         ],
-        showToast: false
+        selectedItem: {},
+        showToast: false,
+        loading: false,
+        loadingPage: true, //页面加载
+        page: {
+          page: 1,
+          size: 10,
+          total: 0
+        }
       }
     },
     async created() {
-
     },
     async mounted() {
+      this.loadingPage = true
+      this.page = {
+        page: 1,
+        size: 10,
+        total: 0
+      }
       await this.needLogin()
-      this.getTypeList()
+      this.getList()
     },
     methods: {
-      /** 获取展示状态 */
-      getTypeList() {
+      /** 获取 */
+      getList() {
+        const { page = 1, pageSize = 10 } = this.page || {}
+        let p = { page, pageSize }
+        this.$axios.post('/api/nameCard/list', p).then(res => {
+          if (res.data.status === 1) {
+            this.userList = [ ...(res.data.data && res.data.data.list || []) ]
+            this.userList = [{id:1, name:2, email: 3}]
+            this.page.total = Number(res.data.data && res.data.data.total || 0)
+          } else {
+            this.$message.error('查询失败:' + res.info)
+          }
+        }).finally(() => {
+          this.loadingPage = false
+        })
+      },
+      /** 打开弹出层 **/
+      openDialog(selectedItem) {
+        this.showToast = true
+        this.selectedItem = selectedItem
+        this.userData.forEach(item=>{
+          item.value = ''
+          item.value = selectedItem[item.name] || ''
+        })
+        this.userData = [ ...this.userData ]
+      },
 
+      refresh() {
+        this.page = {
+          page: 1,
+          size: 10,
+          total: 0
+        }
+        this.getList()
       },
 
-      openDialog() {
-        this.showToast = true
-        this.userData = [...this.userData]
+      loadMore() {
+        this.loading = true;
+        setTimeout(() => {
+          this.userList = [ ...this.userList, ...this.userList ]
+          this.loading = false;
+        }, 5000)
+      },
+
+      jumpUserPage() {
+        const { id } = this.selectedItem
+        let url = `/wo/${id}`
+        if (this.$deviceType.app) {
+          location.href = `proginn://jump?path=${url}`
+        } else {
+          location.href = url
+        }
       },
 
       /** 复制到剪切板 */