<template>
|
<div id="#cryptos">
|
<div class="exchangeRate">
|
<assets-head :title="$t('汇率设置')" />
|
<div v-for="(item, index) in exchangeratelist_get_data" :key="index"
|
class="flex justify-between items-center lang-padding font-35 box-border h-127 px-35 "
|
@click="handleSetLang(item)">
|
<div class="lang-title flex items-center font-26 textColor">
|
<img class="w-12 h-12 mr-5" :src="item.url" alt="">
|
{{ item.currency }}
|
</div>
|
|
<img class="w-12 h-12" v-if="item.currency == show_ex" src="../../../assets/image/public/checked.png" />
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { _exchangeratelist, _exchangerateuserconfig } from "@/service/trade.api";
|
import { _getExchangeRate } from '@/service/cryptos.api'
|
import assetsHead from "@/components/Transform/assets-head/index.vue";
|
import { mapActions } from "vuex";
|
import { SET_CURRENCY } from "@/store/const.store";
|
|
export default {
|
data() {
|
return {
|
show_ex: {},
|
list: [
|
{ title: 'USD', key: 'USD' },
|
{ title: 'CNY', key: 'CNY' },
|
{ title: 'ERU', key: 'ERU' },
|
{ title: 'JPY', key: 'JPY' }
|
],
|
exchangeratelist_get_data: []
|
}
|
},
|
components: {
|
assetsHead
|
},
|
mounted() {
|
this.init()
|
},
|
methods: {
|
...mapActions('home', [SET_CURRENCY]),
|
init() {
|
// this.show_ex = this.$store.state.home.currency.currency
|
this.getExchangeRate()
|
this.exchangeratelist_get()
|
},
|
handleImage(url) {
|
return new URL(url, import.meta.url).href
|
},
|
getExchangeRate() {
|
_getExchangeRate({}).then((res) => {
|
this.show_ex = res.currency
|
})
|
},
|
exchangeratelist_get() {
|
const t = this
|
_exchangeratelist({}).then((data) => {
|
t.exchangeratelist_get_data = data
|
t.exchangeratelist_get_data.forEach((item) => {
|
item.image = new URL(`../../../assets/image/exchange-rate/${item.currency}.png`, import.meta.url)
|
item.url = this.handleImage(item.image)
|
})
|
})
|
},
|
handleSetLang(e) {
|
const t = this
|
_exchangerateuserconfig({ rateId: e.uuid }).then((res) => {
|
this.SET_CURRENCY()
|
t.show_ex = e.currency
|
|
})
|
|
},
|
onClickLeft() {
|
this.$router.go(-1)
|
console.log(this.$i18n.locale)
|
},
|
}
|
}
|
</script>
|
<style lang="scss">
|
@import "@/assets/init.scss";
|
|
#cryptos {
|
.exchangeRate {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.lang-padding {
|
border-bottom: 1px solid $line_color;
|
font-weight: 400;
|
color: $black;
|
}
|
|
|
|
}
|
|
.px-35 {
|
padding: 0 20px !important;
|
}
|
|
.h-127 {
|
height: 127px;
|
}
|
|
.lang-padding {
|
padding: 20px 0;
|
}
|
|
.lang-title {
|
font-size: 30px;
|
}
|
</style>
|
