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

<template>
  <div>
    <div class="wrap-fix z-1 bg-white 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">
<!--          <div class="h-20vh flex justify-center">
            <img :src="logoFull" class="mb-20 h-15vh mt-5" />
          </div>-->
          <div class="overflow-y-auto h-60vh pb-20 border-primary">
            <div class="rules-panel mt-5 border-solid border-2 border-primary text-primary rounded-[12px] p-4">
              <div class="font-bold text-sm text-primary">
                {{ rulesTitle }}
              </div>
              <div class="w-full h-1px my-3 bg-secondary"></div>
              <div
                v-for="(block, blockIndex) in rulesBlocks"
                :key="`block-${blockIndex}`"
                class="rules-block"
              >
                <div
                  v-if="block.title"
                  class="font-bold text-sm text-primary mt-4 mb-2"
                >
                  {{ block.title }}
                </div>
                <p
                  v-for="(rule, index) in block.items"
                  :key="`rule-${blockIndex}-${index}`"
                  class="rules-paragraph"
                >
                  {{ rule }}
                </p>
              </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:09031265925">
            <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="getProjectSupportPhoneLink()">
            <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
          </a>
          <a :href="getProjectBaleLink()" target="_blank" rel="noopener noreferrer">
            <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 BaseDatePicker from '@/components/BasicPacks/BaseDatePicker'
import {useConfigStore} from "../../../store/configStore";
import {getProjectBaleLink, getProjectSupportPhoneLink, getReferralShareText, getReferralShareTitle, isBoursecuProject} from "@/utils/config";
import {
  getRulesBlocks,
  getRulesTitle,
} from './rulesContent'
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 = computed(() => config.config?.name_fa || config.config?.name || 'بورس مس')
const isBoursecu = computed(() => isBoursecuProject())
const rulesTitle = computed(() => getRulesTitle(nameProject.value, isBoursecu.value))
const rulesBlocks = computed(() => getRulesBlocks(nameProject.value, isBoursecu.value))
// 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.value,
    referralId: userStore.userInfo?.referral_id,
  })
  navigator.share({
    title: getReferralShareTitle(nameProject.value),
    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>
.rules-panel {
  font-size: 0.875rem;
  line-height: 1.75rem;
}

.rules-block + .rules-block {
  margin-top: 0.5rem;
}

.rules-paragraph {
  margin: 0 0 1rem;
  text-align: justify;
  line-height: 1.9;
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

.rules-paragraph:last-child {
  margin-bottom: 0;
}
</style>