first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/c2cOrder/payment/PaymentBuy.vue

@@ -1,10 +1,13 @@
<template>
  <div id="full">
    <order-nav />
    <div class="mt-10  text-center mainBackground c2cColor">
    <div class="mt-10 text-center mainBackground c2cColor">
      <div>
        <h1 class="font-700 font-40">{{ $t("请向卖家付款") }}</h1>
        <div v-if="time" class="flex justify-center items-center mt-18 font-30 font-700">
        <div
          v-if="time"
          class="flex justify-center items-center mt-18 font-30 font-700"
        >
          <span>{{ $t("订单将在倒计时结束时取消。") }}&nbsp;</span>
          <van-count-down class="flex font-700" :time="time">
            <template #default="timeData">
@@ -20,21 +23,35 @@
        </div>
        <div class="flex justify-center items-end mt-42 font-64 font-700">
          <div>
            <span class="relative bottom-5 font-48">{{
              currencySymbol
            }}</span>
            <span class="relative bottom-5 font-48">{{ currencySymbol }}</span>
            <span>{{
              (orderInfo.amount && (orderInfo.amount / 1).toFixed(2)) || "--"
            }}</span>
          </div>
          <img class="relative bottom-10 left-25 w-30 h-33" src="~@/assets/image/c2c/Group1168.png" alt=""
            @click="copy((orderInfo.amount && (orderInfo.amount / 1).toFixed(2)) || '--')" />
          <span
            @click="
              copy(
                (orderInfo.amount && (orderInfo.amount / 1).toFixed(2)) || '--'
              )
            "
          >
            <img
              class="relative bottom-10 left-25 w-30 h-33"
              src="~@/assets/image/c2c/Group1168.png"
              alt=""
            />
          </span>
        </div>
        <div class="flex justify-center items-center mt-44" @click="$router.push({ path: '/chat' })">
          <img class="w-36 h-34 mr-22" src="~@/assets/image/c2c/Vector.png" alt="" />
          <span class="font-32">{{
            $t("联系卖家")
          }}</span>
        <div
          class="flex justify-center items-center mt-44"
          @click="$router.push({ path: '/chat' })"
        >
          <img
            class="w-36 h-34 mr-22"
            src="~@/assets/image/c2c/Vector.png"
            alt=""
          />
          <span class="font-32">{{ $t("联系卖家") }}</span>
        </div>
      </div>
    </div>
@@ -42,12 +59,14 @@
      <div class="ml-50 pl-38 pr-32 msg relative c2cColor">
        <div
          class="circle absolute top-0 left-0 z-10 w-45 h-45 flex justify-center items-center btnMain text-white font-26"
          style="border-radius: 50%">
          style="border-radius: 50%"
        >
          1
        </div>
        <div
          class="circle absolute bottom-28 left-0 z-10 w-45 h-45 flex justify-center items-center btnMain text-white font-26"
          style="border-radius: 50%">
          style="border-radius: 50%"
        >
          2
        </div>
        <div class="font-28">
@@ -57,18 +76,33 @@
            )
          }}
        </div>
        <div class="mt-50 pt-32 px-22 pb-38 tabBackground rounded-2xl msg-wrapper c2cColor">
        <div
          class="mt-50 pt-32 px-22 pb-38 tabBackground rounded-2xl msg-wrapper c2cColor"
        >
          <div class="flex items-center">
            <div class="w-6 h-28 rounded-xl mr-20" style="background: #e7bb41"></div>
            <div
              class="w-6 h-28 rounded-xl mr-20"
              style="background: #e7bb41"
            ></div>
            <span class="ml-8 font-30 c2cColor">{{ detail.methodName }}</span>
          </div>
          <van-cell-group>
            <van-cell class="order-number" :title="item.name" v-for="item in params" :key="item.id">
            <van-cell
              class="order-number"
              :title="item.name"
              v-for="item in params"
              :key="item.id"
            >
              <template #default>
                <div class="flex justify-end c2cColor">
                  <span class="mr-14">{{ item.value }}</span>
                  <img class="relative top-8 w-25 h-29" src="~@/assets/image/c2c/Group1168.png" alt=""
                    @click="copy(item.value)" />
                  <span @click="copy(item.value)">
                    <img
                      class="relative top-8 w-25 h-29"
                      src="~@/assets/image/c2c/Group1168.png"
                      alt=""
                    />
                  </span>
                </div>
              </template>
            </van-cell>
@@ -104,10 +138,19 @@
      </div>
    </div>
    <div class="mt-92 px-40 flex font-30">
      <van-button class="w-244 h-80 mr-16 rounded-2xl text-black bg-grey border-none" type="primary"
        @click="show = true">{{ $t("遇到问题？") }}</van-button>
      <van-button class="flex-1 h-80 rounded-2xl btnMain text-white border-none" type="primary" @click="onPayed">
        {{ $t("我已付款，通知卖家") }}</van-button>
      <van-button
        class="w-244 h-80 mr-16 rounded-2xl text-black bg-grey border-none"
        type="primary"
        @click="show = true"
        >{{ $t("遇到问题？") }}</van-button
      >
      <van-button
        class="flex-1 h-80 rounded-2xl btnMain text-white border-none"
        type="primary"
        @click="onPayed"
      >
        {{ $t("我已付款，通知卖家") }}</van-button
      >
    </div>
    <!--  遇到问题  -->
    <div>
@@ -141,33 +184,39 @@
  async created() {
    const advId = this.$store.state.c2c.adv_id;
    const order_no = this.$store.state.c2c.order_no;
    let res = await otcApi.ctcOrderGetDetail({ order_no, language: this.$i18n.locale });
    let res = await otcApi.ctcOrderGetDetail({
      order_no,
      language: this.$i18n.locale,
    });
    this.orderInfo = res.data;
    this.time = this.orderInfo.autoCancelTimeRemain * 1000;
    const methodType = this.orderInfo.methodType; // 支付方式
    this.interval = setInterval(() => {
      this.time -= 1000;
    }, 1000);
    otcApi.ctcPaymentMethodPayList({ id: advId, language: this.$i18n.locale }).then((res) => {
      // 获取支付方式
      const payMethod = res.data.find(
        (item) => item.methodType === methodType / 1
      );
      if (payMethod) {
        this.detail = payMethod;
        console.log(this.detail);
        this.params = [{ id: 0, name: this.$t('姓名'), value: this.detail.realName }];
        for (let i = 1; i < 16; i++) {
          this.params.push({
            id: i,
            name: this.detail["paramName" + i],
            value: this.detail["paramValue" + i],
          });
    otcApi
      .ctcPaymentMethodPayList({ id: advId, language: this.$i18n.locale })
      .then((res) => {
        // 获取支付方式
        const payMethod = res.data.find(
          (item) => item.methodType === methodType / 1
        );
        if (payMethod) {
          this.detail = payMethod;
          console.log(this.detail);
          this.params = [
            { id: 0, name: this.$t("姓名"), value: this.detail.realName },
          ];
          for (let i = 1; i < 16; i++) {
            this.params.push({
              id: i,
              name: this.detail["paramName" + i],
              value: this.detail["paramValue" + i],
            });
          }
          this.params = this.params.filter((item) => item.name && item.value);
        }
        this.params = this.params.filter((item) => item.name && item.value);
      }
    });

      });
  },
  methods: {
    back() {
@@ -180,13 +229,13 @@
    copy(text) {
      // 复制
      this.$copyText(text).then(() => {
        this.$toast(this.$t('复制成功'));
        this.$toast(this.$t("复制成功"));
      });
    },
  },
  computed: {
    ...mapState("c2cBuy", ["totalPrice"]),
    ...mapGetters('c2c', ['currencySymbol'])
    ...mapGetters("c2c", ["currencySymbol"]),
  },
  components: {
    [CountDown.name]: CountDown,