<template>
|
<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=""
|
/>
|
</van-badge>
|
<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="mainBackground">
|
<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"
|
/>
|
</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"
|
>
|
<template #divider>
|
<van-divider class="order-msg-divider" />
|
</template>
|
<template #trade-title>
|
<span>{{ $t("交易方式") }}</span>
|
</template>
|
<template #terms>
|
<van-collapse v-model="activeNames">
|
<van-collapse-item name="2">
|
<template #title>
|
<span>{{ $t("交易条款") }}</span>
|
</template>
|
<van-divider />
|
<p>{{ $t("敢打黑钱者，虽远逼诛！") }}</p>
|
<p class="mt-20">{{ $t("急单勿拍！") }}</p>
|
</van-collapse-item>
|
</van-collapse>
|
</template>
|
</trade-data>
|
</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>
|
<van-button
|
class="flex-1 h-80 rounded-2xl tabBackground c2cColor border-none"
|
type="primary"
|
@click="$router.push({ path: '/appeal' })"
|
>{{ $t("申诉") }}
|
</van-button>
|
</div>
|
<!-- 交易成功 -->
|
<!-- <trade-success/>-->
|
<!-- 交易成功详情 -->
|
<!-- <trade-success-detail/>-->
|
</div>
|
</template>
|
|
<script>
|
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";
|
|
export default {
|
name: "PaymentDetail",
|
data() {
|
return {
|
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("北京海淀支行") },
|
],
|
detail: {},
|
time: 0,
|
expireTime: 0,
|
timeout: null,
|
unreadMsg: 0,
|
};
|
},
|
computed: {
|
...mapState("c2cBuy", [
|
"count",
|
"totalPrice",
|
"createOrderTime",
|
"orderNumber",
|
]),
|
},
|
created() {
|
this.fetchState();
|
// otcApi.ctcOrderGetDetail({order_no: this.$route.query.order_no}).then(res => {
|
// this.detail = res.data
|
// this.time = this.detail.expireTimeRemain
|
// console.log(this.detail)
|
// })
|
},
|
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);
|
}
|
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);
|
},
|
components: {
|
[Badge.name]: Badge,
|
[Divider.name]: Divider,
|
[Collapse.name]: Collapse,
|
[CollapseItem.name]: CollapseItem,
|
OrderNav,
|
OtcCircle,
|
TradeData,
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.order-msg-divider {
|
margin: 48px 0;
|
}
|
}
|
</style>
|
