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/placeAnOrder/components/buy/buy.vue | 339 +++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 223 insertions(+), 116 deletions(-)
diff --git a/src/page/placeAnOrder/components/buy/buy.vue b/src/page/placeAnOrder/components/buy/buy.vue
index 470de43..bb3fa0f 100644
--- a/src/page/placeAnOrder/components/buy/buy.vue
+++ b/src/page/placeAnOrder/components/buy/buy.vue
@@ -1,17 +1,33 @@
<template>
- <div style="overflow: hidden" class="c2cTabBackground absolute left-0 right-0 bottom-0 top-122 box-ra flex flex-col"
- :class="fullBottom">
+ <div
+ style="overflow: hidden"
+ class="c2cTabBackground absolute left-0 right-0 bottom-0 top-122 box-ra flex flex-col"
+ :class="fullBottom"
+ >
<div class="flex justify-between mt-46 mb-40 items-center">
<div class="flex ml-32 text-grey">
- <div class="font-400 font-36 mr-89 " @click="switchDirection('buy')" :class="{ 'textColor': buyTab === 'buy' }">
- {{ $t('我要买') }}
+ <div
+ class="font-400 font-36 mr-89"
+ @click="switchDirection('buy')"
+ :class="{ textColor: buyTab === 'buy' }"
+ >
+ {{ $t("我要买") }}
</div>
- <div class="font-400 font-36 " @click="switchDirection('sell')" :class="{ 'textColor': buyTab === 'sell' }">
- {{ $t('我要卖') }}
+ <div
+ class="font-400 font-36"
+ @click="switchDirection('sell')"
+ :class="{ textColor: buyTab === 'sell' }"
+ >
+ {{ $t("我要卖") }}
</div>
</div>
- <img @click="$router.push({ path: '/wantBuy/c2cOrderList' })" class="w-22 h-30 mr-55"
- src="@/assets/image/otc/buy/subtract.png" alt="">
+ <span @click="$router.push({ path: '/wantBuy/c2cOrderList' })">
+ <img
+ class="w-22 h-30 mr-55"
+ src="@/assets/image/otc/buy/subtract.png"
+ alt=""
+ />
+ </span>
</div>
<!-- <div class="flex"> -->
<!-- <div class="flex flex-col mr-80 ml-32" @click="tab = 0" :class="{'text-blue': tab === 0}" v-for="(item, index) in symbol" :key="index">
@@ -30,11 +46,24 @@
<!-- <van-tabs v-model="tab" @change="onchange">-->
<!-- <van-tab :title="item" v-for="(item, index) in symbol" :key="index"></van-tab>-->
<!-- </van-tabs>-->
- <div class="tabs flex px-32 items-center" style="overflow-x: auto;touch-action: auto;">
- <div :class="{ 'active': tab === index }" @click="onchange(index)" style="flex-shrink: inherit;touch-action: auto;"
- v-for="(item, index) in symbol" :key="index" class="mr-80 item flex flex-col items-center textColor1">
+ <div
+ class="tabs flex px-32 items-center"
+ style="overflow-x: auto; touch-action: auto"
+ >
+ <div
+ :class="{ active: tab === index }"
+ @click="onchange(index)"
+ style="flex-shrink: inherit; touch-action: auto"
+ v-for="(item, index) in symbol"
+ :key="index"
+ class="mr-80 item flex flex-col items-center textColor1"
+ >
<span class="font-26">{{ item }}</span>
- <div v-if="tab === index" class="w-48 h-4 mt-20" style="background: var(--theme-color)"></div>
+ <div
+ v-if="tab === index"
+ class="w-48 h-4 mt-20"
+ style="background: var(--theme-color)"
+ ></div>
<div v-else class="w-48 h-4 mt-20"></div>
</div>
</div>
@@ -48,22 +77,39 @@
{{ exchangeCurrency }}
</template>
</van-field>
- <div class="flex flex-wrap justify-between px-20 box-border mb-62 mt-12">
- <div class="font-400 font-28 w-248 h-72 mb-12 rounded-md tabBackground c2cColor text-center lh-72 mr-12"
- :class="{ 'active_trade': index === numListActive }" v-for="(item, index) in numList"
- :key="'num' + index" @click="onQuickAmount(item, index)">
+ <div
+ class="flex flex-wrap justify-between px-20 box-border mb-62 mt-12"
+ >
+ <div
+ class="font-400 font-28 w-248 h-72 mb-12 rounded-md tabBackground c2cColor text-center lh-72 mr-12"
+ :class="{ active_trade: index === numListActive }"
+ v-for="(item, index) in numList"
+ :key="'num' + index"
+ @click="onQuickAmount(item, index)"
+ >
{{ item.num }}
</div>
</div>
- <div class="flex mb-36 justify-center ">
- <button class="w-370 h-82 tabBackground c2cColor rounded-lg font-400 font-30 border-none mr-21"
- :class="[{ 'bg-blue': tabindex === 0 }, { 'text-white': tabindex === 0 }]" @click="onResetMoney">{{
- $t('重置')
- }}
+ <div class="flex mb-36 justify-center">
+ <button
+ class="w-370 h-82 tabBackground c2cColor rounded-lg font-400 font-30 border-none mr-21"
+ :class="[
+ { 'bg-blue': tabindex === 0 },
+ { 'text-white': tabindex === 0 },
+ ]"
+ @click="onResetMoney"
+ >
+ {{ $t("重置") }}
</button>
- <button class="w-370 h-82 btnMain c2cColor rounded-lg font-400 font-30 border-none"
- :class="[{ 'bg-blue': tabindex === 1 }, { 'text-white': tabindex === 1 }]" @click="onConfirmMoney">
- {{ $t('确认') }}
+ <button
+ class="w-370 h-82 btnMain c2cColor rounded-lg font-400 font-30 border-none"
+ :class="[
+ { 'bg-blue': tabindex === 1 },
+ { 'text-white': tabindex === 1 },
+ ]"
+ @click="onConfirmMoney"
+ >
+ {{ $t("确认") }}
</button>
</div>
</van-dropdown-item>
@@ -73,39 +119,56 @@
<van-dropdown-menu active-color="#1989fa">
<van-dropdown-item :title="$t('交易方式')" ref="payTypeItem">
<div class="flex mb-72 justify-center mt-44 flex-wrap">
- <button v-show="showTab !== 0"
+ <button
+ v-show="showTab !== 0"
class="w-232 h-82 tabBackground c2cColor rounded-lg font-400 font-28 border-none mr-32"
- @click="onAllType">
- {{ $t('全部') }}
+ @click="onAllType"
+ >
+ {{ $t("全部") }}
</button>
- <div class="relative" v-show="showTab === 0" @click="showTab = 2">
- <button class=" w-232 h-82 tabBackground c2cColor rounded-lg font-400 font-28 border-none mr-32">{{
- $t('全部')
- }}
+ <div
+ class="relative"
+ v-show="showTab === 0"
+ @click="showTab = 2"
+ >
+ <button
+ class="w-232 h-82 tabBackground c2cColor rounded-lg font-400 font-28 border-none mr-32"
+ >
+ {{ $t("全部") }}
</button>
- <img class="absolute top-0 right-0 w-232 h-82 mr-32"
- src="../../../../assets/image/otc/wantBuyHead/trade_bg.png" alt="">
+ <img
+ class="absolute top-0 right-0 w-232 h-82 mr-32"
+ src="../../../../assets/image/otc/wantBuyHead/trade_bg.png"
+ alt=""
+ />
</div>
- <button class="w-232 minh-82 tabBackground c2cColor rounded-lg font-400 font-24 border-none mr-32 mb-20"
- :class="{ 'active_trade': showTab == index + 1 }" @click="onShowTab(index)"
- v-for="(item, index) in payMethods" :key="index">{{ item }}
+ <button
+ class="w-232 minh-82 tabBackground c2cColor rounded-lg font-400 font-24 border-none mr-32 mb-20"
+ :class="{ active_trade: showTab == index + 1 }"
+ @click="onShowTab(index)"
+ v-for="(item, index) in payMethods"
+ :key="index"
+ >
+ {{ item }}
</button>
<!-- <button class="w-232 h-82 bg-grey rounded-lg font-400 font-28 border-none "
:class="{'active_trade' : showTab === 2} " @click="showTab = 2">币收款
</button> -->
</div>
- <div class="font-22 text-center mb-30 text-grey">{{ $t('仅展示可用的交易方式') }}</div>
+ <div class="font-22 text-center mb-30 text-grey">
+ {{ $t("仅展示可用的交易方式") }}
+ </div>
</van-dropdown-item>
</van-dropdown-menu>
</div>
</div>
<div class="flex mr-32 items-center" @click="selectClick">
- <div class="mr-10 font-24 font-400 textColor">{{ $t('筛选') }}</div>
- <img class="w-18 h-21" src="@/assets/image/otc/buy/Vector.png" alt="">
+ <div class="mr-10 font-24 font-400 textColor">{{ $t("筛选") }}</div>
+ <img class="w-18 h-21" src="@/assets/image/otc/buy/Vector.png" alt="" />
</div>
</div>
<div class="flex justify-center mb-52">
- <div class="w-full h-2 diviLine mt-28 box-border mx-32 "></div>
+ <div class="w-full h-2 diviLine mt-28 box-border mx-32"></div>
</div>
<!-- loading / empty -->
<!-- <div class="flex justify-center" :class="{'pt-100': !buyList.length}">-->
@@ -117,27 +180,48 @@
</div>
<van-popup class="w-600 rounded-xl" v-model="showRemoved">
- <div class="flex flex-col items-center pt-46 pb-40 px-34 bg-white">
- <img class="w-76 h-76" src="~@/assets/image/c2c/Group41-3.png" alt="">
+ <div class="flex flex-col items-center pt-46 pb-40 px-34 bg-white">
+ <img class="w-76 h-76" src="~@/assets/image/c2c/Group41-3.png" alt="" />
<div>
- <p class="mt-36 mb-50 font-28">{{ $t('该广告已下架。请选择其他广告。') }}</p>
- <van-button @click.native="showRemoved = false" class="w-full h-80 rounded-lg bg-blue" type="info">
- {{ $t('确认') }}
+ <p class="mt-36 mb-50 font-28">
+ {{ $t("该广告已下架。请选择其他广告。") }}
+ </p>
+ <van-button
+ @click.native="showRemoved = false"
+ class="w-full h-80 rounded-lg bg-blue"
+ type="info"
+ >
+ {{ $t("确认") }}
</van-button>
</div>
</div>
</van-popup>
<!--筛选-->
- <van-popup class="w-full popHeight" round v-model="showSelect" position="bottom">
+ <van-popup
+ class="w-full popHeight"
+ round
+ v-model="showSelect"
+ position="bottom"
+ >
<ad-screening @back="handlerBack" @confirm="confirm" />
</van-popup>
</div>
</template>
<script>
-import { Cell, Icon, Popup, DropdownMenu, DropdownItem, Field, Button, Tabs, Tab } from 'vant';
+import {
+ Cell,
+ Icon,
+ Popup,
+ DropdownMenu,
+ DropdownItem,
+ Field,
+ Button,
+ Tabs,
+ Tab,
+} from "vant";
import adScreening from "@/page/placeAnOrder/page/adScreening";
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
export default {
name: "BuyPage",
@@ -154,39 +238,41 @@
adScreening,
},
props: {
- buyList: { // 承兑商列表
+ buyList: {
+ // 承兑商列表
type: Array,
default() {
- return []
- }
+ return [];
+ },
},
symbol: {
type: Array,
default() {
- return []
- }
+ return [];
+ },
},
loading: {
type: Boolean,
- default: false
+ default: false,
},
finished: {
type: Boolean,
- default: false
+ default: false,
},
isLoading: {
type: Boolean,
- default: false
+ default: false,
},
},
created() {
// 设置选中tab
- const index = this.symbol.findIndex(item => item === this.$store.state.c2c.symbol)
+ const index = this.symbol.findIndex(
+ (item) => item === this.$store.state.c2c.symbol
+ );
// this.tab = index
- this.tab = 0
+ this.tab = 0;
// direction
- this.buyTab = this.$store.state.c2c.direction
-
+ this.buyTab = this.$store.state.c2c.direction;
},
data() {
return {
@@ -244,55 +330,74 @@
// },
// ],
value: 0,
- value1: '',
+ value1: "",
switch1: false,
switch2: false,
numListActive: -1,
numList: [
{
- num: '100',
- value: '100'
- }, {
- num: '1000',
- value: '1000'
- }, {
- num: '5000',
- value: '5000'
- }, {
- num: this.$i18n.locale === 'CN' || this.$i18n.locale === 'zh-CN' ? '1万' : '10k',
- value: '10000'
- }, {
- num: this.$i18n.locale === 'CN' || this.$i18n.locale === 'zh-CN' ? '10万' : '100k',
- value: '100000'
- }, {
- num: this.$i18n.locale === 'CN' || this.$i18n.locale === 'zh-CN' ? '20万' : '200k',
- value: '200000'
- }
- ]
- }
+ num: "100",
+ value: "100",
+ },
+ {
+ num: "1000",
+ value: "1000",
+ },
+ {
+ num: "5000",
+ value: "5000",
+ },
+ {
+ num:
+ this.$i18n.locale === "CN" || this.$i18n.locale === "zh-CN"
+ ? "1万"
+ : "10k",
+ value: "10000",
+ },
+ {
+ num:
+ this.$i18n.locale === "CN" || this.$i18n.locale === "zh-CN"
+ ? "10万"
+ : "100k",
+ value: "100000",
+ },
+ {
+ num:
+ this.$i18n.locale === "CN" || this.$i18n.locale === "zh-CN"
+ ? "20万"
+ : "200k",
+ value: "200000",
+ },
+ ],
+ };
},
methods: {
- onAllType() { //全部
- this.showTab = 0
- this.$emit('change', { method_type: '' })
- this.$refs.payTypeItem.toggle()
+ onAllType() {
+ //全部
+ this.showTab = 0;
+ this.$emit("change", { method_type: "" });
+ this.$refs.payTypeItem.toggle();
},
- onShowTab(index) { // 选择交易方式
- this.showTab = index + 1
- this.$emit('change', { method_type: index })
- this.$refs.payTypeItem.toggle()
+ onShowTab(index) {
+ // 选择交易方式
+ this.showTab = index + 1;
+ this.$emit("change", { method_type: index });
+ this.$refs.payTypeItem.toggle();
},
- onResetMoney() { // 重置金额
- this.value1 = ''
- this.numListActive = -1
+ onResetMoney() {
+ // 重置金额
+ this.value1 = "";
+ this.numListActive = -1;
},
- onConfirmMoney() { // 确定金额
- this.$emit('change', { amount: this.value1 })
- this.$refs.amountItem.toggle()
+ onConfirmMoney() {
+ // 确定金额
+ this.$emit("change", { amount: this.value1 });
+ this.$refs.amountItem.toggle();
},
- onQuickAmount(item, index) { // 快捷金额
- this.numListActive = index
- this.value1 = item.value
+ onQuickAmount(item, index) {
+ // 快捷金额
+ this.numListActive = index;
+ this.value1 = item.value;
// console.log(item)
},
// 筛选
@@ -305,28 +410,30 @@
},
// 筛选确定
confirm(params) {
- console.log(params)
- this.$emit('confirm', params)
+ console.log(params);
+ this.$emit("confirm", params);
},
- switchDirection(direction) { // 我要买/卖
- this.buyTab = direction
- this.$store.commit('c2c/SET_DIRECTION', direction)
- this.$emit('change', { direction })
+ switchDirection(direction) {
+ // 我要买/卖
+ this.buyTab = direction;
+ this.$store.commit("c2c/SET_DIRECTION", direction);
+ this.$emit("change", { direction });
},
- onchange(index) { // tab改变
- this.tab = index
- this.$store.commit('c2c/SET_SYMBOL', this.symbolList[index])
- this.$emit('change', { symbol: this.symbolList[index] })
- }
+ onchange(index) {
+ // tab改变
+ this.tab = index;
+ this.$store.commit("c2c/SET_SYMBOL", this.symbolList[index]);
+ this.$emit("change", { symbol: this.symbolList[index] });
+ },
},
computed: {
- ...mapGetters('c2c', ['symbolList', 'payMethods', 'exchangeCurrency']),
+ ...mapGetters("c2c", ["symbolList", "payMethods", "exchangeCurrency"]),
fullBottom() {
- return this.$route.path === '/wantBuy' ? 'bottom-0' : 'bottom-160';
- }
- }
-}
+ return this.$route.path === "/wantBuy" ? "bottom-0" : "bottom-160";
+ },
+ },
+};
</script>
<style lang="scss" scoped>
@@ -351,7 +458,7 @@
}
.col {
- color: #E7BB41;
+ color: #e7bb41;
}
.cl {
@@ -364,7 +471,7 @@
.active_all {
background: url("~@/assets/image/otc/wantBuyHead/trade_bg.png");
- border: 2px solid #2C78F8;
+ border: 2px solid #2c78f8;
}
.active_trade {
--
Gitblit v1.9.3