spinz777/src/pages/wallet/components/OnlineDepositOld.vue

<template>
	<view class="online-deposit-container">
		<view class="plr30 ptb24 ft15">
			{{ $t('deposit.paymentMethods') }}<span :style="{ color: themeStore.theme.text.highlight }">*</span>
		</view>
		<view class="">
			<PaymentMethods v-if="appStore.phoneNumberPrefix === '+91'" />
			<PaymentMethodsOld v-else />
		</view>
		<view class="plr30 pb24 ft15">
			{{ $t('deposit.depositChannel') }}<span :style="{ color: themeStore.theme.text.highlight }">*</span>
		</view>
		<view>
			<DepositChannel @change="handleChannelChange" />
		</view>
		<view class="plr30 ptb24 ft15">
			{{ $t('deposit.depositEvent') }}:
		</view>
		<view class="flex-acenter plr30 pb30">
			<view class="check-radio flex-acenter flex-scenter cfff ft26"
				:style="{ 'border-color': themeStore.theme.themeDarkBgColor, 'background': themeStore.theme.themeDarkBgColor }"
				@click.stop="() => { depositStore.isTypeB = !depositStore.isTypeB }">

				<theme-image v-if="depositStore.isTypeB" src="@/static/app/icon-check-white.png" mode="aspectFit"
					style="width: 30rpx; height: 30rpx;" />
			</view>
			<view class="ft13">
				{{ `+${(depositStore.typeB.gift || 0) * 100}%` }} {{ $t('deposit.bonus') }}
			</view>
		</view>
		<view v-if="depositStore.isTypeB" class="ft11 plr30 pb30" :style="{ 'color': themeStore.theme.text.highlight }">
			{{ $t('deposit.message.tips3') }}
		</view>
		<view style="height: 8rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
		<view class="plr30 ptb24 ft15">
			{{ $t('deposit.depositAmount') }}: <span class="ft12 ml32">Min: {{
				$formatThousandDot(depositStore.onlineDepositMin) }}</span><span class="ft12 ml32"> Max: {{
					$formatThousandDot(depositStore.onlineDepositMax) }}</span>
		</view>
		<view class="plr30 pb30">
			<MoneyInput v-model="depositStore.onlinePaymentData.depositAmount"
				:placeholder="$t('deposit.depositAmount')" :max="depositStore.onlineDepositMax"
				:min="depositStore.onlineDepositMin" />
		</view>
		<view style="height: 1rpx;" :style="{ 'background': themeStore.theme.darkSeplineColor }"></view>
		<view class="plr30">
			<view class="flex-wrap ptb30">
				<view v-for="(item, index) in depositStore.onlineDepositType.amountList" :key="index" class=""
					@click.stop="handleAmountSelect(item)">
					<view class="select-item-container">
						<view v-if="depositStore.isTypeB" class="badge-view"
							:style="{ 'background': themeStore.theme.selectItem.badgeBgColor }">
							<view>{{ depositStore.isTypeB ? `+${depositStore.onlineDepositType.giftList[index]}` : '' }}
							</view>
						</view>
						<view class="item-content"
							:class="{ 'select': Number(depositStore.onlinePaymentData.depositAmount || 0) === Number(item) }"
							:style="{
								'color': Number(depositStore.onlinePaymentData.depositAmount || 0) === Number(item) ? themeStore.theme.selectItem.selectText : themeStore.theme.selectItem.text,
								'background-color': Number(depositStore.onlinePaymentData.depositAmount || 0) === Number(item) ? themeStore.theme.selectItem.selectBgColor : themeStore.theme.selectItem.bgColor,
							}">
							<view>{{ appStore.currencySign }} {{ $formatThousandDot(item) }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="depositStore.fillOrderSwitch" class="plr30 pb24 ft15">
			{{ $t('deposit.depositService') }}:
		</view>
		<view v-if="depositStore.fillOrderSwitch" class="plr30">
			<SelfServiceUtrItem />
		</view>
		<view class="plr30 ptb24 ft15">
			{{ $t('deposit.depositTips') }}:
		</view>
		<view class="ft10 plr30">
			<view>
				{{ $t('deposit.message.tips1') }}
			</view>
			<view>
				{{ $t('deposit.message.tips2') }}
			</view>
		</view>
		<view class="noraml-bottom-action-container" :style="{ 'background': themeStore.theme.bgColor }"
			@click.stop="handleConfirmClick">
			<view class="normal-theme-btn-radius"
				:style="{ 'background': themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }">
				<view>
					{{ $t('deposit.button.depositNow') }}
				</view>
			</view>
		</view>
		<DepositSuccessPopup ref="depositSuccessPopupRef" />
	</view>
</template>

<script setup>
import { ref } from 'vue'
import MoneyInput from '@/components/input/MoneyInput.vue'
import PaymentMethods from './PaymentMethods.vue'
import PaymentMethodsOld from './PaymentMethodsOld.vue'
import DepositChannel from './DepositChannel.vue'
import SelfServiceUtrItem from './SelfServiceUtrItem.vue'
import { useDepositStore } from '@/store/useDepositStore.js'
import { requestCreateRechargeOrder } from '@/api/deposit'
import Toast from '@/module/toast/toast.js'
import DepositSuccessPopup from './DepositSuccessPopup.vue'
import { useI18n } from 'vue-i18n'
import { useThemeStore } from '@/store/useThemeStore'
import { useAppStore } from '@/store/useAppStore'
import { openUrl } from '@/module/utils/openUrl'

const { t } = useI18n()
const themeStore = useThemeStore()
const depositStore = useDepositStore()
const appStore = useAppStore()

const depositSuccessPopupRef = ref(null)

const handleChannelChange = (channel) => {
	depositStore.onlinePaymentData.depositChannel = channel
}

const handleAmountSelect = (item) => {
	depositStore.onlinePaymentData.depositAmount = item + ''
}

const handleConfirmClick = async () => {
	if (!depositStore.onlinePaymentData.depositAmount) {
		Toast.show(t('deposit.toast.text1'))
		return
	}
	if (Number(depositStore.onlinePaymentData.depositAmount) < depositStore.onlineDepositMin || Number(depositStore.onlinePaymentData.depositAmount) > depositStore.onlineDepositMax) {
		Toast.show(`${t('deposit.toast.text2')} ${depositStore.onlineDepositMin} - ${depositStore.onlineDepositMax}`)
		return
	}
	Toast.showLoading('Loading')
	let params = {}
	if (appStore.phoneNumberPrefix === '+91') {
		params = {
			amount: depositStore.onlinePaymentData.depositAmount,
			channelId: depositStore.onlinePaymentData.depositChannel,
			rechargeType: depositStore.onlinePaymentData.depositMethod === 5 ? 'H' : depositStore.onlineDepositType.rechargeType,
			accountType: depositStore.onlinePaymentData.depositMethod
		}
	} else {
		params = {
			amount: depositStore.onlinePaymentData.depositAmount,
			channelId: depositStore.onlinePaymentData.depositChannel,
			rechargeType: depositStore.onlinePaymentData.depositMethod === 5 ? 'H' : depositStore.onlineDepositType.rechargeType,
			accountType: depositStore.onlinePaymentData.depositMethodName
		}
	}
	const { code, data } = await requestCreateRechargeOrder(params)
	Toast.hideLoading()
	if (code !== 200) { return }
	if (data.url) {
		openUrl(data.url)
		depositSuccessPopupRef.value.show()
	}
}
</script>

<style lang="scss" scoped>
.online-deposit-container {
	padding-bottom: 220rpx;

	.check-radio {
		width: 40rpx;
		height: 40rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
		margin-right: 20rpx;
		border: 1rpx solid #963333;
	}

	.select-item-container {
		position: relative;

		.badge-view {
			position: absolute;
			top: -15rpx;
			right: 15rpx;
			height: 30rpx;
			border-radius: 15rpx;
			background-color: #B80A0A;
			font-size: 18rpx;
			line-height: 30rpx;
			padding: 0rpx 15rpx;
			color: #fff;
		}

		.item-content {
			color: #fff;
			font-size: 28rpx;
			width: 160rpx;
			background-color: #963333;
			border-radius: 35rpx;
			height: 70rpx;
			margin-right: 12rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.item-content.select {
			background-color: #F37E1C;
		}
	}
}
</style>