<template>
|
<div style="z-index: 100;overflow: auto;background: rgb(245, 245, 245)"
|
class="fixed top-0 left-0 w-full h-full bg-white">
|
<div class="pt-12" style="background: #1D91FF">
|
<order-nav>
|
<template #default>
|
<div class="flex items-center chat flex justify-center">
|
<van-badge class="w-35 h-33 mr-22" :content="6">
|
<img class="w-full h-full" src="~@/assets/image/c2c/Vector-white.png" alt="">
|
</van-badge>
|
<span class="font-28 text-white">{{ $t('联系卖家')}}</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">交易成功</div>
|
<div class="mt-26 font-26">您已成功购买 2,352.22 USDT</div>
|
</div>
|
<div>
|
<img class="w-92 h-92" src="~@/assets/image/c2c/Group181.png" alt="">
|
</div>
|
</div>
|
</div>
|
<div class="pt-46 pb-30 bg-white">
|
<order-data
|
:count="count"
|
:total-price="totalPrice"
|
:order-number="orderNumber"
|
:create-order-time="createOrderTime"
|
client-type="买家昵称"
|
seller-name="钱多多爱妞商行"
|
>
|
<div class="w-full h-16 mb-40" style="background: rgb(245, 245, 245)"></div>
|
</order-data>
|
</div>
|
<div class="px-32 mt-16 bg-white py-39">
|
<h2 class="font-400 font-30">交易方式</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">银行卡</span>
|
</div>
|
</div>
|
<van-divider/>
|
<evaluation class="pb-60 bg-white"/>
|
<div class="mt-16">
|
<div class="flex justify-between items-center h-100 px-32 bg-white">
|
<div>
|
<span class="font-30 text-black">关注此用户</span>
|
</div>
|
<div class="switch">
|
<van-switch v-model="checked"/>
|
</div>
|
</div>
|
<div class="flex justify-between items-center h-100 px-32 mt-16 bg-white">
|
<div>
|
<span class="font-30 text-black">对订单存在疑问</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,
|
Switch,
|
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";
|
|
export default {
|
name: "TradeSuccessDetail",
|
data() {
|
return {
|
checked: false,
|
}
|
},
|
computed: {
|
...mapState('c2cBuy', ['count', 'totalPrice', 'orderNumber', 'createOrderTime'])
|
},
|
components: {
|
[Badge.name]: Badge,
|
[Divider.name]: Divider,
|
[Cell.name]: Cell,
|
[CellGroup.name]: CellGroup,
|
[Switch.name]: Switch,
|
[Icon.name]: Icon,
|
OrderNav,
|
OrderData,
|
Evaluation,
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/init.scss";
|
|
::v-deep {
|
.van-nav-bar__right {
|
padding: 0;
|
}
|
|
.van-nav-bar__arrow {
|
color: #fff;
|
}
|
|
.van-nav-bar {
|
background: #1D91FF;
|
}
|
|
.van-cell {
|
padding: 0 32px !important;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.order-data {
|
.title {
|
padding: 0 32px;
|
}
|
}
|
}
|
|
.switch {
|
transform: scale(.7) translateX(20px);
|
}
|
|
.chat {
|
width: 232px;
|
height: 64px;
|
background: linear-gradient(310.03deg, #1D91FF 14.76%, #B6DBFF 84.98%);
|
border-radius: 36px 0px 0px 36px;
|
}
|
|
</style>
|
