|
|
@@ -9,11 +9,38 @@
|
|
|
</template>
|
|
|
|
|
|
<template #slot-column-option="{scope}">
|
|
|
- <el-button @click.stop="confirmLoan(scope.row)" size="medium" type="primary">明细</el-button>
|
|
|
+ <el-button @click.stop="getDetail(scope.row)" size="medium" type="primary">明细</el-button>
|
|
|
</template>
|
|
|
</x-crud>
|
|
|
</div>
|
|
|
|
|
|
+ <div class="app-content" v-if="!$util.isEmpty(refundInfo)">
|
|
|
+ <div class="flex refund-item">
|
|
|
+ <div class="refund-label">退款方式：</div>
|
|
|
+ <div class="flex list">
|
|
|
+ <div class="flex" >{{refundType==1?'退货并退款':'只退款'}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="refund-item-list" v-if="refundType==1">
|
|
|
+ <div class="refund-label">退货商品：</div>
|
|
|
+ <div>
|
|
|
+ <div class="list" v-for="(res,i) in product" :key="i">
|
|
|
+ <div class="flex list-title" >
|
|
|
+ {{res.name}} ￥{{res.unitPrice?parseFloat(res.unitPrice):0}}*{{res.num}}{{res.unitName}}=￥{{parseFloat(res.price)}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flex refund-item">
|
|
|
+ <div class="refund-label">退款金额：</div>
|
|
|
+ <div class="list">￥{{refundPrice}}</div>
|
|
|
+ </div>
|
|
|
+ <div class=" refund-item" v-if="!$util.isEmpty(remark)">
|
|
|
+ <div class="refund-label" style="color:red;font-weight:bold;">备注信息：</div>
|
|
|
+ <div class="list" style="color:red;font-weight:bold;">{{remark}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -28,10 +55,24 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- showArea: false
|
|
|
+ showArea: false,
|
|
|
+ product:'',
|
|
|
+ refundPrice:0,
|
|
|
+ refundType:1,
|
|
|
+ remark:'',
|
|
|
+ refundInfo:{}
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ getDetail(info){
|
|
|
+ this.$service.cgRefund.getRefundFullInfo({ id: info.id }).then(data => {
|
|
|
+ this.refundInfo = data
|
|
|
+ this.product = data.itemList||[];
|
|
|
+ this.refundType = data.info.refundType||0;
|
|
|
+ this.refundPrice = data.info.refundPrice?parseFloat(data.info.refundPrice):0
|
|
|
+ this.remark = data.info.remark?data.info.remark:''
|
|
|
+ })
|
|
|
+ },
|
|
|
init() {
|
|
|
this.showArea = true
|
|
|
if(this.app){
|
|
|
@@ -97,4 +138,79 @@ export default {
|
|
|
.drawer-class{
|
|
|
height:100vh;
|
|
|
}
|
|
|
+.app-content{
|
|
|
+ height: calc(100vh - 30px * 2);
|
|
|
+ padding: 30px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ .radioBtn{
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ margin-right: 10px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 50%;
|
|
|
+ &.active{
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid #3385ff;
|
|
|
+ &:after{
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ background: #3385ff;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .refund-item-list{
|
|
|
+ display: flex;
|
|
|
+ padding-bottom:0px;
|
|
|
+ .refund-label{
|
|
|
+ width:100px;
|
|
|
+ }
|
|
|
+ .list{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .list-title{
|
|
|
+ height: 0px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+ .list-val{
|
|
|
+ input{
|
|
|
+ width: 150px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ }
|
|
|
+ text{
|
|
|
+ padding: 0 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .refund-item{
|
|
|
+ display: flex;
|
|
|
+ padding: 20px 0;
|
|
|
+ .refund-label{
|
|
|
+ width:100px;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ }
|
|
|
+ textarea{
|
|
|
+ width: calc(100% - 210px);
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ height:150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-box{
|
|
|
+ .btn{
|
|
|
+ width: 200px;
|
|
|
+ height: 60px;
|
|
|
+ border: 1px solid #666666;
|
|
|
+ border-radius: 10px;
|
|
|
+ &.active{
|
|
|
+ background: #3385ff;
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid #3385ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
