<template>
|
<div id="full" class="w-full h-full">
|
<loading v-if="loading" />
|
<!--完成加载-->
|
<div v-else>
|
<order-nav />
|
<div class="px-32 pb-41 mainBackground">
|
<div class="flex justify-between c2cColor">
|
<div class="mt-10">
|
<div class="font-48">{{ $t('等待买家付款') }}</div>
|
<div class="mt-16 font-24">{{ $t('预计收到付款') }} <span style="color: #1D91FF">{{
|
orderDetail.expireTime
|
}}{{ $t('分钟') }}</span>
|
</div>
|
</div>
|
<div class="w-140 h-144">
|
<otc-circle :time="orderDetail.expireTime * 60" @finish="finish" class="w-full h-full" />
|
</div>
|
</div>
|
<div class="w-full mt-48 pt-46 pl-32 pb-42 box-border border-ra tabBackground c2cColor">
|
<div class="flex justify-between">
|
<div class="flex items-center">
|
<img class="w-38 h-38 mr-10" :src="orderDetail.c2cUserHeadImg" alt="">
|
<h3 class="font-32 font-400">{{ $t(orderDetail.c2cUserNickName) }}</h3>
|
<img class="w-30 h-30 ml-8 mr-20" src="@/assets/image/otc/buy/star.png" alt="">
|
<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="$router.push({ path: '/chat' })">
|
<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/Vector2.png" alt="">
|
<p class="font-24">
|
<span class="text-grey">{{ $t('买家实名 :') }} </span>
|
<span>{{ $t(orderDetail.realName) }}</span>
|
</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>
|
</div>
|
<div class="pr-40" @click="tokefu">
|
<van-icon color="#9399A4" name="arrow" class="relative top-1 font-700 font-20" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div>
|
<trade-data :title="$t('出售')" :detail="orderDetail" :count="orderDetail.coinAmount"
|
:total-price="orderDetail.amount" :order-number="orderDetail.orderNo" :trade-method="tradeMethod"
|
:method-name="fullMethodType(orderDetail.methodType)" :unit-price="orderDetail.symbolValue">
|
<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 class="font-28">{{ $t('资金绝对安全') }}</p>
|
<p class="mt-20 font-28">{{ $t('平时订单较多，看见了会立马打款。急单勿拍！') }}</p>
|
</van-collapse-item>
|
</van-collapse>
|
</template>
|
</trade-data>
|
</div>
|
<div class="flex justify-between px-40 pt-50 pb-41 mt-170 mainBackground">
|
<van-button class="w-244 h-80 mr-16 c2cColor tabBackground" type="primary"
|
@click="$router.push({ path: '/c2cHelp', query: { 'expireTimeRemain': orderDetail.expireTime * 60, 'state': orderDetail.state } })">{{
|
$t('帮助') }}
|
</van-button>
|
<van-button class="disable flex-1 h-80 enter" color="#CCCFD6" type="primary">{{ $t('我已确认收款') }}
|
</van-button>
|
</div>
|
<van-popup class="w-full h-full" position="right" v-model:show="isShowCancelOrder">
|
<cancel-success v-if="!timeout" :title="$t('出售')" :count="orderDetail.coinAmount"
|
:total-price="orderDetail.amount" :order-number="orderDetail.orderNo"
|
:create-order-time="fullTime(orderDetail.createTime)" :seller-name="orderDetail.c2cUserNickName"
|
:unit-price="orderDetail.symbolValue" />
|
<!-- 已超时 -->
|
<cancel-success v-if="timeout" :title="$t('出售')" :count="orderDetail.coinAmount" :total-price="orderDetail.amount"
|
:order-number="orderDetail.orderNo" :create-order-time="fullTime(orderDetail.createTime)"
|
:seller-name="orderDetail.c2cUserNickName" :unit-price="orderDetail.symbolValue">
|
<template #title>{{ $t('已超时') }}</template>
|
<template #desc>{{ $t('买家付款超时，您的订单已取消') }}</template>
|
</cancel-success>
|
</van-popup>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
import { Button, Collapse, CollapseItem, Divider, Icon, Popup, showToast } from "vant";
|
import OrderNav from "@/components/order-nav/OrderNav.vue";
|
import TradeData from "../../c2cOrder/components/trade-data/TradeData.vue";
|
import OtcCircle from "@/components/otcCircle/index.vue";
|
import CancelSuccess from "../../c2cOrder/components/order-generation/CancelSuccess.vue";
|
import loading from "@/components/loading/index.vue";
|
import { onBeforeUnmount } from "vue";
|
import otcApi from "@/service/otc";
|
|
import { formatTime } from "@/utils/utis";
|
import { SET_ORDER_INFO } from "@/store/const.store";
|
|
export default {
|
name: "SellGenerate",
|
// props: ['orderNumber'],
|
data() {
|
return {
|
loading: false, // 请求中
|
isShowCancelOrder: false,// 显示取消订单
|
timeout: false, //是否已超时
|
activeNames: [],
|
// 交易方式
|
tradeMethod: [],
|
orderDetail: {},
|
orderNumber: '',
|
timeStatus: null
|
}
|
},
|
created() {
|
// console.log(this.orderNumber)
|
// this.orderNumber = this.$route.query.orderNumber
|
this.orderNumber = this.$store.state.c2c.order_no
|
this.getOrderDetail();
|
},
|
beforeDestroy() {
|
console.log('bbb')
|
if (this.timeStatus) {
|
clearTimeout(this.timeStatus)
|
}
|
},
|
setup() {
|
onBeforeUnmount(()=>{
|
let end = setInterval(function () { }, 10000);
|
for (let i = 1; i <= end; i++) {
|
clearInterval(i);
|
}
|
})
|
},
|
methods: {
|
async getOrderDetail() {
|
console.log(this.orderNumber)
|
const res = await otcApi.ctcOrderGetDetail({ order_no: this.orderNumber, language: this.$i18n.locale });
|
this.orderDetail = res.data;
|
if (res.data.state / 1 === 0) {
|
this.timeStatus = setTimeout(() => {
|
this.getOrderDetail()
|
}, 3000)
|
} else {
|
if (this.timeStatus) {
|
clearTimeout(this.timeStatus)
|
this.$router.replace({
|
path: '/confirmedPaid'
|
})
|
}
|
}
|
|
// 保存订单数据
|
this.$store.commit(`c2cSell/${SET_ORDER_INFO}`, {
|
info: this.orderDetail
|
})
|
this.loading = false;
|
},
|
// 已确认收款
|
enter() {
|
|
// 跳转页面
|
this.$router.replace({
|
path: '/confirmedPaid'
|
})
|
},
|
// 已超时
|
finish() {
|
if (this.timeout) return
|
|
this.loading = true;
|
// 重新获取订单状态
|
//this.getOrderDetail();
|
this.isShowCancelOrder = false;
|
this.timeout = true;
|
},
|
// 取消订单
|
t() {
|
// this.isShowCancelOrder = true;
|
|
// 取消订单
|
// otcApi.ctcOrderCancel({order_no: this.orderInfo.orderNumber}).then(res => {
|
// console.log(res)
|
// }).catch(err => {
|
// console.log(err)
|
// })
|
// setTimeout(() => {
|
// showToast("取消成功")
|
// }, 400)
|
},
|
// 支付方法
|
fullMethodType(num) {
|
const arr = [this.$t('其它'), this.$t('银行卡'), this.$t('虚拟货币'), this.$t('微信'), this.$t('支付宝'), 'paypal', this.$t('西联汇款'), this.$t('swift国际汇款')]
|
return arr[num];
|
},
|
fullTime(time) {
|
console.log(formatTime(new Date(time), 'yyyy-MM-dd hh:mm:ss'));
|
return formatTime(new Date(time), 'yyyy-MM-dd hh:mm:ss')
|
},
|
tokefu() {
|
this.$router.push('/customerService')
|
}
|
},
|
watch: {
|
orderDetail() {
|
this.tradeMethod.push({
|
label: this.$t('姓名'), value: this.orderDetail.realName
|
})
|
this.tradeMethod.push({
|
label: this.$t('银行卡号/账号'), value: this.orderDetail.paramValue1
|
})
|
this.tradeMethod.push({
|
label: this.$t('银行名称'),
|
value: this.orderDetail.methodName
|
})
|
}
|
},
|
computed: {
|
...mapState('c2cSell', ['orderInfo']),
|
},
|
components: {
|
[Icon.name]: Icon,
|
[Collapse.name]: Collapse,
|
[CollapseItem.name]: CollapseItem,
|
[Divider.name]: Divider,
|
[Button.name]: Button,
|
[Popup.name]: Popup,
|
OrderNav,
|
TradeData,
|
OtcCircle,
|
CancelSuccess,
|
loading,
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/css/copy2.scss";
|
.border-ra {
|
border-radius: 20px;
|
}
|
|
::v-deep .order-data {
|
.title {
|
color: #E35461;
|
}
|
|
}
|
|
::v-deep {
|
.disable.van-button {
|
color: #7C838F !important
|
}
|
|
.van-button--primary {
|
border: none;
|
}
|
}
|
|
.loading {
|
background: #fff;
|
|
::v-deep {
|
.van-loading {
|
color: #1D91FF;
|
}
|
}
|
}
|
|
.enter {
|
//color: #7C838F !important;
|
}
|
</style>
|
