<template>
|
<div class="OffpayInstruct">
|
<div class="title">线下汇款说明</div>
|
<div class="close iconfont" @click="close"></div>
|
<el-tooltip placement="left">
|
<div slot="content">
|
说明：<br />
|
·点击关闭按钮，关闭此信息弹窗，在确认<br />订单页面可以选择其他付款方式继续付款；<br />
|
·如果不选择其他付款方式，关闭确认订单<br />页面，在我的订单中可以看到此订单状态为<br />“未付款”，支付方式为“汇款”；<br />
|
·如果重新选择了支付宝，则订单中的支付<br />方式更新为支付宝。
|
</div>
|
<div class="tip iconfont"></div>
|
</el-tooltip>
|
<div class="content">
|
<p>请将款项汇入以下银行账户</p>
|
<div class="info">
|
<div class="itfoRow">
|
<div class="label">开户银行：</div>
|
<div class="data">北京银行太阳宫支行</div>
|
</div>
|
<div class="itfoRow">
|
<div class="label">账户：</div>
|
<div class="data">2000 0031 2025 0000 9136 746</div>
|
</div>
|
<div class="itfoRow">
|
<div class="label">开户行行号：</div>
|
<div class="data">3131 0000 1792</div>
|
</div>
|
<div class="itfoRow">
|
<div class="label">款项：</div>
|
<div class="data">北京银行太阳宫支行</div>
|
</div>
|
</div>
|
<div class="userInfo">您的登录用户名：{{ offerData.username }}</div>
|
<div class="userInfo">您的订单号：{{ offerData.orderId }}</div>
|
|
<div class="des">
|
<div class="label">注意事项：</div>
|
<div>1.请在转账是务必提供用户名和订单编号；</div>
|
<div>
|
2.转账后，请务必点击“上传凭证”按钮提交转账信息，以便财务确认，财务确
|
认时间为提交后额1~3个工作日；
|
</div>
|
<div>3.您可以在“我的订单”点击【提交付款凭证】，查看本页中的内容</div>
|
</div>
|
</div>
|
<div class="btns">
|
<div class="button cancel" @click="close">取消</div>
|
<div class="button confirm" @click="confirm">上传凭证</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
offerData: {},
|
},
|
methods: {
|
close() {
|
this.$emit("close");
|
},
|
confirm() {
|
this.$emit("confirm");
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped >
|
.OffpayInstruct {
|
.title {
|
box-sizing: border-box;
|
padding: 20px;
|
height: 64px;
|
border-bottom: 1px solid #e9ebee;
|
font-size: 18px;
|
font-weight: 700;
|
}
|
|
.close {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
font-size: 16px;
|
color: #666;
|
cursor: pointer;
|
}
|
|
.tip {
|
position: absolute;
|
top: 20px;
|
right: 40px;
|
font-size: 16px;
|
color: #dbdbdb;
|
cursor: pointer;
|
}
|
|
.content {
|
box-sizing: border-box;
|
padding: 30px 20px 20px 20px;
|
font-size: 14px;
|
|
p {
|
font-size: 16px;
|
margin-bottom: 16px;
|
}
|
|
.info {
|
box-sizing: border-box;
|
margin-bottom: 16px;
|
padding: 20px 20px 4px 20px;
|
background: #f3f3f3;
|
|
.itfoRow {
|
display: flex;
|
margin-bottom: 16px;
|
|
.label {
|
width: 108px;
|
color: #666666;
|
}
|
}
|
}
|
|
.userInfo {
|
margin-top: 8px;
|
}
|
|
.des {
|
margin-top: 30px;
|
padding: 30px 0;
|
color: #ff4a32;
|
line-height: 20px;
|
border-top: 1px solid #e9ebee;
|
border-bottom: 1px solid #e9ebee;
|
}
|
}
|
|
.btns {
|
position: absolute;
|
right: 20px;
|
bottom: 20px;
|
display: flex;
|
justify-content: flex-end;
|
text-align: center;
|
line-height: 40px;
|
|
.confirm {
|
margin-left: 10px;
|
width: 112px;
|
height: 40px;
|
background: #0065ff;
|
color: #fff;
|
}
|
|
.cancel {
|
width: 80px;
|
height: 40px;
|
border: 1px solid #0065ff;
|
color: #0065ff;
|
}
|
}
|
}
|
</style>
|
