<template>
|
<div class="c2cBuy w-full h-full">
|
<c2c-trade :title="$t('购买') + ' ' + symbol" :detail="detail" @refresh="fetchDetail" @payType="payType = $event"
|
v-if="detail.id">
|
<template #trade>
|
<div class="buy-item mt-40 w-full mainBackground c2cColor">
|
<div class="buy-item-title flex justify-between font-28 py-34 border-b-1 border-light-grey c2cColor">
|
<div class="flex-1 text-center" :class="{ 'text-grey': type === 'num' }" @click="typeSwitch('amount')">
|
{{ $t('按金额购买') }}
|
</div>
|
<div class="flex-1 text-center" :class="{ 'text-grey': type === 'amount' }" @click="typeSwitch('num')">
|
{{ $t('按数量购买') }}
|
</div>
|
</div>
|
<div class="px-32 mt-40">
|
<div class="w-full buy-item-input relative box-border" v-show="type === 'amount'">
|
<span class="font-28 absolute left-28 text font-700 c2cColor">{{ currencySymbol }}</span>
|
<input class="w-full font-36 h-110 border-none box-border pl-96 c2cColor" type="number"
|
:placeholder="$t('请输入金额')" v-model="money" @input="changeVal">
|
<span class="font-28 absolute right-19 text c2cColor" @click="all">{{ $t('全部') }}</span>
|
</div>
|
<div class="w-full buy-item-input relative box-border" v-show="type === 'num'">
|
<input class="w-full font-36 h-110 border-none box-border pl-30 c2cColor" type="number"
|
:placeholder="$t('请输入数量')" v-model="quantity" @input="changeValNum">
|
<span class="font-28 absolute right-19 text">
|
<span class="mr-16" style="color:#B8BCC5;">{{ symbol }}</span>
|
<span class="c2cColor" @click="all">{{ $t('全部') }}</span>
|
</span>
|
</div>
|
<div v-if="tips" class="flex mt-12 text-red font-28">
|
{{ tips }}
|
</div>
|
<div class="flex justify-between mt-40 mb-12 c2cColor">
|
<span class="text-grey">{{ $t('数量') }}</span>
|
<span>{{ totalQuantity }} {{ symbol }}</span>
|
</div>
|
<div class="flex justify-between c2cColor">
|
<span class="text-grey">{{ $t('总额') }}</span>
|
<span>{{ totalMoney }} {{ currencySymbol }}</span>
|
</div>
|
<div class="w-full mt-24 pb-30">
|
<van-button @click.native="buyClick" class="w-full font-30 buy-button" :disabled="loading" type="primary">
|
<span v-if="!loading">{{ $t('购买') }} {{ symbol }}</span>
|
<van-loading v-else type="spinner" />
|
</van-button>
|
</div>
|
</div>
|
</div>
|
</template>
|
<template #desc>
|
<div class="mt-36">
|
<h2 class="font-28 font-400 c2cColor">{{ $t('交易信息') }}</h2>
|
<div class="mt-30 font-26 text-grey">
|
<p class="lh-45">{{ $t('请先阅读以下内容:') }}</p>
|
<p class="lh-45">{{ $t('银行卡转账切勿备注，不然不给予放币和直接封其账号。付款后 需要提供打款后新的交易明细图（如果P图或者隐藏交易明细上报平台冻结账户）') }}</p>
|
</div>
|
</div>
|
</template>
|
</c2c-trade>
|
</div>
|
</template>
|
|
<script>
|
import { formatTime } from "@/utils/utis";
|
import { Button, Cell, DropdownItem, DropdownMenu, Field, Icon, Popup, Switch } from "vant";
|
// import { SET_COUNT, SET_CREATE_ORDER_TIME, SET_ORDER_NUMBER, SET_TOTAL_PRICE, } from "@/store/const.store";
|
import C2cTrade from "@/page/c2c-trade/components/C2cTrade";
|
import otcApi from "@/API/otc";
|
import { mapGetters } from "vuex";
|
export default {
|
name: "c2cBuy",
|
data() {
|
return {
|
type: 'amount', // 按金额/数量购买
|
detail: {},
|
payType: '',
|
tips: '',
|
money: '',
|
quantity: '',
|
totalMoney: '-',
|
totalQuantity: '-',
|
loading: false
|
}
|
},
|
created() {
|
this.fetchDetail()
|
},
|
methods: {
|
fetchDetail() { // 获取详情
|
const id = this.$store.state.c2c.adv_id
|
otcApi.ctcAdvertGetDetail({ id, language: this.$i18n.locale }).then(res => {
|
if (res.data.symbol_value == this.detail.symbol_value) {
|
this.$toast(this.$t('无价格更新'))
|
}
|
this.detail = res.data
|
})
|
},
|
async submitOrder() { // 发起订单
|
this.loading = true
|
const data = await otcApi.getSessionToken({ currency: this.exchangeCurrency })
|
const params = {
|
session_token: data.data.session_token, // session_token
|
c2c_advert_id: this.detail.id,
|
payment_method_id: this.payType,
|
direction: 'buy',
|
order_type: this.type === 'amount' ? 'by_amount' : 'by_num', // 'by_num'
|
amount: this.type === 'amount' ? this.totalMoney / 1 : '', // 金额
|
coin_amount: this.type === 'amount' ? '' : this.totalQuantity / 1 // 数量
|
}
|
otcApi.ctcOrderOpen(params).then(res => {
|
this.loading = false
|
this.$store.commit('c2c/SET_ORDER_NO', res.data.order_no)
|
this.$router.push('/orderGeneration')
|
}).catch(err => {
|
this.loading = false
|
})
|
},
|
// 切换类型
|
typeSwitch(type) {
|
this.type = type;
|
this.tips = ''
|
this.money = ''
|
this.quantity = ''
|
this.totalMoney = '-'
|
this.totalQuantity = '-'
|
},
|
changeVal(e) {
|
// e.target.value = e.target.value.replace('-', ''); 不能输入小数了
|
//this[this.type] = e.target.value;
|
if (this.money == '') {
|
this.tips = ''
|
this.totalMoney = '-'
|
this.totalQuantity = '-'
|
} else {
|
if (this.money * 1 < this.detail.investment_min * 1) {
|
this.tips = this.$t('最小金额') + this.detail.investment_min + ' ' + this.exchangeCurrency
|
this.totalMoney = '-'
|
this.totalQuantity = '-'
|
} else if (this.money * 1 > this.detail.investment_max * 1) {
|
this.tips = this.$t('最大金额') + this.detail.investment_max + ' ' + this.exchangeCurrency
|
this.totalMoney = '-'
|
this.totalQuantity = '-'
|
} else {
|
this.tips = ''
|
this.totalMoney = this.money
|
if (this.symbol !== "USDT") {
|
this.totalQuantity = Math.floor((this.totalMoney / this.detail.symbol_value) * 1000000) / 1000000
|
} else {
|
this.totalQuantity = Math.floor((this.totalMoney / this.detail.symbol_value) * 100) / 100;
|
}
|
}
|
}
|
},
|
changeValNum() {
|
if (this.quantity == '') {
|
this.tips = ''
|
this.totalMoney = '-'
|
this.totalQuantity = '-'
|
} else {
|
let minNum = Math.floor((this.detail.investment_min / this.detail.symbol_value) * 1000000) / 1000000;
|
let maxNum = Math.floor((this.detail.investment_max / this.detail.symbol_value) * 1000000) / 1000000;
|
if (this.quantity * 1 < minNum * 1) {
|
this.tips = this.$t('最小数量') + minNum + ' '
|
this.totalMoney = '-'
|
this.totalQuantity = '-'
|
} else if (this.quantity * 1 > maxNum * 1) {
|
this.tips = this.$t('最大数量') + maxNum + ' '
|
this.totalMoney = '-'
|
this.totalQuantity = '-'
|
} else {
|
this.tips = ''
|
this.totalQuantity = this.quantity
|
if (this.symbol !== "USDT") {
|
this.totalMoney = (this.quantity * this.detail.symbol_value).toFixed(6)
|
} else {
|
this.totalMoney = (this.quantity * this.detail.symbol_value).toFixed(2)
|
}
|
}
|
}
|
},
|
// 购买
|
async buyClick() {
|
if (this.type == 'amount') {
|
if (this.money == '') {
|
this.$toast(this.$t('请输入金额'))
|
} else {
|
this.submitOrder()
|
}
|
} else {
|
console.log(this.quantity)
|
if (this.quantity == '') {
|
this.$toast(this.$t('请输入数量'))
|
} else {
|
this.submitOrder()
|
}
|
}
|
},
|
all() {
|
this.tips = ''
|
this.money = this.detail.investment_max
|
this.totalMoney = this.detail.investment_max
|
if (this.symbol !== "USDT") {
|
this.quantity = Math.floor((this.detail.investment_max / this.detail.symbol_value) * 1000000) / 1000000
|
this.totalQuantity = Math.floor((this.detail.investment_max / this.detail.symbol_value) * 1000000) / 1000000
|
} else {
|
this.quantity = Math.floor((this.detail.investment_max / this.detail.symbol_value) * 100) / 100
|
this.totalQuantity = Math.floor((this.detail.investment_max / this.detail.symbol_value) * 100) / 100
|
}
|
}
|
},
|
computed: {
|
...mapGetters('c2c', ['symbol', "currencySymbol", "exchangeCurrency"]),
|
},
|
components: {
|
[Icon.name]: Icon,
|
[Field.name]: Field,
|
[Popup.name]: Popup,
|
[Cell.name]: Cell,
|
[Switch.name]: Switch,
|
[DropdownMenu.name]: DropdownMenu,
|
[DropdownItem.name]: DropdownItem,
|
[Button.name]: Button,
|
C2cTrade,
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "~@/assets/mixin.scss";
|
|
.c2cBuy {
|
::v-deep .van-button {
|
border-radius: 10px;
|
background: #2EBD85;
|
}
|
}
|
|
|
.buy-item {
|
|
border-radius: 25px;
|
box-shadow: 0 0 8px rgba(0, 0, 0, .2);
|
}
|
|
.border-ra {
|
border-radius: 10px;
|
}
|
|
.buy-item-title {
|
position: relative;
|
|
&:after {
|
@include border-1px('bottom');
|
}
|
}
|
|
.buy-item-input {
|
input {
|
border-radius: 10px;
|
|
@include themify() {
|
background: themed("input_background");
|
}
|
}
|
|
.text {
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
}
|
|
|
|
|
.tips {
|
border-radius: 8px;
|
}
|
</style>
|
