From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/quick/index.vue | 487 ++++++++++++++++++++++++++++++++++-------------------
1 files changed, 313 insertions(+), 174 deletions(-)
diff --git a/src/page/quick/index.vue b/src/page/quick/index.vue
index badd7bc..24dee92 100644
--- a/src/page/quick/index.vue
+++ b/src/page/quick/index.vue
@@ -1,57 +1,108 @@
<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">
+ <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>
+ <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('选择交易区')
+ $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>
+ <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
+ 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'
- })">
+ <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="" />
+ <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]">
+ <van-popover
+ get-container="#quick"
+ v-model="showPopover"
+ :actions="actions"
+ @select="onSelect"
+ placement="bottom-end"
+ theme="dark"
+ :offset="[20, 20]"
+ >
<template #reference>
- <img @click="showPopover = !showPopover" class="relative bottom-4 w-24 h-6 list-img"
- :src="require('@/assets/image/otc/wantBuyHead/Group2.png')" alt="" />
+ <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 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
+ 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)">
+ <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>
@@ -61,100 +112,190 @@
<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 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 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>
+ <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;">
+ <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 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
+ 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>
+ <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;">
+ <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 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 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
+ 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 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
+ 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" />
+ <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>
@@ -162,13 +303,7 @@
<script>
import otcApi from "@/API/otc";
-import {
- Icon,
- Popup,
- Popover,
- Button,
- Toast,
-} from "vant";
+import { Icon, Popup, Popover, Button, Toast } from "vant";
import EnterTrade from "@/page/quick/EnterTrade";
import { mapGetters } from "vuex";
@@ -176,33 +311,33 @@
name: "index",
data() {
return {
- referPrice: '--',
+ referPrice: "--",
paymentMethod: [],
- order_type: 'Amount',
+ order_type: "Amount",
enterTrade: false,
isBuy: true, // 模式
- activeCurrency: 'USDT',
+ activeCurrency: "USDT",
show: false,
showPopover: false,
currency: [
{
- title: 'USDT',
- label: this.$t('计价币种')
+ title: "USDT",
+ label: this.$t("计价币种"),
},
{
- title: 'BTC',
- label: this.$t('最知名币种')
+ title: "BTC",
+ label: this.$t("最知名币种"),
},
{
- title: 'ETH',
- 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("收款方式"),
+ icon: require("@/assets/image/otc/buy/collection_icon.png"),
+ path: "/paymentMethod",
},
// {
// text: this.$t('c2c帮助中心'),
@@ -219,119 +354,124 @@
// icon: require('@/assets/image/otc/buy/order_icon.png'),
// },
],
- session_token: '',
+ session_token: "",
- buyAmount: '',
- buyNum: '',
- sellAmount: '',
- sellNum: '',
+ buyAmount: "",
+ buyNum: "",
+ sellAmount: "",
+ sellNum: "",
info: {},
all_price: {},
- isPay: false
- }
+ 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
+ .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 => {
+ otcApi.ctcPaymentMethodList({ language: this.$i18n.locale }).then((res) => {
if (res.data.length) {
- this.isPay = true
+ this.isPay = true;
} else {
- this.isPay = false
+ this.isPay = false;
}
- })
-
+ });
},
methods: {
changeOrderType(order_type) {
- this.buyAmount = ''
- this.buyNum = ''
- this.sellAmount = ''
- this.sellNum = ''
- this.order_type = 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]
+ 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()]
+ 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;
- })
+ otcApi
+ .getSessionToken({
+ currency: this.exchangeCurrency,
+ })
+ .then((res) => {
+ this.session_token = res.data.session_token;
+ });
},
showPopup() {
- this.show = true
+ this.show = true;
},
onSelect(action) {
-
- if (action.text == this.$t('接单模式')) {
- this.showJie = true
- return
+ if (action.text == this.$t("接单模式")) {
+ this.showJie = true;
+ return;
}
this.$router.push({
path: action.path,
- })
+ });
},
handleClick() {
- const type = this.isBuy ? 'buy' : 'sell';
+ 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)
+ const text =
+ this.order_type === "Amount" ? this.$t("金额") : this.$t("数量");
+ Toast(this.$t("请输入") + text);
} else {
if (this.isPay) {
- this.getPriceList(type)
+ this.getPriceList(type);
} else {
- this.$toast(this.$t('请添加收款方式'))
+ this.$toast(this.$t("请添加收款方式"));
setTimeout(() => {
- this.$router.push('/paymentMethod')
+ this.$router.push("/paymentMethod");
}, 500);
}
}
- }
+ },
},
computed: {
- ...mapGetters("c2c", ["exchangeCurrency", 'currencySymbol']),
+ ...mapGetters("c2c", ["exchangeCurrency", "currencySymbol"]),
fullType() {
- return this.isBuy ? 'buy' : 'sell'
- }
+ return this.isBuy ? "buy" : "sell";
+ },
},
components: {
[Icon.name]: Icon,
@@ -339,8 +479,8 @@
[Popover.name]: Popover,
[Button.name]: Button,
EnterTrade,
- }
-}
+ },
+};
</script>
<style lang="scss" scoped>
@@ -349,7 +489,7 @@
}
.type {
- color: #B8BCC5;
+ color: #b8bcc5;
.active {
@include themify() {
@@ -361,11 +501,11 @@
.currency {
.active {
p {
- color: #1A6EBD !important;
+ color: #1a6ebd !important;
}
}
- &>div {
+ & > div {
padding: 10px 50px;
margin-right: 30px;
border-radius: 12px;
@@ -373,7 +513,6 @@
@include themify() {
background: themed("tab_background");
}
-
&:last-child {
margin: 0;
@@ -383,11 +522,11 @@
p:first-child {
margin-bottom: 8px;
font-weight: 500;
- color: #595C61;
+ color: #595c61;
}
p:last-child {
- color: #868C9A;
+ color: #868c9a;
}
}
--
Gitblit v1.9.3