<template>
|
<div class="order-data">
|
<div class="flex items-center font-31 mb-42 c2cColor">
|
<span class="title" :style="{ 'color': detail.direction === 'buy' ? '#2EBD85' : '#E35461' }">
|
{{ detail.direction === 'buy' ? $t('购买') : $t('卖出') }}
|
</span>
|
<span class="mx-15">{{ detail.symbol && detail.symbol.toUpperCase() }}</span>
|
<img class="w-36 h-36" src="@/assets/image/c2c/U1.png" alt="">
|
</div>
|
<van-cell-group>
|
<van-cell :title="$t('总额')">
|
<template #default>
|
<h2 class="font-700 font-36">{{ currencySymbol }} {{ detail.amount }}</h2>
|
</template>
|
</van-cell>
|
<van-cell :title="$t('单价')">
|
<template #default>
|
<span>{{ currencySymbol }} </span>
|
<span>{{ detail.symbolValue }}</span>
|
</template>
|
</van-cell>
|
<van-cell :title="$t('支付方真实姓名')">
|
<template #default>
|
<span>{{ detail.payRealName }}</span>
|
</template>
|
</van-cell>
|
<van-cell :title="$t('数量')"
|
:value="`${detail.symbol == 'usdt' ? Math.floor(detail.coinAmount * 100) / 100 : Math.floor(detail.coinAmount * 1000000) / 1000000} ${detail.symbol && detail.symbol.toUpperCase()}`" />
|
<slot name="default"></slot>
|
<van-cell class="order-number">
|
<template v-slot:title>
|
<div class="w-100">{{ $t('订单号') }}</div>
|
</template>
|
<div class="flex justify-end">
|
<span class="mr-14">{{ detail.orderNo }}</span>
|
<img class="relative top-1 w-30 h-34" src="@/assets/image/c2c/Group1168.png" alt=""
|
@click="copy(detail.orderNo)">
|
</div>
|
</van-cell>
|
<van-cell v-if="detail.createTime" :title="$t('创建时间')" :value="detail.createTime" />
|
<van-cell v-if="detail.sellerName">
|
<template #title>
|
<span>{{ clientType }}</span>
|
</template>
|
<template #default>
|
<span class="mr-20">{{ sellerName }}</span>
|
<van-icon class="font-700 text-grey" name="arrow" />
|
</template>
|
</van-cell>
|
</van-cell-group>
|
</div>
|
</template>
|
|
<script>
|
import {
|
mapState,
|
mapGetters
|
} from "vuex";
|
import { Cell, CellGroup, Icon, showToast } from "vant"
|
import useClipboard from "vue-clipboard3";
|
const { toClipboard } = useClipboard();
|
|
export default {
|
name: "OrderDate",
|
// props: ['count', 'totalPrice', 'orderNumber', 'sellerName', 'createOrderTime'],
|
props: {
|
clientType: {
|
default: '卖家昵称'
|
},
|
detail: {
|
type: Object,
|
default() {
|
return {}
|
}
|
},
|
// // count: {},
|
// totalPrice: {},
|
// // orderNumber: {},
|
// sellerName: {},
|
// createOrderTime: {},
|
// unitPrice: {
|
// // required: true,
|
// }
|
},
|
filters: {
|
format(time) {
|
const _time = new Date(time)
|
return [_time.getFullYear(), _time.getMonth() + 1, _time.getDate()].join('/') + ' ' + [_time.getHours(), _time.getMinutes(), _time.getSeconds()].join(":")
|
}
|
},
|
methods: {
|
async copy(text) {
|
await toClipboard(text);
|
showToast(this.$t('copySuccess'));
|
}
|
},
|
computed: {
|
...mapState('home', ['currency']),
|
...mapGetters('c2c', ['currencySymbol'])
|
},
|
components: {
|
[Cell.name]: Cell,
|
[CellGroup.name]: CellGroup,
|
[Icon.name]: Icon,
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/css/copy2.scss";
|
::v-deep .van-cell {
|
margin-bottom: 46px;
|
}
|
|
::v-deep .order-number {
|
.van-cell__title {
|
flex: inherit;
|
}
|
}
|
|
.order-data {
|
::v-deep .van-cell-group,
|
.van-cell {
|
margin-bottom: 46px;
|
color: $text_color;
|
background: $main_background;
|
}
|
|
::v-deep .van-cell__value {
|
color: $text_color;
|
}
|
}
|
</style>
|
