750 lines
26 KiB
Vue
750 lines
26 KiB
Vue
<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) ">
|
|
خرید {{ props?.ProductItem?.title }}
|
|
</div>
|
|
<div :class="!isBuy?'text-tertiary':'text-gray-400'" class="w-full text-center z-2"
|
|
@click.stop="setIsBuy(false) ">
|
|
فروش {{ 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 mb-25vh pb-2">
|
|
<a-spin :spinning="!price">
|
|
<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(basePriceValue) }}
|
|
</div>
|
|
ریال
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="w-full h-[88px]">
|
|
<GoldSkeleton class="w-full" />
|
|
</div>
|
|
</a-spin>
|
|
<a-form :model="form" class="!mt-5" name="basic" @finish="okConfirm()">
|
|
<div class="border-gray-200 border-1 rounded-xl p-5 h-58 relative">
|
|
<bg_main />
|
|
<div class="z-100 relative">
|
|
<a-form-item>
|
|
<BasicInput v-model:value="form.goldCash" addon-before="ریال" :addon-bg-color="useConfigStore().config.color"
|
|
addon-text-color="white"
|
|
place-holder="ارزش کل"
|
|
size="large"
|
|
type="price" @onchange="calculateGold" />
|
|
</a-form-item>
|
|
<a-form-item :rules="[justNumber()]">
|
|
<BasicInput v-model:value="form.goldValue" addon-before="گرم" :addon-bg-color="useConfigStore().config.color"
|
|
addon-text-color="white"
|
|
place-holder="مقدار طلا"
|
|
size="large" type="text" inputmode="decimal" @onchange="calculateCash" />
|
|
</a-form-item>
|
|
<!-- {{walletStore?.walletInfo?.gold}}-->
|
|
<Transition mode="out-in" name="fade">
|
|
<div v-if="!isBuy" class="font-bold text-xs">
|
|
<div>{{ formatGoldWalletBalanceText(walletStore?.walletInfo?.gold ?? 0, props?.ProductItem?.group_type) }}</div>
|
|
<!-- <div v-if="walletStore?.walletInfo?.gold_block !== 0">
|
|
{{ `موجودی قابل برداشت طلا: ${walletStore?.walletInfo?.gold_block ?? 0} گرم` }}
|
|
</div>-->
|
|
</div>
|
|
<div v-else class="font-bold text-xs">
|
|
{{ formatCashWalletBalanceText(usePriceWithoutType(cashWalletBalance), props?.ProductItem?.group_type) }}
|
|
</div>
|
|
</Transition>
|
|
<Transition mode="out-in" name="fade">
|
|
<a-form-item v-if="walletStore?.walletInfo" class="!mt-3 ">
|
|
<!-- {{ isBuy }}-->
|
|
<a-slider v-model:value="form.percentWallet"
|
|
:disabled="isBuy? cashWalletBalance <= 0: false"
|
|
:max="100"
|
|
:min="0"
|
|
:step="10"
|
|
:tip-formatter="null"
|
|
class="!my-1"
|
|
@change="percentChange" />
|
|
</a-form-item>
|
|
</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>-->
|
|
<Transition mode="out-in" name="fade">
|
|
<div v-if="priceErrorVisible" class="flex gap-1 items-center text-xs mt-[-15px] text-blue-600">
|
|
<BasicIcon icon="vuesax-linear:info-circle" />
|
|
ارزش کل وارد شده بر حسب گرم طلا محاسبه خواهد شد و قیمت وارد شده معادل {{ usePrice(parseInt(finalPrice.toFixed(0))) }} می
|
|
باشد!
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
<GoldLoading v-model:show="infoVisible" />
|
|
<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 v-if="!isBuy && form.goldValue > walletStore?.walletInfo?.gold"
|
|
class="text-red-700 text-xs font-bold mt-2">
|
|
مقدار گرم طلای وارد شده جهت فروش ({{ form.goldValue }}گرم) بیشتر از مقدار موجودی شما
|
|
({{ walletStore?.walletInfo?.gold }}گرم) می باشد.
|
|
</div>
|
|
<!-- <div>{{form?.goldValue? true: false}}</div>-->
|
|
<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>
|
|
<div class=" w-full bottom-18 px-6 rounded-xl py-1 border-1 bg-white">
|
|
<!-- <BasicInfoItem is-line title="کارمزد" :value="parseFloat(((form.goldValue?? 0)*0.005).toFixed(3))" />-->
|
|
<!-- <BasicInfoItem is-line title="کارمزد" :value="parseFloat(((form.goldValue?? 0)*0.005).toFixed(3))" />-->
|
|
<div class="flex justify-between items-center">
|
|
<div>کارمزد:</div>
|
|
<div class="flex gap-2 items-center">
|
|
<div class="">{{ feeInGrams }}</div>
|
|
<!-- <div class="font-bold text-2xl">{{ 0 }}</div>-->
|
|
<div>
|
|
گرم
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-form>
|
|
<!-- <div ref="el" :class="loading? 'h-screen': ''"
|
|
class="px-3 overflow-y-scroll w-full h-[49vh] pb-25 max-h-[35vh]">
|
|
<!– <div v-for="item in items">ss</div>–>
|
|
<list-anim v-if="!loading" :numberItemsAnim="4">
|
|
<Item v-for="item in isBuy? buyItems: sellItems" :key="item.id" :item="item" />
|
|
<TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
|
|
</list-anim>
|
|
<TransactionSkeleton v-for="i in 13" v-else :key="i" class="mt-1" />
|
|
</div>-->
|
|
</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>
|
|
</div>
|
|
<div class="flex justify-between mt-3">
|
|
<div>مظنه:</div>
|
|
<div class="flex items-center">
|
|
<div class="font-bold">{{ usePriceWithoutType(Math.round(basePriceValue ?? 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 class="font-bold text-xl">{{ feeInGrams }}</div>
|
|
<div class="text-xs mr-1">گرم</div>
|
|
</div>
|
|
</div>
|
|
<div >(معادل {{ equivalentPrice }} ریال)</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>
|
|
<van-dialog v-model:show="noCompleteVisible" class="completeButtonStyle" confirm-button-text="تکمیل اطلاعات"
|
|
show-confirm-button @confirm="router.push({name: 'user',query:{showEdit: true}})">
|
|
<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>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import { computed, onMounted, ref, watch } from 'vue'
|
|
import img1 from '@/assets/img/home_ly2.svg'
|
|
import { usePrice, usePriceWithoutType } from '@/utils/usePrice'
|
|
import BasicInput from '@/components/BasicPacks/BasicInput.vue'
|
|
import type { Gold } from '@/models/gold'
|
|
import { isIphone, 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 { 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 } 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 TransactionSkeleton from '@/components/TransactionSkeleton.vue'
|
|
import ListAnim from '@/components/ListAnim.vue'
|
|
import Item from '@/views/base/wallet/components/Item.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, getTradeBuyPrice, getTradeSellPrice, lastPrice } from '@/utils/price'
|
|
import type { Product } from '@/models/products'
|
|
import { useFundUserStore } from '@/store/fundStore'
|
|
import {useConfigStore} from "@/store/configStore";
|
|
import { calcFeeInGrams, calcPayablePriceRial, calcSellGoldDebit, feeDeductFromGold, loadServiceFeeFromSettings } from '@/utils/serviceFee'
|
|
import { resolveProductCashFeeBuyRial, resolveProductCashFeeSellRial } from '@/utils/productCashFee'
|
|
import { formatCashWalletBalanceText, formatGoldWalletBalanceText } from '@/utils/productDealMethod'
|
|
import { getCashWalletBalance } from '@/utils/productAssets'
|
|
import { isStoreClosed, getStoreClosedMessage } from '@/utils/storeHours'
|
|
import { resetTransactionsPageData } from '@/views/base/transactions/composables/useTransactionsPageData'
|
|
|
|
const infoVisible = ref(false)
|
|
const walletStore = useWalletStore()
|
|
const userStore = useUserStore()
|
|
const cashWalletBalance = computed(() =>
|
|
getCashWalletBalance(walletStore.walletInfo, userStore.userInfo?.wallets)
|
|
)
|
|
const fundStore = useFundUserStore()
|
|
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 el = ref()
|
|
|
|
interface Prop {
|
|
ProductItem?: Product
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Prop>(), {})
|
|
const isBuy = ref<boolean>(true)
|
|
|
|
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 basePriceValue = computed(() => {
|
|
const product = props?.ProductItem
|
|
if (!product) return undefined
|
|
|
|
const { price_profit = 0, price = 0 } = product
|
|
const base = price_profit + price
|
|
const buyFee = resolveProductCashFeeBuyRial(product, base)
|
|
const sellFee = resolveProductCashFeeSellRial(product, base)
|
|
|
|
return isBuy.value ? base + buyFee : base - sellFee
|
|
})
|
|
|
|
const finalPrice = computed(() => {
|
|
|
|
const gold = form.value?.goldValue ?? 0
|
|
|
|
const product = props?.ProductItem
|
|
if (!product) return 0
|
|
|
|
const { price_profit = 0, price = 0 } = product
|
|
|
|
const base = price_profit + price
|
|
const buyFee = resolveProductCashFeeBuyRial(product, base)
|
|
const sellFee = resolveProductCashFeeSellRial(product, base)
|
|
|
|
if (isBuy.value) {
|
|
return gold * (base + buyFee)
|
|
}
|
|
|
|
return gold * (base - sellFee)
|
|
})
|
|
|
|
const payablePrice = computed(() =>
|
|
calcPayablePriceRial(finalPrice.value, feeInRial.value, isBuy.value)
|
|
)
|
|
const sellGoldDebit = computed(() => calcSellGoldDebit(form.value?.goldValue, feeInGrams.value))
|
|
const feeInGrams = computed(() => calcFeeInGrams(form.value?.goldValue))
|
|
const unitPrice = computed(() =>
|
|
(props?.ProductItem?.price_profit ?? 0) + (props?.ProductItem?.price ?? 0)
|
|
)
|
|
const feeInRial = computed(() => unitPrice.value * feeInGrams.value)
|
|
const equivalentPrice = computed(() => usePriceWithoutType(feeInRial.value.toFixed(0)))
|
|
|
|
const disableTransaction = computed(() =>
|
|
loading.value ||
|
|
isStoreClosed() ||
|
|
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 && sellGoldDebit.value > (walletStore?.walletInfo?.gold ?? 0)) ||
|
|
(isBuy.value && payablePrice.value > cashWalletBalance.value) ||
|
|
!lastPrice.value ||
|
|
(isBuy.value ? getTradeBuyPrice(lastPrice.value) <= 0 : getTradeSellPrice(lastPrice.value) <= 0))
|
|
|
|
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 initPrice()
|
|
await loadServiceFeeFromSettings()
|
|
/* await initSellTable()
|
|
await initBuyTable()*/
|
|
})
|
|
|
|
const form = ref<Gold>({
|
|
goldCash: undefined,
|
|
goldValue: undefined,
|
|
percentWallet: 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) {
|
|
const lastCharGoldStr: string = form.value.goldValue.toString()
|
|
if (!allowedAsciiCodeFloat.includes(lastCharGoldStr.slice(-1).charCodeAt(0))) {
|
|
form.value.goldValue = isNaN(parseFloat(lastCharGoldStr.slice(0, -1))) ? null : parseFloat(lastCharGoldStr.slice(0, -1))
|
|
calculateCash(form.value.goldValue)
|
|
}
|
|
}
|
|
if (form.value.goldCash) {
|
|
const lastCharCashStr: string = form.value.goldCash.toString()
|
|
if (!allowedAsciiCodeInt.includes(lastCharCashStr.slice(-1).charCodeAt(0))) {
|
|
form.value.goldCash = isNaN(parseFloat(lastCharCashStr.slice(0, -1))) ? null : parseFloat(lastCharCashStr.slice(0, -1))
|
|
calculateGold(form.value.goldCash)
|
|
}
|
|
}
|
|
|
|
})
|
|
|
|
onMounted(() => {
|
|
console.log(userStore.userInfo?.is_legal === 2)
|
|
if (userStore.userInfo?.is_legal === 0) {
|
|
noCompleteVisible.value = true
|
|
}
|
|
})
|
|
|
|
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 cashWalletBalance.value / 100
|
|
})
|
|
|
|
/*function calculateCash(val: number) {
|
|
priceErrorVisible.value = false
|
|
// console.log(val)
|
|
if (price.value) {
|
|
if (isBuy.value) {
|
|
if (val) form.value.goldCash = parseFloat((val * price?.value?.buy).toFixed(0))
|
|
else form.value.goldCash = undefined
|
|
} else {
|
|
if (val) form.value.goldCash = parseFloat((val * price?.value?.sell).toFixed(0))
|
|
else form.value.goldCash = undefined
|
|
}
|
|
}
|
|
}*/
|
|
function syncFormWithLatestPrice() {
|
|
if (!lastPrice.value) return
|
|
|
|
const goldValue = form.value.goldValue
|
|
if (goldValue !== undefined && goldValue !== null && goldValue !== '' && !isNaN(Number(goldValue))) {
|
|
calculateCash(Number(goldValue))
|
|
return
|
|
}
|
|
|
|
const goldCash = form.value.goldCash
|
|
if (goldCash !== undefined && goldCash !== null && goldCash !== '' && !isNaN(Number(goldCash))) {
|
|
calculateGold(Number(goldCash))
|
|
}
|
|
}
|
|
|
|
watch(
|
|
() => [basePriceValue.value, isBuy.value],
|
|
() => {
|
|
syncFormWithLatestPrice()
|
|
}
|
|
)
|
|
|
|
function productFeeBase(product?: Product) {
|
|
return (product?.price_profit ?? 0) + (product?.price ?? 0)
|
|
}
|
|
|
|
function calculateCash(val: number) {
|
|
priceErrorVisible.value = false
|
|
if (!lastPrice.value) return
|
|
|
|
const product = props?.ProductItem
|
|
if (!product) return
|
|
|
|
const base = productFeeBase(product)
|
|
const buyFee = resolveProductCashFeeBuyRial(product, base)
|
|
const sellFee = resolveProductCashFeeSellRial(product, base)
|
|
const tradeBuy = getTradeBuyPrice(lastPrice.value)
|
|
form.value.goldVazn = parseFloat(String((val * (base + buyFee)) / tradeBuy)).toFixed(1)
|
|
if (isBuy.value) {
|
|
form.value.goldCash = val
|
|
? parseFloat(String(val * (base + buyFee)))
|
|
: 0
|
|
if (!val) form.value.goldVazn = 0
|
|
} else {
|
|
form.value.goldCash = val
|
|
? parseFloat(String(val * base - sellFee))
|
|
: 0
|
|
if (!val) form.value.goldVazn = 0
|
|
}
|
|
}
|
|
|
|
function calculateGold(val: number) {
|
|
if (price.value) {
|
|
const product = props?.ProductItem
|
|
if (!product) return
|
|
|
|
const base = productFeeBase(product)
|
|
const buyFee = resolveProductCashFeeBuyRial(product, base)
|
|
const sellFee = resolveProductCashFeeSellRial(product, base)
|
|
|
|
if (isBuy.value) {
|
|
if (val) {
|
|
form.value.goldValue = toFixedDownThreeChar(parseFloat(String(val / (base + buyFee))))
|
|
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(String(val / (base - sellFee))))
|
|
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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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)
|
|
|
|
const goldPriceValue = computed(() => {
|
|
if (!lastPrice.value?.price) return 0
|
|
return isBuy.value
|
|
? getTradeBuyPrice(lastPrice.value)
|
|
: getTradeSellPrice(lastPrice.value)
|
|
})
|
|
|
|
async function initPrice() {
|
|
try {
|
|
await getLastPrices()
|
|
loading.value = true
|
|
} catch (e) {
|
|
console.log(e)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function okConfirm() {
|
|
if (isStoreClosed()) {
|
|
message.warning(getStoreClosedMessage())
|
|
return
|
|
}
|
|
confirmAction.value = true
|
|
}
|
|
|
|
async function ok() {
|
|
if (isStoreClosed()) {
|
|
message.warning(getStoreClosedMessage())
|
|
return
|
|
}
|
|
try {
|
|
loading.value = true
|
|
infoVisible.value = true
|
|
await createOrder({
|
|
direction: isBuy.value ? 1 : 2,
|
|
product_id: props.ProductItem?.id,
|
|
method: "cash",
|
|
number: form.value.goldValue ?? 0
|
|
})
|
|
confirmAction.value = false
|
|
await walletStore.getMyWallet()
|
|
resetTransactionsPageData()
|
|
await router.push({ name: 'transactions' })
|
|
form.value = {
|
|
goldValue: undefined,
|
|
goldCash: undefined,
|
|
percentWallet: undefined,
|
|
method: 'cash'
|
|
}
|
|
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);
|
|
}
|
|
</style>
|