You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
569 lines
14 KiB
569 lines
14 KiB
<!-- 申请售后 -->
|
|
<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>
|
|
<!--只有order.order_status[已发货,已收货]时展示"已发货已收货"-->
|
|
<li v-if="[3,4].includes(orderData.order_status)">
|
|
<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
|
|
|
|
let _refund_goods_data = [];//允许退款的商品
|
|
res.data.order_goods.forEach((v)=>{
|
|
if(v.refund_status == 0){
|
|
_refund_goods_data.push(v)
|
|
}
|
|
})
|
|
this.orderGoodsList = _refund_goods_data//需要售后的商品列表
|
|
|
|
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>
|
|
|