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"
      >
        <mt-cell-swipe
          v-for="(item, index) in userList" :key="'userList' + index"
          :right="[
            {
              content: '删除',
              style: { background: 'red', color: '#fff', display:'table-cell',verticalAlign:'middle'},
              handler: () => deleteItem(item)
            }
            ]">
          <div slot="title" class="cell"
            @click="openDialog(item)">
            <div class="userImg" :class="calcUserVip(item)">
              <img :src="item.iconUrl" 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>
        </mt-cell-swipe>

      </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" :class="calcUserVip(selectedItem)">
            <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, CellSwipe, MessageBox } from 'mint-ui';
  import MintUI from 'mint-ui';
  import "mint-ui/lib/style.css";

  const mix =  {
    data() {
      return {
        // 详情id
        detailID: this.$route.params.detail,
      }
    },
    methods: {
      testMy() {
        console.log(22222)
      }
    }
  }

  Vue.use(InfiniteScroll);
  Vue.use(MintUI);
  Vue.component(Loadmore.name, Loadmore);
  Vue.component(CellSwipe.name, CellSwipe);

  export default {
    name: 'UserCard',
    mixins: [mix],
    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()
      this.testMy()
    },
    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.page.total = Number(res.data.data && res.data.data.total || 0)
          } else {
            this.$message.error('查询失败:' + res.info)
          }
        }).finally(() => {
          this.loadingPage = false
          this.loading = 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;
        this.page.page = this.page.page + 1
        this.getList()
      },

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

      calcUserVip(item) {
        const { isVip, vipTypeID } = item
        return { [ 'vip' + vipTypeID ]: isVip }
      },
      deleteItem(item) {
        console.log(item)
        const { nameCardId=0, nickname} = item
        MessageBox.confirm(`将从您的名片夹中移除 ${nickname} 的名片`).then(action => {
          let loading = this.$loading({
            title: "删除中..."
          })
          this.$axios.post('/api/nameCard/delete', {
            nameCardId
          }).then(res => {
            if (Number(res.data.status) === 1) {
              loading && loading.close()
              this.$toast('删除成功！')
              this.refresh()
            } else {
              loading && loading.close()
            }
          }).catch((e) => {
            loading && loading.close()
          })
        }).catch(e=>{

        });
      },
      testMy() {
        console.log('111111')
      }
    },

  }
</script>
<style lang="scss">
  .mint-cell-swipe-buttongroup {
    display: table;
  }
</style>

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