<template>
|
<div id="wantBuy" class="flex flex-col w-full h-full">
|
<div>
|
<div
|
class="w-full h-122 pl-40 pr-31 box-border flex text-white items-center"
|
>
|
<van-icon class="c2cColor" name="arrow-left" @click="$router.back()" />
|
<div class="flex-1 text-right mr-100" @click="showPopup">
|
<span class="font-35 font-700 mr-8 titleColor">{{
|
$t("快捷区")
|
}}</span>
|
<van-icon name="arrow-down" class="c2cColor" />
|
</div>
|
<van-popup round position="top" v-model="show" :closeable="true">
|
<span class="w-232 font-28 c2cColor font-500 ml-32 block mt-20">{{
|
$t("选择交易区")
|
}}</span>
|
<div class="flex justify-around c2cColor mt-40 pb-48">
|
<div class="flex flex-col items-center" @click="show = false">
|
<img
|
class="w-56 h-56"
|
src="@/assets/image/otc/wantBuyHead/fast.png"
|
alt=""
|
/>
|
<span class="font-24 mt-10 h-32 font-500">{{
|
$t("快捷区")
|
}}</span>
|
</div>
|
<div
|
class="flex flex-col items-center"
|
@click="
|
$router.push({
|
path: '/wantBuy',
|
})
|
"
|
>
|
<img
|
class="w-56 h-56"
|
src="@/assets/image/otc/wantBuyHead/optional.png"
|
alt=""
|
/>
|
<span class="font-24 mt-10 font-500">{{ $t("自选区") }}</span>
|
</div>
|
</div>
|
</van-popup>
|
<div
|
class="w-232 h-64 px-23 box-border box-radius textColor flex justify-around items-center tabBackground"
|
>
|
<div
|
class="flex items-center"
|
@click="
|
$router.push({
|
path: '/selectLegalCurrency',
|
})
|
"
|
>
|
<span class="mr-15 font-31 font-400">{{ exchangeCurrency }}</span>
|
<img
|
class="w-24 h-20"
|
:src="require('@/assets/image/otc/wantBuyHead/Group.png')"
|
alt=""
|
/>
|
</div>
|
<span class="w-2 h-36">|</span>
|
<van-popover
|
get-container="#quick"
|
v-model="showPopover"
|
:actions="actions"
|
@select="onSelect"
|
placement="bottom-end"
|
theme="dark"
|
:offset="[20, 20]"
|
>
|
<template #reference>
|
<span @click="showPopover = !showPopover">
|
<img
|
class="relative bottom-4 w-24 h-6 list-img"
|
:src="require('@/assets/image/otc/wantBuyHead/Group2.png')"
|
alt=""
|
/>
|
</span>
|
</template>
|
</van-popover>
|
</div>
|
</div>
|
<div class="px-32 pb-42 type">
|
<div class="flex items-center font-36">
|
<div :class="{ active: isBuy }" @click="isBuy = true">
|
{{ $t("我要买") }}
|
</div>
|
<div
|
class="w-34 h-1 mx-20"
|
style="transform: rotate(90deg); background: #eaebee"
|
></div>
|
<div :class="{ active: !isBuy }" @click="isBuy = false">
|
{{ $t("我要卖") }}
|
</div>
|
</div>
|
<div class="flex mt-40 currency text-center">
|
<div
|
v-for="(item, index) in currency"
|
:key="index"
|
:class="{ active: activeCurrency === item.title }"
|
@click="changeTab(item)"
|
>
|
<p>{{ item.title }}</p>
|
<p>{{ item.label }}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="w-full flex-1 px-32 pt-36 box-border mainBackground">
|
<div class="px-32 py-40 c2cTabBackground item" v-show="isBuy">
|
<div v-show="order_type === 'Amount'">
|
<div class="mb-18 textColor1">{{ $t("购买金额") }}</div>
|
<div
|
class="w-full relative box-border rounded-xl inputBackground1 input"
|
>
|
<span class="font-32 absolute left-22 text font-700 c2cColor">{{
|
currencySymbol
|
}}</span>
|
<input
|
class="w-full font-36 h-110 rounded-xl border-none box-border pl-94 inputBackground1 c2cColor"
|
type="number"
|
:placeholder="$t('最小金额') + 100"
|
v-model="buyAmount"
|
/>
|
</div>
|
<div class="flex justify-between mt-28 font-24">
|
<div class="text-grey">
|
{{ $t("参考单价") }} {{ currencySymbol }}{{ referPrice }}
|
</div>
|
<div
|
class="flex items-center text-blue"
|
@click="changeOrderType('Num')"
|
>
|
<span class="mr-11">{{ $t("按数量购买") }}</span>
|
<img
|
class="w-24 h-24"
|
:src="require('@/assets/image/c2c/Group241.png')"
|
alt=""
|
/>
|
</div>
|
</div>
|
</div>
|
<div v-show="order_type === 'Num'">
|
<div class="flex justify-between mb-18">
|
<span class="textColor1">{{ $t("购买数量") }}</span>
|
</div>
|
<div
|
class="w-full relative box-border rounded-xl inputBackground1 input"
|
>
|
<input
|
class="w-full font-36 h-110 rounded-xl border-none box-border pl-38 inputBackground1 c2cColor"
|
type="number"
|
:placeholder="$t('请输入数量')"
|
v-model="buyNum"
|
/>
|
<span class="font-28 absolute right-19 text" style="color: #1a6ebd">
|
<span class="mr-22 c2cColor">{{ activeCurrency }}</span>
|
</span>
|
</div>
|
<div class="flex justify-between mt-28 font-24">
|
<div class="text-grey">
|
{{ $t("参考单价") }} {{ currencySymbol }}{{ referPrice }}
|
</div>
|
<div
|
class="flex items-center text-blue"
|
@click="changeOrderType('Amount')"
|
>
|
<span class="mr-11">{{ $t("按金额购买") }}</span>
|
<img
|
class="w-24 h-24"
|
:src="require('@/assets/image/c2c/Group241.png')"
|
alt=""
|
/>
|
</div>
|
</div>
|
</div>
|
<div class="mt-76">
|
<van-button
|
class="w-full h-80 font-32 rounded-xl"
|
type="primary"
|
color="#2EBD85"
|
@click="handleClick"
|
>{{ $t("0手续费购买") }}
|
</van-button>
|
</div>
|
</div>
|
<div class="px-32 py-40 c2cTabBackground item" v-show="!isBuy">
|
<div v-show="order_type === 'Num'">
|
<div class="flex justify-between mb-18">
|
<span class="textColor1">{{ $t("出售数量") }}</span>
|
<span
|
class="font-24 text-blue"
|
style="text-decoration: underline"
|
@click="isBuy = !isBuy"
|
>{{ $t("划转") }}</span
|
>
|
</div>
|
<div
|
class="w-full relative box-border rounded-xl inputBackground1 input"
|
>
|
<input
|
class="w-full font-36 h-110 rounded-xl border-none box-border pl-38 inputBackground1 c2cColor"
|
type="number"
|
:placeholder="$t('请输入数量')"
|
v-model="sellNum"
|
/>
|
<span class="font-28 absolute right-19 text" style="color: #1a6ebd">
|
<span class="mr-22 c2cColor">{{ activeCurrency }}</span>
|
</span>
|
</div>
|
<div class="flex justify-between mt-28 font-24">
|
<div class="text-grey">
|
{{ $t("参考单价") }} {{ currencySymbol }}{{ referPrice }}
|
</div>
|
<div
|
class="flex items-center text-blue"
|
@click="order_type = 'Amount'"
|
>
|
<span class="mr-11">{{ $t("按金额出售") }}</span>
|
<img
|
class="w-24 h-24"
|
:src="require('@/assets/image/c2c/Group241.png')"
|
alt=""
|
/>
|
</div>
|
</div>
|
</div>
|
<div v-show="order_type === 'Amount'">
|
<div class="flex justify-between mb-18" style="color: #595c61">
|
<span class="textColor1">{{ $t("出售金额") }}</span>
|
<span
|
class="font-24 text-blue"
|
style="text-decoration: underline"
|
@click="$router.push('/exchange/exchangePage')"
|
>{{ $t("划转") }}</span
|
>
|
</div>
|
<div
|
class="w-full relative box-border rounded-xl inputBackground1 input"
|
>
|
<div
|
class="w-full relative box-border rounded-xl inputBackground1 input"
|
>
|
<span class="font-32 absolute left-22 text font-700 c2cColor">{{
|
currencySymbol
|
}}</span>
|
<input
|
class="w-full font-36 h-110 rounded-xl border-none box-border pl-94 inputBackground1 c2cColor"
|
type="number"
|
:placeholder="$t('最小金额') + 100"
|
v-model="sellAmount"
|
/>
|
</div>
|
</div>
|
<div class="flex justify-between mt-28 font-24">
|
<div class="text-grey">
|
{{ $t("参考单价") }} {{ currencySymbol }}{{ referPrice }}
|
</div>
|
<div
|
class="flex items-center text-blue"
|
@click="order_type = 'Num'"
|
>
|
<span class="mr-11">{{ $t("按数量出售") }}</span>
|
<img
|
class="w-24 h-24"
|
:src="require('@/assets/image/c2c/Group241.png')"
|
alt=""
|
/>
|
</div>
|
</div>
|
</div>
|
<div class="mt-76">
|
<van-button
|
class="w-full h-80 font-32 rounded-xl"
|
type="primary"
|
color="#E35461"
|
@click="handleClick"
|
>{{ $t("0手续费出售") }}
|
</van-button>
|
</div>
|
</div>
|
</div>
|
|
<van-popup v-model="enterTrade" position="bottom">
|
<enter-trade
|
v-if="paymentMethod.length"
|
:type="fullType"
|
:payment-method="paymentMethod"
|
:info="info"
|
:session-token="session_token"
|
:symbol="activeCurrency"
|
:exchangeCurrency="exchangeCurrency"
|
@updataToken="updataToken"
|
@close="enterTrade = false"
|
/>
|
</van-popup>
|
</div>
|
</template>
|
|
<script>
|
import otcApi from "@/API/otc";
|
|
import { Icon, Popup, Popover, Button, Toast } from "vant";
|
|
import EnterTrade from "@/page/quick/EnterTrade";
|
import { mapGetters } from "vuex";
|
export default {
|
name: "index",
|
data() {
|
return {
|
referPrice: "--",
|
paymentMethod: [],
|
order_type: "Amount",
|
enterTrade: false,
|
isBuy: true, // 模式
|
activeCurrency: "USDT",
|
show: false,
|
showPopover: false,
|
currency: [
|
{
|
title: "USDT",
|
label: this.$t("计价币种"),
|
},
|
{
|
title: "BTC",
|
label: this.$t("最知名币种"),
|
},
|
{
|
title: "ETH",
|
label: this.$t("以太坊"),
|
},
|
],
|
actions: [
|
{
|
text: this.$t("收款方式"),
|
icon: require("@/assets/image/otc/buy/collection_icon.png"),
|
path: "/paymentMethod",
|
},
|
// {
|
// text: this.$t('c2c帮助中心'),
|
// icon: require('@/assets/image/otc/buy/help_icon.png'),
|
// path: '/c2cHelpCenter',
|
// },
|
// {
|
// text: 'c2c用户中心',
|
// icon: require('@/assets/image/otc/buy/user_icon.png'),
|
// path: '/c2c/c2cUser',
|
// },
|
// {
|
// text: this.$t('接单模式'),
|
// icon: require('@/assets/image/otc/buy/order_icon.png'),
|
// },
|
],
|
session_token: "",
|
|
buyAmount: "",
|
buyNum: "",
|
sellAmount: "",
|
sellNum: "",
|
info: {},
|
all_price: {},
|
isPay: false,
|
};
|
},
|
created() {
|
otcApi
|
.getSessionToken({
|
currency: this.exchangeCurrency,
|
})
|
.then((res) => {
|
this.session_token = res.data.session_token;
|
console.log(this.activeCurrency.toLowerCase());
|
this.all_price = res.data.all_price;
|
this.referPrice = this.all_price[this.activeCurrency.toLowerCase()];
|
});
|
|
otcApi.ctcPaymentMethodList({ language: this.$i18n.locale }).then((res) => {
|
if (res.data.length) {
|
this.isPay = true;
|
} else {
|
this.isPay = false;
|
}
|
});
|
},
|
methods: {
|
changeOrderType(order_type) {
|
this.buyAmount = "";
|
this.buyNum = "";
|
this.sellAmount = "";
|
this.sellNum = "";
|
this.order_type = order_type;
|
},
|
getPriceList(type) {
|
//获取承兑商支付方式列表
|
otcApi
|
.c2cgetBestPrice({
|
order_type: this.order_type == "Amount" ? "by_amount" : "by_num",
|
amount: this.isBuy ? this.buyAmount : this.sellAmount,
|
coin_amount: this.isBuy ? this.buyNum : this.sellNum,
|
direction: this.isBuy ? "buy" : "sell",
|
currency: this.exchangeCurrency,
|
symbol: this.activeCurrency.toLowerCase(),
|
language: this.$i18n.locale,
|
})
|
.then((data) => {
|
this.paymentMethod = data;
|
if (this.paymentMethod.length == 0) {
|
this.$toast(this.$t("无匹配的承兑商"));
|
return;
|
} else {
|
this.enterTrade = true;
|
this.info = {
|
type: this.order_type,
|
num: this[type + this.order_type],
|
};
|
}
|
});
|
},
|
changeTab(item) {
|
this.buyAmount = "";
|
this.buyNum = "";
|
this.sellAmount = "";
|
this.sellNum = "";
|
this.activeCurrency = item.title;
|
this.referPrice = this.all_price[this.activeCurrency.toLowerCase()];
|
},
|
updataToken() {
|
otcApi
|
.getSessionToken({
|
currency: this.exchangeCurrency,
|
})
|
.then((res) => {
|
this.session_token = res.data.session_token;
|
});
|
},
|
showPopup() {
|
this.show = true;
|
},
|
onSelect(action) {
|
if (action.text == this.$t("接单模式")) {
|
this.showJie = true;
|
return;
|
}
|
|
this.$router.push({
|
path: action.path,
|
});
|
},
|
handleClick() {
|
const type = this.isBuy ? "buy" : "sell";
|
if (!this[type + this.order_type]) {
|
const text =
|
this.order_type === "Amount" ? this.$t("金额") : this.$t("数量");
|
Toast(this.$t("请输入") + text);
|
} else {
|
if (this.isPay) {
|
this.getPriceList(type);
|
} else {
|
this.$toast(this.$t("请添加收款方式"));
|
setTimeout(() => {
|
this.$router.push("/paymentMethod");
|
}, 500);
|
}
|
}
|
},
|
},
|
computed: {
|
...mapGetters("c2c", ["exchangeCurrency", "currencySymbol"]),
|
fullType() {
|
return this.isBuy ? "buy" : "sell";
|
},
|
},
|
components: {
|
[Icon.name]: Icon,
|
[Popup.name]: Popup,
|
[Popover.name]: Popover,
|
[Button.name]: Button,
|
EnterTrade,
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.box-radius {
|
border-radius: 40px;
|
}
|
|
.type {
|
color: #b8bcc5;
|
|
.active {
|
@include themify() {
|
color: themed("c2c_color");
|
}
|
}
|
}
|
|
.currency {
|
.active {
|
p {
|
color: #1a6ebd !important;
|
}
|
}
|
|
& > div {
|
padding: 10px 50px;
|
margin-right: 30px;
|
border-radius: 12px;
|
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
&:last-child {
|
margin: 0;
|
}
|
}
|
|
p:first-child {
|
margin-bottom: 8px;
|
font-weight: 500;
|
color: #595c61;
|
}
|
|
p:last-child {
|
color: #868c9a;
|
}
|
}
|
|
.item {
|
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
|
border-radius: 10px;
|
}
|
|
.input {
|
span {
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
}
|
</style>
|
