VAVABUY/pages/setting/language_currency.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="语言/币种" fixed border>
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
        </template>
      </Navbar>
      <view class="content">
        <view class="cont">
          <view class="wrapper">
            <view class="title">
              <trans _t="语言" />
            </view>
            <view class="wrapper_item">
              <view
                class="_item"
                :class="lang == item.code ? 'active' : ''"
                v-for="(item, index) in langeuageList"
                :key="index"
                @click="langClick(item)"
              >
                <up-avatar
                  :src="item.icon"
                  size="22"
                  style="margin-right: 8rpx"
                ></up-avatar>
                {{ item.title }}
              </view>
            </view>
          </view>
          <view class="wrapper">
            <view class="title">
              <trans _t="币种" />
            </view>
            <view class="wrapper_item">
              <view
                class="_item"
                :class="currency == item.title ? 'active' : ''"
                v-for="(item, index) in rateList"
                :key="index"
                @click="currencySelect(item)"
              >
                {{ item.title }}
              </view>
            </view>
          </view>
        </view>
        <view class="btn">
          <view class="btns" @click="confirm">
            <trans _t="好的" />
          </view>
        </view>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import { computed, ref } from "vue";
import { useSystemStore, useShopStore } from "@/store";
import { setLan } from "@/locale";

const useSystem = useSystemStore();
const useShop = useShopStore();
const rateList = computed(() => useSystem.getRateList);
const langeuageList = computed(() => useSystem.getLangeuage);
const _lang = computed(() => useSystem.getLang);
const _currency = computed(() => useSystem.getCurrency);
const lang = ref(_lang.value);
const currency = ref(_currency.value);

const langClick = (item) => {
  lang.value = item.code;
};

const currencySelect = (item) => {
  currency.value = item.title;
};

const confirm = () => {
  if (_lang.value === lang.value && currency.value === _currency.value)
    return uni.navigateBack();
  if (_lang.value != lang.value) {
    useSystem.setLan(lang.value);
    setLan(lang.value, () => {
      useSystem.setWinnotice();
      useShop.setHotLink();
      // useSystem.setBanner();
    });
  }
  useSystem.setCurrency(currency.value);
  uni.navigateBack();
};
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  background: var(--bg);
  min-height: 100vh;

  .content {
    padding: 0 24rpx;

    .cont {
      padding: 32rpx 24rpx;
      border-radius: 16rpx;
      background-color: var(--light);
      margin-top: 24rpx;
      .flex();
      flex-direction: column;
      row-gap: 40rpx;

      .wrapper {
        .title {
          color: var(--text);
          .size(28rpx);
          font-weight: 700;
          line-height: 60rpx;
        }

        &_item {
          display: grid;
          gap: 24rpx;
          grid-template-columns: repeat(3, 1fr);

          ._item {
            display: flex;
            border-radius: 30rpx;
            .size(24rpx);
            height: 60rpx;
            padding: 16rpx;
            border: 1px solid var(--text-02);
            color: var(--text-02);
            cursor: pointer;
            font-weight: 700;
            text-align: center;
            white-space: nowrap;
            .flex_center();
          }

          .active {
            border-color: var(--black);
            background-color: var(--black);
            color: var(--bg);
          }
        }
      }
    }

    .btn {
      padding: 32rpx 0;

      .btns {
        background-color: var(--black);
        padding: 16rpx 30rpx;
        border-radius: 16rpx;
        height: 48px;
        .flex_center();
        .size(24rpx);
        color: var(--light);
      }
    }
  }
}
</style>