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.
495 lines
15 KiB
495 lines
15 KiB
<template>
|
|
<view :style="colorStyle">
|
|
<view class="topdaohang" @click="goarrow">
|
|
<text class="iconfont icon-ic_leftarrow"></text>
|
|
<text >售后详情</text>
|
|
</view>
|
|
<view class="px-20">
|
|
<view class="flex justify-between mt-24">
|
|
<view class="flex-1 mt-8">
|
|
<view class="fs-36 fw-500 lh-50rpx colorfff">{{orderInfo._status._msg}}</view>
|
|
<view class="w-486 fs-24 text--w111-999 lh-34rpx mt-12">{{orderInfo._status.desc}}</view>
|
|
</view>
|
|
<image :src="orderInfo._status.pic" class="w-172 h-172"></image>
|
|
</view>
|
|
<statusLine :type="orderInfo._status._type" :applyType="orderInfo.apply_type"></statusLine>
|
|
<view class="bgfot rd-16rpx mt-20 pt-32 pl-24 pr-24 pb-32"
|
|
v-if="[2,3].includes(orderInfo.apply_type)">
|
|
<view class="flex-between-center">
|
|
<text class="fs-32 fw-500">商家地址</text>
|
|
<text class="inline-block copy_btn fs-22" @click="copyAddress">复制</text>
|
|
</view>
|
|
<view class="mt-28 fs-28 lh-40rpx">
|
|
<text>{{orderInfo._status.refund_name}}</text>
|
|
<text class="pl-20">{{orderInfo._status.refund_phone}}</text>
|
|
</view>
|
|
<view class="w-full fs-24 lh-34rpx colorhui1 mt-8 line2">{{orderInfo._status.refund_address}}</view>
|
|
</view>
|
|
<view class="bgfot rd-16rpx mt-20 pt-32 pl-24 pr-24 pb-32">
|
|
<view class="flex justify-between order_goods" v-for="(item,index) in cartInfo" :key="index">
|
|
<image class="w-136 h-136 rd-16rpx" :src='item.productInfo.attrInfo.image' v-if="item.productInfo.attrInfo"></image>
|
|
<image class="w-136 h-136 rd-16rpx" :src='item.productInfo.image' v-else></image>
|
|
<view class="flex-1 h-136 pl-20 flex-col justify-between">
|
|
<view class="w-full fs-28 lh-40rpx line2 colorhui1">{{item.productInfo.store_name}}</view>
|
|
<view class="flex-between-center fs-24 lh-34rpx">
|
|
<text class="colorhui1">购买数量: {{item.cart_num}}</text>
|
|
<text class="colorhui1">购买售价：{{item.productInfo.attrInfo ? item.productInfo.attrInfo.price : item.productInfo.price}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bt mt-32 colorhui1">
|
|
<view class="pt-32 flex-between-center fs-28">
|
|
<text>退款原因</text>
|
|
<text>{{orderInfo.refund_reason}}</text>
|
|
</view>
|
|
<view class="pt-32 flex-between-center fs-28">
|
|
<text>退款金额</text>
|
|
<text class="font-color fs-36 Regular">¥{{parseFloat(orderInfo.refunded_price) || orderInfo.refund_price}}</text>
|
|
</view>
|
|
<view class="pt-32 flex-between-center fs-28">
|
|
<text>申请件数</text>
|
|
<text>{{orderInfo.refund_num}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bgfot rd-16rpx mt-20 pt-32 pl-24 pr-24 pb-32 colorhui1">
|
|
<view class="cell flex-between-center">
|
|
<text class="fs-28 colorhui">订单编号</text>
|
|
<view>
|
|
<text class="fs-28 pr-12">{{orderInfo.store_order_sn}}</text>
|
|
<text class="inline-block copy_btn fs-22" @click="copy(orderInfo.store_order_sn)">复制</text>
|
|
</view>
|
|
</view>
|
|
<view class="cell flex-between-center fs-28">
|
|
<text class="colorhui">申请时间</text>
|
|
<text>{{orderInfo._add_time}}</text>
|
|
</view>
|
|
<view class="cell flex-between-center fs-28">
|
|
<text class="colorhui">售后类型</text>
|
|
<text v-if="orderInfo.apply_type == 1">仅退款</text>
|
|
<text v-else-if="[2,3].includes(orderInfo.apply_type)">退货退款</text>
|
|
<text v-else-if="orderInfo.apply_type == 4">商家主动退款</text>
|
|
</view>
|
|
<view class="cell flex-between-center">
|
|
<text class="fs-28 colorhui">售后单号</text>
|
|
<view>
|
|
<text class="fs-28 pr-12">{{orderInfo.order_id}}</text>
|
|
<text class="inline-block copy_btn fs-22" @click="copy(orderInfo.order_id)">复制</text>
|
|
</view>
|
|
</view>
|
|
<view class="bt mt-32">
|
|
<view class="pt-32 flex justify-between fs-28" v-if="orderInfo.remark">
|
|
<text class="colorhui">备注说明</text>
|
|
<view class="w-462 line2 lh-40rpx text-right">{{orderInfo.remark}}</view>
|
|
</view>
|
|
<view class="pt-32 flex justify-between fs-28" v-if="orderInfo.refund_img && orderInfo.refund_img.length">
|
|
<text class="colorhui">售后凭证</text>
|
|
<view class="w-462 flex justify-end" v-if="orderInfo.refund_img.length < 5">
|
|
<view class='pictrue mr-8' v-for="(item,index) in orderInfo.refund_img" :key="index">
|
|
<image class="w-88 h-88 rd-8rpx" :src='item' mode="aspectFill" ></image>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x="true" scroll-with-animation
|
|
class="white-nowrap vertical-middle w-462" show-scrollbar="false" v-else>
|
|
<view class="inline-block mr-12" v-for="(item,index) in orderInfo.refund_img" :key="index">
|
|
<image class="w-88 h-88 rd-8rpx" :src="item"></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="pt-32 flex justify-between fs-28">
|
|
<text class="colorhui">退款方式</text>
|
|
<view class="w-462 line2 lh-40rpx text-right">{{orderInfo.refund_price_type}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bgfot rd-16rpx mt-20 pt-32 pl-24 pr-24 pb-32" v-if="[2,3].includes(orderInfo.apply_type) && orderInfo._status._type== 5">
|
|
<view class="fs-28 fw-500">退货信息</view>
|
|
<view class="bt mt-32">
|
|
<view class="pt-32 flex justify-between fs-28">
|
|
<text>退货方式</text>
|
|
<view class="w-462 line2 lh-40rpx text-right">{{orderInfo.apply_type == 2 ? '快递退回' : '到店退货'}}</view>
|
|
</view>
|
|
<view class="pt-32 flex justify-between fs-28" v-if="orderInfo.apply_type == 2">
|
|
<text>物流公司</text>
|
|
<view class="w-462 line2 lh-40rpx text-right">{{orderInfo.refund_express_name}}</view>
|
|
</view>
|
|
<view class="pt-32 flex justify-between fs-28" v-if="orderInfo.apply_type == 2">
|
|
<text>物流单号</text>
|
|
<view class="w-462 line2 lh-40rpx text-right">{{orderInfo.refund_express}}</view>
|
|
</view>
|
|
<view class="pt-32 flex justify-between fs-28">
|
|
<text>退货说明</text>
|
|
<view class="w-462 line2 lh-40rpx text-right">{{orderInfo.refund_explain}}</view>
|
|
</view>
|
|
<view class="pt-32 flex justify-between fs-28" v-if="orderInfo.refund_goods_img.length">
|
|
<text>售后凭证</text>
|
|
<view class="w-462 flex justify-end" v-if="orderInfo.refund_goods_img.length < 5">
|
|
<view class='pictrue mr-8' v-for="(item,index) in orderInfo.refund_goods_img" :key="index">
|
|
<image :src='item' mode="aspectFill" class="w-88 h-88 rd-8rpx"></image>
|
|
</view>
|
|
</view>
|
|
<scroll-view scroll-x="true" scroll-with-animation
|
|
class="white-nowrap vertical-middle w-462" show-scrollbar="false" v-else>
|
|
<view class="inline-block mr-12" v-for="(item,index) in orderInfo.refund_goods_img" :key="index">
|
|
<image class="w-88 h-88 rd-8rpx" :src="item"></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="pt-32 flex justify-between fs-28">
|
|
<text>联系电话</text>
|
|
<view class="w-462 line2 lh-40rpx text-right">{{orderInfo.refund_phone}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="h-200"></view>
|
|
<view class='fixed-lb bt w-full bgfot pb-safe'>
|
|
<view class="h-96 px-20 flex-y-center justify-end">
|
|
<view class="btn w-144 h-56 rd-30rpx flex-center fs-24 border bgfot"
|
|
v-if="[0,1,2,4,5].includes(orderInfo.refund_type) && orderInfo.is_cancel == 0"
|
|
@tap='cancelRefundOrder'>撤销售后</view>
|
|
<view class="btn w-144 h-56 rd-30rpx flex-center fs-24 colorhui1 bg-color"
|
|
v-if="orderInfo.refund_type == 4 && orderInfo.is_cancel == 0 && orderInfo.apply_type == 2"
|
|
@tap='refundInput'>退回商品</view>
|
|
<view class="btn w-144 h-56 rd-30rpx flex-center fs-24 colorhui1 bg-color"
|
|
v-if="[5,6].includes(orderInfo.refund_type) && orderInfo.apply_type == 2"
|
|
@tap='refundLogistics'>返件信息</view>
|
|
<view class="btn w-144 h-56 rd-30rpx flex-center fs-24 border colorhui1"
|
|
v-if="orderInfo.refund_type == 3 && orderInfo.is_cancel == 0" @click="refundAgain">再次申请</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getRefundOrderDetail,
|
|
orderAgain,
|
|
orderTake,
|
|
cancelRefundOrder,
|
|
orderRefundAgain
|
|
} from '@/api/order.js';
|
|
import { openOrderRefundSubscribe } from '@/utils/SubscribeMessage.js';
|
|
import { getUserInfo } from '@/api/user.js';
|
|
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
|
|
import {toLogin} from '@/libs/login.js';
|
|
import {mapGetters} from "vuex";
|
|
import colors from "@/mixins/color";
|
|
import statusLine from '../components/statusLine/index'
|
|
import { HTTP_REQUEST_URL } from '@/config/app';
|
|
export default {
|
|
components: {
|
|
statusLine,
|
|
},
|
|
mixins: [colors],
|
|
data() {
|
|
return {
|
|
imgHost: HTTP_REQUEST_URL,
|
|
giveData: {
|
|
give_integral: 0,
|
|
give_coupon: []
|
|
},
|
|
giveCartInfo: [],
|
|
config: {
|
|
qrc: {
|
|
code: "",
|
|
size: 360, // 二维码大小
|
|
level: 4, //等级 0～4
|
|
bgColor: '#FFFFFF', //二维码背景色 默认白色
|
|
color: ['#333', '#333'], //边框颜色支持渐变色
|
|
}
|
|
},
|
|
order_id: '',
|
|
evaluate: 0,
|
|
cartInfo: [], //购物车产品
|
|
pid: 0, //上级订单ID
|
|
split: [], //分单商品
|
|
orderInfo: {
|
|
system_store: {},
|
|
_status: {}
|
|
}, //订单详情
|
|
system_store: {},
|
|
isGoodsReturn: false, //是否为退款订单
|
|
status: {}, //订单底部按钮状态
|
|
refund_close: false,
|
|
isClose: false,
|
|
pay_close: false,
|
|
pay_order_id: '',
|
|
totalPrice: '0',
|
|
isAuto: false, //没有授权的不会自动授权
|
|
isShowAuth: false, //是否隐藏授权
|
|
routineContact: 0,
|
|
express_num: '',
|
|
invoice_func: false,
|
|
invoiceData: {},
|
|
invoice_id: 0,
|
|
invChecked: '',
|
|
moreBtn: false,
|
|
invShow: false,
|
|
aleartStatus: false, //发票弹窗
|
|
special_invoice: false,
|
|
invList: [],
|
|
userInfo: {},
|
|
isReturen: '',
|
|
showQrcode:false
|
|
};
|
|
},
|
|
computed: {
|
|
isExpress(){
|
|
if((this.orderInfo.shipping_type === 1 || this.orderInfo.shipping_type === 3) && this.orderInfo.product_type==0){
|
|
return true
|
|
}else{
|
|
return false
|
|
}
|
|
},
|
|
...mapGetters(['isLogin']),
|
|
},
|
|
onLoad: function(options) {
|
|
if (options.order_id) {
|
|
this.$set(this, 'order_id', options.order_id);
|
|
this.isReturen = options.isReturen;
|
|
}
|
|
if (options.invoice_id) {
|
|
this.invoice_id = options.invoice_id
|
|
}
|
|
},
|
|
onShow() {
|
|
uni.removeStorageSync('form_type_cart');
|
|
if (this.isLogin) {
|
|
this.getOrderInfo();
|
|
this.getUserInfo();
|
|
} else {
|
|
toLogin()
|
|
}
|
|
},
|
|
methods: {
|
|
goarrow(){
|
|
uni.navigateBack()
|
|
},
|
|
onLoadFun() {
|
|
this.getOrderInfo();
|
|
this.getUserInfo();
|
|
this.isShowAuth = false
|
|
},
|
|
// 授权关闭
|
|
authColse: function(e) {
|
|
this.isShowAuth = e
|
|
},
|
|
getpreviewImage: function(index, num) {
|
|
uni.previewImage({
|
|
urls: num ? this.orderInfo.refund_img : this.orderInfo.refund_goods_img,
|
|
current: num ? this.orderInfo.refund_img[index] : this.orderInfo.refund_goods_img[index]
|
|
});
|
|
},
|
|
cancelRefundOrder(orderId) {
|
|
let that = this;
|
|
uni.showModal({
|
|
title: '取消申请',
|
|
content: '您确认放弃此次申请吗?',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
cancelRefundOrder(that.order_id).then(res => {
|
|
return that.$util.Tips({
|
|
title: '操作成功',
|
|
icon: 'success'
|
|
}, {
|
|
tab: 4,
|
|
url: '/pages/users/user_return_list/index'
|
|
});
|
|
}).catch(err => {
|
|
return that.$util.Tips({
|
|
title: err
|
|
});
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
refundInput() {
|
|
uni.navigateTo({
|
|
url: `/pages/goods/order_refund_goods/index?orderId=` + this.order_id
|
|
})
|
|
},
|
|
goGoodCall() {
|
|
let url = `/pages/extension/customer_list/chat?orderId=${this.order_id}&isReturen=${this.isReturen}`
|
|
let obj = {
|
|
store_name: this.orderInfo.order_id,
|
|
path: `/pages/goods/order_details/index?order_id=${this.orderInfo.order_id}`,
|
|
image: ''
|
|
}
|
|
this.$util.getCustomer(this.userInfo,url,obj,1)
|
|
},
|
|
/**
|
|
* 事件回调
|
|
*
|
|
*/
|
|
onChangeFun: function(e) {
|
|
let opt = e;
|
|
let action = opt.action || null;
|
|
let value = opt.value != undefined ? opt.value : null;
|
|
(action && this[action]) && this[action](value);
|
|
},
|
|
/**
|
|
* 拨打电话
|
|
*/
|
|
makePhone: function() {
|
|
uni.makePhoneCall({
|
|
phoneNumber: this.system_store.phone
|
|
})
|
|
},
|
|
/**
|
|
* 打开地图
|
|
*
|
|
*/
|
|
showMaoLocation: function() {
|
|
if (!this.system_store.latitude || !this.system_store.longitude) return this.$util.Tips({
|
|
title: '缺少经纬度信息无法查看地图！'
|
|
});
|
|
uni.openLocation({
|
|
latitude: parseFloat(this.system_store.latitude),
|
|
longitude: parseFloat(this.system_store.longitude),
|
|
scale: 8,
|
|
name: this.system_store.name,
|
|
address: this.system_store.address + this.system_store.detailed_address,
|
|
success: function() {
|
|
|
|
},
|
|
});
|
|
},
|
|
/**
|
|
* 获取用户信息
|
|
*
|
|
*/
|
|
getUserInfo: function() {
|
|
let that = this;
|
|
getUserInfo().then(res => {
|
|
that.userInfo = res.data;
|
|
})
|
|
},
|
|
/**
|
|
* 获取订单详细信息
|
|
*
|
|
*/
|
|
getOrderInfo: function() {
|
|
let that = this;
|
|
uni.showLoading({
|
|
title: "正在加载中"
|
|
});
|
|
getRefundOrderDetail(this.order_id).then(res => {
|
|
let _type = res.data._status._type;
|
|
uni.hideLoading();
|
|
that.$set(that, 'orderInfo', res.data);
|
|
let cartInfo = res.data.cartInfo;
|
|
let cartObj = [],giftObj = [];
|
|
cartInfo.forEach(item => {
|
|
if (item.is_gift == 1) {
|
|
giftObj.push(item)
|
|
} else {
|
|
cartObj.push(item)
|
|
}
|
|
})
|
|
that.$set(that, 'cartInfo', cartObj);
|
|
that.$set(that, 'giveCartInfo', giftObj);
|
|
}).catch(err => {
|
|
uni.hideLoading();
|
|
if (err.status == 403) {
|
|
uni.navigateTo({
|
|
url: '/pages/goods/order_list/index'
|
|
})
|
|
} else {
|
|
that.$util.Tips({
|
|
title: err
|
|
}, '/pages/goods/order_list/index');
|
|
}
|
|
});
|
|
},
|
|
copy: function(code) {
|
|
let that = this;
|
|
uni.setClipboardData({
|
|
data: code
|
|
});
|
|
},
|
|
copyAddress() {
|
|
uni.setClipboardData({
|
|
data: this.orderInfo._status.refund_name + this.orderInfo._status.refund_phone + this.orderInfo._status.refund_address
|
|
});
|
|
},
|
|
/**
|
|
* 打电话
|
|
*/
|
|
goTel: function() {
|
|
uni.makePhoneCall({
|
|
phoneNumber: this.orderInfo.delivery_id
|
|
})
|
|
},
|
|
goPage(type, url){
|
|
if(type == 1){
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}else if(type == 2){
|
|
uni.switchTab({
|
|
url
|
|
})
|
|
}else if(type == 3){
|
|
uni.navigateBack();
|
|
}
|
|
|
|
},
|
|
// 返件信息
|
|
refundLogistics(){
|
|
uni.navigateTo({
|
|
url: '/pages/goods/goods_logistics/index?orderId='+ this.order_id + '&type=refund'
|
|
})
|
|
},
|
|
// 再次申请售后
|
|
refundAgain(){
|
|
orderRefundAgain(this.orderInfo.id).then(res=>{
|
|
this.$util.Tips({
|
|
title: res.msg
|
|
}, '/pages/users/user_return_list/index');
|
|
}).catch(err => {
|
|
return this.$util.Tips({
|
|
title: err
|
|
});
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.order_goods ~ .order_goods{
|
|
margin-top: 32rpx;
|
|
}
|
|
.Regular {
|
|
font-family: Regular;
|
|
}
|
|
.copy_btn{
|
|
width: 68rpx;
|
|
height: 36rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 20rpx;
|
|
text-align:center;
|
|
line-height:36rpx;
|
|
color: #080313;
|
|
}
|
|
.btn ~ .btn{
|
|
margin-left: 16rpx;
|
|
}
|
|
.bt{
|
|
border-top:1rpx solid #eee;
|
|
}
|
|
.border{
|
|
border: 1rpx solid #ccc;
|
|
background: #FAAD35;
|
|
color: #080313;
|
|
}
|
|
.border_bt{
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
.cell ~ .cell{
|
|
margin-top: 32rpx;
|
|
}
|
|
</style>
|
|
|