<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>
|
