boursecu/boursecu_user
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1404/10/28-base

Browse Source
This commit is contained in:
MojtabaSoumi
2026-01-18 13:01:46 +03:30
parent f95b0cef95
commit 9d96ae106b
455 changed files with 58164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/products/components/DealProduct.vue
+721
View File
@@ -0,0 +1,721 @@
<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-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-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;' : ''"
>
فروش {{ 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
// console.log(val)
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: #0A1B37;
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>
src/views/base/products/components/ProductItem.vue
+61
View File
@@ -0,0 +1,61 @@
<template>
<div class="flex bg-white border-1 border-gray-200 rounded-lg"
:class="props.ProductItem.show ? 'bg-white opacity-100' : 'bg-gray-200 opacity-50'">
<div class="bg-gray-100 m-2 rounded-lg w-28 h-28 flex justify-center p-2">
<img v-if="props.ProductItem.group_type=='گوی'" :src="goyImg">
<img v-if="props.ProductItem.group_type=='مکعب'" :src="mokaabImg">
<img v-if="props.ProductItem.group_type=='سکه'" :src="sekkeImg">
<img v-if="props.ProductItem.group_type=='سکه پارسیان'" :src="parsianImg">
<img v-if="props.ProductItem.group_type=='آبشده'|| props.ProductItem.group_type== null" :src="defaultImg">
</div>
<div class="m-1 flex flex-col gap-1 justify-center">
<div class="text-base font-500">{{ props.ProductItem.title }}</div>
<br>
<!-- <div v-if="props.ProductItem.group_type!='آبشده'" class=" font-500">{{ amountProduct}}</div>-->
<!-- <div v-if="props.ProductItem.group_type!='آبشده'" class="text-secondary font-500">{{ props.ProductItem.amount }}گرم</div>-->
<!-- <div v-else class="text-secondary font-500">حداقل خرید یک گرم</div>-->
<div>{{usePrice((props.ProductItem.price ?? 0) + (props.ProductItem.cash_fee_buy ?? 0))}}</div>
<!-- <div v-if="props.ProductItem.group_type!='آبشده'" class="text-xs text-gray-400">شامل 33 هزار تومان اجرت</div>-->
<!-- <div v-else class="text-xs text-gray-400">محاسبه بر اساس قیمت روز</div>-->
</div>
</div>
</template>
<script setup lang="ts">
import defaultImg from "@/assets/img/defaultAbshodeh.svg"
import goyImg from "@/assets/img/goyImg.svg"
import mokaabImg from "@/assets/img/mokaabImg.svg"
import sekkeImg from "@/assets/img/sekkeImg.svg"
import parsianImg from "@/assets/img/parsianImg.svg"
import type {Product} from "@/models/products";
import {usePrice} from "../../../../utils/usePrice";
import {computed, ref} from "vue";
interface Prop {
ProductItem: Product
}
const amountProduct=computed(()=>{
if (0<props.ProductItem.amount && props.ProductItem.amount<1){
return `${props.ProductItem.amount*1000}سوت`
}else return `${props.ProductItem.amount}گرم`
})
const props = withDefaults(defineProps<Prop>(), {})
// const typeOfProduct=(val:string)=>{
// if (val.includes('گوی'))
// return 'گوی'
// if (val.includes('شمش'))
// return 'شمش'
// if (val.includes('مکعب'))
// return 'مکعب'
// if (val.includes('24 عیار'))
// return '24 عیار'
//
// return 'آب شده'
// }
</script>
<style scoped>
</style>
src/views/base/products/index.vue
+199
View File
@@ -0,0 +1,199 @@
<template>
<div class="bottom-0 fixed top-0">
<img :src="img" alt="" class=" w-inherit "
:style="{ backgroundRepeat: 'repeat', }"
/>
</div>
<a-spin :spinning="loading">
<div class=" !h-full overflow-y-scroll">
<div class="w-full flex justify-center top-0 py-5">
<ARadioGroup size="large" @change="changeTab" v-model:value="activekey" button-style="solid">
<ARadioButton class="cats" value="همه">همه</ARadioButton>
<ARadioButton class="cats" v-for="item in typeItems" :value="item">{{ item }}</ARadioButton>
</ARadioGroup>
</div>
<div class="mx-5 pb-30 pt-2" style="color: #1b2b07">
<div class="mt-3" v-for="item in items">
<ProductItem :ProductItem="item" @click="clickProduct(item)"></ProductItem>
</div>
</div>
</div>
</a-spin>
<!-- <BasicActionSheet v-model:show="showFilter">-->
<!-- <indexGold ></indexGold>-->
<!-- </BasicActionSheet>-->
<BasicActionSheet placement="bottom" v-model:show="showFilter">
<div class="">
<indexGold v-if="selectedProduct?.group_type=='آبشده'" :ProductItem="selectedProduct"></indexGold>
<DealProduct v-else :ProductItem="selectedProduct"></DealProduct>
</div>
</BasicActionSheet>
<BasicModal
v-model:visible="isAfterCloseTime"
custom-footer
:closable="false"
>
<div class="text-center">
<div class="font-bold text-red-600">مشتریان گرامی</div>
<div class="mt-2 leading-relaxed">
<p>فروشگاه در حال حاضر بسته است.</p>
<p>ساعت کاری فروشگاه از {{ openTime }} تا {{ closeTime }} می‌باشد.</p>
<p>از همراهی و اعتماد شما سپاسگزاریم.🤍</p>
</div>
</div>
<template #footer>
<a-button type="primary" class="w-full" @click="isAfterCloseTime = false">
متوجه شدم
</a-button>
</template>
</BasicModal>
</template>
<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue'
import router from '@/router'
import ProductItem from '@/views/base/products/components/ProductItem.vue'
import { getProducts } from '@/api/products'
import {
getLastPrices,
lastPrice,
stopPriceInterval
} from '@/utils/price'
import { loading } from '@/utils'
import { Price } from '@/models/home'
import type { Product } from '@/models/products'
import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
import indexGold from '@/views/base/gold/index.vue'
import DealProduct from '@/views/base/products/components/DealProduct.vue'
import { cloneDeep } from 'lodash'
import img from "@/assets/img/user_ly1.svg";
import BasicModal from "@/components/BasicPacks/BasicModal.vue";
const activekey = ref('آبشده')
const showFilter = ref()
const selectedProduct = ref<Product>()
const closeTime = ref<string>('')
const openTime = ref<string>('')
const isAfterCloseTime = ref<boolean>(false)
watch([openTime, closeTime], ([open, close]) => {
if (!open || !close) return
const now = new Date()
const currentSeconds = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds()
const [oh, om, os] = open.split(':').map(Number)
const [ch, cm, cs] = close.split(':').map(Number)
const openSeconds = oh * 3600 + om * 60 + os
const closeSeconds = ch * 3600 + cm * 60 + cs
isAfterCloseTime.value = currentSeconds < openSeconds || currentSeconds > closeSeconds
})
function clickProduct(item: Product) {
if(item?.show){
showFilter.value = true
selectedProduct.value = cloneDeep(item)
}
}
function changeTab() {
if (activekey.value != 'همه') {
items.value = firstItems.value?.filter((val) =>
val.group_type == activekey.value
)
} else items.value = firstItems.value
}
const firstItems = ref<Product[]>()
const price = ref<Price>()
const items = ref<Product[]>()
const typeItems = ref([])
onMounted(async () => {
try {
loading.value = true
items.value = await getProducts()
if (items.value?.length) {
closeTime.value = items.value[0].auto_close_at
openTime.value = items.value[0].auto_open_at
}
items.value?.forEach((val, index) => {
if (!typeItems.value.includes(val.group_type)){
typeItems.value.push(val.group_type)
}
// typeItems.value[index] = val.group_type
})
firstItems.value = items.value
await initPrice()
// await setIntervalGetLastPrice()
// console.log('run product')
} catch (e) {
console.log(e)
} finally {
loading.value = false
if (router.currentRoute.value.query.cat=="coin"){
activekey.value="سکه"
changeTab()
}
if (router.currentRoute.value.query.state) {
if (router.currentRoute.value.query.product) {
clickProduct(items.value?.find(x => x.title === 'سکه'))
} else {
clickProduct(items.value?.find(x => x.title === 'آبشده نقدی'))
}
}
}
})
onUnmounted(() => {
stopPriceInterval()
// console.log('stop product')
// console.log('okgold')
})
// watch(lastPrice, async () => {
// // console.log(items);
// items.value?.forEach((val) => {
// // console.log(lastPrice.value)
// if (val.group_type == 'آبشده') {
// val.price = lastPrice.value?.price_last
// val.sellPrice = lastPrice.value?.sell
// } else {
// val.price = val.amount * lastPrice.value?.price_last
// val.sellPrice = val.amount * lastPrice.value?.sell
//
// // console.log(lastPrice.value?.price_last + "*" + val.amount + ' ' + val.price)
// }
//
// })
// })
async function initPrice() {
try {
// chartLoading.value = true
await getLastPrices()
// await setIntervalGetPrice()
loading.value = true
price.value = lastPrice.value
} catch (e) {
console.log(e)
} finally {
loading.value = false
// chartLoading.value = false
}
}
</script>
<style lang="less">
.cats:hover span {
--un-text-opacity: 1;
color: rgba(206, 163, 76, var(--un-text-opacity))!important;
}
</style>