Facti13.Frontend.VueMaterial/src/components/TabsMenuElements/VipView/Components/VipBuyDialog.vue

<template>
  <md-dialog :md-active.sync="showBuyDialog">
    <div class="md-layout md-alignment-bottom-center" style="z-index: 1">
      <div class="md-layout-item md-size-5"/>
      <div class="md-layout-item rounded-and-colored md-size-45 md-small-size-90">
        <h3 class="txt-innert" style="text-align: center; margin: 2% 0%">VIP {{price.human_duration}}</h3>
      </div>
      <div class="md-layout-item rounded-and-colored-circle md-size-5 clickable" v-on:click="closeVBD()">
        <h3 class="txt-innert" style="text-align: center; margin: 25% 0%">X</h3>
      </div>
    </div>
    <div class="md-layout md-alignment-bottom-center" style="margin-top: -2.5%">
      <div class="md-layout-item md-size-50 server-info-rounded md-small-size-100 rounded-only">
        <div style="justify-content: center; display: flex; margin-top: 5.5%">
          <div style="max-width: 50%; float: left;">
            <img class="img-about-buy" :src="price.img_url"/>
          </div>
          <div style="max-width: 50%; float: left;">
            <p class="p-about-buy">VIP на {{price.human_duration}}</p>
            <p class="p-about-buy">Цена в рублях: {{price.money_price}}</p>
            <p class="p-about-buy">Цена в ТФ2 валюте: {{price.item_price}}</p>
            <p class="p-about-buy">п.с принимается только чистыми</p>
          </div>
        </div>
        <hr>
        <div style="justify-content: center; display: flex; margin: 2.5% 0%" v-if="$API.player.auth('steam')">
          <div style="max-width: 40%; float: left;" class="clickable" v-if="price.period !=='free'" v-on:click="price.qiwi===true?buyWithQiwi(price.money_price):showBMDD()">
            <QiwiSvg class="img-vipextra"/>
            <p class="p-vipbuy" style="margin-bottom: -5%">{{price.money_price}} рублей</p>
            <p class="p-vipbuy-extra">В этом году купили {{getStat4('qiwi', price.period)}} раз</p>
          </div>
          <div style="max-width: 40%; float: left;" class="clickable" v-if="price.period !=='free'" v-on:click="price.steam===true?buyWithSteam():showBMDD()">
            <SteamSvg class="img-vipextra"/>
            <p class="p-vipbuy" style="margin-bottom: -5%">{{price.item_price}}</p>
            <p class="p-vipbuy-extra">В этом году купили {{getStat4('steam', price.period)}} раз</p>
          </div>
          <div style="max-width: 40%; float: left;" class="clickable" v-if="price.period !=='free'" v-on:click="price.donationalerts===true?buyWithDA():showBMDD()">
            <DonationAlertsSvg class="img-vipextra"/>
            <p class="p-vipbuy" style="margin-bottom: -5%">{{price.money_price + price.money_price * price.da_percent / 100}} рублей</p>
            <p class="p-vipbuy-extra">В этом году купили {{getStat4('donationalerts', price.period)}} раз</p>
          </div>
          <div style="max-width: 40%; float: left;" class="clickable" v-if="price.period ==='free'" v-on:click="buyWithFree()">
            <FreeSvg class="img-vipextra"/>
            <p class="p-vipbuy" style="margin-bottom: -5%">{{price.item_price}}</p>
            <p class="p-vipbuy-extra">схватили {{getStat4('free', 'day')}} раз</p>
            <FreeVipDialog ref="vfd"/>
          </div>
        </div>
        <div v-if="$API.player.auth('steam')">
          <p class="p-about-buy" style="text-align: center">после получения перезайди на сервер, если тебя не кикнуло автоматом или напиши админам</p>
        </div>
        <div v-else>
          <h3 style="text-align: center; cursor: pointer; text-decoration-line: underline" v-on:click="openAW()">АВТОРИЗОВАТЬСЯ</h3>
          <h4 style="text-align: center">иначе кому ты собрался его покупать</h4>
        </div>
      </div>
    </div>
    <AuthWindow ref="aw" />
    <BuyMethodDisableDialog ref="bmdd" />
  </md-dialog>
</template>

<script>
import QiwiSvg from "@/components/Others/CustomSvg/QiwiSvg.vue";
import SteamSvg from "@/components/Others/CustomSvg/SteamSvg.vue";
import FreeSvg from "@/components/Others/CustomSvg/FreeSvg.vue";
import AuthWindow from "@/components/Others/Auth/AuthWindow.vue";
import FreeVipDialog from "@/components/TabsMenuElements/VipView/Components/FreeVipDialog.vue";
import Random from "@/api/Random";
import BuyMethodDisableDialog from "@/components/ActionDialogs/BuyMethodDisableDialog.vue";
import DonationAlertsSvg from "@/components/Others/CustomSvg/DonationAlertsSvg.vue";

export default {
  name: 'VipBuyDialog',
  components: {DonationAlertsSvg, BuyMethodDisableDialog, FreeVipDialog, AuthWindow, FreeSvg, SteamSvg, QiwiSvg},
  data: () => ({
    showBuyDialog: false
  }),
  props: {
    price: Object
  },
  methods: {
    openVBD() {
      this.showBuyDialog = true;
    },
    closeVBD() {
      this.showBuyDialog = false;
    },
    buyWithSteam() {
      window.open("api/profile/current/buyvip?buy_type=steam" + Random.getRndWebAppend(), "_blank");
    },
    buyWithQiwi(cost) {
      window.open(`api/profile/current/buyvip?buy_type=qiwi&steam64=${this.$API.player.store.steamids.steam64}&cost=${cost}` + Random.getRndWebAppend(), "_blank")
    },
    buyWithDA() {
      window.open("api/profile/current/buyvip?buy_type=donationalerts" + Random.getRndWebAppend(), "_blank");
    },
    buyWithFree() {
      this.$refs.vfd.getFreeVIP();
    },
    openAW() {
      this.$refs.aw.openAW();
    },
    getStat4(service, period) {
      try {
        if (period in this.$API.stats['donate']['year']['statistic'][service])
          return this.$API.stats['donate']['year']['statistic'][service][period];
        else return 0;
      } catch (e) {return 0;}
    },
    showBMDD() {
      this.$refs.bmdd.showMe(true);
    }
  }
}
</script>

<style>
.img-vipextra {
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.img-vipextra:hover {
  color: #fd8846;
}

.p-vipbuy {
  text-align: center; font-size: 2em;
}

.p-vipbuy-extra {
  text-align: center; font-size: 1.5em; color: gray;
}

.p-about-buy {
  text-align: left;
  font-size: 1.5em;
}

.img-about-buy {
  margin-left: auto;
  margin-right: auto;
  display: block;
  border-radius: 10px;
  max-width: 60%;
}
</style>