mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
edmondlang
132 lines
5.9 KiB
Vue
132 lines
5.9 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row" style="margin-left:1px; margin-right:1px;" v-if='selectedCurrency'>
|
|
<div class="col bg-primary text-white">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col-auto p-r-0">
|
|
<span class="p-t-20 p-b-20 flag-icon fs-14"
|
|
:class="'flag-icon-' + selectedCurrency.country.short_code.toLowerCase()"></span>
|
|
</div>
|
|
<div class="col p-l-5 p-r-20">
|
|
{{ selectedCurrency.short_code }}
|
|
</div>
|
|
<div class="col-auto h-100 pointer" @click="recipientMenu = !recipientMenu">
|
|
<div class="row align-items-center bg-primary-light h-100">
|
|
<div class="col ">
|
|
<i class="fa fa-angle-down fs-14 m-t-5"
|
|
:class="[{ 'fa-angle-down': !recipientMenu }, { 'fa-angle-up': recipientMenu }]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100 text-master">
|
|
<div class="absolute w-100 b-l b-b b-r b-success" :class="[{ 'hide': !recipientMenu }]"
|
|
style="top: 100%; right: 0; z-index: 1;">
|
|
<div class="row text-left no-margin bg-white">
|
|
<div class="col no-padding">
|
|
<div class="row no-margin" v-for="currency in currencyList"
|
|
v-bind:key="currency.id">
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 "
|
|
:class="[{ 'bg-primary-light': selectedCurrency.id === currency.id }, { 'text-white': selectedCurrency.id === currency.id }, { 'hover-primary': selectedCurrency.id !== currency.id }, { 'pointer': selectedCurrency.id !== currency.id }]"
|
|
@click="updateCurrency(currency)">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto p-r-5 p-l-0">
|
|
<span class="flag-icon fs-14"
|
|
:class="'flag-icon-' + currency.country.short_code.toLowerCase()"></span>
|
|
</div>
|
|
<div class="col-auto p-l-5">
|
|
<div class="font-heading fs-12">
|
|
{{ currency.short_code }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
currecy_id: {
|
|
type: Number,
|
|
required: false,
|
|
default: null
|
|
},
|
|
},
|
|
watch: {
|
|
currecy_id(newValue, oldValue) {
|
|
var currencySelected = this.currencyList.find(currencyList => currencyList.id === newValue);
|
|
this.updateCurrency(currencySelected);
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
section: 'chooseCurrencySection',
|
|
currencyList: [
|
|
// {
|
|
// "id": 1,
|
|
// "country": {
|
|
// "id": 1,
|
|
// "name": "Malaysia",
|
|
// "short_code": "MY",
|
|
// "phone_code": "60"
|
|
// },
|
|
// "name": "Malaysian Ringgit",
|
|
// "short_code": "MYR",
|
|
// "symbol": "RM"
|
|
// },
|
|
{
|
|
"id": 2,
|
|
"country": {
|
|
"id": 2,
|
|
"name": "China",
|
|
"short_code": "CN",
|
|
"phone_code": "86"
|
|
},
|
|
"name": "Yuan Renminbi",
|
|
"short_code": "RMB",
|
|
"symbol": "¥"
|
|
},
|
|
{
|
|
"id": 3,
|
|
"country": {
|
|
"id": 3,
|
|
"name": "United States",
|
|
"short_code": "US",
|
|
"phone_code": "1"
|
|
},
|
|
"name": "US Dollar",
|
|
"short_code": "USD",
|
|
"symbol": "$"
|
|
}
|
|
],
|
|
recipientMenu: false,
|
|
selectedCurrency: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.updateCurrency(Object.values(this.currencyList)[0]);
|
|
},
|
|
methods: {
|
|
updateCurrency(currency) {
|
|
this.selectedCurrency = currency;
|
|
this.recipientMenu = false;
|
|
this.$emit('input', currency.id);
|
|
},
|
|
}
|
|
}
|
|
</script>
|