first commit

huzheng12

2024-05-06 3ed2cb78a690b64c3b2646d35e1500081186dfa3

 src/page/c2cOrder/payment/PaymentDetail.vue

@@ -1,43 +1,62 @@
<template>
  <div id="full" class="w-full h-full flex flex-col ">
  <div id="full" class="w-full h-full flex flex-col">
    <order-nav :back="false" @back="$router.push('/wantBuy')">
      <template #right>
        <div class="flex items-center" @click="$router.push({ path: '/chat' })">
          <van-badge class="w-35 h-33 mr-22" :content="unreadMsg">
            <img class="w-full h-full " src="~@/assets/image/c2c/Vector.png" alt="">
            <img
              class="w-full h-full"
              src="~@/assets/image/c2c/Vector.png"
              alt=""
            />
          </van-badge>
          <div class="font-28">{{ $t('联系卖家') }}</div>
          <div class="font-28">{{ $t("联系卖家") }}</div>
        </div>
      </template>
    </order-nav>
    <div style="overflow-y: auto" class="flex-1 mainBackground">
      <div class="flex justify-between items-center pt-30 px-32 pb-100 mainBackground">
      <div
        class="flex justify-between items-center pt-30 px-32 pb-100 mainBackground"
      >
        <div class="mainBackground">
          <p class="font-48 c2cColor">{{ $t('等待卖家确认收款') }}</p>
          <p class="font-48 c2cColor">{{ $t("等待卖家确认收款") }}</p>
          <!-- <p class="mt-16 font-24"> {{$t('此卖家95%的订单会在')}}<span style="color: #1D91FF">02</span> {{$t('分钟内完成')}}</p> -->
        </div>
        <div class="w-140 h-144">
          <otc-circle :time="time" :expireTime="expireTime" class="w-full h-full" />
          <otc-circle
            :time="time"
            :expireTime="expireTime"
            class="w-full h-full"
          />
        </div>
      </div>
      <div class="">
        <trade-data title="购买" :count="count" :total-price="totalPrice" :create-order-time="createOrderTime"
          :order-number="orderNumber" sell-name="钱多多爱妞商行" client-type="买家昵称" :detail="detail" :trade-method="tradeMethod">
        <trade-data
          title="购买"
          :count="count"
          :total-price="totalPrice"
          :create-order-time="createOrderTime"
          :order-number="orderNumber"
          sell-name="钱多多爱妞商行"
          client-type="买家昵称"
          :detail="detail"
          :trade-method="tradeMethod"
        >
          <template #divider>
            <van-divider class="order-msg-divider" />
          </template>
          <template #trade-title>
            <span>{{ $t('交易方式') }}</span>
            <span>{{ $t("交易方式") }}</span>
          </template>
          <template #terms>
            <van-collapse v-model="activeNames">
              <van-collapse-item name="2">
                <template #title>
                  <span>{{ $t('交易条款') }}</span>
                  <span>{{ $t("交易条款") }}</span>
                </template>
                <van-divider />
                <p>{{ $t('敢打黑钱者，虽远逼诛！') }}</p>
                <p class="mt-20">{{ $t('急单勿拍！') }}</p>
                <p>{{ $t("敢打黑钱者，虽远逼诛！") }}</p>
                <p class="mt-20">{{ $t("急单勿拍！") }}</p>
              </van-collapse-item>
            </van-collapse>
          </template>
@@ -45,11 +64,21 @@
      </div>
    </div>
    <div class="px-40 pt-46 h-172 box-border flex font-30 mainBackground">
      <van-button class="flex-1 h-80 mr-16 rounded-2xl c2cColor tabBackground border-none" type="primary"
        @click="$router.push({ path: '/cancelOrder?order_no=' + $route.query.order_no })">{{ $t('取消订单') }}
      <van-button
        class="flex-1 h-80 mr-16 rounded-2xl c2cColor tabBackground border-none"
        type="primary"
        @click="
          $router.push({
            path: '/cancelOrder?order_no=' + $route.query.order_no,
          })
        "
        >{{ $t("取消订单") }}
      </van-button>
      <van-button class="flex-1 h-80 rounded-2xl tabBackground c2cColor border-none" type="primary"
        @click="$router.push({ path: '/appeal' })">{{ $t('申诉') }}
      <van-button
        class="flex-1 h-80 rounded-2xl tabBackground c2cColor border-none"
        type="primary"
        @click="$router.push({ path: '/appeal' })"
        >{{ $t("申诉") }}
      </van-button>
    </div>
    <!--  交易成功  -->
@@ -60,14 +89,14 @@
</template>

<script>
import { mapState } from "vuex"
import { Badge, Collapse, CollapseItem, Divider, } from "vant"
import { mapState } from "vuex";
import { Badge, Collapse, CollapseItem, Divider } from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import OtcCircle from "@/components/otcCircle";
// import TradeSuccess from "@/page/c2c-trade/components/TradeSuccess";
// import TradeSuccessDetail from "@/page/c2c-trade/components/TradeSuccessDetail";
import TradeData from "@/page/c2cOrder/components/trade-data/TradeData";
import otcApi from '@/API/otc';
import otcApi from "@/API/otc";

export default {
  name: "PaymentDetail",
@@ -76,23 +105,31 @@
      activeNames: [],
      // 交易方式
      tradeMethod: [
        { label: this.$t('姓名'), value: this.$t('刘德华') },
        { label: this.$t('银行卡号/账号'), value: this.$t('1122 3344 5566 7788') },
        { label: this.$t('银行名称'), value: this.$t('中国工商银行') },
        { label: this.$t('开户支行'), value: this.$t('北京海淀支行') },
        { label: this.$t("姓名"), value: this.$t("刘德华") },
        {
          label: this.$t("银行卡号/账号"),
          value: this.$t("1122 3344 5566 7788"),
        },
        { label: this.$t("银行名称"), value: this.$t("中国工商银行") },
        { label: this.$t("开户支行"), value: this.$t("北京海淀支行") },
      ],
      detail: {},
      time: 0,
      expireTime: 0,
      timeout: null,
      unreadMsg: 0
    }
      unreadMsg: 0,
    };
  },
  computed: {
    ...mapState('c2cBuy', ['count', 'totalPrice', 'createOrderTime', 'orderNumber'])
    ...mapState("c2cBuy", [
      "count",
      "totalPrice",
      "createOrderTime",
      "orderNumber",
    ]),
  },
  created() {
    this.fetchState()
    this.fetchState();
    // otcApi.ctcOrderGetDetail({order_no: this.$route.query.order_no}).then(res => {
    //   this.detail = res.data
    //   this.time = this.detail.expireTimeRemain
@@ -101,37 +138,44 @@
  },
  methods: {
    fetchState() {
      const order_no = this.$store.state.c2c.order_no
      otcApi.ctcOrderGetDetail({ order_no, language: this.$i18n.locale }).then(res => {
        const state = res.data.state / 1
        if (state === 1) { // 已付款
          // TOOD: 完成
          this.detail = res.data
          this.time = this.detail.expireTimeRemain
          this.expireTime = this.detail.expireTime * 60
          this.unreadMsg = this.detail.unreadMsg
          console.log(this.expireTime)
          if (this.timeout) {
            clearTimeout(this.timeout)
      const order_no = this.$store.state.c2c.order_no;
      otcApi
        .ctcOrderGetDetail({ order_no, language: this.$i18n.locale })
        .then((res) => {
          const state = res.data.state / 1;
          if (state === 1) {
            // 已付款
            // TOOD: 完成
            this.detail = res.data;
            this.time = this.detail.expireTimeRemain;
            this.expireTime = this.detail.expireTime * 60;
            this.unreadMsg = this.detail.unreadMsg;
            console.log(this.expireTime);
            if (this.timeout) {
              clearTimeout(this.timeout);
            }
            this.timeout = setTimeout(() => {
              this.fetchState();
            }, 3000);
          } else if (state == 3) {
            // 已成功
            // TODO 跳转到
            clearTimeout(this.timeout);
            this.$router.push("/tradeSuccessBuyer");
          } else if (state == 5) {
            clearTimeout(this.timeout);
            this.$router.push({
              path: "/tradeOrderDetail",
              query: { back: false },
            });
          } else {
            console.log(this.detail);
          }
          this.timeout = setTimeout(() => {
            this.fetchState()
          }, 3000)
        } else if (state == 3) { // 已成功
          // TODO 跳转到
          clearTimeout(this.timeout)
          this.$router.push('/tradeSuccessBuyer')
        } else if (state == 5) {
          clearTimeout(this.timeout)
          this.$router.push({ path: '/tradeOrderDetail', query: { back: false } })
        } else {
          console.log(this.detail)
        }
      })
    }
        });
    },
  },
  beforeDestroy() {
    clearTimeout(this.timeout)
    clearTimeout(this.timeout);
  },
  components: {
    [Badge.name]: Badge,
@@ -141,8 +185,8 @@
    OrderNav,
    OtcCircle,
    TradeData,
  }
}
  },
};
</script>

<style lang="scss" scoped>