<template>
|
<div>
|
<div class="relative px-32 order-msg mainBackground" :class="{ 'hide': !isShow && detail.sellName }">
|
<order-data class="w-full" :detail="detail">
|
<slot name="divider"></slot>
|
</order-data>
|
<van-icon v-if="detail.sellName" @click="show" name="arrow-down" class="absolute bottom-10 font-700 text-grey"
|
:class="{ 'rotateZ': isShow }" />
|
</div>
|
<div class="h-16 diviLine"></div>
|
<div class="px-32 pt-35 mainBackground">
|
<van-collapse v-model="activeNames">
|
<van-collapse-item name="1">
|
<template #title>
|
<div>
|
<p class="font-30 c2cColor">
|
<slot name="trade-title"></slot>
|
</p>
|
<van-divider />
|
<div class="flex items-center mb-28">
|
<div class="w-6 h-32 rounded-xl mr-20" style="background: #E7BB41;"></div>
|
<span class="ml-8 font-30 c2cColor">{{ $t(detail.methodName) }}</span>
|
</div>
|
</div>
|
</template>
|
<van-cell-group class="payment-method">
|
<van-cell v-for="(item, index) in detail.tradeMethod" :key="index" :title="item.label" :value="item.value" />
|
</van-cell-group>
|
</van-collapse-item>
|
</van-collapse>
|
</div>
|
<div class="h-16 diviLine"></div>
|
<div class="p-32 mainBackground">
|
<slot name="terms"></slot>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { Icon, Collapse, CollapseItem, Cell, CellGroup, Divider } from "vant"
|
import OrderData from "@/page/c2cOrder/components/order-data/OrderData";
|
export default {
|
name: "TradeData",
|
// props: ['title', 'count', 'totalPrice', 'createOrderTime', 'orderNumber', 'sellName', 'clientType','tradeMethod','methodName','unitPrice'],
|
props: {
|
detail: {
|
type: Object,
|
default() {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {
|
isShow: false,
|
activeNames: [],
|
}
|
},
|
methods: {
|
show() {
|
this.isShow = !this.isShow;
|
}
|
},
|
components: {
|
[Icon.name]: Icon,
|
[Collapse.name]: Collapse,
|
[CollapseItem.name]: CollapseItem,
|
[Cell.name]: Cell,
|
[CellGroup.name]: CellGroup,
|
[Divider.name]: Divider,
|
OrderData,
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.mainBackground {
|
::v-deep {
|
|
.van-cell-group,
|
.van-cell {
|
@include themify() {
|
color: themed("text_color1");
|
}
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
.van-cell__value {
|
@include themify() {
|
color: themed("text_color");
|
}
|
}
|
|
.order-msg {
|
transition: all .5s ease;
|
overflow: hidden;
|
|
.van-icon {
|
left: 50%;
|
transform: translateX(-50%);
|
transition: all .5s ease;
|
}
|
}
|
|
.payment-method {
|
.van-cell {
|
margin-bottom: 50px;
|
font-size: 28px;
|
|
&:last-child {
|
margin-bottom: 30px;
|
}
|
|
.van-cell__title {
|
color: #8A919E;
|
}
|
}
|
}
|
|
|
|
.rotateZ {
|
transform: translateX(-50%) rotateZ(180deg) !important;
|
}
|
|
.hide {
|
height: 365px;
|
}
|
|
.van-collapse-item__content {
|
padding: 0;
|
font-size: 28px;
|
|
@include themify() {
|
color: themed("c2c_color");
|
}
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
}
|
|
.van-collapse-item {
|
.van-cell__title {
|
font-size: 28px;
|
|
@include themify() {
|
color: themed("c2c_color");
|
}
|
}
|
|
.van-divider {
|
margin: 28px 0;
|
border-color: transparent !important;
|
}
|
}
|
}
|
}
|
</style>
|
