From 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Fri, 28 Jun 2024 09:28:04 +0800
Subject: [PATCH] 123
---
src/page/quick/EnterTrade.vue | 196 +++++++++++++++++++++++++++++++-----------------
1 files changed, 126 insertions(+), 70 deletions(-)
diff --git a/src/page/quick/EnterTrade.vue b/src/page/quick/EnterTrade.vue
index 52ffa1a..cc666dc 100644
--- a/src/page/quick/EnterTrade.vue
+++ b/src/page/quick/EnterTrade.vue
@@ -4,69 +4,109 @@
<template #left><i></i></template>
<template #title>
<div class="header-box">
- <span v-if="type === 'buy'" class="font-36 header-title">{{ $t('确认购买') }}</span>
- <span v-else class="font-36 header-title">{{ $t('确认出售') }}</span>
+ <span v-if="type === 'buy'" class="font-36 header-title">{{
+ $t("确认购买")
+ }}</span>
+ <span v-else class="font-36 header-title">{{ $t("确认出售") }}</span>
</div>
</template>
<template #default>
- <van-icon @click="$emit('close')" name="cross" class="font-600" color="#868D9A" />
+ <van-icon
+ @click="$emit('close')"
+ name="cross"
+ class="font-600"
+ color="#868D9A"
+ />
</template>
</order-nav>
<div class="text-center">
<div v-if="type === 'buy'">
<div v-if="info.type === 'Amount'">
<div class="flex items-end justify-center font-700">
- <span class="relative bottom-3 mr-15 font-40">{{ currencySymbol }}</span>
+ <span class="relative bottom-3 mr-15 font-40">{{
+ currencySymbol
+ }}</span>
<span class="font-52">{{ fullTotalPrice }}</span>
</div>
- <div class="mt-16 font-28">{{ $t('我将收到') }} <span style="color:#2C78F8;">{{ fullNum
- }}</span> {{ symbol }}</div>
+ <div class="mt-16 font-28">
+ {{ $t("我将收到") }} <span style="color: #2c78f8">{{
+ fullNum
+ }}</span
+ > {{ symbol }}
+ </div>
</div>
<div v-else>
<div class="flex items-end justify-center font-700">
- <span class="relative bottom-3 mr-15 font-40">{{ currencySymbol }}</span>
+ <span class="relative bottom-3 mr-15 font-40">{{
+ currencySymbol
+ }}</span>
<span class="font-52">{{ fullTotalPrice }}</span>
</div>
- <div class="mt-16 font-28">{{ $t('我将收到') }} <span style="color:#2C78F8;">{{ fullNum
- }}</span> {{ symbol }}</div>
+ <div class="mt-16 font-28">
+ {{ $t("我将收到") }} <span style="color: #2c78f8">{{
+ fullNum
+ }}</span
+ > {{ symbol }}
+ </div>
</div>
</div>
<div v-else>
<div v-if="info.type === 'Amount'">
<div class="flex items-end justify-center font-700">
- <span class="relative bottom-3 mr-15 font-40">{{ currencySymbol }}</span>
+ <span class="relative bottom-3 mr-15 font-40">{{
+ currencySymbol
+ }}</span>
<span class="font-52">{{ fullTotalPrice }}</span>
</div>
- <div class="mt-16 font-28">{{ $t('我将出售') }} <span style="color:#2C78F8;">{{ fullNum
- }}</span> {{ symbol }}</div>
+ <div class="mt-16 font-28">
+ {{ $t("我将出售") }} <span style="color: #2c78f8">{{
+ fullNum
+ }}</span
+ > {{ symbol }}
+ </div>
</div>
<div v-else>
<div class="flex items-end justify-center font-700">
- <span class="relative bottom-3 mr-15 font-40">{{ currencySymbol }}</span>
+ <span class="relative bottom-3 mr-15 font-40">{{
+ currencySymbol
+ }}</span>
<span class="font-52">{{ fullTotalPrice }}</span>
</div>
- <div class="mt-16 font-28">{{ $t('我将出售') }} <span style="color:#2C78F8;">{{ fullNum
- }}</span> {{ symbol }}</div>
+ <div class="mt-16 font-28">
+ {{ $t("我将出售") }} <span style="color: #2c78f8">{{
+ fullNum
+ }}</span
+ > {{ symbol }}
+ </div>
</div>
</div>
</div>
<div class="mt-64">
- <div class="text-grey">{{ $t('选择支付方式') }}</div>
+ <div class="text-grey">{{ $t("选择支付方式") }}</div>
<div class="mt-18">
<div
class="relative flex items-center justify-between mb-19 pl-36 pr-62 py-28 bg-f5 rounded-xl font-28 box-border bank-item"
- :class="{ 'active': active === index }" @click="handleClick(index, item)" v-for="(item, index) in paymentMethod"
- :key="index">
+ :class="{ active: active === index }"
+ @click="handleClick(index, item)"
+ v-for="(item, index) in paymentMethod"
+ :key="index"
+ >
<div class="flex items-center h-30">
<img :src="item.method_img_path" alt="" class="w-40 h-40 mr-20" />
<span>{{ $t(item.method_name) }}</span>
</div>
<div>
<p>{{ currencySymbol }} {{ item.advert_price }}</p>
- <p class="mt-12 font-20" style="color: #1A6EBD" v-if="goodPrice">{{ $t('价格最优') }}</p>
+ <p class="mt-12 font-20" style="color: #1a6ebd" v-if="goodPrice">
+ {{ $t("价格最优") }}
+ </p>
</div>
- <img v-show="active === index" class="absolute right-0 top-0 w-310 h-110"
- :src="require('@/assets/image/c2c/Group317.png')" alt="">
+ <img
+ v-show="active === index"
+ class="absolute right-0 top-0 w-310 h-110"
+ :src="require('@/assets/image/c2c/Group317.png')"
+ alt=""
+ />
</div>
<!-- <div
class="relative flex justify-between pl-36 pr-62 py-28 bg-f5 rounded-xl font-28 box-border bank-item"
@@ -86,105 +126,121 @@
</div>
</div>
<div>
- <van-button v-if="type === 'buy'" class="w-full h-80 mt-56 font-32 rounded-xl" type="primary" color="#2EBD85"
- @click="trade">{{ $t('确认购买') }}
+ <van-button
+ v-if="type === 'buy'"
+ class="w-full h-80 mt-56 font-32 rounded-xl"
+ type="primary"
+ color="#2EBD85"
+ @click="trade"
+ >{{ $t("确认购买") }}
</van-button>
- <van-button v-else class="w-full h-80 mt-56 font-32 rounded-xl" type="primary" color="#E35461" @click="trade">{{
- $t('确认出售') }}
+ <van-button
+ v-else
+ class="w-full h-80 mt-56 font-32 rounded-xl"
+ type="primary"
+ color="#E35461"
+ @click="trade"
+ >{{ $t("确认出售") }}
</van-button>
</div>
</div>
</template>
<script>
-import {
- Icon,
- Button,
-} from "vant";
+import { Icon, Button } from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import otcApi from "@/API/otc";
import { mapGetters } from "vuex";
export default {
name: "EnterTrade",
- props: ['type', 'paymentMethod', 'info', 'sessionToken', 'symbol', 'exchangeCurrency'],
+ props: [
+ "type",
+ "paymentMethod",
+ "info",
+ "sessionToken",
+ "symbol",
+ "exchangeCurrency",
+ ],
data() {
return {
- advert_price: '', // 测试单价
+ advert_price: "", // 测试单价
active: 0,
goodPrice: true,
- advert_id: ''
- }
+ advert_id: "",
+ };
},
watch: {
paymentMethod: {
handler: function (val) {
- this.advert_price = this.paymentMethod[this.active].advert_price
- this.advert_id = this.paymentMethod[this.active].advert_id
+ this.advert_price = this.paymentMethod[this.active].advert_price;
+ this.advert_id = this.paymentMethod[this.active].advert_id;
},
- immediate: true
- }
+ immediate: true,
+ },
},
methods: {
handleClick(num, item) {
this.active = num;
- this.advert_price = item.advert_price
- this.advert_id = item.advert_id
+ this.advert_price = item.advert_price;
+ this.advert_id = item.advert_id;
},
async trade() {
const params = {
session_token: this.sessionToken,
payment_method_id: this.paymentMethod[this.active].payment_method_id,
- order_type: this.info.type === 'Amount' ? 'by_amount' : 'by_num',
+ order_type: this.info.type === "Amount" ? "by_amount" : "by_num",
amount: this.fullTotalPrice,
coin_amount: this.fullNum,
direction: this.type,
currency: this.exchangeCurrency,
symbol: this.symbol.toLowerCase(),
- remark: '',
- c2c_advert_id: this.advert_id
- }
+ remark: "",
+ c2c_advert_id: this.advert_id,
+ };
- otcApi.ctcOrderOpenQuick(params).then(res => {
- this.$store.commit('c2c/SET_ORDER_NO', res.data.order_no)
- if (this.type == 'buy') {
- this.$router.push('/orderGeneration')
- } else {
-
- this.$router.push('/sellGenerate')
- }
- }).catch(err => {
- // if(err.code==1){
- // this.$emit('updataToken',true)
- // }
- })
- }
+ otcApi
+ .ctcOrderOpenQuick(params)
+ .then((res) => {
+ this.$store.commit("c2c/SET_ORDER_NO", res.data.order_no);
+ if (this.type == "buy") {
+ this.$router.push("/orderGeneration");
+ } else {
+ this.$router.push("/sellGenerate");
+ }
+ })
+ .catch((err) => {
+ // if(err.code==1){
+ // this.$emit('updataToken',true)
+ // }
+ });
+ },
},
computed: {
...mapGetters("c2c", ["currencySymbol"]),
fullTotalPrice() {
- if (this.info.type === 'Amount') {
- return this.info.num
+ if (this.info.type === "Amount") {
+ return this.info.num;
} else {
- console.log((this.info.num * 1))
- console.log(this.advert_price)
- return ((this.info.num * 1) * this.advert_price).toFixed(2)
+ console.log(this.info.num * 1);
+ console.log(this.advert_price);
+ return (this.info.num * 1 * this.advert_price).toFixed(2);
}
},
fullNum() {
- if (this.info.type === 'Amount') {
- return ((this.info.num * 1) / this.advert_price).toFixed(4)
+ if (this.info.type === "Amount") {
+ return ((this.info.num * 1) / this.advert_price).toFixed(4);
} else {
- return this.info.num
+ return this.info.num;
}
- }
+ },
},
components: {
[Icon.name]: Icon,
[Button.name]: Button,
OrderNav,
- }
-}
+ },
+};
</script>
<style lang="scss" scoped>
@@ -197,7 +253,7 @@
.bank-item {
border-width: 1px;
border-style: solid;
- border-color: #F5F5F5;
+ border-color: #f5f5f5;
@include themify() {
background: themed("main_background");
@@ -212,7 +268,7 @@
}
.active {
- border-color: #1D91FF !important;
+ border-color: #1d91ff !important;
}
.text-center {
--
Gitblit v1.9.3