loan/src/views/index/my/index.vue

<template>
  <j-nav-bar/>
  <div class="header">
    <div class="header-bj">
      <div class="header-head" :style="{'--bg-image': `url(${headerImage}) no-repeat`}"></div>
      <div class="header-text">{{ customerInfo.nickName }}</div>
    </div>
  </div>
  <div class="content">

    <div class="action">
      <van-cell :title="$t('my.userInfo')" is-link to="userInfo" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon :name="getAssetsImages('my/my_info.png')" />
          </div>
        </template>
      </van-cell>
      <van-cell :title="$t('my.loan')" is-link to="myLoan" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon :name="getAssetsImages('my/my_info1.png')" />
          </div>
        </template>
      </van-cell>
      <van-cell :title="$t('my.repayment')" is-link to="myRepayment" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon :name="getAssetsImages('my/my_info2.png')" />
          </div>
        </template>
      </van-cell>
<!--      <van-cell title="获取开户权限" is-link to="" >-->
<!--        <template #icon>-->
<!--          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">-->
<!--            <van-icon name="/src/assets/images/my/my_info3.png" />-->
<!--          </div>-->
<!--        </template>-->
<!--      </van-cell>-->
      <van-cell :title="$t('my.legalLiability')" is-link @click="go('/agreement', 'lawAgreement')" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon :name="getAssetsImages('my/my_info4.png')" />
          </div>
        </template>
      </van-cell>
<!--      <van-cell title="签名" is-link @click="go('/signature', null)" >-->
<!--        <template #icon>-->
<!--          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">-->
<!--            <van-icon name="invitation" />-->
<!--          </div>-->
<!--        </template>-->
<!--      </van-cell>-->
<!--      <van-cell title="我的合同" is-link @click="go('/contract', null)" >-->
<!--        <template #icon>-->
<!--          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">-->
<!--            <van-icon name="completed" />-->
<!--          </div>-->
<!--        </template>-->
<!--      </van-cell>-->
    </div>
    <div class="action">
      <van-cell :title="$t('my.uploadPassword')" is-link to="uploadPassword" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon :name="getAssetsImages('my/my_info5.png')" />
          </div>
        </template>
      </van-cell>
      <van-cell :title="$t('my.language')" is-link @click="checkLanguage()" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon name="chat-o" />
          </div>
        </template>
      </van-cell>
      <van-cell :title="$t('my.logout')" is-link @click="logout" >
        <template #icon>
          <div style="display: flex; justify-content: center; align-items: center; padding-right: 5px">
            <van-icon :name="getAssetsImages('my/my_info66.png')" />
          </div>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script setup lang="ts">
import {showConfirmDialog} from "vant";
import {getAssetsImages} from "@/utils";
import {useUserStore} from "@/store/modules/user";
import {useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {getCustomerInfo} from "@/api";
import {resetData} from "@/utils/dataUtil";
import { useI18n } from 'vue-i18n';
import { getDefaultLocal } from '@/api/system/user';

const userStore = useUserStore()
const router = useRouter()
const { t } = useI18n()

const headerImage = ref('https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg')

const logout = () => {

  showConfirmDialog({
    title: t('app.prompt'),
    message: t('app.enterLogout'),
    width: '500px'
  })
    .then(() => {
      userStore.logout().then(res => {
        router.push({
          path: '/login'
        })
      })
    })
    .catch(() => {
      // on cancel
    });
}

const go = (url, key) => {
  // agreement
  router.push({
    path: url,
    query: {
      key: key
    }
  })
}

const checkLanguage = () => {
  // getDefaultLocal().then(res => {
  //   console.log('res', res)
  //   if (res === 'gu_IN') {
  //     localStorage.setItem('lang', 'id')
  //   } else {
  //     localStorage.setItem('lang', 'zh')
  //   }
  //   location.reload()
  // })
  const lang = localStorage.getItem('lang')
  if (lang === 'zh') {
    localStorage.setItem('lang', 'id')
  } else {
    localStorage.setItem('lang', 'zh')
  }
  location.reload()
}


const customerInfo = reactive({
  "account": 0,
  "borrowAccount": 0,
  "id": 0,
  "lastLoginIp": "",
  "lastLoginTime": "",
  "loansFlag": 0,
  "nickName": "",
  "phoneNumber": "",
  "realNameAuth": 0,
  "repaymentAccount": 0,
  "status": 0,
  "updateTime": "",
  "withdrawFlag": 0
})
const _getCustomerInfo = () => {
  getCustomerInfo().then(res => {
    resetData(customerInfo, res)
  })
}

onMounted(() => {
  _getCustomerInfo()
})
</script>

<style scoped lang="scss">

.header {
  background: #151515;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: end;
  overflow: hidden;

  &-bj {
    background: url("../../../assets/images/my/user_card.png") no-repeat;
    background-size: 100% 100%;
    height: 330px;
    width: 666px;
    transform: translateY(80px);
    display: flex;
    align-items: center;
    flex-flow: column;
    .header-head {
      height: 180px;
      width: 180px;
      border: 10px solid #f9c947;
      border-radius: 100px;
      background: #f9c947;
      transform: translateY(-90px);
      background: var(--bg-image);
      background-size: 100% 100%;
    }
    .header-text {
      font-size: 38px;
      font-weight: bold;
      color: #111a34;
      transform: translateY(-60px);
    }
  }
}

.content {

  .action {
    margin: 20px;
    border-radius: 20px;
    overflow: hidden;
    //
  }
}

</style>