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

<template>
  <div>
    <div class="wrap-fix z-1 bg-white py-3 px-3 text-black 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-10">
      <div>
<!--        <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />-->
<!--        <img :src="config.config.avatar" 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="config.config.avatar" alt="" class="mb-20 h-15vh mt-5">
          </div>
          <div class="overflow-y-auto h-60vh pb-10 border-[#093D51]">
            <div
                class="mt-5 text-5 border-solid border-2 border-[#093D51] text-[#093D51] rounded-[12px] p-4"
            >
              <div class="font-bold text-sm text-[#093D51]">
                شیوهٔ ورود و ثبت ‌نام در گروسی گالری
              </div>
              <div class="mt-5 text-xs leading-5">
                • برای ثبت‌نام در گروسی گالری، اگر قبلاً حساب کاربری دارید می‌توانید از طریق پیامک وارد شوید.<br />
                • اگر حساب کاربری ندارید، "از این قسمت" وارد صفحه ثبت نام شده و با وارد کردن نام و شماره تلفنی که با کد ملی شما مطابقت دارد، حساب کاربری بسازید.<br />
                • الزامی به وارد کردن کد معرف نیست.
              </div>
              <img :src="img1" />

              <div class="w-full h-1px my-3 bg-secondary"></div>
              <div class="font-bold mt-4 text-sm text-[#093D51]">
                شارژ کیف پول
              </div>
              <div class="mt-5 text-xs leading-5">
                • ابتدا کیف پول را در منو انتخاب کرده، مبلغ مورد نظر را وارد نموده و دکمه واریز را انتخاب کنید تا کیف پول شما شارژ شود.<br />
              </div>
              <img :src="img2" />

              <div class="w-full h-1px my-3 bg-secondary"></div>
              <div class="font-bold mt-4 text-sm text-[#093D51]">
                شیوهٔ خرید از گروسی گالری
              </div>
              <div class="mt-5 text-xs leading-5">
                • سپس از بخش «خرید و فروش» انتخاب کنید که طلای آب‌شده می‌خواهید یا محصولات دیگر (شامل گوی، شمش یا مکعب).<br />
                • توجه داشته باشید کارمزد طلای آب‌شده حدود ۲٪ است و کارمزد ریالی محصولات دیگر در پایین صفحه قیمت درج شده است.
              </div>
              <img :src="img4" />

              <div class="w-full h-1px my-3 bg-secondary"></div>
              <div class="font-bold mt-4 text-sm text-[#093D51]">
                شیوهٔ فروش در گروسی گالری
              </div>
              <div class="mt-5 text-xs leading-5">
                • برای فروش محصولاتی که خریداری کرده‌اید، به بخش «خرید و فروش» مراجعه کرده، محصول موردنظر را انتخاب و گزینه فروش را بزنید تا مبلغ قابل دریافت نمایش داده شود.<br />
                • مبلغ به کیف پول شما واریز می‌شود و از طریق پیام پشتیبانی می‌توانید درخواست برداشت دهید.<br />
                • اگر موجودی کیف پول بیش از ۱۰ میلیون تومان باشد، مبلغ تا پایان روز کاری بعد به حساب اعلام‌شده شما واریز خواهد شد.
              </div>

              <div class="w-full h-1px my-3 bg-secondary"></div>
              <div class="font-bold mt-4 text-sm text-[#093D51]">
                شیوهٔ دریافت فیزیکی طلا (ارسال)
              </div>
              <div class="mt-5 text-xs leading-5">
                • ابتدا موجودی محصول موردنظر را با پشتیبانی در واتساپ هماهنگ کنید.<br />
                • سپس روی لوگو کلیک کرده، گزینه «برداشت فیزیکی» و بعد «درخواست جدید» را انتخاب کنید.<br />
                • محصولات خریداری‌شده و تعداد آن‌ها را مشخص کرده و آدرس خود را ثبت نمایید.<br />
                • پشتیبانی عکس و وزن محصول را برای شما ارسال می‌کند.<br />
                • ارسال به‌صورت پس‌کرایه و بیمه‌شده انجام می‌شود.<br />
              </div>

              <div class="w-full h-1px my-3 bg-secondary"></div>
              <div class="font-bold mt-4 text-sm text-[#093D51]">
                پاداش معرفی
              </div>
              <div class="mt-5 text-xs leading-5">
                • در صفحه اصلی روی "تنظیمات" کلیک کرده و وارد حساب کاربری خود شوید.
              </div>
<!--              <img :src="img2" />-->
              <div class="mt-5 text-xs leading-5">
                • سپس گزینه «اشتراک‌گذاری» یا «کپی لینک» را انتخاب کرده و لینک دعوت را برای دوستانتان ارسال کنید.<br />
                • در صورتی که دوستان شما از طریق لینک شما ثبت‌نام کنند، به‌صورت خودکار ۱ سوت طلا به‌عنوان پاداش دریافت خواهید کرد.
              </div>
<!--              <img :src="img3" />-->
            </div>
          </div>
        </div>

        <div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 py-6 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 py-5 flex gap-2 bg-white">
          <a class="w-full" href="tel:09306612518">
            <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
          </a>
          <a href="">
            <BasicButton icon="vuesax-linear:whatsapp" />
          </a>
        </div>
      </div>
    </div>

    <!--    <ActionSheet v-model:show="editPassVisible">salam</ActionSheet>-->
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import img from '@/assets/img/user_ly1.svg'
import img1 from '@/assets/img/1.png'
import img2 from '@/assets/img/2.png'
import img4 from '@/assets/img/4.png'
import { loading } from '@/utils'
import BasicButton from '@/components/BasicPacks/BasicButton.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";
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 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('کد رونوشت شد')
  // })
}

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>