|
|
@@ -0,0 +1,333 @@
|
|
|
+<template>
|
|
|
+<div>
|
|
|
+ <el-drawer :visible.sync="showDtail" size="750px" custom-class="order-draw-wrap" direction="ltr">
|
|
|
+ <div class="order-manage-wrap" v-if="!$util.isEmpty(orderInfo)">
|
|
|
+ <div>
|
|
|
+ <div>
|
|
|
+ <div class="accounts-list">
|
|
|
+ 退款方式
|
|
|
+ <div class="accounts-center">
|
|
|
+ <div v-if="refundType==1">
|
|
|
+ <el-button type="primary" @click="refundType=1">退货并退款</el-button>
|
|
|
+ <el-button @click="refundType=2" style="margin-left:20px;">仅退款</el-button>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-button @click="refundType=1">退货并退款</el-button>
|
|
|
+ <el-button type="primary" @click="refundType=2" style="margin-left:20px;">仅退款</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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">
|
|
|
+ <span class="product-name">{{res.name}}</span>
|
|
|
+ <span class="product-num">{{ `${parseFloat(res.itemNum)}` }}{{res.bigUnit}}</span>
|
|
|
+ <span class="product-price">{{`${parseFloat(res.bigPrice)}`}}元/{{res.bigUnit}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex list-val" style="font-size:18px;font-weight:bold;">
|
|
|
+ <input type="text" placeholder="退货数" v-model="res.refundCount" placeholder-style="color:#CCCCCC" />
|
|
|
+ <span style="margin-left:10px;">{{res.bigUnit}}</span>
|
|
|
+ <span style="color:green;margin-left:20px;">可退{{Number(res.itemNum)-Number(res.refundNum)}}{{res.bigUnit}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="orderInfo.inBooking && orderInfo.inBooking == 1 && !$util.isEmpty(res.sendList)" style="border:1px solid #6795da;font-size:18px;margin:8px 0 5px 0;padding:5px 0 5px 0;">
|
|
|
+ <div v-for="(send,sendIndex) in res.sendList" style="padding:5px 5px 5px 8px;" :key="sendIndex">
|
|
|
+ <div>{{ send.customName }}({{ send.seatSn }})<span style="margin-left:20px;">上架数 {{ send.num }}{{res.bigUnit}}</span></div>
|
|
|
+ <div style="border-bottom:1px solid #77a977;padding-bottom:6px;padding-top:4px;display: flex;align-items: center;margin-top:3px;">
|
|
|
+ <input type="text" placeholder="下架数" v-model="send.currentRefundNum" placeholder-style="color:#CCCCCC" style="border: 2px solid #ddd;width:140px;font-size:18px;text-align:center;margin-right:10px;"/>
|
|
|
+ <span style="margin-left:10px;">可下架{{parseFloat((Number(send.num)-Number(send.outNum)).toFixed(2))}}{{res.bigUnit}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="accounts-list">
|
|
|
+ 订单金额
|
|
|
+ <div class="accounts-center">
|
|
|
+ ￥{{parseFloat(orderInfo.orderPrice)||0}}
|
|
|
+ <span style="margin-left:15px;font-size:18px;color:green;font-weight:bold;" v-if="Number(orderInfo.tkPrice)>0">已退￥{{orderInfo.tkPrice ? parseFloat(orderInfo.tkPrice) : 0}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="accounts-list">
|
|
|
+ 可退金额
|
|
|
+ <div class="accounts-center">￥{{ couldRefundPrice }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="accounts-list">
|
|
|
+ 预计退款
|
|
|
+ <div class="accounts-center">￥{{refundPrice}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="accounts-list">
|
|
|
+ 实际退款
|
|
|
+ <div class="accounts-center">
|
|
|
+ <el-input v-model="refundMoney" placeholder="输入金额" style="width:120px;"></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="accounts-list">
|
|
|
+ 备注内容
|
|
|
+ <div class="accounts-center">
|
|
|
+ <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="remark"> </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left:80px;margin-top:20px;">
|
|
|
+ <el-button @click="closeOpen" style="margin-left:120px;">取消</el-button>
|
|
|
+ <el-popconfirm title="确认退款？" @confirm="confirmRefund()" @onConfirm="confirmRefund()" style="margin-left:180px;">
|
|
|
+ <el-button type="primary" slot="reference">确认</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'begin-refund',
|
|
|
+ props: {
|
|
|
+ currentRefundData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showDtail: false,
|
|
|
+ loading:true,
|
|
|
+ product:[],
|
|
|
+ refundMoney:0,
|
|
|
+ refundType:1,
|
|
|
+ remark:'',
|
|
|
+ orderInfo:{},
|
|
|
+ couldRefundPrice:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ refundPrice(){
|
|
|
+ let price = 0
|
|
|
+ if(this.product){
|
|
|
+ for (const item of this.product) {
|
|
|
+ if(Number(item.refundCount)>0){
|
|
|
+ let currentPrice = Number(item.refundCount)*Number(item.bigPrice)
|
|
|
+ currentPrice.toFixed(2)
|
|
|
+ price = Number(price) + Number(currentPrice)
|
|
|
+ price.toFixed(2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ price = parseFloat(price.toFixed(2))
|
|
|
+ this.refundMoney = price
|
|
|
+ return price
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ confirmRefund(){
|
|
|
+ let hasError = false
|
|
|
+ let product = []
|
|
|
+ let that = this
|
|
|
+ let sendData = null
|
|
|
+ this.product.forEach(ele=>{
|
|
|
+ let currentRefundCont = ele.refundCount ? Number(ele.refundCount) :0
|
|
|
+ let currentNum = ele.itemNum ? Number(ele.itemNum) : 0
|
|
|
+ let hasRefundNum = ele.refundNum ? Number(ele.refundNum) : 0
|
|
|
+ let couldRefundNum = Number(currentNum) - Number(hasRefundNum)
|
|
|
+ if(Number(currentRefundCont) > Number(couldRefundNum)){
|
|
|
+ uni.showToast({title:ele.name+'超过可退数量',icon:'none'})
|
|
|
+ hasError = true;
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ //货位的售后和下架
|
|
|
+ sendData = []
|
|
|
+ if(!this.$util.isEmpty(ele.sendList)){
|
|
|
+ ele.sendList.forEach(sendele=>{
|
|
|
+ if(sendele.currentRefundNum && parseFloat(sendele.currentRefundNum)>0){
|
|
|
+ sendData.push({id:sendele.id,refundNum:sendele.currentRefundNum})
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if(Number(ele.refundCount)>0){
|
|
|
+ product.push({
|
|
|
+ productId:ele.productId,
|
|
|
+ num:ele.refundCount,
|
|
|
+ unitType:0,
|
|
|
+ unitName:ele.bigUnit,
|
|
|
+ unitPrice:ele.bigPrice,
|
|
|
+ sendRefund:sendData
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if(hasError){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.$util.isEmpty(product)&&this.refundType==1){
|
|
|
+ uni.showToast({title:'请选择花材',icon:'none'})
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let refundParams = {
|
|
|
+ id:this.orderInfo.id,
|
|
|
+ product:JSON.stringify(product),
|
|
|
+ price:this.refundMoney,
|
|
|
+ remark:this.remark,
|
|
|
+ refundType:this.refundType
|
|
|
+ };
|
|
|
+ this.$service.cgRefund.createOrder(refundParams).then(data => {
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ this.closeOpen()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+
|
|
|
+ this.product = []
|
|
|
+ this.refundMoney = 0
|
|
|
+ this.refundType = 1
|
|
|
+ this.remark = '',
|
|
|
+ this.orderInfo = {}
|
|
|
+ this.couldRefundPrice = 0
|
|
|
+
|
|
|
+ this.showDtail = true
|
|
|
+ this.$service.purchaseOrder.detail({orderSn:this.currentRefundData.orderSn}).then(data => {
|
|
|
+ this.orderInfo = data
|
|
|
+
|
|
|
+ this.couldRefundPrice = Number(data.orderPrice) - Number(data.tkPrice)
|
|
|
+ this.couldRefundPrice = this.couldRefundPrice.toFixed(2)
|
|
|
+ this.couldRefundPrice = parseFloat(this.couldRefundPrice)
|
|
|
+
|
|
|
+ this.product = data.itemInfo.map(ele=>{
|
|
|
+ return {...ele,refundCount:null}
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ closeOpen() {
|
|
|
+ this.showDtail = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.order-draw-wrap {
|
|
|
+ .el-drawer__header {
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+ .el-table__header-wrapper {
|
|
|
+ .el-table__header tr,
|
|
|
+ .el-table__header th {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.order-draw-wrap {
|
|
|
+ .title-status-wrap {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ .title-text {
|
|
|
+ margin-right: 200px;
|
|
|
+ }
|
|
|
+ .title-status {
|
|
|
+ color: red;
|
|
|
+ &.success {
|
|
|
+ color: green;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.order-manage-wrap {
|
|
|
+ height: calc(100vh - 64px);
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ .accounts-list{
|
|
|
+ width: 80%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ .accounts-center{
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.card-wrap {
|
|
|
+ margin: 20px;
|
|
|
+ .card-tit {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .card-body {
|
|
|
+ border: 1px solid $borderColor;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .el-input__inner {
|
|
|
+ padding:0;
|
|
|
+ text-align:center;
|
|
|
+}
|
|
|
+.stock-red{
|
|
|
+ color:red;
|
|
|
+ font-weight:bold;
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ border:2px solid red;
|
|
|
+ }
|
|
|
+}
|
|
|
+.cost-blue{
|
|
|
+ color:blue;
|
|
|
+ font-weight:bold;
|
|
|
+ ::v-deep .el-input__inner {
|
|
|
+ border:2px solid blue;
|
|
|
+ }
|
|
|
+}
|
|
|
+.refund-item-list{
|
|
|
+ display: flex;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ padding-top: 30px;
|
|
|
+ .refund-label{
|
|
|
+ width: 200px;
|
|
|
+ color:black;
|
|
|
+ font-size:16px;
|
|
|
+ text-align:center;
|
|
|
+ }
|
|
|
+ .list{
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .list-title{
|
|
|
+ height: 20px;
|
|
|
+ padding-bottom:20px;
|
|
|
+ font-size:18px;
|
|
|
+ font-weight:bold;
|
|
|
+ .product-name{
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ width:160px;
|
|
|
+ height:30px;
|
|
|
+ }
|
|
|
+ .product-price{
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ width:130px;
|
|
|
+ margin-left:0px;
|
|
|
+ height:30px;
|
|
|
+ }
|
|
|
+ .product-num{
|
|
|
+ width:90px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-left:0px;
|
|
|
+ height:30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-val{
|
|
|
+ input{
|
|
|
+ width:150px;
|
|
|
+ height:28px;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
