vue-ptc/src/pages/invite/index.vue

<template>
  <div class="p-invite">
    <div class="p-top">
      <div class="award">
        <p class="award-name">Invite friends to get</p>
        <div class="award-worth">
          <span class="num">- $10</span>
          <span class="txt">COUPON</span>
        </div>
        <p class="award-instruction">PTC offline store use</p>
      </div>
      <div class="desc">
        <p class="desc-title"><i class="star"></i>Event Description</p>
        <p class="desc-content">
          Friends who share your link will get a <strong>$10</strong> coupon. If
          a friend buys a membership, you will get a
          <strong>$10</strong> coupon. after the purchase, which can be used for
          the next membership fee payment and electronic accessories products.
        </p>
      </div>
      <div class="methods">
        <div class="ptc-inner-md">
          <div class="method">
            <p class="method-title">Share your exclusive link with friends</p>
            <p class="ptc-comboinput">
              <input
                type="text"
                class="ptc-input"
                readonly
                value="http://www.ptcplis.com/2333453"
              />
              <button class="ptc-button">Copy Link</button>
            </p>
          </div>
          <div class="method">
            <p class="method-title">Email invitation</p>
            <textarea
              v-model="emails"
              placeholder="Enter email addresses, multiple mailboxes are separated by“ ,”"
            ></textarea>
          </div>
          <button class="ptc-button" @click="invite">Send invitation</button>
        </div>
      </div>
    </div>

    <div class="p-bottom">
      <h3 class="ptc-title">My Reward ${{ totalAmount }}</h3>
      <div class="block records">
        <div class="ptc-inner-md">
          <ul>
            <li v-for="(award, index) of awards" :key="index" class="record">
              <span class="left">{{ award.title }}</span>
              <span class="center">{{ award.created_at }}</span>
              <span class="right">${{ award.gift_card_amount }}</span>
            </li>
          </ul>
        </div>
      </div>
      <h3 class="ptc-title">Activity Details</h3>
      <div class="block details">
        <div class="ptc-inner-md">
          <p>
            After a friend places an order, you can get a corresponding coupon
            according to the amount of his first order, which can be used for
            the purchase of membership services and consumption at PTC's offline
            outlets.
          </p>
          <p class="mt48">1. The invitee is an unregistered new user;</p>
          <p class="mt48">
            2. On the 10th of each month/at 23:00 every day, the invitation
            rewards will be settled, and the coupons will be issued to the
            personal account
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { string } from 'yup'
import { inviteFriends, getInviteRewards } from '@/service/user'
import Toast from '@/components/toast'

export default defineComponent({
  name: 'InviteFriends',
  async beforeRouteEnter(to, from, next) {
    const { results } = await getInviteRewards()
    next((vm: any) => (vm.awards = results))
  },
  data() {
    return {
      emails: '',
      awards: [] as any[],
    }
  },
  computed: {
    totalAmount() {
      // @ts-ignore
      return this.awards.reduce((sum, award) => sum + award.gift_card_amount, 0)
    },
  },
  methods: {
    async invite() {
      if (!this.emails) return Toast('Please enter email addresses')
      try {
        this.emails
          .split(',')
          .forEach(email =>
            string().email('Please check email addresses').validateSync(email)
          )
        await inviteFriends(this.emails)
        Toast('done')
      } catch (err) {
        Toast(err.message)
      }
    },
  },
})
</script>

<style lang="scss">
.p-invite {
  .p-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 8px 0 48px;
    background: $primary-color;
    overflow: hidden;
    @include media-breakpoint-up(md) {
      padding: 40px 0 64px;
    }
  }
  .p-bottom {
    margin: auto;
    @include media-breakpoint-up(lg) {
      width: 768px * 2;
    }
    @include media-breakpoint-up(xl) {
      width: 999px * 2;
    }
  }

  .award,
  .desc,
  .methods {
    width: 90%;
  }
  .award {
    @include icon('@img/coupon.png', 98%, 370px);
    text-align: center;
    overflow: hidden;
    @include media-breakpoint-up(md) {
      margin-left: -40px;
      height: 500px;
      width: 880px;
    }
    @include media-breakpoint-up(xl) {
      margin-right: 108px;
      width: 960px;
    }
    &-name {
      margin-top: 66px;
      font-weight: bold;
      font-size: 48px;
      color: #193059;
    }
    &-worth {
      margin: 32px 0 24px;
      line-height: 56px;
      font-weight: 500;
      color: #193059;
      .num {
        font-size: 56px;
      }
      .txt {
        margin-left: 20px;
        font-size: 40px;
      }
    }
    &-instruction {
      font-size: 28px;
      color: #9aa8c5;
    }
    @include media-breakpoint-up(md) {
      &-name {
        margin-top: 100px;
        font-size: 60px;
      }
      &-worth {
        margin: 54px 0 44px;
        .num {
          font-size: 80px;
        }
        .txt {
          font-size: 56px;
        }
      }
      &-instruction {
        font-size: 40px;
      }
    }
  }
  .desc {
    padding: 52px 26px 26px;
    border: 2px solid rgba(218, 225, 239, 0.25);
    color: #dae1ef;
    @include media-breakpoint-up(md) {
      // margin-left: 134px;
      width: 680px;
    }
    &-title {
      @include thin-border(bottom, rgba(218, 225, 239, 0.25));
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 48px;
      font-size: 32px;
      font-weight: bold;
      .star {
        @include icon('@img/star.png', 40px);
        margin-right: 16px;
      }
    }
    &-content {
      margin-top: 26px;
      font-size: 28px;
      line-height: 40px;
    }
    strong {
      font-size: 32px;
    }
  }
  .methods {
    margin-top: 36px;
    padding: 64px 36px;
    background: #fff;
    border-radius: 16px;

    @include media-breakpoint-up(md) {
      border-radius: 0;
    }
    @include media-breakpoint-up(lg) {
      width: 768px * 2;
    }
    @include media-breakpoint-up(xl) {
      width: 999px * 2;
    }
  }
  .method {
    &:nth-child(1) {
      margin-bottom: 64px;
    }
    &:nth-child(2) {
      margin-bottom: 24px;
    }
    &-title {
      margin-bottom: 24px;
      font-size: 32px;
      font-weight: bold;
      color: #193059;
    }
    .ptc-input {
      height: 88px;
      font-size: 24px;
      @include media-breakpoint-up(md) {
        font-size: 28px;
      }
    }
  }
  textarea {
    display: block;
    padding: 24px;
    width: 100%;
    height: 182px;
    border-radius: 8px;
    border: 2px solid #d9d9d9;
    font-size: 28px;
    line-height: 40px;
  }

  .block {
    background: #fff;
  }
  .records {
    padding: 0 36px;
  }
  .record {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 36px 0;
    + .record {
      @include thin-border(top);
    }
    .left {
      font-weight: bold;
      font-size: 32px;
      color: #1a1a1a;
    }
    .center,
    .right {
      font-size: 28px;
      color: #666;
    }
    .center {
      padding-right: 50px;
    }
  }

  .details {
    padding: 36px;
    font-size: 32px;
    line-height: 44px;
    color: #666;
  }

  @include media-breakpoint-up(md) {
    .ptc-comboinput .ptc-button {
      width: 322px;
    }
  }
}
</style>