first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 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('参考单价') }}&nbsp;{{ 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("参考单价") }}&nbsp;{{ 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('参考单价') }}&nbsp;{{ 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("参考单价") }}&nbsp;{{ 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('参考单价') }}&nbsp;{{ 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("参考单价") }}&nbsp;{{ 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('参考单价') }}&nbsp;{{ 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("参考单价") }}&nbsp;{{ 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;
  }
}