From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/c2cOrder/payment/PaymentDetail.vue | 158 +++++++++++++++++++++++++++++++++-------------------
1 files changed, 101 insertions(+), 57 deletions(-)
diff --git a/src/page/c2cOrder/payment/PaymentDetail.vue b/src/page/c2cOrder/payment/PaymentDetail.vue
index c83e999..ed2abc0 100644
--- a/src/page/c2cOrder/payment/PaymentDetail.vue
+++ b/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>
--
Gitblit v1.9.3