<template>
|
<div class="item-main" @click="gotoPage">
|
<div class="flex justify-between items-center buy">
|
<span class="us-buy">
|
<span v-if="items.direction === 'buy'" style="color: #5eba89">{{
|
$t("购买")
|
}}</span>
|
<span v-else style="color: #e35461">{{ $t("出售") }}</span>
|
{{ items.symbol }}
|
</span>
|
<span v-if="items.direction === 'buy'">
|
<span
|
:class="{
|
blue: items.state === '0',
|
yellow: items.state === '1',
|
red: items.state === '2' || items.state === '5',
|
green: items.state === '3',
|
}"
|
>{{ arr[items.state / 1] }}</span
|
>
|
<van-icon name="arrow" />
|
</span>
|
<span v-else>
|
<span
|
:class="{
|
blue: items.state === '0',
|
yellow: items.state === '1',
|
red: items.state === '2' || items.state === '5',
|
green: items.state === '3',
|
}"
|
>{{ arr1[items.state / 1] }}</span
|
>
|
<van-icon name="arrow" />
|
</span>
|
</div>
|
<div class="flex justify-between items-center price-i">
|
<span
|
>{{ $t("单价") }} {{ items.currency || currency.currency_symbol }}
|
{{ items.symbol_value }}</span
|
>
|
<span style="color: #b8bcc5">{{ items.time }}</span>
|
</div>
|
<div class="flex justify-between items-center price-i pd-32">
|
<span
|
>{{ $t("数量") }}
|
{{ (items.coin_amount / 1).toFixed(items.symbol === "USDT" ? 2 : 4) }}
|
{{ items.symbol }}</span
|
>
|
<span class="textColor" style="font-weight: bold"
|
>{{ items.currency }}
|
{{ ((items.symbol_value * items.coin_amount) / 1).toFixed(2) }}</span
|
>
|
</div>
|
<div class="niu flex items-center">
|
<van-badge v-if="items.msg" :content="items.msg">
|
<img src="@/assets/image/Subtract.png" class="mr-20" alt="" />
|
</van-badge>
|
<img v-else src="@/assets/image/Subtract.png" class="mr-20" alt="" />
|
{{ items.c2c_user_nick_name }}
|
<!-- <img src="@/assets/image/up.png" alt="" />
|
资金安全 -->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
import { Icon, Badge } from "vant";
|
|
export default {
|
props: ["items"],
|
data() {
|
return {
|
arr: [
|
this.$t("未付款"),
|
this.$t("已付款"),
|
this.$t("申诉中"),
|
this.$t("已完成"),
|
this.$t("已取消"),
|
this.$t("已超时"),
|
],
|
arr1: [
|
this.$t("等待付款"),
|
this.$t("待确认"),
|
this.$t("申诉中"),
|
this.$t("已完成"),
|
this.$t("已取消"),
|
this.$t("已超时"),
|
],
|
};
|
},
|
computed: {
|
...mapState("home", ["currency"]),
|
},
|
methods: {
|
gotoPage() {
|
// 去到相应的页面
|
// console.log(this.items)
|
// this.$store.commit('c2c/SET_ADV_ID',this.items.id)
|
this.$store.commit("c2c/SET_ORDER_NO", this.items.order_no);
|
// return
|
if (this.items.direction === "buy") {
|
if (this.items.state / 1 === 0 || this.items.state / 1 === 5) {
|
// 未付款
|
this.$router.push(`/orderGeneration`);
|
} else if (this.items.state / 1 === 1) {
|
// 已付款
|
this.$router.push("/paymentDetail");
|
} else {
|
/// 111 其他
|
this.$router.push("/tradeOrderDetail");
|
}
|
} else {
|
if (this.items.state / 1 === 0 || this.items.state / 1 === 5) {
|
// 未付款
|
this.$router.push(`/sellGenerate`);
|
} else if (this.items.state / 1 === 1) {
|
// 已付款
|
this.$router.push(`/confirmedPaid`);
|
// this.$router.push('/paymentDetail?order_no=' + this.items.order_no)
|
} else {
|
/// 111 其他
|
this.$router.push("/tradeOrderDetail");
|
}
|
}
|
},
|
},
|
components: {
|
[Icon.name]: Icon,
|
[Badge.name]: Badge,
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.item-main {
|
padding: 42px 0 66px;
|
margin: 0 30px;
|
font-size: 28px;
|
color: #868d9a;
|
|
@include themify() {
|
border-bottom: 1px solid themed("line_color");
|
}
|
|
.buy {
|
margin-bottom: 40px;
|
font-size: 32px;
|
|
.us-buy {
|
color: #fff;
|
}
|
}
|
|
.price-i {
|
margin-bottom: 28px;
|
}
|
|
.pd-32 {
|
margin-bottom: 32px;
|
}
|
|
.niu {
|
width: 200px;
|
height: 57px;
|
overflow: hidden;
|
|
@include themify() {
|
background: themed("tab_background");
|
}
|
|
border-radius: 50px;
|
font-size: 22px;
|
padding: 0 20px;
|
|
img {
|
width: 30px;
|
height: 30px;
|
margin-top: 6px;
|
}
|
}
|
}
|
|
::v-deep {
|
.van-badge--fixed {
|
top: 80%;
|
}
|
}
|
|
.blue {
|
color: #1d91ff;
|
}
|
|
.green {
|
color: #2ebd85;
|
}
|
|
.red {
|
color: #e35461;
|
}
|
|
.yellow {
|
color: #e2ae27;
|
}
|
</style>
|
