added template for payments-mobile, add show for payments-mobile in profile-mobiile

This commit is contained in:
Kostya
2024-01-13 12:00:37 +03:00
parent d0477a3c12
commit ad804c3dea
3 changed files with 131 additions and 6 deletions

View File

@@ -12,25 +12,43 @@
<h3 class="text-nickname-user">Artmeka</h3>
<h3 class="balance-border balance-display balance-text"><img src="@/assets/icons-profile/icon-diamond-ore.png">999</h3>
<div class="profile-mobile__btns-payments">
<a href="#" class="deposit-button"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-deposit.svg"> Пополнить</a>
<a href="#" class="withdraw-button"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-withdraw.png"> Вывести</a>
<a href="#" @click="paymetsCall('dep')" class="deposit-button"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-deposit.svg"> Пополнить</a>
<a href="#" @click="paymetsCall('with')" class="withdraw-button"><img class="icon-margin-deposit-withdraw" src="@/assets/icons-profile/icon-withdraw.png"> Вывести</a>
</div>
</div>
</div>
</main>
<menu-mobile-component></menu-mobile-component>
<payments-mobile @closemodal="paymentsClose" :payments="payments" v-if="payments.paymentsWindow"></payments-mobile>
</div>
</template>
<script>
import HeaderMobileComponent from "@/components/adaptive-components/HeaderMobileComponent.vue";
import MenuMobileComponent from "@/components/adaptive-components/MenuMobileComponent.vue";
import PaymentsMobile from "@/components/adaptive-components/PaymentsMobile.vue";
import '@/assets/css/PagesStyles/adaptive-pages/profilemobile.css'
export default {
components: { HeaderMobileComponent, MenuMobileComponent }
components: { HeaderMobileComponent, MenuMobileComponent, PaymentsMobile },
data () {
return {
payments: {
paymentsWindow: false,
paymentsView: false
},
}
},
methods: {
paymetsCall(view) {
this.payments.paymentsWindow = true
this.payments.paymentsView = view === 'dep'
},
paymentsClose() {
this.payments.paymentsWindow = false
}
}
}
</script>