exhibition_service_admin/src/views/inviteRebate/index.vue

<script lang="ts">
import Vue from 'vue'
import { spreadInfo } from '@/api/user'
export default Vue.extend({
  name: 'Index',
  data() {
    return {
      userInfo: {}
    }
  },
  computed: {
    user() { return this.$store.state.user.user }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      spreadInfo().then(res => {
        console.log(res.data)
        this.userInfo = res.data
      })
    },
    copyLink() {
      const url = window.location.protocol + '//' + window.location.host + '/login?inviteCode=' + this.user.inviteCode
      navigator.clipboard.writeText(url)
      this.$notify({
        title: '提示',
        message: '复制成功',
        type: 'success'
      })
    }
  }
})
</script>

<template>
  <div class="body">
    <div class="banner">
      <img class="coin" src="/static/image/goldcoin.png">
      <div class="title">邀请有奖</div>
      <div class="desc">邀请新用户注册并消费，可获得现金奖励。</div>
      <div class="invite-code">我的邀请码：<span class="code">{{ user.inviteCode }}</span></div>
    </div>
    <div class="describe">
      <div class="title">邀请返利</div>
      <div class="desc">当您邀请朋友注册后，TA的每次消费，您都能获得TA消费金额一定比例的现金奖励。绑定取款账户后，即可提现至您的收款账户。</div>
    </div>
    <div class="amount-count">
      <div class="background">Rebate</div>
      <div class="amount">
        <div class="title">总计返利金额：</div>
        <div class="count">￥{{ userInfo.total_amount }}</div>
      </div>
      <div class="button-list">
        <router-link to="/setting/wallet" class="button">
          <div class="text">绑定 / 提现<span class="el-icon-top-right" /></div>
        </router-link>
        <div class="button">
          <div class="text" @click="copyLink()">复制分享链接</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.body{
  .describe{
    color: #222222;
    margin-top: 36px;
    padding: 0 12px;
    .title{
      font-size: 26px;
      font-weight: bolder;
    }
    .desc{
      margin-top: 4px;
      font-size: 15px;
      color: #555555;
    }
  }
  .banner{
    border-radius: 16px;
    padding: 16px 48px;
    position: relative;
    display: flex;
    gap: 64px;
    align-items: flex-end;
    background-image: linear-gradient(90deg,#FF712D,#FFAB1D,#FF712D);
    .coin{
      transition-duration: 300ms;
      transform-origin: center bottom;
      filter: drop-shadow(0 0 8px #00000033);
      width: 134px;
      height: 96px;
      object-fit: cover;
      object-position: top center;
      position: absolute;
      right: 220px;
      bottom: 0;
    }
    .title{
      color: #fffcec;
      font-weight: bolder;
      font-size: 28px;
      text-shadow: 0 0 6px #FF712D;
    }
    .desc{
      color: #fffcec;
      font-weight: bolder;
      text-shadow: 0 0 6px #FF712D;
    }
    .invite-code{
      margin-left: auto;
      color: white;
      font-size: 16px;
      position: relative;
      text-shadow: 0 0 6px #FF712D;
      .code{
        font-weight: bolder;
      }
    }
    &:hover {
      .coin{
        transform: scale(1.04);
      }
    }
  }
  .amount-count{
    position: relative;
    overflow: hidden;
    background-color: #759be8;
    color: white;
    border-radius: 16px;
    margin-top: 36px;
    padding: 24px 24px 24px 48px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .background{
      pointer-events: none;
      color: #ffffff09;
      position: absolute;
      font-size: 170px;
      font-weight: bolder;
      right: -20px;
      bottom: -60px;
    }
    .button-list{
      position: relative;
      display: flex;
      gap: 16px;
      .button{
        color: white;
        text-decoration: none;
        font-size: 14px;
        cursor: pointer;
        padding: 10px 20px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff44;
        &:hover{
          background: #ffffff55;
        }
      }
    }
    .count{
      margin-top: 12px;
      font-size: 48px;
      font-weight: bolder;
    }
  }
}
</style>