<template>
|
<div id="full" style="z-index: 100;overflow: auto;"
|
class="fixed top-0 left-0 w-full h-full c2cBackground1 tradeSuccessDetail">
|
<div :class="orderDetail.state == 3 ? 'green' : 'greyBg'">
|
<order-nav :back="back" :class="orderDetail.state == 3 ? 'green' : 'greyBg'" @back="$router.replace('/wantBuy')">
|
<template #left>
|
<van-icon name="arrow-left" class="arrow-left-icon" />
|
</template>
|
<template #right>
|
<div class="flex items-center chat flex justify-center" @click="$router.push({
|
path: '/chat'
|
})">
|
<van-badge class="w-35 h-33 mr-22">
|
<img class="w-full h-full" v-if="orderDetail.state == 3" src="~@/assets/image/c2c/Vector-white.png"
|
alt="" />
|
<img class="w-full h-full" v-else src="~@/assets/image/c2c/Vector-black.png" alt="" />
|
</van-badge>
|
<span class="font-28" :class="orderDetail.state == 3 ? 'text-white' : 'c2cColor'">
|
<span>{{ orderDetail.direction == 'buy' ? $t('联系卖家') : $t('联系买家') }}</span>
|
</span>
|
</div>
|
</template>
|
</order-nav>
|
<div class="flex justify-between items-center mt-20 px-32 pb-50 text-white">
|
<div>
|
<div class="font-52" :class="orderDetail.state != 3 ? 'c2cColor' : ''">{{ fixStr() }}</div>
|
<div class="mt-26 font-26" v-if="orderDetail.state == 3">
|
{{ $t('您已成功') }} {{ orderDetail.direction == 'buy' ? $t('购买') : $t('出售') }} {{
|
orderDetail.symbol.toLowerCase() == 'usdt' ? Math.floor(orderDetail.amountUsdt * 100) / 100 :
|
Math.floor(orderDetail.amountUsdt * 10000) / 10000 }} {{ orderDetail.symbol.toUpperCase() }}
|
</div>
|
<div class="mt-26 font-26 c2cColor" v-else>{{ fixText() }}</div>
|
</div>
|
<div>
|
<img v-if="orderDetail.state == 3" class="w-92 h-92" src="~@/assets/image/c2c/Group181.png" alt="">
|
<img v-else class="w-92 h-92" src="~@/assets/image/c2c/Group1212.png" alt="">
|
</div>
|
</div>
|
</div>
|
<div class="pt-46 pb-30 c2cTabBackground">
|
<order-data :detail="orderDetail">
|
<div class="w-full h-16 mb-40 diviLine"></div>
|
</order-data>
|
</div>
|
<div class="px-32 mt-16 mainBackground py-39">
|
<h2 class="font-400 font-30 c2cColor">{{ $t('交易方式') }}</h2>
|
<div class="flex items-center mt-28">
|
<div class="w-6 h-28 border-ra" style="background: #E7BB41;"></div>
|
<span class="ml-9 font-22 text-grey">{{ orderDetail.methodName }}</span>
|
</div>
|
</div>
|
<!-- <van-divider/>-->
|
<!-- <evaluation class="pb-60 bg-white">-->
|
<!-- <template #desc>-->
|
<!-- <slot name="desc"></slot>-->
|
<!-- </template>-->
|
<!-- </evaluation>-->
|
<div class="mt-16">
|
<div class="flex justify-between items-center h-100 px-32 mt-16 c2cTabBackground c2cColor" @click="tokefu">
|
<div>
|
<span class="font-30 c2cColor">{{ $t('联系客服') }}</span>
|
</div>
|
<div>
|
<van-icon name="arrow" class="font-700" />
|
</div>
|
</div>
|
<div class="flex justify-between items-center h-100 px-32 mt-16 c2cTabBackground c2cColor"
|
@click="$router.push('/Appeal')">
|
<div>
|
<span class="font-30 c2cColor">{{ $t('对订单存在疑问') }}</span>
|
</div>
|
<div>
|
<van-icon name="arrow" class="font-700" />
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
mapState
|
} from "vuex";
|
import {
|
Badge,
|
Divider,
|
Cell,
|
CellGroup,
|
Icon,
|
} from "vant";
|
import OrderNav from "@/components/order-nav/OrderNav";
|
import OrderData from "@/page/c2cOrder/components/order-data/OrderData";
|
import Evaluation from "@/page/c2cOrder/payment/components/Evaluation";
|
import otcApi from "@/API/otc";
|
export default {
|
name: "TradeSuccessDetail",
|
props: ['title', 'back'],
|
data() {
|
return {
|
checked: false,
|
orderDetail: {},
|
}
|
},
|
components: {
|
[Badge.name]: Badge,
|
[Divider.name]: Divider,
|
[Cell.name]: Cell,
|
[CellGroup.name]: CellGroup,
|
[Icon.name]: Icon,
|
OrderNav,
|
OrderData,
|
Evaluation,
|
},
|
async created() {
|
console.log(this.orderInfo)
|
const order_no = this.$store.state.c2c.order_no
|
const res = await otcApi.ctcOrderGetDetail({ order_no, language: this.$i18n.locale });
|
this.orderDetail = res.data;
|
},
|
methods: {
|
fixStr() {
|
let str = ''
|
if (this.orderDetail.state == 1) {
|
str = ''
|
} else if (this.orderDetail.state == 2) {
|
str = this.$t('申诉中')
|
} else if (this.orderDetail.state == 3) {
|
str = this.$t('已完成')
|
} else if (this.orderDetail.state == 4) {
|
str = this.$t('已取消')
|
} else if (this.orderDetail.state == 5) {
|
str = this.$t('已超时')
|
}
|
return str
|
},
|
fixText() {
|
let str = ''
|
if (this.orderDetail.state == 2) {
|
str = this.$t('您的订单正在申诉处理中')
|
} else if (this.orderDetail.state == 4) {
|
str = this.$t('您已取消订单')
|
} else if (this.orderDetail.state == 5) {
|
str = this.$t('您的订单已超时')
|
}
|
return str
|
},
|
tokefu() {
|
this.$router.push('/customerService')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/init.scss";
|
|
.tradeSuccessDetail {
|
@include themify() {
|
.arrow-left-icon {
|
color: themed("text_color");
|
}
|
}
|
|
|
::v-deep .van-nav-bar__right {
|
padding: 0;
|
}
|
|
::v-deep .van-nav-bar__arrow {
|
color: #fff;
|
}
|
|
::v-deep .greyBg .van-nav-bar {
|
@include themify() {
|
background: themed("grey_bg");
|
}
|
}
|
|
::v-deep .green .van-nav-bar {
|
background: #2EBD85;
|
}
|
|
::v-deep .van-cell {
|
padding: 0 32px !important;
|
|
@include themify() {
|
background: themed("c2c_tab_background");
|
}
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
::v-deep .van-cell-group {
|
@include themify() {
|
background: themed("c2c_tab_background");
|
}
|
}
|
|
::v-deep .van-cell__title {
|
@include themify() {
|
color: themed("text_color1");
|
}
|
}
|
|
::v-deep .van-cell__value {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
}
|
|
.switch {
|
transform: scale(.7) translateX(20px);
|
}
|
|
.chat {
|
width: 232px;
|
height: 64px;
|
border-radius: 36px 0px 0px 36px;
|
}
|
|
.green {
|
background: #2EBD85;
|
}
|
</style>
|
