4 changed files with 599 additions and 9 deletions
@ -0,0 +1,560 @@ |
|||
<!-- 申请售后 --> |
|||
<template> |
|||
<div class="sign"> |
|||
<el-dialog |
|||
:visible="DialogOrderAfterSaleVisible" |
|||
width="60vw" |
|||
:destroy-on-close="true" |
|||
:close-on-click-modal="false" |
|||
:show-close="false" |
|||
custom-class="qddialog" |
|||
top="8vh" |
|||
v-loading="DialogOrderAfterSaleloading" |
|||
> |
|||
<div slot="title" class="title"> |
|||
<span>申请售后</span> |
|||
</div> |
|||
|
|||
<!-- 售后方式--> |
|||
<div class="refund_type_box" v-if="schedule == 1"> |
|||
<ul class="box"> |
|||
<li> |
|||
<input type="radio" name="refundType" v-model="formData.refund_type" value="1"> |
|||
<div class="left"> |
|||
<strong>退货无需退款</strong> |
|||
<span>没收到货,或与卖家写上同意无需要退货只退款</span> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<input type="radio" name="refundType" v-model="formData.refund_type" value="2"> |
|||
<div class="left"> |
|||
<strong>退货退款</strong> |
|||
<span>已收到货,需退还收到的货物</span> |
|||
</div> |
|||
</li> |
|||
<li> |
|||
<input type="radio" name="refundType" v-model="formData.refund_type" value="4"> |
|||
<div class="left"> |
|||
<strong>仅退款</strong> |
|||
<span>仅退款</span> |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
|
|||
<!--商品列表--> |
|||
<div class="goods_box" v-if="schedule == 2"> |
|||
<div class="goods" v-for="(v,k) in orderGoodsList"> |
|||
<div class="left"> |
|||
<input type="checkbox" name="refundType" v-model="selectOrderGoodsIds" :value="v.order_goods_id"> |
|||
<img :src="v.sku_image" alt=""> |
|||
</div> |
|||
<div class="center"> |
|||
<span>{{v.sku_name}}</span> |
|||
</div> |
|||
<div class="checkbox"> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="form_box" v-if="schedule == 3"> |
|||
<el-form ref="form" :model="formData" label-width="120px"> |
|||
<el-form-item label="售后原因"> |
|||
<el-select v-model="formData.region" placeholder="请选择售后原因"> |
|||
<el-option v-for="(v,k) in refund_data.refund_reason_type" :key="k" :label="v" :value="v"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="售后说明"> |
|||
<el-input |
|||
type="textarea" |
|||
:autosize="{ minRows: 2, maxRows: 4}" |
|||
placeholder="请输入售后说明" |
|||
v-model="formData.refund_remark"> |
|||
</el-input> |
|||
</el-form-item> |
|||
|
|||
|
|||
<div class="evaluateForm"> |
|||
<el-form-item label="上传图片" class="evaluateUpload"> |
|||
<UploadImageOss |
|||
@input="uploadSccess($event, 'images')" |
|||
:limit="5" |
|||
:value="evaluateForm.images" |
|||
> |
|||
<template v-slot:upload> |
|||
<div class="upload_BOX"> |
|||
<div class="upload"> |
|||
<img src="~assets/images/downloadIMG.png"/> |
|||
<span>上传照片</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</UploadImageOss> |
|||
</el-form-item> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
|
|||
<span slot="footer" class="dialog-footer"> |
|||
<el-button @click="setSchedule('sub')" size="mini" v-if="schedule > 1">上一步</el-button> |
|||
<el-button @click="setSchedule('add')" size="mini" v-if="schedule < 3">下一步</el-button> |
|||
|
|||
<el-button @click="closr()" size="mini">取消</el-button> |
|||
<el-button v-if="schedule == 3" type="primary" @click="submetForm()" size="mini">提交</el-button> |
|||
</span> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import UploadImageOss from "@/components/uploadImageOss.vue"; |
|||
|
|||
export default { |
|||
//import引入的组件需要注入到对象中才能使用 |
|||
|
|||
components: { |
|||
UploadImageOss, |
|||
}, |
|||
props: { |
|||
DialogOrderAfterSaleVisible: Boolean, |
|||
DialogOrderAfterSaleloading: Boolean, |
|||
dialogOrderAfterSaleData: Object, |
|||
}, |
|||
data() { |
|||
//这里存放数据 |
|||
return { |
|||
schedule:1,//进度|1:展示选择售后方式,2:展示需要售后的商品列表,3:展示表单操作 |
|||
selectOrderGoodsIds:[],//选中的需要售后的商品id |
|||
orderGoodsList:[],//订单商品列表 |
|||
|
|||
//退款信息 |
|||
refund_data:{ |
|||
refund_type: [], |
|||
}, |
|||
|
|||
explanation:'', |
|||
formData:{ |
|||
order_goods_ids:'',//需要售后的商品id|多个值英文,号拼接,如"12,15,18" |
|||
refund_type:'',//售后方式|1=仅退款,2=退款退货(在这个状态进行判断是否付款,没付款就是直接仅退货),4=仅退货不退款 |
|||
refund_reason:'',//售后原因|如:"未按约定时间发货" |
|||
refund_remark:'',//售后说明 |
|||
refund_images:[],//上传图片,数组类型[[https://www.zhiyao.com/upload/a1111.png],[https://www.zhiyao.com/upload/a2222.png]] |
|||
},//表单 |
|||
|
|||
regionArr:[], |
|||
//售后方式各项值列表 |
|||
refundTypeArr:[ |
|||
{ |
|||
name:'退款无需退货', |
|||
val:'1', |
|||
explain:'没收到货,活跃卖家协商同意无需退货只退款', |
|||
}, |
|||
{ |
|||
name:'退货退款', |
|||
val:'2', |
|||
explain:'已收到货,需退还收到的货物', |
|||
}, |
|||
{ |
|||
name:'仅退货无需退款', |
|||
val:'4', |
|||
explain:'仅退货无需退款', |
|||
} |
|||
], |
|||
orderData:{},//订单数据 |
|||
|
|||
evaluateForm: { |
|||
explainGrade: {}, |
|||
content: "", |
|||
images: "", |
|||
}, |
|||
}; |
|||
}, |
|||
//监听属性 类似于data概念 |
|||
computed: {}, |
|||
//监控data中的数据变化 |
|||
watch: { |
|||
dialogOrderAfterSaleData: { |
|||
handler(newVal) { |
|||
console.log('qq1 (watch):', newVal); |
|||
this.orderData = newVal; // 将 dialogOrderAfterSaleData 的值赋给 orderData |
|||
this.getOrderGoodsList()//获取需要售后的商品列表 |
|||
}, |
|||
immediate: true, // 立即执行一次 |
|||
deep: true // 深度监听对象变化 |
|||
} |
|||
}, |
|||
//生命周期 - 创建完成（可以访问当前this实例） |
|||
created() { |
|||
if (this.DialogOrderAfterSaleVisible) { |
|||
|
|||
} |
|||
}, |
|||
|
|||
//生命周期 - 挂载完成（可以访问DOM元素） |
|||
mounted() { |
|||
|
|||
}, |
|||
//方法集合 |
|||
methods: { |
|||
//获取需要退款的数据 |
|||
getRefundData(){ |
|||
|
|||
this.$axios |
|||
.post(`/orderrefund/refundDataBatch`, {order_goods_ids: this.selectOrderGoodsIds.join()}) |
|||
.then((res) => { |
|||
if (res.code == 0) { |
|||
this.refund_data = res.data |
|||
this.formData.order_goods_ids = this.selectOrderGoodsIds.join() |
|||
// console.log('qq22',this.refund_data.refund_reason_type) |
|||
}else{ |
|||
this.$message.error(res.message); |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
this.$message.error(err); |
|||
} |
|||
); |
|||
}, |
|||
//获取需要售后的商品列表 |
|||
getOrderGoodsList(){ |
|||
this.$axios |
|||
.post(`/order/detail`, {order_id: this.orderData.order_id}) |
|||
.then((res) => { |
|||
if (res.code == 0) { |
|||
this.orderData = res.data |
|||
this.orderGoodsList = res.data.order_goods//需要售后的商品列表 |
|||
console.log('1111',this.orderGoodsList) |
|||
}else{ |
|||
this.$message.error(res.message); |
|||
} |
|||
}) |
|||
.catch((err) => { |
|||
this.$message.error(err); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
//设置步骤 |
|||
setSchedule(type){ |
|||
let _schedule |
|||
if (type == 'add') { |
|||
//下一步 |
|||
_schedule = this.schedule + 1 |
|||
if (_schedule >= 3) { |
|||
_schedule = 3 |
|||
} |
|||
} else { |
|||
//上一步 |
|||
_schedule = this.schedule - 1 |
|||
if (_schedule <= 1) { |
|||
_schedule = 1 |
|||
} |
|||
} |
|||
|
|||
switch (_schedule) { |
|||
case 2: |
|||
if (!this.formData.refund_type){ |
|||
this.$message.error('请选择售后方式'); |
|||
return |
|||
} |
|||
break; |
|||
case 3: |
|||
if (this.selectOrderGoodsIds.length <= 0){ |
|||
this.$message.error('请选择需要售后的商品'); |
|||
return |
|||
} |
|||
this.getRefundData() |
|||
break; |
|||
} |
|||
this.schedule = _schedule |
|||
}, |
|||
|
|||
//上传图片 |
|||
uploadSccess(e, key) { |
|||
this.evaluateForm.images = e; |
|||
console.log(e, key); |
|||
}, |
|||
|
|||
//提交 |
|||
submetForm(){ |
|||
console.log('ttt',this.evaluateForm) |
|||
|
|||
this.formData.refund_images = []; |
|||
if(this.evaluateForm.images.length > 0){ |
|||
this.evaluateForm.images.forEach((v,k)=>{ |
|||
this.formData.refund_images[k] = [v] |
|||
}) |
|||
} |
|||
|
|||
this.$axios |
|||
.post(`/orderrefund/refund`, this.formData) |
|||
.then((res) => { |
|||
if (res.code == 0) { |
|||
this.$message.success(res.message); |
|||
setTimeout(() => { |
|||
this.closr(); |
|||
}, 1500); |
|||
}else{ |
|||
this.$message.error(res.message); |
|||
} |
|||
console.log(res.data); |
|||
}) |
|||
.catch((err) => { |
|||
this.$message.error(err); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
//关闭弹窗 |
|||
closr(){ |
|||
this.$emit("closrDialogOrderAfterSale", true); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
::v-deep { |
|||
.el-dialog__header, |
|||
.el-dialog__body, |
|||
.el-dialog__footer { |
|||
padding: 0 30px; |
|||
} |
|||
.el-dialog__header { |
|||
padding-top: 33px; |
|||
} |
|||
.el-dialog__footer { |
|||
padding-bottom: 20px; |
|||
} |
|||
} |
|||
.qddialog { |
|||
padding: 33px 30px 20px; |
|||
|
|||
.title { |
|||
display: flex; |
|||
align-items: center; |
|||
img { |
|||
width: 24px; |
|||
height: 24px; |
|||
margin-right: 11px; |
|||
} |
|||
|
|||
span { |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #222222; |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
.timenum { |
|||
font-size: 30px; |
|||
font-family: DINAlternate-Bold, DINAlternate; |
|||
font-weight: bold; |
|||
color: #ff1449; |
|||
line-height: 35px; |
|||
text-align: center; |
|||
margin: 20px 0 10px; |
|||
} |
|||
.timeText { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #999999; |
|||
text-align: center; |
|||
line-height: 20px; |
|||
} |
|||
.gz { |
|||
p { |
|||
margin: 20px 0 10px; |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #222222; |
|||
line-height: 20px; |
|||
} |
|||
.gztext { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
|
|||
line-height: 22px; |
|||
p { |
|||
color: #999999; |
|||
} |
|||
} |
|||
} |
|||
.jl { |
|||
.qdjl { |
|||
margin: 20px 0 10px; |
|||
|
|||
font-size: 14px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #222222; |
|||
line-height: 20px; |
|||
} |
|||
ul { |
|||
li { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20px; |
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
.img { |
|||
width: 44px; |
|||
height: 44px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
margin-right: 10px; |
|||
// background-color: $--color-primary; |
|||
background: linear-gradient(141deg, #ffac73 0%, #fe6e0b 100%); |
|||
border-radius: 100%; |
|||
img { |
|||
width: 26px; |
|||
height: 26px; |
|||
} |
|||
} |
|||
.cnt { |
|||
height: 44px; |
|||
|
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
.title { |
|||
font-size: 16px; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #222222; |
|||
line-height: 22px; |
|||
letter-spacing: 1px; |
|||
} |
|||
.time { |
|||
font-size: 12px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #999999; |
|||
line-height: 17px; |
|||
} |
|||
} |
|||
} |
|||
.right { |
|||
.big { |
|||
font-size: 20px; |
|||
font-family: DINAlternate-Bold, DINAlternate; |
|||
font-weight: bold; |
|||
color: #585858; |
|||
line-height: 24px; |
|||
} |
|||
.min { |
|||
font-size: 14px; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #585858; |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.goods_box{ |
|||
margin-top: 15px; |
|||
.goods{ |
|||
padding: 8px; |
|||
margin-bottom: 8px; |
|||
border: 1px solid #e5e5e5; |
|||
display: flex; |
|||
align-items: center; |
|||
.left{ |
|||
|
|||
display: flex; |
|||
align-items: center; |
|||
img{ |
|||
margin-left: 10px; |
|||
width: 60px; |
|||
height: 60px; |
|||
object-position: center; |
|||
object-fit: cover; |
|||
} |
|||
} |
|||
.center{ |
|||
margin-left: 10px; |
|||
span{ |
|||
//font-size: 15px; |
|||
} |
|||
} |
|||
.checkbox{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
//第一步,选择售后类型 |
|||
.refund_type_box{ |
|||
margin-top: 15px; |
|||
ul{ |
|||
li{ |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
align-items: center; |
|||
.left{ |
|||
margin-left: 10px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
strong{ |
|||
font-size: 16px; |
|||
} |
|||
span{ |
|||
margin-top: 4px; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
//上传相关 |
|||
.evaluateUpload { |
|||
.el-form-item__content { |
|||
width: 100px; |
|||
border-radius: 4px; |
|||
|
|||
.finish_room { |
|||
margin: 0 auto; |
|||
text-align: center; |
|||
.finish_room2 { |
|||
div { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.upload_BOX { |
|||
width: 152px !important; |
|||
height: 152px !important; |
|||
border-radius: 4px; |
|||
border: 1px solid #dddddd; |
|||
text-align: center; |
|||
|
|||
.upload { |
|||
color: #ccc; |
|||
margin-top: 50px; |
|||
img { |
|||
margin: auto; |
|||
width: 22px; |
|||
height: 20px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue