add direct_price in DealProduct

2026-05-11 18:09:31 +03:30
parent 5a8769cf01
commit dd660a2ec5
3 changed files with 854 additions and 101 deletions
@@ -17,6 +17,7 @@ export interface  Product {
    percent_fee_sell: number | undefined
    cash_fee_buy: number | undefined
    cash_fee_sell: number | undefined
+    direct_price: number | undefined
    reading_method: any
    created_at: any
    updated_at: any
@@ -4,12 +4,12 @@
      <!--      <div @click="isBuy = false" class="w-full text-center" :class="!isBuy?'text-primary':'text-gray-400'">خرید طلا</div>
            <div @click="isBuy = true" class="w-full text-center" :class="isBuy?'text-primary':'text-gray-400'">فروش طلا</div>-->
      <div class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded ">
-        <div :class="isBuy?'text-tertiary':'text-gray-400'" class="w-full text-center z-2"
+        <div :class="isBuy?'text-secondary':'text-gray-400'" class="w-full text-center z-2"
             @click.stop="setIsBuy(true) "
             :style="!props?.ProductItem?.open_buy ? 'pointer-events: none; opacity: 0.5;' : ''">
          خرید {{ props?.ProductItem?.title }}
        </div>
-        <div :class="!isBuy?'text-tertiary':'text-gray-400'" class="w-full text-center z-2"
+        <div :class="!isBuy?'text-secondary':'text-gray-400'" class="w-full text-center z-2"
             @click.stop="setIsBuy(false) "
             :style="!props?.ProductItem?.open_sell ? 'pointer-events: none; opacity: 0.5;' : ''"
        >
@@ -29,7 +29,7 @@
          <div class="text-gray-700 font-bold">{{ !isBuy ? 'قیمت فروش' : 'قیمت خرید' }}</div>
          <div v-if="price" class="flex gap-1 mt-3 text-xs items-center">
            <div :class="!isBuy? 'text-red-700' : 'text-green-700'" class="font-bold text-2xl color-transition">
-              {{ usePriceWithoutType(isBuy ? ((props?.ProductItem?.price ?? 0) + (props?.ProductItem?.cash_fee_buy ?? 0)) : ((props?.ProductItem?.price ?? 0) - (props?.ProductItem?.cash_fee_sell ?? 0))) }}
+              {{ isBuy ? usePriceWithoutType(buyTotalPrice) : usePriceWithoutType(sellTotalPrice) }}
            </div>
            ریال
          </div>
@@ -61,17 +61,17 @@

            <a-form-item v-if="isBuy" name="goldValue"
                         :rules="[justNumber2(props?.ProductItem?.price , form.method , props?.ProductItem?.amount, true)]">
-              <BasicInput v-model:value="form.goldValue" addon-before="تعداد" addon-bg-color="#0A1B37"
+              <BasicInput v-model:value="form.goldValue" addon-before="تعداد" addon-bg-color="#000000FF"
                          addon-text-color="white"
                          place-holder="تعداد"
-                          size="large" type="number" inputmode="number" @onchange="calculateCash" />
+                          size="large" type="text" inputmode="numeric" @onchange="handleGoldValueChange" />
            </a-form-item>
            <a-form-item v-else name="goldValue"
                         :rules="[justNumber3(props?.ProductItem?.sellPrice, productNum ,false)]">
-              <BasicInput v-model:value="form.goldValue" addon-before="تعداد" addon-bg-color="#0A1B37"
+              <BasicInput v-model:value="form.goldValue" addon-before="تعداد" addon-bg-color="#000000FF"
                          addon-text-color="white"
                          place-holder="تعداد"
-                          size="large" type="number" inputmode="number" @onchange="calculateCash" />
+                          size="large" type="text" inputmode="numeric" @onchange="handleGoldValueChange" />
            </a-form-item>

            <div class="flex justify-between">
@@ -118,48 +118,48 @@
              <div v-else>{{ !isBuy ? 'فروش' : 'خرید' }}</div>
            </div>
          </BasicButton>
-<!--          <div class=" w-full !z-100  px-6 rounded-xl py-1 border-1 bg-white mt-2">
-            &lt;!&ndash;      <BasicInfoItem is-line title="کارمزد" :value="parseFloat(((form.goldValue?? 0)*0.005).toFixed(3))" />&ndash;&gt;
-            &lt;!&ndash;      <BasicInfoItem is-line title="کارمزد" :value="parseFloat(((form.goldValue?? 0)*0.005).toFixed(3))" />&ndash;&gt;
-            <div class="flex justify-between items-center">
-              <div>کارمزد:</div>
-              <div class="flex gap-2 items-center">
-                &lt;!&ndash;          <div class="line-through">{{ parseFloat(((form.goldValue ?? 0) * 0.005).toFixed(3)) }}</div>&ndash;&gt;
-                &lt;!&ndash;          <div>{{props.ProductItem.price}}</div>&ndash;&gt;
-                <div v-if="isBuy && form.method=='cash' " class="">{{
-                    usePriceWithoutType(buyFee ?? 0)
-                  }}
-                </div>
-                <div v-if="isBuy && form.method!='cash'" class="">{{
-                    buyFeeGeram ?? 0
-                  }}
-                </div>
-                <div v-if="!isBuy && form.method=='cash' " class="">{{
-                    usePriceWithoutType(sellFee ?? 0)
-                  }}
-                </div>
-                <div v-if="!isBuy && form.method!='cash'" class="">{{
-                    sellFeeGeram ?? 0
-                  }}
-                </div>
+          <!--          <div class=" w-full !z-100  px-6 rounded-xl py-1 border-1 bg-white mt-2">
+                      &lt;!&ndash;      <BasicInfoItem is-line title="کارمزد" :value="parseFloat(((form.goldValue?? 0)*0.005).toFixed(3))" />&ndash;&gt;
+                      &lt;!&ndash;      <BasicInfoItem is-line title="کارمزد" :value="parseFloat(((form.goldValue?? 0)*0.005).toFixed(3))" />&ndash;&gt;
+                      <div class="flex justify-between items-center">
+                        <div>کارمزد:</div>
+                        <div class="flex gap-2 items-center">
+                          &lt;!&ndash;          <div class="line-through">{{ parseFloat(((form.goldValue ?? 0) * 0.005).toFixed(3)) }}</div>&ndash;&gt;
+                          &lt;!&ndash;          <div>{{props.ProductItem.price}}</div>&ndash;&gt;
+                          <div v-if="isBuy && form.method=='cash' " class="">{{
+                              usePriceWithoutType(buyFee ?? 0)
+                            }}
+                          </div>
+                          <div v-if="isBuy && form.method!='cash'" class="">{{
+                              buyFeeGeram ?? 0
+                            }}
+                          </div>
+                          <div v-if="!isBuy && form.method=='cash' " class="">{{
+                              usePriceWithoutType(sellFee ?? 0)
+                            }}
+                          </div>
+                          <div v-if="!isBuy && form.method!='cash'" class="">{{
+                              sellFeeGeram ?? 0
+                            }}
+                          </div>


-                <div>
-                  {{ form.method == "cash" ? "ریال" : "گرم" }}
-                </div>
-              </div>
-            </div>
-          </div>-->
-<!--          <div v-if="!isBuy && form.goldValue > walletStore?.walletInfo?.gold"
-               class="text-red-700 text-xs font-bold mt-2">
-            مقدار گرم طلای وارد شده جهت فروش ({{ form.goldValue }}گرم) بیشتر از مقدار موجودی شما
-            ({{ walletStore?.walletInfo?.gold }}گرم) می باشد.
-          </div>
-          &lt;!&ndash;          <div>{{form?.goldValue? true: false}}</div>&ndash;&gt;
-          <div v-if="isBuy? ((form?.goldValue || form.goldValue === 0)? form?.goldCash < 500000: false) : false"
-               class="text-red-700 text-xs font-bold mt-2">
-            حداقل مقدار طلا جهت خرید 500,000 ریال می باشد.
-          </div>-->
+                          <div>
+                            {{ form.method == "cash" ? "ریال" : "گرم" }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>-->
+          <!--          <div v-if="!isBuy && form.goldValue > walletStore?.walletInfo?.gold"
+                         class="text-red-700 text-xs font-bold mt-2">
+                      مقدار گرم طلای وارد شده جهت فروش ({{ form.goldValue }}گرم) بیشتر از مقدار موجودی شما
+                      ({{ walletStore?.walletInfo?.gold }}گرم) می باشد.
+                    </div>
+                    &lt;!&ndash;          <div>{{form?.goldValue? true: false}}</div>&ndash;&gt;
+                    <div v-if="isBuy? ((form?.goldValue || form.goldValue === 0)? form?.goldCash < 500000: false) : false"
+                         class="text-red-700 text-xs font-bold mt-2">
+                      حداقل مقدار طلا جهت خرید 500,000 ریال می باشد.
+                    </div>-->
        </a-form-item>
      </a-form>
    </div>
@@ -191,11 +191,12 @@
        <div>قیمت:</div>
        <div class="flex items-center">
          <div class="font-bold">
-            {{ usePriceWithoutType(isBuy ? props?.ProductItem.price ?? 0 : props?.ProductItem?.sellPrice ?? 0) }}
+            {{ usePriceWithoutType(props?.ProductItem?.price) }}
          </div>
          <div class="text-xs mr-1">ریال</div>
        </div>
      </div>
+
      <div class="flex justify-between mt-3">
        <div>کارمزد:</div>
        <div class="flex items-center gap-2">
@@ -203,7 +204,6 @@
              buyFee
            }}
          </div>
-          <!--          <div class="font-bold line-through">{{ 0 }}</div>-->
          <div v-else class="">{{
              sellFee
            }}
@@ -212,10 +212,11 @@
          <div class="text-xs mr-1">ریال</div>
        </div>
      </div>
+
      <div class="flex justify-between mt-3">
        <div>{{ isBuy ? 'قیمت قابل پرداخت:' : 'مبلغ دریافتی:' }}</div>
        <div class="flex items-center">
-          <div class="font-bold">{{ usePriceWithoutType(payablePrice.toFixed(0)) }}</div>
+          <div>{{ usePriceWithoutType(form.goldCash ?? 0) }}</div>
          <div class="text-xs mr-1">ریال</div>
        </div>
      </div>
@@ -227,38 +228,34 @@

 <script lang="ts" setup>

-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import img1 from '@/assets/img/home_ly2.svg'
-import {useFormat, usePrice, usePriceWithoutType, useTowDecimal} from '@/utils/usePrice'
+import { usePrice, usePriceWithoutType} from '@/utils/usePrice'
 import BasicInput from '@/components/BasicPacks/BasicInput.vue'
 import type { Gold } from '@/models/gold'
-import { loading, loadingMore, toFixedDownThreeChar } from '@/utils'
+import { loading, loadingMore } from '@/utils'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import router from '@/router'
 import { useWalletStore } from '@/store/walletStore'
 import { createOrder } from '@/api/order'
 import { FormInstance, message } from 'ant-design-vue'
 import type { Price } from '@/models/home'
-// import {getLastPrice} from '@/api/home'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
 import { useUserStore } from '@/store/userStore'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import { justNumber, justNumber2, justNumber3, required, ruleNumber } from '@/utils/inputRules'
+import { justNumber2, justNumber3, required } from '@/utils/inputRules'
 import GoldSkeleton from '@/views/base/gold/components/GoldSkeleton.vue'
 import GoldLoading from '@/components/GoldLoading.vue'
-// import {update} from 'lodash'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import type { Transaction } from '@/models/transaction'
 import type { TableEngineInput, TableOutput } from '@/models/table'
-import { useInfiniteScroll } from '@vueuse/core'
 import { getTransactionTable } from '@/api/transaction'
-import { getLastPrices, lastPrice, setIntervalGetAllPrice, stopPriceInterval } from '@/utils/price'
+import { getLastPrices, lastPrice} from '@/utils/price'
 import { Product } from '@/models/products'
 import BasicSelect from '@/components/BasicPacks/BasicSelect.vue'
 import { SelectItem } from '@/models/SelectItem'
 import Bg_main from '@/components/bg_main.vue'
 import { useFundUserStore } from '@/store/fundStore'
-// import Bg_main from "@/components/bg_main.vue";
 const typeDeal: SelectItem[] = [
  {
    value: 'نقدی',
@@ -290,17 +287,29 @@ interface Prop {

 const props = withDefaults(defineProps<Prop>(), {})
 const isBuy = ref<boolean>(true)
+const buyTotalPrice = computed(() => {
+  const item = props?.ProductItem
+  if (!item) return 0
+  const basePrice = (item.price ?? 0) + (item.cash_fee_buy ?? 0)
+
+  return item.direct_price === 0
+    ? basePrice * (item.amount ?? 0)
+    : basePrice
+})
+
+const sellTotalPrice = computed(() => {
+  const item = props?.ProductItem
+  if (!item) return 0
+
+  const basePrice = (item.price ?? 0) - (item.cash_fee_sell ?? 0)
+
+  return item.direct_price === 0
+    ? basePrice * (item.amount ?? 0)
+    : basePrice
+})
 const buyFee = computed(() => ((props?.ProductItem?.amount * (props?.ProductItem?.percent_fee_buy ?? 0) * (props?.ProductItem?.price ?? 0)).toFixed(0)))
 const sellFee = computed(() => ((props?.ProductItem?.amount * (props?.ProductItem?.percent_fee_sell ?? 0) * (props?.ProductItem?.sellPrice ?? 0)).toFixed(0)))
-const sellFeeGeram = computed(() => {
-  if (form.value.goldVazn)
-    return (form.value.goldVazn * props.ProductItem?.percent_fee_sell).toFixed(3)

-})
-const buyFeeGeram = computed(() => {
-  if (form.value.goldVazn)
-    return (form.value.goldVazn * props.ProductItem?.percent_fee_buy).toFixed(3)
-})
 const buyPagination = ref<TableEngineInput>({
  filters: [{
    field: 'type',
@@ -310,6 +319,7 @@ const buyPagination = ref<TableEngineInput>({
    value: 1
  }], limit: 6, page: 0
 })
+
 const sellPagination = ref<TableEngineInput>({
  filters: [{
    field: 'type',
@@ -321,7 +331,6 @@ const sellPagination = ref<TableEngineInput>({
 })

 const finalPrice = computed(() => (form.value?.goldValue * (isBuy.value ? props.ProductItem?.price ?? 0 : props.ProductItem?.sellPrice ?? 0)))
-// const payablePrice = computed(() => finalPrice.value + finalPrice.value * 0.007)
 const payablePrice = computed(() => finalPrice.value)

 const disableTransaction = computed(() =>
@@ -355,8 +364,8 @@ function refreshTable() {
      value: 1
    }], limit: 6, page: 0
  }
-/*  initSellTable()
-  initBuyTable()*/
+  /*  initSellTable()
+    initBuyTable()*/
 }


@@ -433,8 +442,8 @@ onMounted(async () => {
      isBuy.value = true
      break
  }
-/*  await initSellTable()
-  await initBuyTable()*/
+  /*  await initSellTable()
+    await initBuyTable()*/
 })

 const form = ref<Gold>({
@@ -444,18 +453,23 @@ const form = ref<Gold>({
  method: 'cash',
  goldVazn:undefined
 })
-const allowedAsciiCodeFloat = [46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57]
-// const allowedAsciiCodeInt = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57]
-watch(form.value, () => {
-  if (form.value.goldValue) {
-    form.value.goldValue = parseFloat(form.value.goldValue)
-    const lastCharGoldStr: string = form.value.goldValue.toString()
-    if (!allowedAsciiCodeFloat.includes(lastCharGoldStr.slice(-1).charCodeAt(0))) {
-      calculateCash(form.value.goldValue)
-    }
+
+// تابع تبدیل اعداد فارسی به انگلیسی
+const persianToEnglish = (str: string | number | undefined): string => {
+  if (!str) return ''
+  const persianNumbers = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']
+  const englishNumbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
+  let result = str.toString()
+  for (let i = 0; i < 10; i++) {
+    result = result.replace(new RegExp(persianNumbers[i], 'g'), englishNumbers[i])
  }
+  return result
+}

-
+watch(() => form.value.goldValue, (newVal) => {
+  if (newVal !== undefined && newVal !== null && newVal !== '') {
+    calculateCash(newVal)
+  }
 })

 onMounted(() => {
@@ -506,15 +520,31 @@ const limitedPrice = computed(() => {
    return walletStore?.limitedPrice[0]
 })

+function handleGoldValueChange(val: string | number | undefined) {
+  if (val === undefined || val === null || val === '') {
+    form.value.goldValue = undefined
+    return
+  }
+  // تبدیل اعداد فارسی به انگلیسی
+  const valStr = val.toString()
+  const convertedValue = persianToEnglish(valStr)
+  const numericValue = parseFloat(convertedValue)
+  form.value.goldValue = isNaN(numericValue) ? undefined : numericValue
+}
+
 function calculateCash(val: number) {
  priceErrorVisible.value = false
-
  if (price.value) {
-    form.value.goldVazn = parseFloat((val * (( props?.ProductItem?.price) + (props?.ProductItem?.cash_fee_buy)))/lastPrice.value?.buy).toFixed(1)
-    // console.log(val,props?.ProductItem?.price,props?.ProductItem?.cash_fee_buy,lastPrice.value?.buy)
+    form.value.goldVazn = parseFloat(val * props?.ProductItem?.amount)
+    // form.value.goldVazn = parseFloat((val * (( props?.ProductItem?.price) + (props?.ProductItem?.cash_fee_buy)))/lastPrice.value?.buy).toFixed(2)
    if (isBuy.value) {
      if (val){
-        form.value.goldCash = parseFloat(val * (( props?.ProductItem?.price) + (props?.ProductItem?.cash_fee_buy))).toFixed(0)
+        if(props?.ProductItem?.direct_price === 0){
+          form.value.goldCash = parseFloat(val * props?.ProductItem?.amount * (props?.ProductItem?.price + props?.ProductItem?.cash_fee_buy)).toFixed(0)
+        }
+        else {
+          form.value.goldCash = parseFloat(val * (props?.ProductItem?.price + props?.ProductItem?.cash_fee_buy)).toFixed(0)
+        }
      }
      else {
        form.value.goldCash = 0
@@ -522,14 +552,20 @@ function calculateCash(val: number) {
      }
    }
    else {
-      if (val)
-        form.value.goldCash = parseFloat((val * props?.ProductItem?.price) + (props?.ProductItem?.cash_fee_sell)).toFixed(0)
+      if (val){
+        if(props?.ProductItem?.direct_price === 0){
+          form.value.goldCash = parseFloat(val * props?.ProductItem?.amount * (props?.ProductItem?.price - props?.ProductItem?.cash_fee_sell)).toFixed(0)
+        }
+        else{
+          form.value.goldCash = parseFloat(val * (props?.ProductItem?.price - props?.ProductItem?.cash_fee_sell)).toFixed(0)
+
+        }
+      }
      else{
        form.value.goldCash = 0
        form.value.goldVazn = 0
      }
    }
-    // console.log(form.value.goldVazn)
  }
 }

@@ -600,12 +636,11 @@ const formatter = (value: number) => {
  return `${value}%`
 }

-
 const price = computed((): Price => <Price>lastPrice.value ?? 0)
+
 onMounted(async () => {
  // await initPrice()
  // await setIntervalGetPrice()
-  // console.log('okkkkkkkkgold')
 })

 async function initPrice() {
@@ -640,9 +675,9 @@ async function ok() {
    infoVisible.value = true
    await createOrder({
      direction: isBuy.value ? 1 : 2,
-      product_id: props.ProductItem?.id,
-      method: form.value?.method,
-      number: form.value?.goldValue ?? 0
+      product_id: props.ProductItem.id,
+      method: form.value.method,
+      number: form.value.goldValue ?? 0
    })
    await walletStore.getMyWallet()
    await router.push({ name: 'transactions' })
@@ -680,7 +715,7 @@ async function ok() {
  background: blue;
 }*/
 .completeButtonStyle .van-dialog__confirm .van-button__content {
-  background: @App-primary-color;
+  background: #000000FF;
  color: white;
 }

@@ -703,8 +738,6 @@ async function ok() {
    transform: translateX(-100%);
  }
 }
-
-
 .animate.right {
  right: 0;
 }
@@ -713,7 +746,7 @@ async function ok() {
  right: 100%;
  transform: translate(100%, 0);
 }
-//.text-secondary{
-//  color: #d3a233 !important;
-//}
-</style>
+.text-secondary{
+  color: #d3a233 !important;
+}
+</style>
@@ -0,0 +1,719 @@
+<template>
+  <div class="h-35rem overflow-y-auto">
+    <div class=" !overflow-y-scroll bg-white py-3   text-primary font-bold  flex justify-evenly">
+      <!--      <div @click="isBuy = false" class="w-full text-center" :class="!isBuy?'text-primary':'text-gray-400'">خرید طلا</div>
+            <div @click="isBuy = true" class="w-full text-center" :class="isBuy?'text-primary':'text-gray-400'">فروش طلا</div>-->
+      <div class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded ">
+        <div :class="isBuy?'text-tertiary':'text-gray-400'" class="w-full text-center z-2"
+             @click.stop="setIsBuy(true) "
+             :style="!props?.ProductItem?.open_buy ? 'pointer-events: none; opacity: 0.5;' : ''">
+          خرید {{ props?.ProductItem?.title }}
+        </div>
+        <div :class="!isBuy?'text-tertiary':'text-gray-400'" class="w-full text-center z-2"
+             @click.stop="setIsBuy(false) "
+             :style="!props?.ProductItem?.open_sell ? 'pointer-events: none; opacity: 0.5;' : ''"
+        >
+          فروش {{ props?.ProductItem?.title }}
+        </div>
+        <!--        <div ref="bganim" class="absolute bg-white h-8 w-1/2 rounded-lg " :style="`transform: translateX(${isbuy? '0':'-100%'}); left: ${isbuy? '0':'100%'}`"></div>-->
+        <div ref="bganim" :style="useStyle()"
+             class="absolute bg-white h-8 w-1/2 rounded-lg animate right"></div>
+      </div>
+    </div>
+    <div v-if="userStore" class=" mt-5 pb-2 mb-19vh">
+      <!--      <a-spin :spinning="loading">-->
+      <div v-if="!loading" :class="!isBuy? ' bg-red-100' : ' bg-green-100'"
+           class="w-full  relative rounded-lg h-[88px] flex flex-col justify-center background-color-transition">
+        <img :src="img1" alt="" class="h-[88px] absolute">
+        <div class="w-full items-center flex flex-col">
+          <div class="text-gray-700 font-bold">{{ !isBuy ? 'قیمت فروش' : 'قیمت خرید' }}</div>
+          <div v-if="price" class="flex gap-1 mt-3 text-xs items-center">
+            <div :class="!isBuy? 'text-red-700' : 'text-green-700'" class="font-bold text-2xl color-transition">
+              {{ usePriceWithoutType(isBuy ? ((props?.ProductItem?.price ?? 0) + (props?.ProductItem?.cash_fee_buy ?? 0)) : ((props?.ProductItem?.price ?? 0) - (props?.ProductItem?.cash_fee_sell ?? 0))) }}
+            </div>
+            ریال
+          </div>
+        </div>
+      </div>
+      <div v-else class="w-full h-[88px]">
+        <GoldSkeleton class="w-full" />
+      </div>
+      <div v-if="limitedPrice !== undefined && userStore?.userInfo.trade_active !== 1"
+           class="text-red text-xs flex gap-1 items-center justify-center my-2">
+        <Icon icon="vuesax-linear:info-circle" size="16" />
+        حداقل مبلغ اولیه برای ثبت سفارش {{ usePriceWithoutType(limitedPrice.value as number ?? 0) }} ریال می باشد.
+      </div>
+      <!--      </a-spin>-->
+      <a-form ref="refInput" :model="form" class="!mt-5" name="basic" @finish="okConfirm()">
+        <div class="border-gray-200 border-1 rounded-xl p-5 relative">
+          <bg_main />
+          <div class="z-100 relative">
+            <a-form-item name="method" :rules="[required()]">
+              <BasicSelect v-model:value="form.method" :items="typeDeal"
+                           key-name="key"
+                           :show-search="false"
+                           value-name="value"
+                           :allow-clear="false"
+                           :placeholder="isBuy?'نحوه خرید را انتخاب کنید':' نحوه فروش را انتخاب کنید'"
+                           size="large"
+                           :has-tooltip="false" />
+            </a-form-item>
+
+            <a-form-item v-if="isBuy" name="goldValue"
+                         :rules="[justNumber2(props?.ProductItem?.price , form.method , props?.ProductItem?.amount, true)]">
+              <BasicInput v-model:value="form.goldValue" addon-before="تعداد" addon-bg-color="#0A1B37"
+                          addon-text-color="white"
+                          place-holder="تعداد"
+                          size="large" type="number" inputmode="number" @onchange="calculateCash" />
+            </a-form-item>
+            <a-form-item v-else name="goldValue"
+                         :rules="[justNumber3(props?.ProductItem?.sellPrice, productNum ,false)]">
+              <BasicInput v-model:value="form.goldValue" addon-before="تعداد" addon-bg-color="#0A1B37"
+                          addon-text-color="white"
+                          place-holder="تعداد"
+                          size="large" type="number" inputmode="number" @onchange="calculateCash" />
+            </a-form-item>
+
+            <div class="flex justify-between">
+              <div> قیمت کل</div>
+              <div>{{ usePrice(form.goldCash ?? 0) }}</div>
+            </div>
+
+            <div v-if="props?.ProductItem?.group_type !== 'سکه'" class="flex justify-between">
+              <div> وزن کل</div>
+              <div>{{ form.goldVazn ?? 0  }} گرم</div>
+            </div>
+
+            <!--              {{walletStore?.walletInfo?.gold}}-->
+            <Transition mode="out-in" name="fade" class="mt-2">
+              <div v-if="isBuy&&form.method=='gold'" class="font-bold text-xs">
+                <div> {{ `موجودی کیف طلا: ${walletStore?.walletInfo?.gold ?? 0} گرم` }}</div>
+              </div>
+              <div v-else-if="isBuy" class="font-bold text-xs">
+                {{ `موجودی کیف پول: ${usePriceWithoutType(walletStore?.walletInfo?.cash ?? 0)} ریال` }}
+              </div>
+              <div class="font-bold text-xs" v-else>{{ `موجودی محصول: ${getInventoryById(props?.ProductItem?.id)}` }}
+              </div>
+            </Transition>
+            <Transition mode="out-in" name="fade">
+              <div v-if="priceErrorVisible" class="flex gap-1 items-center text-xs mt-[-15px] text-orange-600">
+                <BasicIcon icon="vuesax-linear:danger" />
+                ارزش کل وارد شده بر حسب گرم طلا محاسبه خواهد شد و قیمت وارد شده معادل {{ usePrice(finalPrice) }} می
+                باشد!
+              </div>
+            </Transition>
+          </div>
+        </div>
+        <GoldLoading v-model:show="infoVisible" title="" />
+        <a-form-item>
+          <BasicButton
+            v-if="walletStore"
+            :disabled="disableTransaction"
+            class=" w-full py-2 mt-5"
+            html-type="submit"
+            type="primary"
+          >
+            <div>
+              <a-spin v-if="loading" size="small" />
+              <div v-else>{{ !isBuy ? 'فروش' : 'خرید' }}</div>
+            </div>
+          </BasicButton>
+<!--          <div class=" w-full !z-100  px-6 rounded-xl py-1 border-1 bg-white mt-2">
+            &lt;!&ndash;      <BasicInfoItem is-line title="کارمزد" :value="parseFloat(((form.goldValue?? 0)*0.005).toFixed(3))" />&ndash;&gt;
+            &lt;!&ndash;      <BasicInfoItem is-line title="کارمزد" :value="parseFloat(((form.goldValue?? 0)*0.005).toFixed(3))" />&ndash;&gt;
+            <div class="flex justify-between items-center">
+              <div>کارمزد:</div>
+              <div class="flex gap-2 items-center">
+                &lt;!&ndash;          <div class="line-through">{{ parseFloat(((form.goldValue ?? 0) * 0.005).toFixed(3)) }}</div>&ndash;&gt;
+                &lt;!&ndash;          <div>{{props.ProductItem.price}}</div>&ndash;&gt;
+                <div v-if="isBuy && form.method=='cash' " class="">{{
+                    usePriceWithoutType(buyFee ?? 0)
+                  }}
+                </div>
+                <div v-if="isBuy && form.method!='cash'" class="">{{
+                    buyFeeGeram ?? 0
+                  }}
+                </div>
+                <div v-if="!isBuy && form.method=='cash' " class="">{{
+                    usePriceWithoutType(sellFee ?? 0)
+                  }}
+                </div>
+                <div v-if="!isBuy && form.method!='cash'" class="">{{
+                    sellFeeGeram ?? 0
+                  }}
+                </div>
+
+
+                <div>
+                  {{ form.method == "cash" ? "ریال" : "گرم" }}
+                </div>
+              </div>
+            </div>
+          </div>-->
+<!--          <div v-if="!isBuy && form.goldValue > walletStore?.walletInfo?.gold"
+               class="text-red-700 text-xs font-bold mt-2">
+            مقدار گرم طلای وارد شده جهت فروش ({{ form.goldValue }}گرم) بیشتر از مقدار موجودی شما
+            ({{ walletStore?.walletInfo?.gold }}گرم) می باشد.
+          </div>
+          &lt;!&ndash;          <div>{{form?.goldValue? true: false}}</div>&ndash;&gt;
+          <div v-if="isBuy? ((form?.goldValue || form.goldValue === 0)? form?.goldCash < 500000: false) : false"
+               class="text-red-700 text-xs font-bold mt-2">
+            حداقل مقدار طلا جهت خرید 500,000 ریال می باشد.
+          </div>-->
+        </a-form-item>
+      </a-form>
+    </div>
+    <van-dialog v-model:show="noCompleteVisible" class="completeButtonStyle" confirm-button-text="تکمیل اطلاعات"
+                show-confirm-button @confirm="router.push('user')">
+      <div class="flex flex-col items-center p-2">
+        <BasicIcon class="home_appear_fade_in_up text-center" color="orange"
+                   icon="vuesax-linear:info-circle"
+                   size="50" />
+        <!--        <div class="home_appear_fade_in_up delay-100">به روز رسانی</div>-->
+        <div class="home_appear_fade_in_up mt-2 text-justify text-center">برای ثبت سفارش، لطفا اطلاعات خود را تکمیل کنید
+          یا در صورت تکمیل اطلاعات، منتظر تایید اطلاعات خود بمانید.
+        </div>
+      </div>
+    </van-dialog>
+  </div>
+  <BasicActionSheet v-model:show="confirmAction">
+    <div class="font-bold text-lg"></div>
+    <div class="w-full rounded-lg bg-gray-50 p-3">
+      <div class="flex justify-between ">
+        <div>تعداد:</div>
+        <div class="flex items-center">
+          <div class="font-bold">{{ form.goldValue }}</div>
+          <div class="text-xs  mr-1"> عدد</div>
+          <div class="text-base font-bold mr-1"> عدد {{ props?.ProductItem?.title }}</div>
+        </div>
+      </div>
+      <div class="flex justify-between mt-3">
+        <div>قیمت:</div>
+        <div class="flex items-center">
+          <div class="font-bold">
+            {{ usePriceWithoutType(isBuy ? props?.ProductItem.price ?? 0 : props?.ProductItem?.sellPrice ?? 0) }}
+          </div>
+          <div class="text-xs mr-1">ریال</div>
+        </div>
+      </div>
+      <div class="flex justify-between mt-3">
+        <div>کارمزد:</div>
+        <div class="flex items-center gap-2">
+          <div v-if="isBuy" class="">{{
+              buyFee
+            }}
+          </div>
+          <!--          <div class="font-bold line-through">{{ 0 }}</div>-->
+          <div v-else class="">{{
+              sellFee
+            }}
+          </div>
+
+          <div class="text-xs mr-1">ریال</div>
+        </div>
+      </div>
+      <div class="flex justify-between mt-3">
+        <div>{{ isBuy ? 'قیمت قابل پرداخت:' : 'مبلغ دریافتی:' }}</div>
+        <div class="flex items-center">
+          <div class="font-bold">{{ usePriceWithoutType(payablePrice.toFixed(0)) }}</div>
+          <div class="text-xs mr-1">ریال</div>
+        </div>
+      </div>
+
+    </div>
+    <BasicButton class="mb-20 mt-5 w-full" type="primary" @click="ok(); confirmAction= false">ثبت نهایی</BasicButton>
+  </BasicActionSheet>
+</template>
+
+<script lang="ts" setup>
+
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import img1 from '@/assets/img/home_ly2.svg'
+import {useFormat, usePrice, usePriceWithoutType, useTowDecimal} from '@/utils/usePrice'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import type { Gold } from '@/models/gold'
+import { loading, loadingMore, toFixedDownThreeChar } from '@/utils'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import router from '@/router'
+import { useWalletStore } from '@/store/walletStore'
+import { createOrder } from '@/api/order'
+import { FormInstance, message } from 'ant-design-vue'
+import type { Price } from '@/models/home'
+// import {getLastPrice} from '@/api/home'
+import Icon from '@/components/BasicPacks/BasicIcon.vue'
+import { useUserStore } from '@/store/userStore'
+import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
+import { justNumber, justNumber2, justNumber3, required, ruleNumber } from '@/utils/inputRules'
+import GoldSkeleton from '@/views/base/gold/components/GoldSkeleton.vue'
+import GoldLoading from '@/components/GoldLoading.vue'
+// import {update} from 'lodash'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import type { Transaction } from '@/models/transaction'
+import type { TableEngineInput, TableOutput } from '@/models/table'
+import { useInfiniteScroll } from '@vueuse/core'
+import { getTransactionTable } from '@/api/transaction'
+import { getLastPrices, lastPrice, setIntervalGetAllPrice, stopPriceInterval } from '@/utils/price'
+import { Product } from '@/models/products'
+import BasicSelect from '@/components/BasicPacks/BasicSelect.vue'
+import { SelectItem } from '@/models/SelectItem'
+import Bg_main from '@/components/bg_main.vue'
+import { useFundUserStore } from '@/store/fundStore'
+// import Bg_main from "@/components/bg_main.vue";
+const typeDeal: SelectItem[] = [
+  {
+    value: 'نقدی',
+    key: 'cash'
+  },
+  {
+    value: ' طلایی',
+    key: 'gold'
+  }
+
+]
+const infoVisible = ref(false)
+const walletStore = useWalletStore()
+const userStore = useUserStore()
+const confirmAction = ref<boolean>(false)
+const noCompleteVisible = ref<boolean>(false)
+const buyItems = ref<Transaction[]>([])
+const sellItems = ref<Transaction[]>([])
+const priceErrorVisible = ref<boolean>(false)
+const buyTableOutput = ref<TableOutput<Transaction> | null>(null)
+const sellTableOutput = ref<TableOutput<Transaction> | null>(null)
+const fundStore = useFundUserStore()
+const refInput = ref<FormInstance>()
+const el = ref()
+
+interface Prop {
+  ProductItem?: Product
+}
+
+const props = withDefaults(defineProps<Prop>(), {})
+const isBuy = ref<boolean>(true)
+const buyFee = computed(() => ((props?.ProductItem?.amount * (props?.ProductItem?.percent_fee_buy ?? 0) * (props?.ProductItem?.price ?? 0)).toFixed(0)))
+const sellFee = computed(() => ((props?.ProductItem?.amount * (props?.ProductItem?.percent_fee_sell ?? 0) * (props?.ProductItem?.sellPrice ?? 0)).toFixed(0)))
+const sellFeeGeram = computed(() => {
+  if (form.value.goldVazn)
+    return (form.value.goldVazn * props.ProductItem?.percent_fee_sell).toFixed(3)
+
+})
+const buyFeeGeram = computed(() => {
+  if (form.value.goldVazn)
+    return (form.value.goldVazn * props.ProductItem?.percent_fee_buy).toFixed(3)
+})
+const buyPagination = ref<TableEngineInput>({
+  filters: [{
+    field: 'type',
+    cr: 'and',
+    type: 'number',
+    op: 'eq',
+    value: 1
+  }], limit: 6, page: 0
+})
+const sellPagination = ref<TableEngineInput>({
+  filters: [{
+    field: 'type',
+    cr: 'and',
+    type: 'number',
+    op: 'eq',
+    value: 2
+  }], limit: 6, page: 0
+})
+
+const finalPrice = computed(() => (form.value?.goldValue * (isBuy.value ? props.ProductItem?.price ?? 0 : props.ProductItem?.sellPrice ?? 0)))
+// const payablePrice = computed(() => finalPrice.value + finalPrice.value * 0.007)
+const payablePrice = computed(() => finalPrice.value)
+
+const disableTransaction = computed(() =>
+  loading.value ||
+  form.value?.goldValue === undefined ||
+  form.value?.goldValue === '' ||
+  form.value?.goldCash === '' ||
+  form.value?.goldCash === undefined ||
+  (isBuy.value ? (form.value?.goldCash ?? 0) < 500000 : (form.value?.goldValue ?? 0) < 0.001) ||
+  // (!isBuy.value && form.value.goldValue > walletStore?.walletInfo?.gold) ||
+  price.value?.buy === undefined)
+
+function refreshTable() {
+  sellItems.value = []
+  buyItems.value = []
+  sellPagination.value = {
+    filters: [{
+      field: 'type',
+      cr: 'and',
+      type: 'number',
+      op: 'eq',
+      value: 2
+    }], limit: 6, page: 0
+  }
+  buyPagination.value = {
+    filters: [{
+      field: 'type',
+      cr: 'and',
+      type: 'number',
+      op: 'eq',
+      value: 1
+    }], limit: 6, page: 0
+  }
+/*  initSellTable()
+  initBuyTable()*/
+}
+
+
+async function initBuyTable() {
+  try {
+    buyPagination.value.page === 0 ? loading.value = true : loadingMore.value = true
+    buyTableOutput.value = await getTransactionTable(buyPagination.value)
+    buyItems.value.push(...buyTableOutput.value.rows)
+    // console.log(tableOutput.value)
+  } catch (e) {
+    console.log(e)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+async function initSellTable() {
+  try {
+    sellPagination.value.page === 0 ? loading.value = true : loadingMore.value = true
+    sellTableOutput.value = await getTransactionTable(sellPagination.value)
+    sellItems.value.push(...sellTableOutput.value.rows)
+    // console.log(tableOutput.value)
+  } catch (e) {
+    console.log(e)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+// if (!userStore.isSingle) {
+/*useInfiniteScroll(
+    el,
+    async () => {
+      // load more
+      // console.log('salamss')
+      if (!userStore.isSingle) {
+        if (isbuy.value) {
+          // console.log((buyeTableOutput.value.query.page))
+          // console.log(buyeTableOutput.value.query.total)
+          // console.log((buyeTableOutput.value.query.page + 1) * buyPagination.value.limit < buyeTableOutput.value.query.total)
+          if (
+              buyeTableOutput.value &&
+              (buyPagination.value.page + 1) * buyPagination.value.limit < buyeTableOutput.value.query.total
+          ) {
+            // console.log('gfgf')
+            buyPagination.value.page++
+            await initbuyTable()
+          }
+        } else {
+          if (
+              sellTableOutput.value &&
+              (sellPagination.value.page + 1) * sellPagination.value.limit < sellTableOutput.value.query.total
+          ) {
+            // console.log('gfgf')
+            sellPagination.value.page++
+            await initsellTable()
+          }
+        }
+      }
+
+    },
+    {distance: 12}
+)*/
+// }
+
+onMounted(async () => {
+  switch (router.currentRoute.value.query.state) {
+    case 'sell':
+      isBuy.value = false
+      break
+    case 'buy':
+      isBuy.value = true
+      break
+  }
+/*  await initSellTable()
+  await initBuyTable()*/
+})
+
+const form = ref<Gold>({
+  goldCash: undefined,
+  goldValue: undefined,
+  percentWallet: undefined,
+  method: 'cash',
+  goldVazn:undefined
+})
+const allowedAsciiCodeFloat = [46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57]
+// const allowedAsciiCodeInt = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57]
+watch(form.value, () => {
+  if (form.value.goldValue) {
+    form.value.goldValue = parseFloat(form.value.goldValue)
+    const lastCharGoldStr: string = form.value.goldValue.toString()
+    if (!allowedAsciiCodeFloat.includes(lastCharGoldStr.slice(-1).charCodeAt(0))) {
+      calculateCash(form.value.goldValue)
+    }
+  }
+
+
+})
+
+onMounted(() => {
+  console.log(userStore.userInfo?.is_legal === 2)
+  if (userStore.userInfo?.is_legal === 0) {
+    noCompleteVisible.value = true
+  }
+})
+const productNum = ref<number>(0)
+const getInventoryById = (id: number) => {
+
+  userStore?.productWallet?.forEach((val) => {
+    if (val.product_id == id)
+      productNum.value = val.gold
+  })
+  return productNum.value ?? 0
+}
+
+/*function percentChange(val: number) {
+  if (val !== 0)
+    if (isBuy.value) {
+      form.value.goldCash = unitCashCalculator.value * val
+      calculateGold(form.value.goldCash)
+      calculateCash(form.value.goldValue)
+    } else {
+      // console.log((unitGoldCalculator.value * val).toFixed(2))
+      // form.value.goldValue = parseFloat((unitGoldCalculator.value * val).toFixed(2))
+      form.value.goldValue = toFixedDownThreeChar(parseFloat(unitGoldCalculator.value * val))
+      calculateCash(form.value.goldValue)
+    }
+  else {
+    form.value.goldValue = undefined
+    form.value.goldCash = undefined
+  }
+}*/
+
+const unitGoldCalculator = computed(() => {
+  // console.log(walletStore?.walletInfo?.gold / 100)
+  return (walletStore?.walletInfo?.gold ?? 0) / 100
+})
+
+const unitCashCalculator = computed(() => {
+  return (walletStore?.walletInfo?.cash ?? 0) / 100
+})
+
+const limitedPrice = computed(() => {
+  if (walletStore.limitedPrice)
+    return walletStore?.limitedPrice[0]
+})
+
+function calculateCash(val: number) {
+  priceErrorVisible.value = false
+
+  if (price.value) {
+    form.value.goldVazn = parseFloat((val * (( props?.ProductItem?.price) + (props?.ProductItem?.cash_fee_buy)))/lastPrice.value?.buy).toFixed(1)
+    // console.log(val,props?.ProductItem?.price,props?.ProductItem?.cash_fee_buy,lastPrice.value?.buy)
+    if (isBuy.value) {
+      if (val){
+        form.value.goldCash = parseFloat(val * (( props?.ProductItem?.price) + (props?.ProductItem?.cash_fee_buy))).toFixed(0)
+      }
+      else {
+        form.value.goldCash = 0
+        form.value.goldVazn = 0
+      }
+    }
+    else {
+      if (val)
+        form.value.goldCash = parseFloat((val * props?.ProductItem?.price) + (props?.ProductItem?.cash_fee_sell)).toFixed(0)
+      else{
+        form.value.goldCash = 0
+        form.value.goldVazn = 0
+      }
+    }
+    // console.log(form.value.goldVazn)
+  }
+}
+
+/*function calculateGold(val: number) {
+  // console.log(val)
+  // form.value.goldCash = usePriceWithoutType(form.value.goldCash)
+  if (price.value) {
+    if (isBuy.value) {
+      if (val) {
+        form.value.goldValue = toFixedDownThreeChar(parseFloat(val / price?.value?.buy))
+        if (parseInt(finalPrice.value) > 0) priceErrorVisible.value = true
+        if (parseInt(finalPrice.value) === 0) priceErrorVisible.value = false
+      } else if (val.toString() === '') {
+        form.value.goldValue = undefined
+        priceErrorVisible.value = false
+      } else {
+        form.value.goldValue = 0
+        priceErrorVisible.value = false
+      }
+    } else {
+      if (val) {
+        form.value.goldValue = toFixedDownThreeChar(parseFloat((val / price?.value?.sell)))
+        if (parseInt(finalPrice.value) > 0) priceErrorVisible.value = true
+        if (parseInt(finalPrice.value) === 0) priceErrorVisible.value = false
+      } else if (val.toString() === '') {
+        // console.log('sasasasasasa')
+        form.value.goldValue = undefined
+        priceErrorVisible.value = false
+      } else {
+        form.value.goldValue = 0
+        priceErrorVisible.value = false
+      }
+    }
+  }
+}*/
+
+/*watch(form.value?.goldValue, (n)=>{
+  console.log('salammmm', n)
+})*/
+
+const bganim = ref(null)
+
+function useStyle() {
+  if (isBuy.value) return 'right: 2%;'
+    // if (isbuy.value) return 'animation-direction: normal'
+  // else return 'animation-direction: reverse'
+  else return ' right: 98%; transform: translate(100%, 0);'
+}
+
+
+function setIsBuy(val: boolean) {
+  isBuy.value = val
+  form.value.goldValue = undefined
+  form.value.goldCash = undefined
+  form.value.percentWallet = 0
+  priceErrorVisible.value = false
+
+  // console.log(bganim.value.classList)
+  // bganim?.value?.classList.add(val?'right':'left')
+  // bganim?.value?.style.transform = `translateX(${val ? '0' : '-100'});`
+  // bganim?.value?.style.animationDirection = val? 'normal':'reverse'
+  // val? bganim?.value?.classList?.add("move") : bganim?.value?.classList?.remove("move")
+  // const el = bganim.value?.
+  // el.
+}
+
+const formatter = (value: number) => {
+  return `${value}%`
+}
+
+
+const price = computed((): Price => <Price>lastPrice.value ?? 0)
+onMounted(async () => {
+  // await initPrice()
+  // await setIntervalGetPrice()
+  // console.log('okkkkkkkkgold')
+})
+
+async function initPrice() {
+  try {
+    // chartLoading.value = true
+    await getLastPrices()
+    // await setIntervalGetPrice()
+    loading.value = true
+    price.value = lastPrice.value
+    props.ProductItem.price = lastPrice.value?.buy * props.ProductItem?.amount
+    props.ProductItem.sellPrice = lastPrice.value?.sell * props.ProductItem?.amount
+  } catch (e) {
+    console.log(e)
+  } finally {
+    loading.value = false
+    // chartLoading.value = false
+  }
+}
+
+// onMounted(() => {
+//   initPrice()
+// })
+
+function okConfirm() {
+  confirmAction.value = true
+  refInput.value?.validateFields()
+}
+
+async function ok() {
+  try {
+    loading.value = true
+    infoVisible.value = true
+    await createOrder({
+      direction: isBuy.value ? 1 : 2,
+      product_id: props.ProductItem?.id,
+      method: form.value?.method,
+      number: form.value?.goldValue ?? 0
+    })
+    await walletStore.getMyWallet()
+    await router.push({ name: 'transactions' })
+    form.value = {
+      goldValue: undefined,
+      goldCash: undefined,
+      percentWallet: undefined,
+      method: 'cash'
+    }
+    // refreshTable()
+    await fundStore.getMyFund()
+    message.success('سفارش شما با موفقیت انجام شد')
+  } catch (e) {
+    // console.log(e)
+    // await initPrice()
+  } finally {
+    loading.value = false
+    infoVisible.value = false
+  }
+}
+
+</script>
+
+<style lang="less">
+/*.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}*/
+/*.completeButtonStyle{
+  background: blue;
+}*/
+.completeButtonStyle .van-dialog__confirm .van-button__content {
+  background: @App-primary-color;
+  color: white;
+}
+
+.left {
+  transform: translateX(0);
+  left: 0;
+}
+
+.toggle-transe-parent {
+  animation: ease-in-out infinite alternate swingParent;
+}
+
+@keyframes swingParent {
+  from {
+    transform: translateX(0);
+    left: 0;
+  }
+  to {
+    left: 100%;
+    transform: translateX(-100%);
+  }
+}
+
+
+.animate.right {
+  right: 0;
+}
+
+.animate.right.move {
+  right: 100%;
+  transform: translate(100%, 0);
+}
+//.text-secondary{
+//  color: #d3a233 !important;
+//}
+</style>