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.
355 lines
10 KiB
355 lines
10 KiB
<template>
|
|
<div class="orderList">
|
|
<div class="head">
|
|
<div style="flex:4;padding-left:20px;">
|
|
<span style="flex:2;">{{ $t('common.beautiproduct') }}</span>
|
|
<span style="flex:1;">单价</span>
|
|
<span style="flex:1;">数量</span>
|
|
</div>
|
|
<div style="flex:4;padding-right:20px;">
|
|
<span style="flex:1;">退款金额</span>
|
|
<span style="flex:1;">申请时间</span>
|
|
<span style="flex:1;">状态</span>
|
|
<span style="flex:1;">操作</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="afterSaleList.length>0">
|
|
<div class="content" v-for="(item,index) in afterSaleList" :key="index">
|
|
<div class="top">
|
|
<div class="left">
|
|
<span class="shopName" @click="toStore(item.shopId)"><img :src="item.shopLogo" alt="">{{item.shopName}}</span>
|
|
<span class="orderCode">售后编号：{{item.afterFormid}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="productBox">
|
|
<div class="product">
|
|
<div class="left fs13">
|
|
<div class="box" v-for="(pro,inx) in item.skus" :key="inx">
|
|
<div class="desc cur-poi" @click="toProductDetail(pro,item.shopId)">
|
|
<img :src="pro.image" alt="">
|
|
<div>
|
|
<p class="name">{{pro.productName}}</p>
|
|
<p class="size font-color-999"><span v-for="(val,idx) in pro.values" :key="idx">{{val}}</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="price">¥{{pro.price}}</div>
|
|
<div class="num">{{pro.number}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="right" :class="item.skus.length>1?'right_line':''">
|
|
<div class="actualPay">
|
|
<div>
|
|
<p class="fs13 mar-bot-5">¥{{item.price}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="applicationTime">{{item.createTime}}</div>
|
|
<div class="status">
|
|
<div>
|
|
<p class="fs13 mar-bot-5" v-if="item.afterState==1">审核中</p>
|
|
<p class="fs13 mar-bot-5" v-if="item.afterState==2">退款中</p>
|
|
<p class="fs13 mar-bot-5" v-if="item.afterState==3">退货中</p>
|
|
<p class="fs13 mar-bot-5" v-if="item.afterState==4">退款成功</p>
|
|
<p class="fs13 mar-bot-5" v-if="item.afterState==5">退款失败</p>
|
|
<p class="fs13 mar-bot-5" v-if="item.afterState==6">审核不通过</p>
|
|
<p class="fs13 mar-bot-5" v-if="item.afterState==7">评审中</p>
|
|
<p class="fs13 mar-bot-5 font-color-999" v-if="item.afterState==8">退货完成，拒绝退款</p>
|
|
<p class="fs13 mar-bot-5 font-color-999" v-if="item.afterState==9">已关闭</p>
|
|
<p class="fs13 mar-bot-5 font-color-71B" v-if="item.afterState==10">审核通过</p>
|
|
</div>
|
|
</div>
|
|
<div class="operate">
|
|
<el-button size="small"
|
|
@click="toAfterSaleDetail(item.afterId,item.orderId)"
|
|
>售后详情</el-button>
|
|
<p class="fs13 tex-und cur-poi mar-top-10"
|
|
@click="platform(item.afterId,item.orderId)"
|
|
v-if="item.afterState==6 || item.afterState==8"
|
|
v-throttle
|
|
>申请平台介入</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-pagination
|
|
:current-page="page"
|
|
:page-size="5"
|
|
:total='total'
|
|
@current-change="handleCurrentChange"
|
|
background
|
|
layout='prev, pager, next'
|
|
></el-pagination>
|
|
</div>
|
|
<div class="noorder" v-else>
|
|
<icon-svg style="width: 240px; height: 240px; margin-bottom: 20px;" icon-class="user-order-nodata" />
|
|
<p class="fs20 font-color-999">你还没有售后订单哦～</p>
|
|
</div>
|
|
<el-dialog
|
|
title="申请平台介入"
|
|
:visible.sync="interventionShow"
|
|
width="25%"
|
|
center
|
|
>
|
|
<el-input
|
|
type="textarea"
|
|
:rows="7"
|
|
placeholder="请输入内容"
|
|
v-model="reason">
|
|
</el-input>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="interventionFn">确 定</el-button>
|
|
<el-button @click="closeIntervention">取 消</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
requestPlatform
|
|
} from '@/api/user/afterSale.js'
|
|
export default {
|
|
props: ['afterSaleList', 'page', 'total'],
|
|
data () {
|
|
return {
|
|
state: 1,
|
|
reason: '',
|
|
images: '',
|
|
interventionShow: false,
|
|
afterId: '',
|
|
orderId: ''
|
|
}
|
|
},
|
|
methods: {
|
|
// 分页器跳转
|
|
handleCurrentChange (val) {
|
|
this.$emit('handleCurrentChange', val)
|
|
},
|
|
// 跳转到店铺
|
|
toStore (id) {
|
|
this.$router.push({
|
|
path: '/store',
|
|
query: {
|
|
shopData: {shopId: id}
|
|
}
|
|
})
|
|
},
|
|
// 跳转到售后详情
|
|
toAfterSaleDetail (aid, oid) {
|
|
this.$router.push({
|
|
path: '/orderDetail',
|
|
query: {
|
|
afterId: aid, // 售后id
|
|
orderId: oid, // 订单id
|
|
type: 3
|
|
}
|
|
})
|
|
},
|
|
// 平台介入
|
|
platform (afterId, orderId) {
|
|
this.afterId = afterId
|
|
this.orderId = orderId
|
|
this.interventionShow = true
|
|
},
|
|
// 跳转到商品详情
|
|
toProductDetail (item, id) {
|
|
let data = {
|
|
productId: item.productId,
|
|
skuId: item.skuId,
|
|
shopId: id
|
|
}
|
|
this.$router.push({
|
|
path: '/productDetail',
|
|
query: {
|
|
proData: JSON.stringify(data)
|
|
}
|
|
})
|
|
},
|
|
closeIntervention () {
|
|
this.afterId = ''
|
|
this.orderId = ''
|
|
this.reason = ''
|
|
this.interventionShow = false
|
|
},
|
|
// 申请平台介入
|
|
async interventionFn () {
|
|
const response = await requestPlatform({
|
|
afterId: this.afterId,
|
|
orderId: this.orderId,
|
|
image: this.images,
|
|
reason: this.reason
|
|
})
|
|
const res = response.data
|
|
if (res.code === '200') {
|
|
this.$message.success('申请平台介入成功')
|
|
this.interventionShow = false
|
|
} else {
|
|
this.$message.warning(res.message)
|
|
this.interventionShow = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.orderList{
|
|
width: 100%;
|
|
.noorder{
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 100px 0;
|
|
p{
|
|
margin-bottom: 20px;
|
|
}
|
|
.el-button{
|
|
background-color: $mainColor;
|
|
color: $mainBtnFontColor;
|
|
font-weight: normal;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
.head{
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 44px;
|
|
background-color: #F1F2F7;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
div{
|
|
display: flex;
|
|
}
|
|
}
|
|
.content{
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
border: 1px solid #E5E5E5;
|
|
border-bottom: 0;
|
|
box-sizing: border-box;
|
|
.top{
|
|
width: 100%;
|
|
font-size: 13px;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #F3F3F3;
|
|
.left{
|
|
display: flex;
|
|
.shopName{
|
|
margin-left: 20px;
|
|
margin-right: 60px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
img{
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: middle;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.time{
|
|
margin-right: 60px;
|
|
}
|
|
}
|
|
}
|
|
.productBox{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
.product{
|
|
width: 100%;
|
|
display: flex;
|
|
.left{
|
|
flex: 4;
|
|
.box{
|
|
padding: 20px 0 20px 20px;
|
|
display: flex;
|
|
border-bottom: 1px solid #E5E5E5;
|
|
.desc{
|
|
flex: 2;
|
|
display: flex;
|
|
img{
|
|
width: 86px;
|
|
height: 86px;
|
|
margin-right: 10px;
|
|
}
|
|
div{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.name{
|
|
font-size: 14px;
|
|
}
|
|
.size{
|
|
font-size: 13px;
|
|
span{
|
|
margin-right: 10px;
|
|
}
|
|
span:last-child{
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.price,.num{
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
}
|
|
.right{
|
|
padding: 20px 20px 20px 0;
|
|
flex: 4;
|
|
display: flex;
|
|
border-bottom: 1px solid #E5E5E5;
|
|
.actualPay,.applicationTime,.status,.operate{
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
div{
|
|
text-align: center;
|
|
}
|
|
.el-button{
|
|
border: 1px solid $mainGlod;
|
|
color: $mainGlod;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
.status{
|
|
p{
|
|
color: #C83732;
|
|
}
|
|
}
|
|
.operate{
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.right_line{
|
|
border-left: 1px solid #E5E5E5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
>>>.el-pagination{
|
|
margin-top: 40px;
|
|
text-align: right;
|
|
.el-pager{
|
|
li:not(.disabled):hover{
|
|
color: $mainGlod;
|
|
}
|
|
li:not(.disabled).active{
|
|
background-color: $mainGlod;
|
|
}
|
|
li:not(.disabled).active:hover{
|
|
color: #F4F4F5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|