<template>
|
<div class="viewLayer">
|
<div class="viewContent">
|
<div class="contentItem">
|
<div class="left">
|
<label for="">订单号:</label>
|
<input type="text"
|
disabled
|
v-model="backData.ovderNum">
|
</div>
|
<div class="right">
|
<label for="">订单金额:</label>
|
<input type="text"
|
disabled
|
v-model="backData.ovderMoney">
|
</div>
|
</div>
|
<div class="contentItem">
|
<div class="left">
|
<label for="">子订单:</label>
|
<input type="text"
|
disabled
|
v-model="backData.sonOrderNum">
|
</div>
|
<div class="right">
|
<label for="">子订单金额:</label>
|
<input type="text"
|
disabled
|
v-model="backData.sonOrderMoney">
|
</div>
|
</div>
|
<div class="contentItem">
|
<div class="left">
|
<label for="">交易时间:</label>
|
<input type="text"
|
disabled
|
v-model="backData.time">
|
</div>
|
<div class="right">
|
<label for="">支付状态:</label>
|
<input type="text"
|
disabled
|
v-model="backData.payStatus">
|
</div>
|
</div>
|
<div class="contentItem">
|
<div class="left">
|
<label for="">接入机构:</label>
|
<input type="text"
|
disabled
|
v-model="backData.institution">
|
</div>
|
<div class="right">
|
<label for="">支付公司:</label>
|
<input type="text"
|
disabled
|
v-model="backData.company">
|
</div>
|
</div>
|
<div class="contentItem">
|
<div class="left">
|
<label for="">商户号:</label>
|
<input type="text"
|
disabled
|
v-model="backData.mer">
|
</div>
|
<div class="right">
|
<label for="">交易类型:</label>
|
<input type="text"
|
disabled
|
v-model="backData.transType">
|
</div>
|
</div>
|
<div class="contentItem">
|
<div class="left"
|
disabled>
|
<label for="">支付订单号:</label>
|
<input type="text"
|
disabled
|
v-model="backData.payOrderNum">
|
</div>
|
<div class="right">
|
<label for="">备注:</label>
|
<input type="text"
|
disabled
|
v-model="backData.notes">
|
</div>
|
</div>
|
<div class="other">
|
<div class="remask">
|
<label for="">退款:</label>
|
<input type="text"
|
placeholder="请输入退款金额"
|
@blur="check"
|
v-model.trim="refoundMoney">
|
</div>
|
<div class="remask">
|
<label for="">备注:</label>
|
<input type="text"
|
placeholder="请输入备注内容">
|
</div>
|
</div>
|
<div class="btn">
|
<el-button type="primary"
|
@click="cancel">取消</el-button>
|
</div>
|
</div>
|
|
</div>
|
<!-- </div> -->
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
refoundMoney: "",
|
loading: false,
|
dialogVisible: false,
|
backData: {
|
ovderNum: "",
|
orderMoney: "",
|
sonOrderNum: "",
|
sonOrderMoney: "",
|
time: "",
|
payStatus: "",
|
institution: "",
|
company: "",
|
mer: "",
|
transType: "",
|
payOrderNum: "",
|
notes: ""
|
}
|
};
|
},
|
mounted() {
|
this.getData();
|
},
|
methods: {
|
// 取消按钮
|
cancel() {
|
this.$emit("isCancel");
|
},
|
// 模拟请求数据
|
getData() {
|
const that = this;
|
setTimeout(function () {
|
that.backData = {
|
ovderNum: "423423",
|
ovderMoney: "5654",
|
sonOrderNum: "4234234",
|
sonOrderMoney: "5435",
|
time: "2017-12-3",
|
payStatus: "已处理",
|
institution: "世联大袋",
|
company: "腾讯",
|
mer: "3423432",
|
transType: "三要素",
|
payOrderNum: "4342332",
|
notes: "很好，verygood"
|
};
|
}, 200);
|
},
|
// 检查数据
|
check() {
|
if (!this.refoundMoney || this.refoundMoney === "") {
|
return;
|
}
|
this.refoundMoney = parseFloat(this.refoundMoney);
|
this.backData.sonOrderMoney = parseFloat(this.backData.sonOrderMoney);
|
if (this.refoundMoney > this.backData.sonOrderMoney) {
|
alert("对不起，退款金额不能大于子订单金额，请重新输入");
|
this.refoundMoney = "";
|
} else {
|
// 发送请求
|
console.log("退款成功");
|
}
|
}
|
}
|
};
|
</script>
|
|
|
<style lang="less" scoped>
|
.viewLayer {
|
width: 100%;
|
margin: 30px auto 0px;
|
background-color: #fff;
|
border-radius: 6px;
|
font-size: 14px;
|
.title {
|
background-color: #e4e4e4;
|
height: 56px;
|
line-height: 40px;
|
border-radius: 6px;
|
padding: 6px;
|
font-size: 16px;
|
}
|
.viewContent {
|
padding: 0px 16px;
|
padding-bottom: 20px;
|
.contentItem {
|
width: 100%;
|
height: 56px;
|
padding: 10px 0px;
|
label {
|
display: inline-block;
|
width: 120px;
|
text-align: right;
|
height: 36px;
|
line-height: 56px;
|
}
|
input {
|
width: 240px;
|
height: 36px;
|
outline: none;
|
border-radius: 4px;
|
padding: 0px 8px;
|
border: 1px solid #ccc;
|
}
|
input:disabled {
|
background-color: #fff;
|
}
|
.left {
|
width: 50%;
|
float: left;
|
}
|
.right {
|
width: 50%;
|
float: right;
|
}
|
}
|
.line {
|
width: 100%;
|
height: 1px;
|
background-color: #aaa;
|
margin: 16px 0px;
|
}
|
> h5 {
|
margin: 6px 0px;
|
font-size: 16px;
|
}
|
.btn {
|
width: 70px;
|
margin: 20px auto;
|
}
|
.other {
|
margin-top: 40px;
|
padding-top: 30px;
|
border-top: 1px solid #ccc;
|
.remask {
|
width: 360px;
|
height: 46px;
|
padding: 8px 0px;
|
margin: 0 auto;
|
> label {
|
display: inline-block;
|
width: 70px;
|
text-align: right;
|
height: 100%;
|
line-height: 30px;
|
}
|
> input {
|
display: inline-block;
|
outline: none;
|
border: 1px solid #ccc;
|
width: 280px;
|
height: 30px;
|
border-radius: 4px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
