first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/placeAnOrder/page/c2cBuy.vue

@@ -1,87 +1,145 @@
<template>
  <div class="c2cBuy w-full h-full">
    <normal-head :title="$t('购买 USDT')" />
    <div class=" w-full px-33 box-border relative" style="background: linear-gradient(180deg, #F4F4F4 0%,#FFFFFF 100%);">
      <div class="flex  pt-34 box-border items-center">
        <span class="text-grey font-26 mr-20">{{ $t('单价') }}</span>
    <div
      class="w-full px-33 box-border relative"
      style="background: linear-gradient(180deg, #f4f4f4 0%, #ffffff 100%)"
    >
      <div class="flex pt-34 box-border items-center">
        <span class="text-grey font-26 mr-20">{{ $t("单价") }}</span>
        <span class="text-green font-26 mr-35">$ 6.68</span>
        <img @click="refresh" class="w-24 h-24" src="~@/assets/image/otc/buy/vector_1.png" alt=""
          style="transition: all ease .5s">
        <span @click="refresh">
          <img
            class="w-24 h-24"
            src="~@/assets/image/otc/buy/vector_1.png"
            alt=""
            style="transition: all ease 0.5s"
          />
        </span>
      </div>
      <div class="flex mt-22 box-border items-center">
        <span class="text-grey font-26 mr-20">{{ $t('限额') }}</span>
        <span class="text-grey font-26 mr-20">{{ $t("限额") }}</span>
        <span class="c2cColor font-26 mr-35">$ 100,000.00 - $ 388,000.11</span>
      </div>
      <div class="buy-item mt-40 w-full mainBackground">
        <div class="buy-item-title flex justify-between font-28 py-34 border-b-1 border-light-grey">
          <div class="flex-1 text-center" :class="{ 'c2cColor': type === 'quantity' }" @click="typeSwitch('amount')">
            {{ $t('按金额购买') }}
        <div
          class="buy-item-title flex justify-between font-28 py-34 border-b-1 border-light-grey"
        >
          <div
            class="flex-1 text-center"
            :class="{ c2cColor: type === 'quantity' }"
            @click="typeSwitch('amount')"
          >
            {{ $t("按金额购买") }}
          </div>
          <div class="flex-1 text-center" :class="{ 'c2cColor': type === 'amount' }" @click="typeSwitch('quantity')">
            {{ $t('按数量购买') }}
          <div
            class="flex-1 text-center"
            :class="{ c2cColor: type === 'amount' }"
            @click="typeSwitch('quantity')"
          >
            {{ $t("按数量购买") }}
          </div>
        </div>
        <div class="px-32 mt-40">
          <div class="w-full mb-40 buy-item-input relative box-border" v-show="type === 'amount'">
          <div
            class="w-full mb-40 buy-item-input relative box-border"
            v-show="type === 'amount'"
          >
            <span class="font-28 absolute left-28 text font-700">$</span>
            <input class="w-full font-36 h-110 border-none box-border pl-72" type="number" :placeholder="$t('请输入金额')"
              :value="amount" @input="changeVal">
            <span class="font-28 absolute right-19 text" style="color: #1A6EBD;">{{ $t('全部') }}</span>
            <input
              class="w-full font-36 h-110 border-none box-border pl-72"
              type="number"
              :placeholder="$t('请输入金额')"
              :value="amount"
              @input="changeVal"
            />
            <span
              class="font-28 absolute right-19 text"
              style="color: #1a6ebd"
              >{{ $t("全部") }}</span
            >
          </div>
          <div class="w-full mb-40 buy-item-input relative box-border" v-show="type === 'quantity'">
            <input class="w-full font-36 h-110 border-none box-border pl-30" type="number" :placeholder="$t('请输入数量')"
              :value="quantity" @input="changeVal">
          <div
            class="w-full mb-40 buy-item-input relative box-border"
            v-show="type === 'quantity'"
          >
            <input
              class="w-full font-36 h-110 border-none box-border pl-30"
              type="number"
              :placeholder="$t('请输入数量')"
              :value="quantity"
              @input="changeVal"
            />
            <span class="font-28 absolute right-19 text">
              <span class="mr-10" style="color:#B8BCC5;">USDT</span>
              <span style="color: #1A6EBD;">{{ $t('全部') }}</span>
              <span class="mr-10" style="color: #b8bcc5">USDT</span>
              <span style="color: #1a6ebd">{{ $t("全部") }}</span>
            </span>
          </div>
          <div class="flex justify-between mb-12">
            <span class="text-grey">{{ $t('数量') }}</span>
            <span class="text-grey">{{ $t("数量") }}</span>
            <span>{{ fullCount }} USDT</span>
          </div>
          <div class="flex justify-between">
            <span class="text-grey">{{ $t('总额') }}</span>
            <span class="text-grey">{{ $t("总额") }}</span>
            <span>{{ fullTotalPrice }} $</span>
          </div>
          <div class="w-full mt-24 pb-30">
            <van-button @click.native="buyClick" class="w-full font-30 buy-button"
              type="primary">{{ $t('购买') }}&nbsp;</van-button>
            <van-button
              @click.native="buyClick"
              class="w-full font-30 buy-button"
              type="primary"
              >{{ $t("购买") }}&nbsp;</van-button
            >
          </div>
        </div>
      </div>
      <div class="p-40 border-bottom-1px">
        <div class="h-80 px-32 mt-40 flex items-center tips" style="background: #EFF7FF;">
          <img class="w-28 h-28 mr-18" src="~@/assets/image/c2c/Group41.png" alt="">
          <p class="font-28 textColor">{{ $t('保护资产安全，请提高防范意识！') }}</p>
        <div
          class="h-80 px-32 mt-40 flex items-center tips"
          style="background: #eff7ff"
        >
          <img
            class="w-28 h-28 mr-18"
            src="~@/assets/image/c2c/Group41.png"
            alt=""
          />
          <p class="font-28 textColor">
            {{ $t("保护资产安全，请提高防范意识！") }}
          </p>
        </div>
        <div class="mt-30">
          <h2 class="font-28 font-400">{{ $t('交易信息') }}</h2>
          <h2 class="font-28 font-400">{{ $t("交易信息") }}</h2>
          <div class="flex justify-between mt-40">
            <span class="text-grey">{{ $t('付款时限') }}</span>
            <span>{{ $t('15分钟') }}</span>
            <span class="text-grey">{{ $t("付款时限") }}</span>
            <span>{{ $t("15分钟") }}</span>
          </div>
          <div class="flex justify-between mt-40">
            <span class="text-grey">{{ $t('卖家昵称') }}</span>
            <span class="text-grey">{{ $t("卖家昵称") }}</span>
            <div>
              <span class="mr-24">{{ $t('北方有佳人') }}</span>
              <span class="mr-24">{{ $t("北方有佳人") }}</span>
              <van-icon class="font-700 text-grey" name="arrow" />
            </div>
          </div>
          <div class="flex justify-between mt-40">
            <span class="text-grey">{{ $t('交易方式') }}</span>
            <span class="text-grey">{{ $t("交易方式") }}</span>
            <div class="flex items-center">
              <span class="mr-20">{{ $t('银行卡') }}</span>
              <div class="w-6 h-28 border-ra" style="background: #E7BB41;"></div>
              <span class="mr-20">{{ $t("银行卡") }}</span>
              <div class="w-6 h-28 border-ra" style="background: #e7bb41"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-36">
        <h2 class="font-28 font-400">{{ $t('交易信息') }}</h2>
        <h2 class="font-28 font-400">{{ $t("交易信息") }}</h2>
        <div class="mt-30 font-26 text-grey">
          <p class="lh-45">{{ $t('请先阅读以下内容:') }}</p>
          <p class="lh-45">{{ $t('银行卡转账切勿备注，不然不给予放币和直接封其账号。付款后 需要提供打款后新的交易明细图（如果P图或者隐藏交易明细上报平台冻结账户）') }}</p>
          <p class="lh-45">{{ $t("请先阅读以下内容:") }}</p>
          <p class="lh-45">
            {{
              $t(
                "银行卡转账切勿备注，不然不给予放币和直接封其账号。付款后 需要提供打款后新的交易明细图（如果P图或者隐藏交易明细上报平台冻结账户）"
              )
            }}
          </p>
        </div>
      </div>
    </div>
@@ -91,7 +149,17 @@
<script>
import { formatTime } from "@/utils/utis";
import NormalHead from "@/components/normal-head";
import { Button, Cell, DropdownItem, DropdownMenu, Field, Icon, Popup, Switch, Toast } from "vant";
import {
  Button,
  Cell,
  DropdownItem,
  DropdownMenu,
  Field,
  Icon,
  Popup,
  Switch,
  Toast,
} from "vant";
import otcCircle from "@/components/otcCircle";
import {
  SET_COUNT,
@@ -99,7 +167,7 @@
  SET_ORDER_NUMBER,
  SET_CREATE_ORDER_TIME,
} from "@/store/const.store";
import otcApi from '@/API/otc';
import otcApi from "@/API/otc";

export default {
  name: "c2cBuy",
@@ -107,67 +175,67 @@
  data() {
    return {
      num: 0, // 刷新按钮点击
      type: 'amount', // 按金额/数量购买
      amount: '',
      quantity: '',
    }
      type: "amount", // 按金额/数量购买
      amount: "",
      quantity: "",
    };
  },
  methods: {
    // 刷新点击
    refresh(e) {
      this.num++;
      e.target.style.transform = `rotateZ(-${this.num * 360}deg)`
      e.target.style.transform = `rotateZ(-${this.num * 360}deg)`;
    },
    // 切换类型
    typeSwitch(type) {
      this.type = type;
      this.amount = '';
      this.quantity = '';
      this.amount = "";
      this.quantity = "";
    },
    changeVal(e) {
      e.target.value = e.target.value.replace('-', '');
      e.target.value = e.target.value.replace("-", "");
      this[this.type] = e.target.value;
    },
    // 购买
    buyClick() {
      if (this.fullCount !== '-') {
      if (this.fullCount !== "-") {
        this.$router.push({
          name: 'orderGeneration',
        })
          name: "orderGeneration",
        });

        this.$store.commit(`c2cBuy/${SET_COUNT}`, {
          count: this.fullCount,
        })
        });

        this.$store.commit(`c2cBuy/${SET_TOTAL_PRICE}`, {
          price: this.fullTotalPrice,
        })
        });

        this.$store.commit(`c2cBuy/${SET_ORDER_NUMBER}`, {
          orderNumber: new Date().getTime(),
        })
        });

        this.$store.commit(`c2cBuy/${SET_CREATE_ORDER_TIME}`, {
          createOrderTime: formatTime(new Date(), 'yyyy-MM-dd hh:mm:ss'),
        })
          createOrderTime: formatTime(new Date(), "yyyy-MM-dd hh:mm:ss"),
        });
      }
    }
    },
  },
  computed: {
    fullCount() {// 数量
      if (this.fullTotalPrice === '-') return '-'
      return Math.ceil(parseInt(this.fullTotalPrice) / 6.68)
    fullCount() {
      // 数量
      if (this.fullTotalPrice === "-") return "-";
      return Math.ceil(parseInt(this.fullTotalPrice) / 6.68);
    },
    fullTotalPrice() {
      if (this.type === 'amount') {
        if (this.amount === '') return '-'
        return this.amount
      if (this.type === "amount") {
        if (this.amount === "") return "-";
        return this.amount;
      } else {
        if (this.quantity === '') return '-'
        if (this.quantity === "") return "-";
        return (this.quantity * 6.68).toFixed(2);
      }

    }
    },
  },
  components: {
    otcCircle,
@@ -181,7 +249,7 @@
    [Button.name]: Button,
    NormalHead,
  },
}
};
</script>

<style lang="scss" scoped>
@@ -194,14 +262,13 @@

  .van-button {
    border-radius: 10px;
    background: #2EBD85;
    background: #2ebd85;
  }
}

.buy-item {

  border-radius: 25px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .2);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.border-ra {
@@ -212,7 +279,7 @@
  position: relative;

  &:after {
    @include border-1px('bottom');
    @include border-1px("bottom");
  }
}

@@ -235,10 +302,9 @@
  position: relative;

  &:after {
    @include border-1px('bottom')
    @include border-1px("bottom");
  }
}


.tips {
  border-radius: 8px;