123

dcc

2024-06-28 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed

 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('我将收到') }}&nbsp;<span style="color:#2C78F8;">{{ fullNum
          }}</span>&nbsp;{{ symbol }}</div>
          <div class="mt-16 font-28">
            {{ $t("我将收到") }}&nbsp;<span style="color: #2c78f8">{{
              fullNum
            }}</span
            >&nbsp;{{ 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('我将收到') }}&nbsp;<span style="color:#2C78F8;">{{ fullNum
          }}</span>&nbsp;{{ symbol }}</div>
          <div class="mt-16 font-28">
            {{ $t("我将收到") }}&nbsp;<span style="color: #2c78f8">{{
              fullNum
            }}</span
            >&nbsp;{{ 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('我将出售') }}&nbsp;<span style="color:#2C78F8;">{{ fullNum
          }}</span>&nbsp;{{ symbol }}</div>
          <div class="mt-16 font-28">
            {{ $t("我将出售") }}&nbsp;<span style="color: #2c78f8">{{
              fullNum
            }}</span
            >&nbsp;{{ 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('我将出售') }}&nbsp;<span style="color:#2C78F8;">{{ fullNum
          }}</span>&nbsp;{{ symbol }}</div>
          <div class="mt-16 font-28">
            {{ $t("我将出售") }}&nbsp;<span style="color: #2c78f8">{{
              fullNum
            }}</span
            >&nbsp;{{ 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 {