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.

139 lines
3.0 KiB

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