You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 lines
3.8 KiB
146 lines
3.8 KiB
<template>
|
|
<view class="main">
|
|
<!-- nav -->
|
|
<navigation>{{ i18n.Language }}</navigation>
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="body-app">
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<view class="body">
|
|
<!-- #endif -->
|
|
|
|
<radio-group class="radioGroup" @change="changeLanguage" v-model="language">
|
|
<label class="checkBox" v-for="(item, index) in languageData" :key="index">
|
|
<view class="name">{{ item.title }}</view>
|
|
<radio class="radio" color="#00E8A2" shape="square" :value="`${index}`"
|
|
:checked="language === item.language">
|
|
</radio>
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import KeyValueRow from '../../components/KeyValueRow/KeyValueRow.vue';
|
|
import languageData from '@/utils/language/config'
|
|
export default {
|
|
components: { KeyValueRow },
|
|
name: "donateRecord",
|
|
data() {
|
|
return {
|
|
languageData,
|
|
language: languageData[0].language || 'en_US',
|
|
langTrue: languageData[0].title || 'English',
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("me");
|
|
},
|
|
},
|
|
onLoad() {
|
|
},
|
|
onShow() {
|
|
if (uni.getStorageSync('langTrue')) {
|
|
this.langTrue = uni.getStorageSync('langTrue')
|
|
this.language = this._i18n.locale
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
changeLanguage(e) {
|
|
const index = e.target.value || 0
|
|
const current = this.languageData[index]
|
|
// console.log(current);
|
|
this._i18n.locale = current.language
|
|
this.$store.commit('setLanguage', current.language)
|
|
this.langTrue = current.title
|
|
uni.setStorageSync('langTrue', current.title)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
|
|
.body {
|
|
overflow: hidden;
|
|
margin-top: 200rpx;
|
|
|
|
.radioGroup {
|
|
margin-top: 60rpx;
|
|
height: 432rpx;
|
|
padding: 0 48rpx;
|
|
|
|
.checkBox {
|
|
position: relative;
|
|
height: 112rpx;
|
|
line-height: 112rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 2rpx solid #323045;
|
|
font-size: 32rpx;
|
|
|
|
.radio {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
/deep/.uni-radio-input {
|
|
// width: 48rpx;
|
|
// height: 48rpx;
|
|
// border-radius: 48rpx;
|
|
background: transparent;
|
|
}
|
|
|
|
// /deep/.uni-radio-input-checked::before {
|
|
// font-size: 36rpx;
|
|
// }
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
.body-app{
|
|
overflow: hidden;
|
|
margin-top: 200rpx !important;
|
|
|
|
.radioGroup {
|
|
margin-top: 60rpx;
|
|
height: 432rpx;
|
|
padding: 0 48rpx;
|
|
|
|
.checkBox {
|
|
position: relative;
|
|
height: 112rpx;
|
|
line-height: 112rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 2rpx solid #323045;
|
|
font-size: 32rpx;
|
|
|
|
.radio {
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
/deep/.uni-radio-input {
|
|
// width: 48rpx;
|
|
// height: 48rpx;
|
|
// border-radius: 48rpx;
|
|
background: transparent;
|
|
}
|
|
|
|
// /deep/.uni-radio-input-checked::before {
|
|
// font-size: 36rpx;
|
|
// }
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|