language.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <template>
  2. <view class="content">
  3. <view class="list">
  4. <view class="list-item flex" v-for="(item, index) in list" @click="change(item.type)">
  5. <view class="item-left">{{ item.name }}</view>
  6. <view class="item-right" v-if="language == item.type"><image src="../../static/img/gou.png" mode=""></image></view>
  7. </view>
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. export default {
  13. data() {
  14. return {
  15. language: '',
  16. list: [{ name: '繁體中文', type: 'zh-CN' }, { name: 'English', type: 'en' }]
  17. };
  18. },
  19. onLoad() {
  20. let lang = uni.getStorageSync('lang');
  21. console.log(lang);
  22. if (lang) {
  23. this.language = lang;
  24. }
  25. },
  26. onShow() {},
  27. methods: {
  28. change(type) {
  29. if (type == 'zh-CN') {
  30. this._i18n.locale = 'zh_cn';
  31. } else {
  32. this._i18n.locale = type;
  33. }
  34. this.language = type;
  35. uni.setStorageSync('lang', type);
  36. uni.switchTab({
  37. url: '/pages/index/index'
  38. });
  39. }
  40. }
  41. };
  42. </script>
  43. <style lang="scss">
  44. page,
  45. .content {
  46. min-height: 100%;
  47. height: auto;
  48. background: #fff;
  49. }
  50. .list-item {
  51. padding: 40rpx 20rpx;
  52. .item-left {
  53. font-size: 36rpx;
  54. color: #707a8a;
  55. }
  56. .item-right {
  57. width: 36rpx;
  58. height: 36rpx;
  59. image {
  60. width: 100%;
  61. height: 100%;
  62. }
  63. }
  64. }
  65. </style>