aluminium-trading-uniapp-240925/pages_order/center/systemSet.vue

<template>
  <view class="page">

    <navbar :title="$t('pageTitle.systemSettings')" leftClick @leftClick="$utils.navigateBack"/>

    <view class="frame">
      <view class="content" v-for="(item, index) in list" :key="index">
        <view class="title">{{ item.title }}</view>
        <view class="item" v-for="(item2, index) in item.itemList" :key="index" @click="tapItem(item2, index)">
          <view class="key">
            <view class="img">
              <img :src="item2.leftIcon" style="width: 100%; height: 100%;"/>
            </view>
            <view class="text">
              {{ item2.text }}
            </view>
          </view>
          <view class="value">
            {{ item.rightIcon }}
          </view>
        </view>
      </view>
    </view>

    <!-- 语言切换 -->
    <!--<view style="padding: 20rpx;"-->
    <!--      @click="$refs.changeLanguage.open()">-->
    <!--  {{ $t('pages.index.index.language') }}-->
    <!--</view>-->
    <changeLanguage ref="changeLanguage"/>

  </view>
</template>
<script>
import topbar from "@/components/base/topbar.vue";
import tabber from "@/components/base/tabbar.vue";
import ChangeLanguage from "@/components/base/changeLanguage.vue";

export default {
  name: "systemSet",
  components: {ChangeLanguage, tabber, topbar},
  data() {
    return {
      list: [
        {
          title: `${this.$t('pageTitle.accountSetting')}`,
          itemList: [
             // text: `${this.$t('pageTitle.switchAccount')}`
            {leftIcon: "../static/center/1.svg",  text: `${this.$t('pageTitle.switchAccount')}`, rightIcon: ">"},
            {leftIcon: "../static/center/2.svg", text: `${this.$t('pageTitle.forgotPasswordPage')}`, rightIcon: ">"},
            {leftIcon: "../static/center/2.svg", text: this.$t('pageTitle.logout'), rightIcon: ">"},
          ]
        },
        {
          title: `${this.$t('pageTitle.systemSetting')}`,
          itemList: [
            {leftIcon: "../static/center/1.svg",  text: `${this.$t('pageTitle.languageSwitch')}`, rightIcon: ">"},
            {leftIcon: "../static/center/2.svg", text: `${this.$t('pageTitle.versionUpdate')}`, rightIcon: ">"},
            {leftIcon: "../static/center/2.svg", text: this.$t('pageTitle.clearCache'), rightIcon: ">"},
          ]
        },
        {
          title: `${this.$t('pageTitle.identitySetting')}`,
          itemList: [
            {leftIcon: "../static/center/2.svg", text: this.$t('pageTitle.switchIdentity'), rightIcon: ">"},
          ]
        }
      ],
    }
  },

  methods: {
    tapItem(item, index) {
      if (item.text === this.$t('pageTitle.languageSwitch')) {
        this.$refs.changeLanguage.open();
      }
    }
  },
}
</script>


<style scoped lang="scss">
.page {
  background-color: #FFF;
  height: 100vh;

  .frame {
    padding: 40rpx;

    .content {
      margin-bottom: 40rpx;

      .title {
        font-size: 30rpx;
        color: #b0b0b0;
      }

      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 40rpx;

        .key {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #333333;
          font-size: 32rpx;

          .img {
            width: 40rpx;
            height: 40rpx;
          }

          .text {
            margin-left: 20rpx;
          }


        }

        .value {
          color: #999999;
          font-size: 36rpx;
        }
      }
    }

  }
}
</style>