mall-web-ssr/components/mobile/base/LinkUser.vue

<template>
  <div class="mobile-modal" v-if="showLink">
    <div class="mobile-modal-box mobile-link-en">
      <div class="mobile-modal-header">联系方式<i @click="$emit('closeAction')" class="icon-guanbi iconfont"></i></div>
      <div class="mobile-modal-content">
        <div v-if="checkTel" class="clearfix"><span class="pull-left">电话：</span><a :href="'tel:' + infoObj.enTel" target="_blank" class="content-line link-url pull-left">{{infoObj.enTel}}</a></div>
        <div v-if="checkPhone" class="clearfix"><span class="pull-left">手机：</span><a :href="'tel:' + infoObj.enPhone" target="_blank" class="content-line link-url pull-left">{{infoObj.enPhone}}</a></div>
        <div v-if="checkWeixin" class="clearfix"><span class="pull-left">微信：</span><span class="content-line pull-left">{{infoObj.enWeixin}}</span></div>
        <div v-if="checkQQ" class="clearfix"><span class="pull-left">Q&nbsp;Q：</span><span class="content-line pull-left">{{infoObj.enQQ}}</span></div>
        <div v-if="!empty">暂无联系方式</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      showLink: {
        type: Boolean,
        default: false
      },
      infoObj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    computed: {
      checkTel () {
        return this.checkInfo(this.infoObj.enTel)
      },
      checkPhone () {
        return this.checkInfo(this.infoObj.enPhone)
      },
      checkWeixin () {
        return this.checkInfo(this.infoObj.enWeixin)
      },
      checkQQ () {
        return this.checkInfo(this.infoObj.enQQ)
      },
      empty () {
        return this.checkTel || this.checkPhone || this.checkWeixin || this.checkQQ
      }
    },
    methods: {
      checkInfo: function (str) {
        return str && str.trim() !== ''
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-modal .mobile-modal-box .mobile-modal-content {
    .clearfix {
      padding-left: 1rem;
    }
  }
</style>