<template>
|
<div id="full">
|
<order-nav />
|
<div class="mt-10 text-center tabBackground text-black">
|
<div>
|
<h1 class="font-700 font-40">请向卖家付款</h1>
|
<div class="flex justify-center items-center mt-18 font-30 font-700">
|
<span>订单将在</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>后取消</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">联系卖家</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">
|
离开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">银行卡</span>
|
</div>
|
<van-cell-group>
|
<van-cell class="order-number" title="姓名">
|
<template #default>
|
<div class="flex justify-end">
|
<span class="mr-14">鸿运当头</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="银行卡号">
|
<template #default>
|
<div class="flex justify-end">
|
<span class="mr-14">请点击右上角按钮联系商家索取</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="银行名称">
|
<template #default>
|
<div class="flex justify-end">
|
<span class="mr-14">请仔细阅读下方交易条款</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="开户支行">
|
<template #default>
|
<div class="flex justify-end">
|
<span class="mr-14">请按照下方交易条款提供相关资料</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">
|
付款后，返回 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"
|
>遇到问题？</van-button
|
>
|
<van-button
|
class="flex-1 h-80 rounded-2xl bg-blue text-white border-none"
|
type="primary"
|
@click="onPayed"
|
>我已付款，通知卖家</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";
|
import otcApi from "@/API/otc";
|
|
export default {
|
name: "payMent",
|
props: {
|
time: {},
|
detail: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
},
|
data() {
|
return {
|
show: false,
|
};
|
},
|
methods: {
|
back() {
|
this.show = false;
|
},
|
onPayed() {
|
otcApi.ctcOrderPayFinish({}).then((res) => {
|
console.log(res);
|
this.$router.push({
|
path: "/paymentDetail?id=" + this.$route.query.order_no,
|
});
|
});
|
},
|
},
|
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>
|
