220 lines
4.1 KiB
220 lines
4.1 KiB
|
|
|
|
|
|
<template>
|
|
<view class="u-page">
|
|
|
|
<view class="empty-select">
|
|
<u-cell
|
|
:titleStyle="{fontWeight: 500}"
|
|
@click="changeLang"
|
|
:title="$t('pages.user.setting.index.setLang')"
|
|
:value="nowLang"
|
|
isLink
|
|
>
|
|
<image
|
|
slot="icon"
|
|
class="u-cell-icon"
|
|
src="@/static/img/common/lang.png"
|
|
mode="widthFix"
|
|
></image>
|
|
</u-cell>
|
|
</view>
|
|
|
|
<view class="btn_box">
|
|
<u-button type="primary" :plain="true" :hairline="true" :text="$t('locale.logout')" size="normal" @click="logout"></u-button>
|
|
</view>
|
|
|
|
|
|
<u-action-sheet
|
|
:show="changeLangShow"
|
|
@close="changeLangShow = false"
|
|
:actions="langList"
|
|
@select="confirmLang"
|
|
cancelText="取消"
|
|
>
|
|
</u-action-sheet>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
|
|
return {
|
|
systemLocale: '',
|
|
applicationLocale: '',
|
|
nowLang:'',//当前语言
|
|
// list: [{
|
|
// imgName: 'lang',
|
|
// title: this.$t('pages.user.setting.index.setLang'),
|
|
// iconUrl: '/static/img/common/lang.png',
|
|
// },
|
|
// ],
|
|
changeLangShow:false,
|
|
langList: [
|
|
{
|
|
name: this.$t('locale.zh-hans'),
|
|
val:'zh-Hans',
|
|
},
|
|
{
|
|
name: this.$t('locale.zh-hant'),
|
|
val:'zh-Hant',
|
|
},
|
|
{
|
|
name: this.$t('locale.en'),
|
|
val:'en'
|
|
}],
|
|
langListVal:['zh-Hans','zh-Hant','en'],
|
|
}
|
|
},
|
|
onLoad() {
|
|
var _this =this;
|
|
_this.loadData();
|
|
},
|
|
methods: {
|
|
loadData(){
|
|
var _this =this;
|
|
let systemInfo = uni.getSystemInfoSync();
|
|
_this.systemLocale = systemInfo.language;
|
|
var lang = uni.getLocale();
|
|
console.log('lang：'+lang);
|
|
_this.applicationLocale =lang;
|
|
_this.returnLang(lang);
|
|
_this.isAndroid = systemInfo.platform.toLowerCase() === 'android';
|
|
uni.onLocaleChange((e) => {
|
|
_this.applicationLocale = e.locale;
|
|
_this.returnLang(e.locale);
|
|
})
|
|
},
|
|
returnLang(code)
|
|
{
|
|
var _this =this;
|
|
var list = _this.langListVal;
|
|
list.forEach((item, $index, arr) => {
|
|
//console.log(`${item} => ${$index} => ${arr}`);
|
|
if(item == code)
|
|
{
|
|
console.log(_this.langList[$index].name);
|
|
_this.nowLang = _this.langList[$index].name;
|
|
return;
|
|
}
|
|
})
|
|
},
|
|
//改变当前语言
|
|
changeLang() {
|
|
//this[`show${index}`] = true
|
|
this[`changeLangShow`] = true;
|
|
},
|
|
confirmLang(e){
|
|
console.log(e);
|
|
var _this =this;
|
|
_this.onLocaleChange(e.val);
|
|
},
|
|
|
|
onLocaleChange(code) {
|
|
var _this =this;
|
|
_this[`changeLangShow`] = false;
|
|
uni.showModal({
|
|
content: _this.$t('locale.language-change-confirm'),
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.setLocale(code);
|
|
_this.$i18n.locale = code;
|
|
_this.returnLang(code);
|
|
uni.switchTab({
|
|
url:'pages/index/index'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
|
|
//退出登录
|
|
logout(){
|
|
var _this =this;
|
|
var post = {};
|
|
_this.$api.post('user/logout',post,function(rs){
|
|
console.log(rs);
|
|
uni.removeStorageSync('userInfo');
|
|
uni.removeStorageSync('token');
|
|
uni.$u.route({
|
|
type:'switchTab',
|
|
url:'pages/index/index',
|
|
params: {}
|
|
});
|
|
},function(err){
|
|
console.log(err);
|
|
});
|
|
uni.$u.toast(_this.$t('locale.logout'));
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.u-block{
|
|
padding: 14px;
|
|
&__section{
|
|
margin-bottom:10px;
|
|
}
|
|
&__title {
|
|
margin-top:10px;
|
|
font-size: 15px;
|
|
color: $u-content-color;
|
|
margin-bottom:10px;
|
|
}
|
|
&__flex{
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
}
|
|
}
|
|
|
|
// 使用了cell组件的icon图片样式
|
|
.u-cell-icon {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.u-page {
|
|
padding: 15px 15px 40px 15px;
|
|
}
|
|
|
|
.u-demo-block {
|
|
flex: 1;
|
|
margin-bottom: 23px;
|
|
|
|
&__content {
|
|
@include flex(column);
|
|
}
|
|
|
|
&__title {
|
|
font-size: 14px;
|
|
color: rgb(143, 156, 162);
|
|
margin-bottom: 8px;
|
|
@include flex;
|
|
}
|
|
}
|
|
|
|
|
|
.u-page {
|
|
padding: 40rpx 0px;
|
|
|
|
&__top-box {
|
|
padding-left: 40rpx;
|
|
}
|
|
}
|
|
|
|
.empty-select {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.btn_box{ width: 80%; margin: 120rpx auto 20rpx auto;}
|
|
</style>
|
|
|