boursecu_user/src/views/base/about/index.vue

<template>
  <div>
    <div class="bg-white wrap-fix z-200001 py-3 px-3 text-primary font-bold drop-shadow flex">
      <div @click="router.back()" class="cursor-pointer">
        <BasicIcon icon="vuesax-linear:arrow-right-1" />
      </div>
      <div class="mr-2">درباره ما</div>
    </div>
    <div class="pt-20">
      <div>
        <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
      </div>
      <div class="text-justify text-base z-200000 relative">
        <div class="px-10">
<!--          <img :src="logoFull" class="mb-20 mt-5" />-->
          <div class="overflow-y-auto h-65vh pb-20">
            <div class="bg-primary text-white rounded-[12px] p-4 text-xs leading-5">
              <template v-for="(section, sectionIndex) in aboutSections" :key="sectionIndex">
                <div v-if="sectionIndex > 0" class="w-full h-1px my-3 bg-tertiary"></div>
                <div v-if="section.title" class="font-bold text-sm mb-2">
                  {{ section.title }}
                </div>
                <div
                  v-for="(paragraph, paragraphIndex) in section.paragraphs ?? []"
                  :key="`paragraph-${sectionIndex}-${paragraphIndex}`"
                  :class="paragraphIndex > 0 ? 'mt-3' : ''"
                >
                  {{ paragraph }}
                </div>
                <div
                  v-for="(item, itemIndex) in section.items ?? []"
                  :key="`item-${sectionIndex}-${itemIndex}`"
                  class="mt-2"
                >
                  • {{ item }}
                </div>
              </template>
              <div class="w-full h-1px my-3 bg-tertiary"></div>
            </div>
          </div>
        </div>
        <div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
          <a class="w-full" href="tel:09306612518">
            <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
          </a>
          <a href="https://ble.ir/garoosigallery">
            <img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
          </a>
        </div>
        <div v-else class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
          <a class="w-full" href="tel:">
            <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
          </a>
          <a href="https://ble.ir/">
          <img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
           </a>
        </div>
      </div>
    </div>
    <!--    <ActionSheet v-model:show="editPassVisible">salam</ActionSheet>-->
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, computed } from 'vue'
import img from '@/assets/img/user_ly1.svg'
import gr_bottom from './assets/img/gr_bottom_white.svg'
import { loading } from '@/utils'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
import { lengthValidation, required } from '@/utils/inputRules'
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
import type { User } from '@/models/login'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import router from '@/router'
import type { FormInstance } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import { updateMe } from '@/api/me'
import { useUserStore } from '@/store/userStore'
import {useConfigStore} from "@/store/configStore";
import {getReferralShareText, getReferralShareTitle, isBoursecuProject} from "@/utils/config";
import { getAboutSections } from './aboutContent'

const config=useConfigStore()

const userFormState = ref<User>({
  fname: '',
  lname: '',
  mobile: undefined,
  birth_date: '',
  phone_number: '',
  province: '',
  city: '',
  n_code: undefined
})
const formRef = ref<FormInstance>()
const userStore = useUserStore()
const nameProject= useConfigStore().config.name_fa
const aboutSections = computed(() => getAboutSections(nameProject, isBoursecuProject()))

// const editPassVisible = ref<boolean>(false)
const editPassVisible = ref<boolean>(false)

function setForm() {
  userFormState.value = userStore.userInfo
}

function copyCode() {
  // nextTick(() => {
  const val = userStore.userInfo?.referral_id
  navigator.clipboard.writeText(val)
  message.info('کد رونوشت شد')
  // })
}

function shareCode() {
  const val = getReferralShareText({
    userName: userStore.userInfo?.name,
    projectName: nameProject,
    referralId: userStore.userInfo?.referral_id,
  })
  navigator.share({
    title: getReferralShareTitle(nameProject),
    text: val
  })
}

const resetData = () => {
  formRef.value?.resetFields()
  userFormState.value = {
    fname: '',
    lname: '',
    mobile: undefined,
    birth_date: '',
    phone_number: '',
    province: '',
    city: '',
    n_code: undefined
  }
}

onMounted(() => {
  setForm()
})

function ok() {
  formRef.value?.validateFields().then(async () => {
    try {
      loading.value = true
      await updateMe(userFormState.value)
      await userStore.getMyInfo()
      editPassVisible.value = false
      message.success('اطلاعات شما با موفقیت به روز رسانی شد')
    } catch (e) {
      console.log(e)
    } finally {
      loading.value = false
    }
  })
}
</script>

<style scoped>
/*.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}*/
/*.trans{
  transition:  height 1s;
}*/
</style>