tangwang-pc/src/components/BottomRightFixed.vue

<template>
  <div>
    <div
      class="fixed-box"
      :class="{ isMobile: deviceType !== 'pc' }"
      :style="{ right: right + 'px' }"
    >
      <div v-if="scrollTop > 200" @click="goTop">
        <i class="el-icon-arrow-up"></i><span>TOP</span>
      </div>
      <template v-if="deviceType !== 'pc'">
        <div
          v-if="showCollect"
          :style="{ color: isCollect == 1 ? '#EAAB00' : '' }"
          @click="collectClick"
        >
          <i class="el-icon-star-on"></i
          ><span>{{ isCollect == 1 ? '已' : '' }}收藏</span>
        </div>
        <div v-if="showShare" @click="showSharePop">
          <i class="el-icon-share"></i><span>分享</span>
        </div>
        <div v-if="showComment" @click="commentClick">
          <img src="~/assets/images/comment.png" alt="" /><span>评论</span>
        </div>
        <div v-if="showLike" @click="likeClick">
          <img
            v-if="isLike == 1"
            src="~/assets/images/like_chosen.png"
            alt=""
          /><img v-else src="~/assets/images/like.png" alt="" /><span
            :style="{ color: isLike == 1 ? '#E6553F' : '' }"
            >{{ likeNum }}</span
          >
        </div>
      </template>
    </div>
    <div
      v-if="deviceType === 'pc'"
      class="fixed-box left-fixed"
      :style="{
        position: hasScroll ? 'fixed' : 'absolute',
        top: hasScroll ? '236px' : '',
        left: left + 'px'
      }"
    >
      <div
        v-if="showCollect"
        :style="{ color: isCollect == 1 ? '#EAAB00' : '' }"
        @click="collectClick"
      >
        <i class="el-icon-star-on"></i
        ><span>{{ isCollect == 1 ? '已' : '' }}收藏</span>
      </div>
      <el-popover
        placement="right"
        width="174"
        :visible-arrow="false"
        popper-class="share-hover-box"
        trigger="hover"
      >
        <div class="share-box">
          <el-popover
            placement="top-start"
            width="176"
            :visible-arrow="false"
            popper-class="wechat-qrcode-box"
            trigger="hover"
          >
            <div class="qrcode-box">
              <p>
                <img
                  src="~/assets/images/wechat_color.png"
                  alt="扫码分享至微信"
                />扫码分享至微信
              </p>
              <vue-qr class="bicode" :size="220" :text="codeValue"></vue-qr>
            </div>
            <p slot="reference" @click="share('微信')">
              <img src="~/assets/images/share_wechat.png" alt="" />
            </p>
          </el-popover>
          <p @click="share('qq')">
            <img src="~/assets/images/share_qq.png" alt="" />
          </p>
          <p @click="share('微博')">
            <img src="~/assets/images/share_weibo.png" alt="" />
          </p>
        </div>
        <div v-if="showShare" slot="reference" @click="pcShareClick">
          <i class="el-icon-share"></i><span>分享</span>
        </div>
      </el-popover>
      <div v-if="showComment" @click="commentClick">
        <img src="~/assets/images/comment.png" alt="" /><span>评论</span>
      </div>
      <div v-if="showLike" @click="likeClick">
        <img
          v-if="isLike == 1"
          src="~/assets/images/like_chosen.png"
          alt=""
        /><img v-else src="~/assets/images/like.png" alt="" /><span
          :style="{ color: isLike == 1 ? '#E6553F' : '' }"
          >{{ likeNum }}</span
        >
      </div>
    </div>
    <div
      v-if="sharePopupShow"
      class="share-popup"
      @click="sharePopupShow = false"
    >
      <template v-if="env === 'wechat' || env === 'weibo' || env === 'qq'">
        <img src="~/assets/images/share_point.png" />
        <div>
          <p>点击右上角</p>
          <p>分享给朋友</p>
        </div>
      </template>
      <template v-else>
        <p>点击浏览器分享图标，发送好友</p>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    showCollect: Boolean,
    showShare: Boolean,
    showComment: Boolean,
    showLike: Boolean,
    isLike: {
      type: Number,
      default: 0
    },
    likeNum: {
      type: Number,
      default: 0
    },
    isCollect: {
      type: Number,
      default: 0
    },
    isLogin: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      scrollTop: 0,
      left: -89,
      right: 0,
      codeValue: '',
      hasScroll: false,
      sharePopupShow: false
    };
  },
  computed: {
    deviceType() {
      return this.$store.state.device.deviceType;
    },
    env() {
      return this.$store.state.device.env;
    }
  },
  mounted() {
    const that = this;
    let href = window.location.href;
    if (that.$route.name !== 'video-id') {
      const origin =
        process.env.VUE_APP_TITLE !== 'production'
          ? 'https://apptest.diabetes.com.cn'
          : 'https://app.diabetes.com.cn';
      if (that.$route.name === 'doctor-id') {
        href = origin + '/expert-video';
      } else {
        href = origin + '/library/detail/' + that.$route.params.id;
      }
    }
    this.codeValue = href;
    if (that.deviceType !== 'pc' && that.env === 'wechat' && that.showShare) {
      that.wxShare(
        {
          title: document.title,
          desc: document
            .querySelector('meta[name="description"]')
            .getAttribute('content'),
          url: href,
          image: location.origin + require('~/assets/images/mobile_logo.png')
        },
        () => {
          that.sharePopupShow = false;
        }
      );
    }
    this.right = (document.documentElement.offsetWidth - 1258) / 2;
    this.$nextTick(() => {
      window.addEventListener('scroll', function () {
        that.hasScroll = true;
        // 变量scrollTop是滚动条滚动时，距离顶部的距离
        const scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        const scrollLeft =
          document.documentElement.scrollLeft || document.body.scrollLeft;
        that.scrollTop = scrollTop;
        if (document.documentElement.offsetWidth < 1258) {
          that.right =
            0 - (1258 - document.documentElement.offsetWidth) + scrollLeft;
          that.left = 0 - scrollLeft;
        } else {
          that.right = (document.documentElement.offsetWidth - 1258) / 2;
          that.left = (document.documentElement.offsetWidth - 1258) / 2;
        }
      });
    });
  },
  methods: {
    goTop() {
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
    },
    commentClick() {
      this.$emit('commentClick');
    },
    likeClick() {
      this.$emit('likeClick');
    },
    collectClick() {
      this.$emit('collectClick');
    },
    share(types) {
      const title = document.title;

      // 当内容中没有图片时，设置分享图片为网站logo

      // 获取当前网页url
      const url = document.location.href;

      // 获取网页描述
      const description = document
        .querySelector('meta[name="description"]')
        .getAttribute('content');

      // 获取网页关键字
      const keywords = document
        .querySelector('meta[name="keywords"]')
        .getAttribute('content');

      if (types === '微博') {
        window.open(
          'http://service.weibo.com/share/share.php?url=' +
            url +
            '&sharesource=weibo&title=' +
            title +
            ' ' +
            description,
          '_blank'
        );
      }
      // qq好友接口的传参
      if (types === 'qq') {
        window.open(
          'http://connect.qq.com/widget/shareqq/index.html?url=' +
            url +
            '&sharesource=qq&title=' +
            title +
            '&summary=' +
            description +
            '&desc=' +
            keywords,
          '_blank'
        );
      }
      if (this.$route.name !== 'article-id') {
        this.baiduStat(
          (this.$route.name === 'video-id' ? '视频' : '一问医答') + '详情页',
          'click',
          (this.$route.name === 'video-id' ? '视频' : '一问医答') +
            '分享-' +
            types
        );
      }
    },
    pcShareClick() {
      if (this.$route.name === 'article-id') {
        this.baiduStat('文章详情页', 'click', '文章内分享');
      }
    },
    showSharePop() {
      const that = this;
      that.sharePopupShow = true;
      this.baiduStat('移动端', 'click', '移动端-分享页面');
      if (this.env !== 'wechat') {
        setTimeout(() => {
          that.sharePopupShow = false;
        }, 3000);
      }
    }
  }
};
</script>
<style lang="scss">
.fixed-box {
  position: fixed;
  bottom: 130px;
  right: 0;
  width: 60px;
  z-index: 9;
  div {
    margin-top: 1px;
    width: 62px;
    height: 62px;
    background: $bg-color;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    color: $font-color2;

    i,
    span {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 20px;
    }
    i {
      margin-top: 12px;
      font-size: 30px;
    }
    img {
      margin-top: 10px;
      width: 26px;
    }
    span {
      display: block;
    }
  }
  &.isMobile {
    top: auto !important;
    right: 15px !important;
    bottom: 70px !important;
    transform: scale(0.85);
    transform-origin: bottom;
  }
  &.left-fixed {
    position: absolute;
    top: 150px;
    bottom: auto;
    left: -89px;
  }
}
.share-hover-box {
  border: none;
  box-shadow: none;
  padding: 11px 0 11px 11px;
  height: 61px;
  background: $bg-color;
  box-sizing: border-box;
  transform: translateX(-15px);
  border-radius: 0 50px 50px 0;
  .share-box {
    font-size: 0;
    & > span,
    & > p {
      display: inline-block;
      margin-right: 12px;
      background: $body-color;
      cursor: pointer;
      @include roundFun(40px);
      img {
        @include roundFun(40px);
      }
    }
  }
  &.left-show {
    transform: translateX(15px) scale(0.85);
    transform-origin: bottom;
    border-radius: 50px 0 0 50px;
  }
}
.wechat-qrcode-box {
  border: 1px solid #ededed;
  padding: 14px 0 16px;
  background: $body-color;
  box-sizing: border-box;
  .qrcode-box {
    text-align: center;
    p {
      margin-bottom: 6px;
      font-size: 16px;
      color: $font-color1;
      line-height: 28px;
      img {
        width: 28px;
        height: 28px;
      }
    }
    & > img {
      width: 110px;
    }
  }
}
.share-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
  p {
    font-size: 16px;
    color: #fff;
    text-align: center;
  }
  div {
    text-align: right;
    float: right;
    position: absolute;
    right: 0;
    top: 60px;
    width: 150px;
    p {
      display: block;
    }
  }
  img {
    width: 210px;
    height: 124px;
    float: right;
  }
  & > p {
    position: absolute;
    bottom: 20px;
    width: 100%;
  }
}
</style>