first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 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 {