proginn-frontend/pages/otherpage/user/card.vue

<template>
  <div class="userCard">
    <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="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 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="selectedItem.iconUrl" alt="">
          </div>
          <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.title}}</p>
              <p class="cvalue">{{item.value}}</p>
              <p class="cbutton" @click="copyItem(item)">复制</p>
            </div>
          </div>
          <div class="button" @click="jumpUserPage">
            <p>个人主页</p>
          </div>
        </div>
        <div class="closeIcon" @click="showToast=false"></div>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * 名片夹
   */
  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: [],
        userData: [
          { title: '邮箱', name: 'email', value: '' },
          { title: '电话', name: 'mobile', value: '' },
          { title: '微信', name: 'weixin', value: '' },
          { title: 'QQ', name: 'qq', value: '' },
        ],
        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.getList()
    },
    methods: {
      /** 获取 */
      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()
      },

      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
        }
      },

      /** 复制到剪切板 */
      copyItem(item) {
        const { value } = item
        const input = document.createElement('input')
        input.readOnly = 'readonly'
        input.value = value
        document.body.appendChild(input)
        input.select()
        input.setSelectionRange(0, input.value.length)
        document.execCommand('Copy')
        document.body.removeChild(input)
      }
    },

  }
</script>
<style lang="scss" scoped>
  @import '../../../assets/css/otherpage/user/userCard.scss';
</style>