1405/02/12-dev banners feature

2026-05-02 13:58:24 +03:30
parent 039bc49eca
commit f8beee7ba7
8 changed files with 452 additions and 204 deletions
@@ -1,9 +1,9 @@
 <template>
  <div class=" mt-20 ">

-<!--    <div class="flex gap-7 overflow-x-scroll px-5">
-      <ProductInventory v-for="item in productInventorys" :ProductItem="item" class="shadow-lg my-5" :key="item.id"></ProductInventory>
-    </div>-->
+    <!--    <div class="flex gap-7 overflow-x-scroll px-5">
+          <ProductInventory v-for="item in productInventorys" :ProductItem="item" class="shadow-lg my-5" :key="item.id"></ProductInventory>
+        </div>-->
    <div>
      <div
          v-if="userStore.userInfo && !loading"
@@ -13,7 +13,7 @@
            v-if="limitedPrice !== undefined && userStore?.userInfo.trade_active !== 1"
            class="text-red text-xs flex gap-1 items-center justify-center mb-2"
        >
-          <Icon icon="vuesax-linear:info-circle" size="16" />
+          <Icon icon="vuesax-linear:info-circle" size="16"/>
          حداقل مبلغ اولیه برای ثبت سفارش
          {{ usePriceWithoutType(limitedPrice.value as number ?? 0) }} ریال می باشد.
        </div>
@@ -26,20 +26,20 @@
        <div class="mt-5 p-1 shadow-lg from-primary rounded-lg p-px to-transparent">
          <div class="p-2 py-3 rounded-lg bg-tertiary">
            <div class="flex justify-between ">
-<!--              <div
-                  class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
-                  style="text-align: -webkit-center"
-                  @click="router.push({ name: 'buyProduct', query: { state: 'sell' } })"
-              >
-                <div
-                    class="rounded-full w-[42px] h-[42px] bg-primary flex items-center justify-center"
-                    style="border: solid 1px #0A1B37"
+              <!--              <div
+                                class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
+                                style="text-align: -webkit-center"
+                                @click="router.push({ name: 'buyProduct', query: { state: 'sell' } })"
+                            >
+                              <div
+                                  class="rounded-full w-[42px] h-[42px] bg-primary flex items-center justify-center"
+                                  style="border: solid 1px #0A1B37"

-                >
-                  <Icon class="text-tertiary" icon="vuesax-linear:money-send" />
-                </div>
-                <div class="text-primary">فروش</div>
-              </div>-->
+                              >
+                                <Icon class="text-tertiary" icon="vuesax-linear:money-send" />
+                              </div>
+                              <div class="text-primary">فروش</div>
+                            </div>-->
              <div
                  class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
                  style="text-align: -webkit-center"
@@ -50,7 +50,7 @@
                    style="border: solid 1px #0A1B37"

                >
-                  <Icon class="text-tertiary" icon="vuesax-linear:money-receive" />
+                  <Icon class="text-tertiary" icon="vuesax-linear:money-receive"/>
                </div>
                <div class="text-primary">خرید و فروش</div>
              </div>
@@ -65,7 +65,7 @@
                    style="border: solid 1px #0A1B37"

                >
-                  <Icon class="text-tertiary" icon="vuesax-linear:card-add" />
+                  <Icon class="text-tertiary" icon="vuesax-linear:card-add"/>
                </div>
                <div class="text-primary">واریز نقدی</div>
              </div>
@@ -79,7 +79,7 @@
                    class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center "
                    style="border: solid 1px #0A1B37"
                >
-                  <Icon class="text-tertiary" icon="vuesax-linear:receipt-item" />
+                  <Icon class="text-tertiary" icon="vuesax-linear:receipt-item"/>
                </div>
                <div class="text-primary">موجودی</div>
              </div>
@@ -93,7 +93,7 @@
                    style=" border: solid 1px #0A1B37"

                >
-                  <Icon class="text-tertiary font-bold" icon="vuesax-linear:cup" />
+                  <Icon class="text-tertiary font-bold" icon="vuesax-linear:cup"/>
                </div>
                <div class="text-primary">دارایی ها</div>
              </div>
@@ -105,17 +105,21 @@
            <div class="bg-primary rounded-lg p-2 py-3 mt-2">
              <div class="flex justify-center text-tertiary w-full z-20">
                محصولات:
-                <div class="text-l mr-2 font-bold">{{ userStore?.userInfo?.wallet?.count_product ?? 0}}عدد</div>
+                <div class="text-l mr-2 font-bold">{{ userStore?.userInfo?.wallet?.count_product ?? 0 }}عدد</div>
              </div>
              <div class="flex mt-2 justify-center text-tertiary w-full z-20">
                دارایی طلایی:
-                <div class="text-l mr-2 font-bold">{{ (userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3)}}گرم</div>
-                <BasicIcon @click="openGoldModal" icon="vuesax-linear:info-circle" size="18" color="tertiary" />
+                <div class="text-l mr-2 font-bold">{{ (userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3) }}گرم
+                </div>
+                <BasicIcon @click="openGoldModal" icon="vuesax-linear:info-circle" size="18" color="tertiary"/>
              </div>
              <div class="flex mt-2 justify-center text-tertiary w-full z-20">
                دارایی ریالی:
-                <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0) }}ریال</div>
-                <BasicIcon @click="openRialModal" icon="vuesax-linear:info-circle" size="18" color="tertiary" />
+                <div class="text-l mr-2 font-bold">{{
+                    usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0)
+                  }}ریال
+                </div>
+                <BasicIcon @click="openRialModal" icon="vuesax-linear:info-circle" size="18" color="tertiary"/>
              </div>
            </div>
            <!--              <div class="flex  justify-center mt-2 w-full z-20">
@@ -219,10 +223,10 @@
            </div>
          </div>
        </div>
-<!--        <div class="flex mt-5 gap-1 bg-primary text-tertiary cursor-pointer font-bold justify-center rounded-lg py-5"
-             @click="router.push({ name: 'buyProduct' })">
-          <div>خرید و فروش</div>
-        </div>-->
+        <!--        <div class="flex mt-5 gap-1 bg-primary text-tertiary cursor-pointer font-bold justify-center rounded-lg py-5"
+                     @click="router.push({ name: 'buyProduct' })">
+                  <div>خرید و فروش</div>
+                </div>-->
        <div
            v-if="config.config.name === 'garoosi' && banners?.length > 0"
            class="w-full relative mt-2 flex flex-col justify-center home_appear_fade_in overflow-hidden rounded-lg"
@@ -243,7 +247,7 @@
                    :src="banner.icon"
                    :alt="banner.caption || ''"
                    @click="handleBannerClick(banner)"
-                    :style="banner.link ? 'cursor: pointer;' : ''"
+                    :style="(banner.link || banner.typeClick=='share') ? 'cursor: pointer;' : ''"
                />
              </swiper-slide>
            </swiper>
@@ -295,7 +299,7 @@
              </div>
            </div>
          </div>
-          <a-divider class="bg-gray-200 !h-auto !my-2" type="vertical" />
+          <a-divider class="bg-gray-200 !h-auto !my-2" type="vertical"/>
          <div class="text-center w-full">
            <div>پایین ترین قیمت امروز</div>
            <div class="flex w-full mt-3 justify-evenly">
@@ -311,7 +315,7 @@

      </div>
      <div v-else class="bg-white w-screen md:w-auto h-[80vh] px-5 m-[-1px] flex justify-center ">
-        <HomeSkeleton class="w-full" />
+        <HomeSkeleton class="w-full"/>
      </div>
      <!--      <div class="relative pt-15 overflow-hidden ">-->
      <!--        <div class="absolute left&#45;&#45;12 top-0">-->
@@ -338,7 +342,7 @@
              class="z-100000 rounded-full border-1"
              :class="y > 50 ? 'text-primary border-primary' : 'text-primary border-primary'"
          >
-            <Icon icon="vuesax-linear:user" size="20" />
+            <Icon icon="vuesax-linear:user" size="20"/>
          </div>
          <div :class="y > 50 ? 'text-primary' : 'text-primary'" class="color-transition font-bold">
            {{ userStore.userInfo?.name }}
@@ -404,21 +408,21 @@
                          is-line
                          :value="parseFloat((walletStore.walletInfo?.treasure_sum ?? 0)?.toFixed(3)) + ' گرم'"
                        />-->
-            <a-divider class="!my-1" />
+            <a-divider class="!my-1"/>
            <BasicInfoItem
                class="flex justify-between"
                title="دارایی کیف پول ریالی"
                is-line
                :value="usePrice(walletStore.walletInfo?.cash ?? 0)"
            />
-            <a-divider class="!my-1" />
+            <a-divider class="!my-1"/>
            <BasicInfoItem
                class="flex justify-between"
                title="دارایی کیف پول طلایی"
                is-line
                :value="(walletStore.walletInfo?.count_gold_wallet ?? 0) + ' گرم'"
            />
-            <a-divider class="!my-1" />
+            <a-divider class="!my-1"/>
            <BasicInfoItem
                v-if="nameProject === 'goldsun'"
                class="flex justify-between"
@@ -426,7 +430,7 @@
                is-line
                :value="(walletStore.walletInfo?.count_silver ?? 0) + ' گرم'"
            />
-            <a-divider v-if="nameProject === 'goldsun'" class="!my-1" />
+            <a-divider v-if="nameProject === 'goldsun'" class="!my-1"/>
            <BasicInfoItem
                v-if="nameProject === 'goldsun'"
                class="flex justify-between"
@@ -434,7 +438,7 @@
                is-line
                :value="(walletStore.walletInfo?.count_copper ?? 0) + ' گرم'"
            />
-            <a-divider v-if="nameProject === 'goldsun'" class="!my-1" />
+            <a-divider v-if="nameProject === 'goldsun'" class="!my-1"/>

            <BasicInfoItem
                class="flex justify-between"
@@ -442,45 +446,91 @@
                is-line
                :value="usePrice(walletStore.walletInfo?.count_cash_total ?? 0)"
            />
-            <a-divider class="!my-1" />
+            <a-divider class="!my-1"/>
            <!--            <BasicInfoItem class="flex justify-between" title="دارایی کیف پول(به گرم)" is-line
                           :value="((walletStore.walletInfo?.cash?? 0) / (goldVal?? 0)).toFixed(2)+ ' گرم'" />
            <a-divider class="!my-1" />-->
-<!--            <BasicInfoItem
-                class="flex justify-between"
-                title="ارزش کل دارایی شما"
-                is-line
-                :value="
-                usePrice(
-                  (
-                    (walletStore.walletInfo?.gold_sum ?? 0) * (goldVal ?? 0) +
-                    (walletStore.walletInfo?.cash ?? 0)
-                  ).toFixed(0)
-                )
-              "
-            />-->
+            <!--            <BasicInfoItem
+                            class="flex justify-between"
+                            title="ارزش کل دارایی شما"
+                            is-line
+                            :value="
+                            usePrice(
+                              (
+                                (walletStore.walletInfo?.gold_sum ?? 0) * (goldVal ?? 0) +
+                                (walletStore.walletInfo?.cash ?? 0)
+                              ).toFixed(0)
+                            )
+                          "
+                        />-->
          </div>
        </div>
      </div>
    </div>
  </BasicActionSheet>
+  <BasicModal v-model:visible="showTextBanner" :custom-footer="true" destroyOnClose="true" >
+    <div class="max-h-[54vh]">
+      <div class="w-full ql-editor " v-html="TextBanner">
+      </div>
+    </div>
+  </BasicModal>
+  <BasicModal v-model:visible="showShare" :custom-footer="true" >
+    <div class="p-2">
+      <div
+          v-if="userStore.userInfo?.referral_id"
+          class="text-primary font-bold w-full text-center flex justify-between gap-2 items-center"
+      >
+        کد معرف:
+        <div class="flex gap-2">
+          <div class="mr-2">{{ userStore.userInfo?.referral_id }}</div>
+          <!--            <BasicIcon icon="vuesax-linear:copy" color="#2563EB" class="cursor-pointer" size="18"
+                                 @click.stop="copyCode()" />
+                      &lt;!&ndash;          vuesax-linear:hierarchy-3&ndash;&gt;
+                      <BasicIcon icon="vuesax-linear:share" color="#2563EB" class="cursor-pointer" size="18"
+                                 @click.stop="shareCode()" />-->
+        </div>
+      </div>
+      <div class="w-full flex gap-2 mt-1">
+        <BasicButton
+            icon="vuesax-linear:share"
+            size="small"
+            class="flex-1"
+            icon-size="18"
+            @click.stop="shareCode()"
+        >
+          {{ getConfigApp('name') == 'garoosi' ? 'دعوت از دوستان' : ' اشتراک گذاری' }}
+        </BasicButton>
+        <BasicButton
+            icon="vuesax-linear:copy"
+            size="small"
+            class="flex-1"
+            icon-size="18"
+            @click.stop="copyCode()"
+        >
+          رونوشت
+        </BasicButton>
+      </div>
+    </div>
+  </BasicModal>
 </template>

 <script lang="tsx" setup>
 import img from '@/assets/img/home_ly1.svg'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
-import { usePrice, usePriceWithoutType, useTowDecimal } from '../../../utils/usePrice'
+import {usePrice, usePriceWithoutType, useTowDecimal} from '../../../utils/usePrice'
 import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
 import router from '@/router'
 import * as echarts from 'echarts'
-import { useIntersectionObserver, useWindowScroll } from '@vueuse/core'
-import { loading, removeToken } from '@/utils'
-import { useUserStore } from '@/store/userStore'
-import { useWalletStore } from '@/store/walletStore'
+import {useIntersectionObserver, useWindowScroll} from '@vueuse/core'
+import {loading, removeToken} from '@/utils'
+import {useUserStore} from '@/store/userStore'
+import {useWalletStore} from '@/store/walletStore'
 import DialogVant from '@/components/DialogVant.vue'
-import { getAllPrices, getChart } from '@/api/home'
+import {getAllPrices, getChart} from '@/api/home'
 import Vue3Odometer from 'vue3-odometer'
 import 'odometer/themes/odometer-theme-default.css'
+import 'quill/dist/quill.core.css';
+
 import HomeSkeleton from '@/views/base/home/components/HomeSkeleton.vue'
 import {
  getLastPrices,
@@ -491,29 +541,33 @@ import {
  setIntervalGetAllPrice,
  stopPriceInterval
 } from '@/utils/price'
-import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
+import {DotLottieVue} from '@lottiefiles/dotlottie-vue'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
 import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import type { PInventory } from '@/models/products'
-import type { Fund } from '@/models/fund'
-import type { TableOutput } from '@/models/table'
-import { useFundUserStore } from '@/store/fundStore'
-import {Modal} from "ant-design-vue";
+import type {PInventory} from '@/models/products'
+import type {Fund} from '@/models/fund'
+import type {TableOutput} from '@/models/table'
+import {useFundUserStore} from '@/store/fundStore'
+import {message, Modal} from "ant-design-vue";
 import {useConfigStore} from "@/store/configStore";
-import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Autoplay, Pagination } from 'swiper/modules'
+import {Swiper, SwiperSlide} from 'swiper/vue'
+import {Autoplay, Pagination} from 'swiper/modules'
 import 'swiper/swiper-bundle.css'
 import 'swiper/css/pagination'
-import { getConstByKey } from '@/api/const'
+import {getConstByKey} from '@/api/const'
+import type {IBenefits} from "@/models/banner";
+import BasicModal from "@/components/BasicPacks/BasicModal.vue";
+import {getConfigApp} from "@/utils/config";
+import BasicButton from "@/components/BasicPacks/BasicButton.vue";

 const bannerSwiperModules = [Autoplay, Pagination]
 const nameProject = useConfigStore().config.name
 const userStore = useUserStore()
 const walletStore = useWalletStore()
 const wholeBalanceVisible = ref<boolean>(false)
-const { x, y } = useWindowScroll()
-const series = ref<Chart[]>([{ data: [] }])
+const {x, y} = useWindowScroll()
+const series = ref<Chart[]>([{data: []}])
 const key = ref<number>(0)
 const main = ref(null)
 const logoutLoading = ref(false)
@@ -524,7 +578,37 @@ const tableOutput = ref<TableOutput<Fund> | null>(null)
 const inventory = ref<number>(0)
 const sumGold = ref<number>(0)
 const fundStore = useFundUserStore()
-const config=useConfigStore()
+const config = useConfigStore()
+const showTextBanner = ref<boolean>(false)
+const showShare = ref<boolean>(false)
+const TextBanner = ref<string>('')
+
+function shareCode() {
+  // nextTick(() => {
+  const val = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
+با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
+
+این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلای  ${nameProject} جا نمونید.
+روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
+
+${window.location.hostname}/login?id=${userStore.userInfo?.referral_id}`
+  navigator.share({
+    title: nameProject,
+    text: val
+  })
+  // message.info('کد رونوشت شد')
+  // })
+}
+
+function copyCode() {
+  // nextTick(() => {
+  const val = userStore.userInfo?.referral_id
+  console.log(val)
+  navigator.clipboard.writeText(val)
+  message.info('کد رونوشت شد')
+  // })
+}
+
 async function initTable() {
  try {
    loading.value = true
@@ -537,7 +621,8 @@ async function initTable() {
  }
 }

-const banners = ref<Array<{ icon: string; show: boolean; caption: string | null; link: string | null }>>([])
+const banners = ref<Array<IBenefits>>([])
+
 async function initBanners() {
  try {
    const response = await getConstByKey('header_banner')
@@ -570,14 +655,25 @@ async function initBanners() {
  }
 }

-function handleBannerClick(banner: { icon: string; show: boolean; caption: string | null; link: string | null }) {
-  if (!banner.link) return
-
-  if (banner.link.startsWith('http://') || banner.link.startsWith('https://')) {
-    window.open(banner.link, '_blank')
-  } else {
-    router.push(banner.link)
+function handleBannerClick(banner: IBenefits) {
+  if (banner.typeClick == 'share') {
+    showShare.value = true
  }
+  if (banner.typeClick == 'modal') {
+    if (!banner.modalText) return
+    TextBanner.value = banner.modalText
+    showTextBanner.value = true
+  }
+  if (banner.typeClick == 'link') {
+    if (!banner.link) return
+
+    if (banner.link.startsWith('http://') || banner.link.startsWith('https://')) {
+      window.open(banner.link, '_blank')
+    } else {
+      router.push(banner.link)
+    }
+  }
+
 }

 onUnmounted(() => {
@@ -612,7 +708,7 @@ const targetIsVisible = ref(false)

 const isHidden = ref<boolean>(false)

-const { stop } = useIntersectionObserver(target, ([{ isIntersecting }], observerElement) => {
+const {stop} = useIntersectionObserver(target, ([{isIntersecting}], observerElement) => {
  targetIsVisible.value = isIntersecting
  console.log('saaaaa', targetIsVisible.value)
 })
@@ -840,7 +936,7 @@ async function initPrice() {
    goldVal.value = 0
    // console.log(price?.value.price_last)
    if (userStore.isFirst) {
-      const timer = setInterval(function() {
+      const timer = setInterval(function () {
        update()
        // if (current == end) {
        userStore.isFirst = false
@@ -912,7 +1008,7 @@ async function logout() {
  /*  userStore.$reset()
  walletStore.$reset()*/
  removeToken()
-  await router.push({ name: 'login' })
+  await router.push({name: 'login'})
  logoutLoading.value = true
  window.location.reload()
  // console.log('salam')
@@ -924,16 +1020,16 @@ async function openGoldModal() {
    title: `در این قسمت مجموع کل وزن طلای آبشده (${(walletStore.walletInfo?.gold ?? 0)?.toFixed(3)}) + ارزش دارایی ها (${(walletStore.walletInfo?.count_gold_wallets ?? 0)?.toFixed(3)} ) را مشاهده میفرمایید.`,
    okText: 'متوجه شدم',
    centered: true,
-    cancelButtonProps: { style: { display: 'none' } },
+    cancelButtonProps: {style: {display: 'none'}},
  })
 }

 async function openRialModal() {
  Modal.confirm({
-    title: `در این قسمت مجموع کیف پول ریالی (${usePrice(walletStore?.walletInfo?.count_cash_wallet ?? 0) }) + معادل ریالی محصولات (${ usePrice(walletStore?.walletInfo?.count_cash_wallets ?? 0)} ) را مشاهده میفرمایید.`,
+    title: `در این قسمت مجموع کیف پول ریالی (${usePrice(walletStore?.walletInfo?.count_cash_wallet ?? 0)}) + معادل ریالی محصولات (${usePrice(walletStore?.walletInfo?.count_cash_wallets ?? 0)} ) را مشاهده میفرمایید.`,
    okText: 'متوجه شدم',
    centered: true,
-    cancelButtonProps: { style: { display: 'none' } },
+    cancelButtonProps: {style: {display: 'none'}},
  })
 }
 </script>
@@ -970,11 +1066,13 @@ apexchart {
 /* بنر اسلایدر — ظاهر و نقطه‌های pagination مشابه نمونه */
 .banner-swiper {
  --swiper-pagination-bottom: 0.75rem;
+
  .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
  }
+
  .swiper-pagination-bullet {
    width: 0.5rem;
    height: 0.5rem;
@@ -982,6 +1080,7 @@ apexchart {
    opacity: 1;
    transition: background 0.2s;
  }
+
  .swiper-pagination-bullet-active {
    background: #fff;
  }