<template>
|
<div id="full">
|
<order-nav />
|
<div class="mt-10 text-center tabBackground text-black">
|
<div>
|
<h1 class="font-700 font-40">{{ $t("请向卖家付款") }}</h1>
|
<div
|
v-if="time"
|
class="flex justify-center items-center mt-18 font-30 font-700"
|
>
|
<span>{{ $t("订单将在") }}</span>
|
<van-count-down class="flex font-700" :time="time">
|
<template #default="timeData">
|
<span class="block">{{ timeData.hours }}</span>
|
<span class="colon">:</span>
|
<span class="block">{{ timeData.minutes }}</span>
|
</template>
|
</van-count-down>
|
<span>{{ $t("后取消") }}</span>
|
</div>
|
<div class="flex justify-center items-end mt-42 font-64 font-700">
|
<span class="relative bottom-5 font-48">￥</span>
|
<span>{{ (totalPrice * 1).toLocaleString() }}.00</span>
|
<img
|
class="relative bottom-10 left-25 w-30 h-33"
|
src="~@/assets/image/c2c/Group1168.png"
|
alt=""
|
/>
|
</div>
|
<div class="flex justify-center items-center mt-44">
|
<img
|
class="w-36 h-34 mr-22"
|
src="~@/assets/image/c2c/Vector.png"
|
alt=""
|
/>
|
<span class="font-32">{{ $t("联系卖家") }}</span>
|
</div>
|
</div>
|
</div>
|
<div class="w-full pt-46 pb-58 mt-40" style="background: #fafafa">
|
<div class="ml-50 pl-38 pr-32 msg relative">
|
<div
|
class="circle absolute top-0 left-0 z-10 w-45 h-45 flex justify-center items-center bg-blue text-white font-26"
|
style="border-radius: 50%"
|
>
|
1
|
</div>
|
<div
|
class="circle absolute bottom-28 left-0 z-10 w-45 h-45 flex justify-center items-center bg-blue text-white font-26"
|
style="border-radius: 50%"
|
>
|
2
|
</div>
|
<div class="font-28">
|
{{
|
$t(
|
"离开APP,登录您与APP上的验证姓名相匹配的银行账户或其他支付方式，转到卖家的以下账户。"
|
)
|
}}
|
</div>
|
<div class="mt-50 pt-32 px-22 pb-38 bg-white rounded-2xl msg-wrapper">
|
<div class="flex items-center">
|
<div
|
class="w-6 h-28 rounded-xl mr-20"
|
style="background: #e7bb41"
|
></div>
|
<span class="ml-8 font-30 text-black">{{ $t("银行卡") }}</span>
|
</div>
|
<van-cell-group>
|
<van-cell class="order-number" :title="$t('姓名')">
|
<template #default>
|
<div class="flex justify-end">
|
<span class="mr-14">{{ $t("鸿运当头") }}</span>
|
<img
|
class="relative top-8 w-25 h-29"
|
src="~@/assets/image/c2c/Group1168.png"
|
alt=""
|
/>
|
</div>
|
</template>
|
</van-cell>
|
<van-cell class="order-number" :title="$t('银行卡号')">
|
<template #default>
|
<div class="flex justify-end">
|
<span class="mr-14">{{
|
$t("请点击右上角按钮联系商家索取")
|
}}</span>
|
<img
|
class="relative top-8 w-25 h-29"
|
src="~@/assets/image/c2c/Group1168.png"
|
alt=""
|
/>
|
</div>
|
</template>
|
</van-cell>
|
<van-cell class="order-number" :title="$t('银行名称')">
|
<template #default>
|
<div class="flex justify-end">
|
<span class="mr-14">{{ $t("请仔细阅读下方交易条款") }}</span>
|
<img
|
class="relative top-8 w-25 h-29"
|
src="~@/assets/image/c2c/Group1168.png"
|
alt=""
|
/>
|
</div>
|
</template>
|
</van-cell>
|
<van-cell class="order-number" :title="$t('开户支行')">
|
<template #default>
|
<div class="flex justify-end">
|
<span class="mr-14">{{
|
$t("请按照下方交易条款提供相关资料")
|
}}</span>
|
<img
|
class="relative top-8 w-25 h-29"
|
src="~@/assets/image/c2c/Group1168.png"
|
alt=""
|
/>
|
</div>
|
</template>
|
</van-cell>
|
</van-cell-group>
|
</div>
|
<div class="mt-39 font-28">
|
{{ $t("付款后，返回 XX APP，务必点击下方按钮“我已付款”通知卖家。") }}
|
</div>
|
</div>
|
</div>
|
<div class="mt-92 px-40 flex font-30">
|
<van-button
|
class="w-244 h-80 mr-16 rounded-2xl text-black bg-grey border-none"
|
type="primary"
|
@click="show = true"
|
>{{ $t("遇到问题？") }}</van-button
|
>
|
<van-button
|
class="flex-1 h-80 rounded-2xl bg-blue text-white border-none"
|
type="primary"
|
@click="$router.push({ path: '/paymentDetail' })"
|
>{{ $t("我已付款，通知卖家") }}</van-button
|
>
|
</div>
|
<!-- 遇到问题 -->
|
<div>
|
<van-popup class="w-full h-full" v-model="show" position="right">
|
<question @back="back" :time="time" />
|
</van-popup>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapState } from "vuex";
|
import { Cell, CellGroup, CountDown, Button, Popup } from "vant";
|
import OrderNav from "@/components/order-nav/OrderNav";
|
import Question from "@/page/c2cOrder/payment/components/Question";
|
|
export default {
|
name: "Payment",
|
props: ["time"],
|
data() {
|
return {
|
show: false,
|
};
|
},
|
methods: {
|
back() {
|
this.show = false;
|
},
|
},
|
computed: {
|
...mapState("c2cBuy", ["totalPrice"]),
|
},
|
components: {
|
[CountDown.name]: CountDown,
|
[Cell.name]: Cell,
|
[CellGroup.name]: CellGroup,
|
[Button.name]: Button,
|
[Popup.name]: Popup,
|
OrderNav,
|
Question,
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/init.scss";
|
|
::v-deep {
|
.van-count-down {
|
font-size: 26px;
|
color: $blue;
|
}
|
|
.van-cell {
|
margin-top: 28px;
|
|
.van-cell__title,
|
.van-cell__value {
|
font-size: 26px;
|
}
|
}
|
}
|
|
.msg {
|
//border-left: 1px solid #EAEBEE;
|
|
&:after {
|
content: "";
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 1px;
|
height: 93%;
|
background: #eaebee;
|
}
|
}
|
|
.msg-wrapper {
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
}
|
|
.circle {
|
transform: translateX(-50%);
|
}
|
</style>
|
