dl_site_nuxt/components/contact-footer.vue

<template>
  <ul class="contact-footer">
    <li class="mr-4 box_shadow" v-for="(item,index) in contactFooter" :key="index">
      <a :href="item.link"  @click="toShare(item.id)" target="_blank">
        <b-img :src="item.icon" :alt="item.alt"></b-img>
      </a>
    </li>
  </ul>
</template>

<script>

export default {
  name: 'ContactFooter',
  data() {
    return {
      contactFooter: [
        {
          icon: require('../assets/image/icon/Facebook-colorful.png'),
          link: 'javascript:;',
          alt: 'Facebook',
          id: 'facebook',
        },
        {
          icon: require('../assets/image/icon/X-colorful.png'),
          link: 'javascript:;',
          alt: 'X',
          id: 'x',
        },
        {
          icon: require('../assets/image/icon/in-colorful.png'),
          link: 'javascript:;',
          alt: 'Linkedin',
          id: 'linkedin'
        },
        {
          icon: require('../assets/image/icon/google-colorful.png'),
          link: 'javascript:;',
          alt: 'Pinterest',
          id: 'pinterest'
        },

        {
          icon: require('../assets/image/icon/fax-colorful.png'),
          link: 'javascript:;',
          alt: 'Whatsapp',
          id: 'whatsapp'
        }
      ]
    }
  },
  methods:{


    // shareToTwitter(){
    //   const text = encodeURIComponent("SINOTRUK HOWO Dump Truck Manufacturers and Factory - Price - SINOTRUCK ");
    //   const url = encodeURIComponent("https://www.cdtruck.com/truck/dump-truck/china-sinotruk-howo-19m3-6x4-cheap-336hp-10.html");
    //   const hashtags = "example,sharing";
    //   const twitterUrl = `https://twitter.com/intent/tweet?text=${text}&url=${url}&hashtags=${hashtags}`;
    //   window.open(twitterUrl, "_blank");
    // },
    //
    // shareToFacebook(){
    //   const url = encodeURIComponent("https://www.cdtruck.com/truck/dump-truck/china-sinotruk-howo-19m3-6x4-cheap-336hp-10.html");
    //   // let url = 'https://www.cdtruck.com/truck/dump-truck/china-sinotruk-howo-19m3-6x4-cheap-336hp-10.html'
    //   const facebookUrl = `https://www.facebook.com/sharer.php?kid_directed_site=0&u=${url}`;
    //   window.open(facebookUrl, "_blank");
    // },
    //
    // shareToLinkedin(){
    //   const title = encodeURIComponent("SINOTRUK HOWO Dump Truck Manufacturers and Factory - Price - SINOTRUCK ");
    //   const url = encodeURIComponent("https://www.cdtruck.com/truck/dump-truck/china-sinotruk-howo-19m3-6x4-cheap-336hp-10.html");
    //   const SUMMARY = encodeURIComponent("SUMMARY");
    //   const SOURCE = encodeURIComponent("SOURCE");
    //   const linkedin = `http://www.linkedin.com/shareArticle?mini=true&title=${title}&url=${url}&summary=${SUMMARY}&source=${SOURCE}&armin=armin`;
    //   window.open(linkedin, "_blank");
    // },
    //
    // shareToPinterest(){
    //   const pageUrl = encodeURIComponent('https://www.cdtruck.com/truck/dump-truck/china-sinotruk-howo-19m3-6x4-cheap-336hp-10.html');
    //   const mediaUrl = encodeURIComponent('https://www.cdtruck.com/uploads/201912156/china-sinotruk-howo-19m3-6x4-cheap-336hp-1005360771358.jpg'); // 替换为你的图片URL
    //   const description = encodeURIComponent('这是我分享的网页内容描述'); // 替换为你的描述内容
    //   const pinterestUrl = `https://www.pinterest.com/pin/create/button/?url=${pageUrl}&media=${mediaUrl}&description=${description}`;
    //   window.open(pinterestUrl, '_blank');
    // },
    //
    // shareToWhatsapp(){
    //   const text = encodeURIComponent("SINOTRUK HOWO Dump Truck Manufacturers and Factory - Price - SINOTRUCK ");
    //   const url = encodeURIComponent("https://www.cdtruck.com/truck/dump-truck/china-sinotruk-howo-19m3-6x4-cheap-336hp-10.html");
    //   const whatsappUrl = `https://api.whatsapp.com/send?text=${text}&url=${url}`;
    //   window.open(whatsappUrl, "_blank");
    // },
    // shareToWhatsapp2(){
    //   const whatsappUrl = `https://api.whatsapp.com/send?l=en&phone=8618253112969`;
    //   window.open(whatsappUrl, "_blank");
    // },


    toShare(id){
      const url = encodeURIComponent(window.location.href);
      const title = encodeURIComponent(document.title);

      if (id === 'facebook') {
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank');
      }
      if (id === 'x') {
        window.open(`https://twitter.com/intent/tweet?url=${url}&text=${title}`, '_blank');
      }
      if (id === 'linkedin') {
        window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank');
      }
      if (id === 'pinterest') {
        window.open(`https://pinterest.com/pin/create/button/?url=${url}`, '_blank');
      }
      if (id === 'whatsapp') {
        window.open(`https://api.whatsapp.com/send?text=${title}%20${url}`, '_blank');
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.contact-footer {
  height: 3.5rem;
  margin: .625rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f3f8;
  border-radius: .375rem;
}
</style>