<template> <div class="return return-refund"> <product-list :list="list" :data="refundData" type="refund"></product-list> <div v-if="refundData.return_amount_info" class="return-amount-info"> {{refundData.return_amount_info}} </div> <div v-else class="return-info-hide-margtin-30"></div> <div class="return-amount"> <!-- TODO:退货信息优化为组件 --> <div class="return-amount-title"> <span class="left"> 退款方式 </span> <span class="right"> <select v-model="amount.return_amount_mode" name="amount-mode"> <option v-for="(mode, index) in refundData.return_amount_mode" :key="index" :value="mode.id">{{mode.name}}</option> </select> <span class="iconfont"></span> </span> </div> <div v-if="amount.return_amount_mode === 2" class="return-amount-item"> <p>银行:<span><input v-model="amount.bank_name" type="text" placeholder="请填写银行名称"></span></p> <p>卡号:<span><input v-model="amount.bank_card" type="text" placeholder="请填写银行卡卡号"></span></p> <p>姓名:<span><input v-model="amount.payee_name" type="text" placeholder="请填写收款人姓名"></span></p> </div> <div v-if="amount.return_amount_mode === 3" class="return-amount-item"> <p>帐号:<span><input v-model="amount.alipay_account" type="text" placeholder="请填写支付宝帐号"></span></p> <p>姓名:<span><input v-model="amount.alipay_name" type="text" placeholder="请填写收款人姓名"></span></p> </div> </div> </div> </template> <script> const $ = require('yoho-jquery'); const qs = require('yoho-qs'); const modal = require('plugin/modal2'); const returnUtil = require('plugin/util'); const productList = require('home/return/list.vue'); const reasonConfig = require('home/return/reason'); const bus = require('plugin/vue-bus'); const loading = require('plugin/loading'); module.exports = { data() { return { page: 'refund', list: [], amount: { return_amount_mode: 0, bank_name: '', bank_card: '', payee_name: '', alipay_account: '', alipay_name: '' }, r: {}, refundData: {}, submitData: {}, processing: false }; }, created() { $.ajax({ url: '/home/return/refund/order', data: { orderCode: qs.orderCode } }).then(res => { if (res.data && res.data.goods_list) { res.data.goods_list.forEach((product, index) => { product.checked = false; product.reason = { id: 0 }; product.imageList = []; product.listIndex = index; }); res.data.return_amount_mode.forEach(mode => { if (mode.is_default === 'Y') { this.amount.return_amount_mode = mode.id; } }); reasonConfig.specialReasons = []; res.data.special_return_reason.forEach(obj => reasonConfig.specialReasons.push(obj.id)); reasonConfig.reasons = [{ id: 0, name: '请选择' }]; reasonConfig.reasons = reasonConfig.reasons.concat(res.data.return_reason); reasonConfig.specialNotice = res.data.special_notice; this.list = res.data.goods_list; this.refundData = res.data; } }); bus.$on('subRefundForm', () => { this.submit(); }); }, watch: { processing(val) { if (val) { loading.showLoading(); } else { loading.hideLoading(); } } }, methods: { checkSubmitData() { let data = this.submitData; if (!data.order_code) { return false; } // 未选择商品 if (this.goods === '[]') { return false; } // 退到银行卡 if (this.amount.return_amount_mode === 2) { if (!this.amount.bank_name || !this.amount.bank_card || !this.amount.payee_name) { return false; } } // 退到支付宝 if (this.amount.return_amount_mode === 3) { if (!this.amount.alipay_account || !this.amount.alipay_name) { return false; } } return true; }, computerSubmitData: function() { let goods = []; this.list.forEach(product => { if (product.checked && product.reason.id) { goods.push({ last_price: product.last_price, remark: product.remark || '', returned_reason: product.reason.id, evidence_images: product.imageList || [], goods_type: product.goods_type_id + '', product_skn: product.product_skn, product_skc: product.product_skc, product_sku: product.product_sku }); } }); if (this.amount.return_amount_mode === 2) { this.amount.alipay_account = ''; this.amount.alipay_name = ''; } else if (this.amount.return_amount_mode === 3) { this.amount.bank_name = ''; this.amount.bank_card = ''; this.amount.payee_name = ''; } return { order_code: qs.orderCode, goods: JSON.stringify(goods), payment: JSON.stringify(this.amount) }; }, submit() { let self = this; this.submitData = this.computerSubmitData(); if (!this.checkSubmitData()) { return modal.alert('', '请填写完整退货信息'); } if (!this.processing) { this.processing = true; $.ajax({ method: 'POST', url: '/home/return/refund/submit', data: this.submitData }).then(result => { this.processing = false; if (result.code === 200) { returnUtil.applySuccuss(this.page, result.data.apply_id); } else { modal.alert(result.message); } }).always(()=>{ self.processing = false; }); } } }, components: { productList } }; </script> <style> @import "home/refund/_return.css"; .main-wrap { background: #f0f0f0; } .return-refund { .return-amount { font-size: 32px; background: #fff; } .return-amount-title { padding: 20px 30px; overflow: hidden; color: #444; .left { float: left; font-size: 34px; } .right, .right select { font-size: 28px; color: #b0b0b0; } .right { float: right; } } .return-amount-info { padding: 20px 30px; font-size: 24px; color: #b0b0b0; } .return-info-hide-margtin-30 { margin-top: 30px; } .return-amount-item { p { border-top: 1px solid #e0e0e0; padding: 20px 30px; } input { border: none; font-size: 26px; } } } </style>