<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('数量')"
|
: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 slot="title">
|
<div class="w-100">{{ $t("订单号") }}</div>
|
</template>
|
<template>
|
<div class="flex justify-end">
|
<span class="mr-14">{{ detail.orderNo }}</span>
|
<img
|
class="relative top-4 w-30 h-34"
|
src="~@/assets/image/c2c/Group1168.png"
|
alt=""
|
@click="copy(detail.orderNo)"
|
/>
|
</div>
|
</template>
|
</van-cell>
|
<van-cell
|
v-if="detail.createTime"
|
:title="$t('创建时间')"
|
:value="detail.createTime | format"
|
/>
|
<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, Toast } from "vant";
|
|
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: {
|
copy(text) {
|
this.$copyText(text).then(() => {
|
Toast(this.$t("复制成功"));
|
});
|
},
|
},
|
computed: {
|
...mapState("home", ["currency"]),
|
...mapGetters("c2c", ["currencySymbol"]),
|
},
|
components: {
|
[Cell.name]: Cell,
|
[CellGroup.name]: CellGroup,
|
[Icon.name]: Icon,
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
::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;
|
|
@include themify() {
|
color: themed("text_color");
|
}
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
::v-deep .van-cell__value {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
}
|
</style>
|
