index.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <template>
  2. <view class="language-page">
  3. <view class="header">
  4. <text class="title">语言设置</text>
  5. </view>
  6. <view class="language-list">
  7. <view class="language-item"
  8. v-for="(item, index) in languages"
  9. :key="index"
  10. @tap="selectLanguage(item.value)"
  11. >
  12. <text>{{item.label}}</text>
  13. <text class="iconfont check" v-if="currentLang === item.value">&#xe685;</text>
  14. </view>
  15. </view>
  16. </view>
  17. </template>
  18. <script>
  19. export default {
  20. data() {
  21. return {
  22. currentLang: 'zh-CN',
  23. languages: [
  24. { label: '简体中文', value: 'zh-CN' },
  25. { label: '繁體中文', value: 'zh-TW' },
  26. { label: 'English', value: 'en-US' }
  27. ]
  28. }
  29. },
  30. onLoad() {
  31. // 获取当前语言设置
  32. const lang = uni.getStorageSync('language') || 'zh-CN';
  33. this.currentLang = lang;
  34. },
  35. methods: {
  36. selectLanguage(lang) {
  37. if (lang === this.currentLang) return;
  38. uni.showModal({
  39. title: '提示',
  40. content: '切换语言需要重启应用,是否继续?',
  41. success: (res) => {
  42. if (res.confirm) {
  43. // 保存语言设置
  44. uni.setStorageSync('language', lang);
  45. this.currentLang = lang;
  46. // 重启应用
  47. setTimeout(() => {
  48. uni.reLaunch({
  49. url: '/pages/index/indexNew'
  50. });
  51. }, 1500);
  52. }
  53. }
  54. });
  55. }
  56. }
  57. }
  58. </script>
  59. <style lang="scss" scoped>
  60. .language-page {
  61. min-height: 100vh;
  62. background: #f5f5f5;
  63. }
  64. .header {
  65. background: #fff;
  66. padding: 20rpx 30rpx;
  67. .title {
  68. font-size: 32rpx;
  69. font-weight: bold;
  70. color: #333;
  71. }
  72. }
  73. .language-list {
  74. margin-top: 20rpx;
  75. background: #fff;
  76. .language-item {
  77. display: flex;
  78. align-items: center;
  79. justify-content: space-between;
  80. padding: 30rpx;
  81. border-bottom: 1px solid #eee;
  82. text {
  83. font-size: 28rpx;
  84. color: #333;
  85. }
  86. .check {
  87. color: #D93025;
  88. }
  89. &:last-child {
  90. border-bottom: none;
  91. }
  92. }
  93. }
  94. </style>