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.

147 lines
3.2 KiB

10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
  1. <template>
  2. <view class="change-language">
  3. <!-- 选择语言弹出框 -->
  4. <u-popup :show="show" mode="bottom" round="20rpx" @close="$emit('close');$play()">
  5. <view class="language-list">
  6. <view v-for="item in languageList" :key="item.key" class="language" :class="{ activeLanguage : currentLanguageKey === item.key}" @click="select(item)">{{ item.name }}</view>
  7. </view>
  8. <view class="language-btns">
  9. <view @click="$emit('close');$play()" class="btn">{{ $t('page.changeLanguage.cancel') }}</view>
  10. <view @click="changeLanguage(currentLanguage)" class="btn">{{ $t('page.changeLanguage.confirm') }}</view>
  11. </view>
  12. </u-popup>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. data(){
  18. return {
  19. languageList: [
  20. {
  21. name:'English',//英语
  22. key : "en"
  23. },
  24. {
  25. name : 'العربية',//阿拉伯语
  26. key : "ar"
  27. },
  28. {
  29. name : 'français',//法国
  30. key : 'fr'
  31. },
  32. {
  33. name : 'español',//西班牙语
  34. key : 'es'
  35. },
  36. {
  37. name : 'Русский язык',//俄罗斯
  38. key : 'ru'
  39. }
  40. ],
  41. currentLanguage : {},
  42. currentLanguageKey : this.$i18n.locale
  43. }
  44. },
  45. props : {
  46. show : {
  47. type : Boolean,
  48. default : false
  49. }
  50. },
  51. methods : {
  52. //选择语言
  53. select(item){
  54. this.$play()
  55. this.currentLanguage = item;
  56. this.currentLanguageKey = item.key
  57. },
  58. //修改当前语言
  59. changeLanguage(res){
  60. this.$play()
  61. //#ifdef H5
  62. this.$router.go(0); //刷新页面,不然validate.js不好国际化
  63. //#endif
  64. //#ifdef APP-PLUS
  65. uni.navigateTo({
  66. url: '/pages/home/home' // 要刷新的页面路径
  67. });
  68. //#endif
  69. if(!res.key){
  70. return
  71. }
  72. this.curLanguage = res.key;
  73. // this.$store.commit('changeLanguage', res.key.code);
  74. uni.setStorage({
  75. key: 'language',
  76. data: res.key
  77. })
  78. this.$i18n.locale = res.key
  79. uni.setLocale(res.key) //切换语言环境必须在this.$i18n.locale之后,否则app端会有意想不到的bug
  80. this.$emit('close')
  81. uni.$resMessage = this.$t('message')
  82. }
  83. }
  84. }
  85. </script>
  86. <style lang="scss" scoped>
  87. .change-language{
  88. .language-list{
  89. border: 1px solid #ccc;
  90. width: 96%;
  91. margin: 20rpx auto 20rpx auto;
  92. .language{
  93. position: relative;
  94. display: flex;
  95. justify-content: center;
  96. align-items: center;
  97. color: $uni-text-color;
  98. height: 100rpx;
  99. border-bottom: 1px solid #ccc;
  100. font-size: 32rpx;
  101. &:last-child{
  102. border: none;
  103. }
  104. }
  105. .activeLanguage{
  106. &::after{
  107. position: absolute;
  108. top: 50%;
  109. right: 20rpx;
  110. content: "";
  111. width: 30rpx;
  112. height: 30rpx;
  113. border-radius: 50%;
  114. box-shadow: 0rpx 0rpx 30rpx $uni-bg-color-app;
  115. background: $uni-bg-color-app;
  116. transform: translateY(-50%);
  117. }
  118. }
  119. }
  120. .language-btns{
  121. display: flex;
  122. justify-content: space-between;
  123. flex-wrap: wrap;
  124. color: $uni-text-color;
  125. width: 96%;
  126. margin: 0rpx auto 20rpx auto;
  127. .btn{
  128. display: flex;
  129. align-items: center;
  130. justify-content: center;
  131. width: calc(50% - 15rpx);
  132. border: 1px solid #ccc;
  133. height: 80rpx;
  134. }
  135. }
  136. }
  137. </style>