441 lines
13 KiB
Vue
441 lines
13 KiB
Vue
<template>
|
||
<!-- 售后进度 页面 -->
|
||
<view class="content bg_F2F2F2">
|
||
<HeaderTop page_title='售后进度'></HeaderTop>
|
||
<!-- 商家正在处理中 -->
|
||
<view v-if="serviceInfo.status == 1" class="banner x-text-white margin-bottom22 banner3">
|
||
<view class="font-weight is_state">商家正在处理中</view>
|
||
<view class="state_txt padding-zy64">您已成功提交售后申请，请耐心等待</view>
|
||
</view>
|
||
<!-- 申请已通过 -->
|
||
<view v-if="serviceInfo.status == 2 || serviceInfo.status == 3" class="banner x-text-white margin-bottom22 banner4">
|
||
<view class="font-weight is_state">申请已通过</view>
|
||
<view class="state_txt padding-zy64">申请已通过，请填写信息</view>
|
||
</view>
|
||
|
||
<!-- 申请已拒绝 -->
|
||
<view v-if="serviceInfo.status == 4" class="banner x-text-white margin-bottom22 banner4">
|
||
<view class="font-weight is_state">申请已拒绝</view>
|
||
<view class="state_txt padding-zy64">申请已通过，请填写信息</view>
|
||
</view>
|
||
|
||
<!-- 已提交物流 -->
|
||
<view v-if="serviceInfo.status == 5" class="banner x-text-white margin-bottom22 banner4">
|
||
<view class="font-weight is_state">等待客服确认收货</view>
|
||
<view class="state_txt padding-zy64">您的退货已经在运送途中，请耐心等待</view>
|
||
</view>
|
||
|
||
<!-- 财务待退款 -->
|
||
<view v-if="serviceInfo.status == 6" class="banner x-text-white margin-bottom22 banner4">
|
||
<view class="font-weight is_state">等待财务退款</view>
|
||
<view class="state_txt padding-zy64">您已售后申请已经通过，请耐心等待财务退款</view>
|
||
</view>
|
||
|
||
<!-- 售后完成 -->
|
||
<view v-if="serviceInfo.status == 7" class="banner x-text-white margin-bottom22 banner4">
|
||
<view class="font-weight is_state">已完成</view>
|
||
<view class="state_txt padding-zy64">此售后已经完成</view>
|
||
</view>
|
||
|
||
|
||
|
||
<view class="x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||
<view class="d-flex j-sb">
|
||
<view>退款订单详情</view>
|
||
<view class="margin-zy20">2020202020202</view>
|
||
</view>
|
||
<view class="d-flex goods_items a-center w-100">
|
||
<view class="box_img">
|
||
<image src="../../static/1000.jpg" mode="" class="h-100 w-100"></image>
|
||
</view>
|
||
<view class="goods_txt flex-1 padding-zy30">
|
||
<view class="font-weight">盐酸二甲双胍缓释片</view>
|
||
<view class="">中国药科大学制药有限公司</view>
|
||
<view class="">50mg*20s 整</view>
|
||
<view class="d-flex j-sb">
|
||
<view class="x-text-159">￥ 4.00</view>
|
||
<view class="">X 4</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="serviceInfo.status == 2" class="d-flex a-center x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||
<view class="" style="width:40%">商家处理详情</view>
|
||
<view class="flex-1">
|
||
<view>商家同意退货申请，等待您退货</view>
|
||
<view class="x-text-159 font-20 info">为了不影响商品二次销售，请在2020-0
|
||
4-25 00:00:00前寄回该商品，逾期未退
|
||
货，退款申请将超时关闭。
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="serviceInfo.status > 0 && serviceInfo.status < 99" class="x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||
<view class="">退货详情</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%;">申请类型 : </view>
|
||
<view class="flex-1">{{serviceInfo.type_text}}</view>
|
||
</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%;">原因 : </view>
|
||
<view class="flex-1">{{serviceInfo.reason_text}}</view>
|
||
</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%;">退款金额 : </view>
|
||
<view class="flex-1">{{serviceInfo.refund_price}}</view>
|
||
</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%;">退款说明 : </view>
|
||
<view class="flex-1">{{serviceInfo.refund_content}}</view>
|
||
</view>
|
||
<view class="d-flex" v-if="serviceInfo.img">
|
||
<view class="select_txt" style="width:30%;">上传图片</view>
|
||
<image src="../../static/1000.jpg" mode="" class="updata_img"></image>
|
||
</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%;">申请日期 : </view>
|
||
<view class="flex-1">2020-02-02 15:02:32</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="serviceInfo.status == 3" class="d-flex a-center x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||
<view class="" style="width:40%">商家处理详情</view>
|
||
<view class="flex-1">
|
||
<view>商家同意退款申请，等待客服处理</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="serviceInfo.status == 2" class="x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||
<view class="">退货信息</view>
|
||
<view class="">
|
||
<view>退货地址 : 安徽省合肥市瑶海区大虾村 售后部</view>
|
||
<view>联系电话 : 133****3343</view>
|
||
<view class="d-flex j-sb refund_form">
|
||
<view class="select_txt"><text class="x-text-159">*</text>物流公司</view>
|
||
<view class="h-100 select_input">
|
||
<view class="selection-component">
|
||
<view class="selection-show padding-zy30 d-flex j-sb a-center" @click="toggleDrop()">
|
||
<text>{{the_Logistics_company}}</text>
|
||
<image src="../../static/my/shang.png" mode="" style="height:12upx; width:13upx;" v-if="isLogistics_company==true"></image>
|
||
<image src="../../static/my/xia.png" mode="" style="height:12upx; width:13upx;" v-if="isLogistics_company==false"></image>
|
||
</view>
|
||
<view class="selection-list x-bg-white padding-zy30" v-if="isLogistics_company==true">
|
||
<view>
|
||
<view v-for="(item, index) in logistics_company" :key="index" @click="chooseLogistics_company(index)">{{ item.label }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="d-flex j-sb refund_form margin-shu20">
|
||
<view class="select_txt"><text class="x-text-159">*</text>物流单号</view>
|
||
<view class="" style="width:70%;">
|
||
<input type="number" value="" v-model="express_sn" placeholder="请输入物流单号" class="h-100" style="border:1upx solid #C3C3C3;" />
|
||
</view>
|
||
</view>
|
||
<view class="d-flex j-sb">
|
||
<view class="select_txt">备注</view>
|
||
<view class="flex-1" style="border:1upx solid #C3C3C3; margin: 0 0 0 30px;">
|
||
<textarea value="" v-model="express_remarks" placeholder="备注" placeholder-style="color:#989898" class="padding-sx30 remarks" @blur="bindTextAreaBlur" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-if="serviceInfo.status == 5 && serviceInfo.express_sn" class="x_margin0auto w-90 padding-30 x-bg-white my_order margin-bottom22">
|
||
<view class="">快递详情</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%;">物流公司 : </view>
|
||
<view class="flex-1">{{serviceInfo.express}}</view>
|
||
</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%;">物流单号 : </view>
|
||
<view class="flex-1">{{serviceInfo.express_sn}}</view>
|
||
</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%;">备注 : </view>
|
||
<view class="flex-1">{{serviceInfo.express_remarks}}</view>
|
||
</view>
|
||
<view class="d-flex">
|
||
<view class="" style="width:30%;">申请日期 : </view>
|
||
<view class="flex-1">{{serviceInfo.create_time}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="d-flex bottom-0 right-0 w-100">
|
||
<view v-if="serviceInfo.status == 2" class="flex-1 main-bg-color text-white font-md py-2 text-center btn3"
|
||
hover-class="main-bg-hover-color" @click="submitExpress()">提交物流</view>
|
||
<view v-if="serviceInfo.status < 7" class="flex-1 main-bg-color bg-danger text-white font-md py-2 text-center btn3"
|
||
hover-class="main-bg-hover-color" @click="cancel()">撤销申请</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import uniCombox from "../../components/uni-combox/uni-combox/uni-combox.vue"
|
||
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
|
||
import service from '../../utils/models/service.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
id:'',
|
||
index:'',
|
||
express:0,
|
||
express_sn:'',
|
||
express_remarks:'',
|
||
// 物流公司
|
||
the_Logistics_company:'请选择', //当前的物流公司名称
|
||
isLogistics_company: false,
|
||
logistics_company_index: 0,
|
||
logistics_company:[{
|
||
value: '1',
|
||
label: '物流公司1'
|
||
},{
|
||
value: '2',
|
||
label: '物流公司2'
|
||
},{
|
||
value: '3',
|
||
label: '物流公司3'
|
||
},{
|
||
value: '4',
|
||
label: '物流公司4'
|
||
}],
|
||
serviceInfo:{
|
||
status:0
|
||
}
|
||
}
|
||
},
|
||
comments: {
|
||
HeaderTop
|
||
},
|
||
components: {uniCombox},
|
||
methods: {
|
||
// 物流公司
|
||
chooseLogistics_company (index) {
|
||
this.logistics_company_index = index
|
||
this.isLogistics_company = false
|
||
this.the_Logistics_company = this.logistics_company[index].label
|
||
this.express = this.logistics_company[index].label
|
||
},
|
||
// toggle 物流公司
|
||
toggleDrop () {
|
||
this.isLogistics_company = !this.isLogistics_company
|
||
},
|
||
bindTextAreaBlur: function (e) {
|
||
|
||
|
||
},
|
||
async getInfo() {
|
||
let data = await service.getInfo(this.id)
|
||
this.serviceInfo = data.data
|
||
|
||
this.handleError(data, res => {
|
||
|
||
})
|
||
},
|
||
submitExpress() {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定操作',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
|
||
that.doSubmitExpress()
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
async doSubmitExpress() {
|
||
let parames = {
|
||
id:this.id,
|
||
express:this.express,
|
||
express_sn:this.express_sn,
|
||
express_sn:this.express_remarks
|
||
}
|
||
|
||
let data = await service.express(parames)
|
||
if(data.code == 200){
|
||
uni.redirectTo({
|
||
url:'../refund/refund_details?id='+data.data.service_id
|
||
})
|
||
}
|
||
this.handleError(data, res => {
|
||
|
||
})
|
||
},
|
||
cancel() {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定操作',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
|
||
that.doCancel()
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
});
|
||
},
|
||
async doCancel() {
|
||
let parames = {
|
||
id:this.id
|
||
}
|
||
|
||
let data = await service.cancel(parames)
|
||
if(data.code == 200){
|
||
let pages = getCurrentPages(); //获取所有页面栈实例列表
|
||
let prevPage = pages[ pages.length - 2 ]; //上一页页面实例
|
||
prevPage.$vm.index = this.index; //修改上一页data里面的couponNumber参数值为value
|
||
prevPage.$vm.status_text = data.data.status_text;
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}
|
||
this.handleError(data, res => {
|
||
|
||
})
|
||
},
|
||
},
|
||
created() {
|
||
this.getInfo()
|
||
},
|
||
onLoad(option) {
|
||
|
||
this.id = option.id
|
||
this.index = option.index
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
uni-textarea{
|
||
width:100%;
|
||
}
|
||
height:100%;
|
||
overflow-y: auto;
|
||
.banner {
|
||
|
||
background-position: center;
|
||
background-size: cover;
|
||
height: 221upx;
|
||
|
||
.is_state {
|
||
padding: 50upx 0 0 64upx;
|
||
line-height: 60upx;
|
||
}
|
||
|
||
}
|
||
.banner1{
|
||
background-image: url(../../static/my/banner1.png);
|
||
}
|
||
.banner2{
|
||
background-image: url(../../static/my/banner2.png);
|
||
}
|
||
.banner3{
|
||
background-image: url(../../static/my/banner3.png);
|
||
}
|
||
.banner4{
|
||
background-image: url(../../static/my/banner4.png);
|
||
}
|
||
.banner5{
|
||
background-image: url(../../static/my/banner5.png);
|
||
}
|
||
.banner6{
|
||
background-image: url(../../static/my/banner6.png);
|
||
}
|
||
|
||
.my_order {
|
||
border-radius: 20upx;
|
||
position: relative;
|
||
.refund_form{
|
||
height: 80upx;
|
||
.selection-component{
|
||
border:1upx solid #C3C3C3;
|
||
overflow: hidden;
|
||
margin-left:30upx;
|
||
z-index:88;
|
||
|
||
}
|
||
.selection-show{
|
||
position: relative;
|
||
}
|
||
.selection-list{
|
||
z-index:99;
|
||
border:1upx solid #C3C3C3;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
.box_img {
|
||
height: 153.3upx;
|
||
width: 198upx;
|
||
background-color: #F2F2F2;
|
||
padding: 10upx 20upx;
|
||
margin: 0 10upx;
|
||
}
|
||
.info{
|
||
line-height: 30upx;
|
||
margin-top:20upx;
|
||
}
|
||
.select_txt{
|
||
line-height: 80upx;
|
||
width:20%;
|
||
}
|
||
.select_input{
|
||
z-index: 106;
|
||
line-height: 38px;
|
||
width:75%;
|
||
}
|
||
.remarks{
|
||
// padding:20upx 0 0 30upx ;
|
||
font-size: 26upx;
|
||
width: 95%;
|
||
margin: 0 auto;
|
||
}
|
||
.updata_img{
|
||
height:143.6upx;
|
||
width:150upx;
|
||
}
|
||
.is_txt{
|
||
text-align: justify;
|
||
}
|
||
.is_txt:after{
|
||
content: " ";
|
||
display: inline-block;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.order_list {
|
||
height: calc(100% - 238upx);
|
||
overflow-y: auto;
|
||
|
||
.order_state {
|
||
border-radius: 20upx 0 0 20upx;
|
||
height: 46upx;
|
||
width: 120upx;
|
||
background-color: #EDCA4A;
|
||
line-height: 46upx;
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
|
||
.order_items {
|
||
border-radius: 20upx;
|
||
position: relative;
|
||
}
|
||
|
||
}
|
||
.is_submit{
|
||
line-height: 82upx;
|
||
margin:100upx auto;
|
||
}
|
||
}
|
||
</style>
|