CZKJ.XKJ.Helper/src/components/share/index.vue

<template>
  <div class="c-share" v-if="show" @click="close">
    <div class="c-share__content" @click.stop>
      <div class="c-share__box">
        <div class="c-share__top" v-if="distribution && vip">
          <img class="c-share__icon" src="/static/share/icon_1.jpg" alt />
        </div>
        <div class="c-share__vip" v-if="!vip && distribution" @click="goVip">成为vip</div>
        <div class="c-share__title" v-if="distribution">推广给好友购买最多可赚</div>
        <div class="c-share__price c-price" v-if="distribution">
          <span class="c-price__sign">¥</span>
          <span class="c-price__text">{{ price || '0.00' }}</span>
        </div>
      </div>
      <div class="c-share__division">分享</div>
      <ul class="c-list">
        <!-- <li class="c-list__item">
          <button class="button" open-type="share">
            <div class="c-list__content">
              <img class="c-list__icon" src="/static/share/icon_2.jpg" alt />
              <div class="c-list__text">发送给微信好友</div>
            </div>
          </button>
        </li> -->
        <li class="c-list__item" @click="share('single')">
          <div class="c-list__content">
            <img class="c-list__icon" src="/static/share/icon_3.jpg" alt />
            <div class="c-list__text">保存图片到相册</div>
          </div>
        </li>
        <li class="c-list__item">
          <div class="c-list__content" @click="share('multi')">
            <img class="c-list__icon" src="/static/share/icon_4.jpg" alt />
            <div class="c-list__text">
              <div>保存多张素材图</div>
              <div>可用于分享朋友圈</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'MyShare',

    // 数据
    data() {
      return {
        show: false,
        price: '',
        callback: '',

        distribution: false,
        vip: false,
      }
    },

    // 函数
    methods: {
      // 打开
      open(price, distribution, vip, callback) {
        const self = this

        self.show = true
        self.price = price
        self.distribution = distribution
        self.vip = vip
        self.callback = callback
      },

      // 关闭
      close() {
        const self = this

        self.show = false

        if (self.fn.getType(self.callback) === 'function') {
          self.callback()
        }
      },

      goVip() {
        this.router.push({
          path: '/pages/generalize/open',
        })
      },

      // 分享处理
      share(type) {
        const self = this

        self.$emit('share', type)
      },
    },

    // 数据计算
    computed: {
    },

    // 数据监听
    watch: {},
  }
</script>

<style lang="scss" scoped>
.c-share {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 995;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);

  &__content {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    background-color: #fff;
    border-radius: px(16) px(16) 0 0;
  }

  &__box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__top {
    display: flex;
    justify-content: center;
    align-items: center;
    width: px(230);
    height: px(230);
    margin-top: px(-115);
    border-radius: 50%;
    background-color: #ef4a37;
  }

  &__icon {
    width: px(137);
    height: px(134);
  }
  &__vip{
    margin-top: px(80);
    color: #f8662a;
  }
  &__title {
    font-size: px(42);
    margin-top: px(30);
    color: #333;
    &.mt{
    margin-top: px(80);
    }
  }

  &__price {
    margin-top: px(70);
  }

  &__division {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: px(60);
    font-size: px(34);
    color: #999;

    &:before,
    &:after {
      content: "";
      display: block;
      width: px(460);
      height: px(3);
      background-color: #e7e7e7;
    }
  }
}

.c-price {
  display: flex;
  align-items: baseline;

  &__sign {
    font-size: px(26);
    color: #f8662a;
  }

  &__text {
    font-size: px(54);
    color: #f8662a;
  }
}

.c-list {
  display: flex;
  justify-content: space-around;
  height: px(345);
  padding-top: px(70);

  &__item {
    flex: 1;
  }

  &__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__icon {
    width: px(100);
    height: px(100);
    margin-bottom: px(20);
  }

  &__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: px(32);
    color: #999;
  }
}
</style>