123

dcc

2024-06-28 25b2ba1cf86bc3439e7ad2acf2cd4a9ea7e4b0ed

 src/page/c2cOrder/order-generation/orderGeneration.vue

@@ -2,9 +2,9 @@
  <div id="order-generation" class="w-full">
    <order-nav />
    <div class="mt-40 px-32 c2cColor">
      <h1 class="font-48 font-400">{{ $t('订单已生成') }}</h1>
      <h1 class="font-48 font-400">{{ $t("订单已生成") }}</h1>
      <div class="flex items-center mt-16 font-28">
        <span>{{ $t('请在倒计时时间内付款给卖家。') }}</span>
        <span>{{ $t("请在倒计时时间内付款给卖家。") }}</span>
        <van-count-down class="flex font-700 mx-10" :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
@@ -15,34 +15,77 @@
          </template>
        </van-count-down>
      </div>
      <div class="w-full mt-50 pt-46 pl-32 pb-42 box-border border-ra tabBackground">
      <div
        class="w-full mt-50 pt-46 pl-32 pb-42 box-border border-ra tabBackground"
      >
        <div class="flex justify-between">
          <div @click="$router.push(`/advertiserDetail?uid=${orderDetail.c2cUserId}`)" class="flex items-center">
            <img class="w-38 h-38 mr-10" :src="orderDetail.c2cUserHeadImg" alt="">
          <div
            @click="
              $router.push(`/advertiserDetail?uid=${orderDetail.c2cUserId}`)
            "
            class="flex items-center"
          >
            <img
              class="w-38 h-38 mr-10"
              :src="orderDetail.c2cUserHeadImg"
              alt=""
            />
            <h3 class="font-32 font-400">{{ orderDetail.realName }}</h3>
            <img class="w-30 h-30 ml-8 mr-20" src="~@/assets/image/otc/buy/star.png" alt=""
              v-if="orderDetail.c2cUserType">
            <van-icon color="#9399A4" name="arrow" class="relative top-1 font-700 font-20" />
            <img
              class="w-30 h-30 ml-8 mr-20"
              src="~@/assets/image/otc/buy/star.png"
              alt=""
              v-if="orderDetail.c2cUserType"
            />
            <van-icon
              color="#9399A4"
              name="arrow"
              class="relative top-1 font-700 font-20"
            />
          </div>
          <div
            style="background:linear-gradient(to right,#b6dbff,#1d91ff);border-top-left-radius: 40px;border-bottom-left-radius: 40px;"
            class="flex items-center font-24 text-white py-10 px-14" @click="gotoChat">
            <img class="w-35 h-33 mr-10" src="~@/assets/image/c2c/Vector-white.png" alt="" />
            {{ $t('联系卖家') }}
            style="
              background: linear-gradient(to right, #b6dbff, #1d91ff);
              border-top-left-radius: 40px;
              border-bottom-left-radius: 40px;
            "
            class="flex items-center font-24 text-white py-10 px-14"
            @click="gotoChat"
          >
            <img
              class="w-35 h-33 mr-10"
              src="~@/assets/image/c2c/Vector-white.png"
              alt=""
            />
            {{ $t("联系卖家") }}
          </div>
        </div>
        <div class="mt-60">
          <div class="flex items-center mb-30 pr- 185">
            <img class="w-28 h-28 mr-12" src="~@/assets/image/c2c/gou.png" alt="">
            <p class="font-24">{{ $t('卖家的数字货币现已存入托管账户，请放心付款') }}</p>
            <img
              class="w-28 h-28 mr-12"
              src="~@/assets/image/c2c/gou.png"
              alt=""
            />
            <p class="font-24">
              {{ $t("卖家的数字货币现已存入托管账户，请放心付款") }}
            </p>
          </div>
          <div class="flex justify-between">
            <div class="flex items-center">
              <img class="w-28 h-28 mr-12" src="~@/assets/image/c2c/gou.png" alt="">
              <p class="font-24">{{ $t('7x24小时客服支持') }}</p>
              <img
                class="w-28 h-28 mr-12"
                src="~@/assets/image/c2c/gou.png"
                alt=""
              />
              <p class="font-24">{{ $t("7x24小时客服支持") }}</p>
            </div>
            <div class="pr-40" @click="tokefu">
              <van-icon color="#9399A4" name="arrow" class="relative top-1 font-700 font-20" />
              <van-icon
                color="#9399A4"
                name="arrow"
                class="relative top-1 font-700 font-20"
              />
            </div>
          </div>
        </div>
@@ -54,32 +97,38 @@
    </div>
    <div class="w-full h-16 my-40 diviLine"></div>
    <div class="px-32">
      <h2 class="font-400 font-30 c2cColor">{{ $t('交易方式') }}</h2>
      <h2 class="font-400 font-30 c2cColor">{{ $t("交易方式") }}</h2>
      <div class="flex items-center mt-28">
        <div class="w-6 h-28 border-ra" style="background: #E7BB41;"></div>
        <div class="w-6 h-28 border-ra" style="background: #e7bb41"></div>
        <span class="ml-8 text-grey">{{ orderDetail.methodName }}</span>
      </div>
    </div>
    <div class="w-full h-56 mt-32 mb-40 diviLine"></div>
    <div class="flex px-40 pb-80 footer-box">
      <van-button class="w-244 h-80 font-30 mr-16 text-black border-none" type="primary" style="background: #EAEBEE"
        @click="cancelOrder">{{ $t('取消订单') }}</van-button>
      <van-button class="flex-1 h-80 font-30 btnMain border-none" type="info" @click="goToPayment">{{ $t('去付款')
      }}</van-button>
      <van-button
        class="w-244 h-80 font-30 mr-16 text-black border-none"
        type="primary"
        style="background: #eaebee"
        @click="cancelOrder"
        >{{ $t("取消订单") }}</van-button
      >
      <van-button
        class="flex-1 h-80 font-30 btnMain border-none"
        type="info"
        @click="goToPayment"
        >{{ $t("去付款") }}</van-button
      >
    </div>
  </div>
</template>

<script>
import {
  mapState
} from "vuex";
import { mapState } from "vuex";

import { CountDown, Icon, Cell, CellGroup, Button, Notify } from 'vant';
import { CountDown, Icon, Cell, CellGroup, Button, Notify } from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import OrderData from "@/page/c2cOrder/components/order-data/OrderData";
import otcApi from "@/API/otc";


export default {
  name: "orderGeneration",
@@ -87,44 +136,47 @@
    return {
      time: 0, //15 * 60 * 60 * 1000,
      orderDetail: {},
      interval: null
      interval: null,
      // orderNumber: ''
    }
    };
  },
  async created() {
    const order_no = this.$store.state.c2c.order_no
    const res = await otcApi.ctcOrderGetDetail({ order_no, language: this.$i18n.locale });
    const order_no = this.$store.state.c2c.order_no;
    const res = await otcApi.ctcOrderGetDetail({
      order_no,
      language: this.$i18n.locale,
    });
    this.orderDetail = res.data;
    this.time = this.orderDetail.autoCancelTimeRemain * 1000
    this.time = this.orderDetail.autoCancelTimeRemain * 1000;
    this.interval = setInterval(() => {
      this.time = this.time - 1000
      this.time = this.time - 1000;
      if (this.time <= 0) {
        clearInterval(this.interval)
        clearInterval(this.interval);
      }
    }, 1000)
    }, 1000);
  },
  methods: {
    // 取消订单
    cancelOrder() {
      if (this.time >= 0) {
        this.$router.push({ path: '/cancelOrder' })
        this.$router.push({ path: "/cancelOrder" });
      } else {
        Notify({ type: 'warning', message: this.$t('订单不能取消') })
        Notify({ type: "warning", message: this.$t("订单不能取消") });
      }
    },
    // 付款
    goToPayment() {
      this.$router.push({ path: '/paymentBuy' })
      this.$router.push({ path: "/paymentBuy" });
    },
    gotoChat() {
      this.$router.push({ path: '/chat' })
      this.$router.push({ path: "/chat" });
    },
    tokefu() {
      this.$router.push('/customerService')
    }
      this.$router.push("/customerService");
    },
  },
  computed: {
    ...mapState('c2cBuy', ['count', 'totalPrice', 'orderNumber']),
    ...mapState("c2cBuy", ["count", "totalPrice", "orderNumber"]),
  },
  components: {
    [CountDown.name]: CountDown,
@@ -134,20 +186,18 @@
    [Button.name]: Button,
    OrderNav,
    OrderData,
  }
}
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/init.scss";


.border-ra {
  border-radius: 20px;
}

#order-generation {

  ::v-deep .van-count-down {
    font-size: 28px;
    color: $blue;
@@ -175,6 +225,5 @@
      background: themed("main_background");
    }
  }

}
</style>