<template>
|
<view>
|
<form @submit="subRefund" report-submit='true'>
|
<view class='apply-return'>
|
<view class='goodsStyle acea-row row-between borRadius14' v-for="(item,index) in orderInfo.orderInfoList" :key="index">
|
<view class='pictrue'><image :src='item.image'></image></view>
|
<view class='text acea-row row-between'>
|
<view class='name line2'>{{item.storeName}}</view>
|
<view class='money'>
|
<view>￥{{item.price}}</view>
|
<view class='num'>x{{item.cartNum}}</view>
|
</view>
|
</view>
|
</view>
|
<view class='list borRadius14'>
|
<view class='item acea-row row-between-wrapper'>
|
<view>退货件数</view>
|
<view class='num'>{{orderInfo.totalNum}}</view>
|
</view>
|
<view class='item acea-row row-between-wrapper'>
|
<view>退款金额</view>
|
<view class='num'>￥{{orderInfo.payPrice}}</view>
|
</view>
|
<view class='item acea-row row-between-wrapper' @tap="toggleTab('region')">
|
<view>退款原因</view>
|
<picker class='num' @change="bindPickerChange" :value="index" :range="RefundArray">
|
<view class="picker acea-row row-between-wrapper">
|
<view class='reason'>{{RefundArray[index]}}</view>
|
<text class='iconfont icon-jiantou'></text>
|
</view>
|
</picker>
|
</view>
|
<view class='item textarea acea-row row-between'>
|
<view>备注说明</view>
|
<textarea placeholder='填写备注信息，100字以内' class='num' name="refund_reason_wap_explain" placeholder-class='填写备注信息，100字以内'></textarea>
|
</view>
|
<view class='item acea-row row-between' style="border: none;">
|
<view class='title acea-row row-between-wrapper'>
|
<view>上传凭证</view>
|
<view class='tip'>( 最多可上传3张 )</view>
|
</view>
|
<view class='upload acea-row row-middle'>
|
<view class='pictrue' v-for="(item,index) in refund_reason_wap_imgPath" :key="index">
|
<image :src='item'></image>
|
<view class='iconfont icon-guanbi1 font-color' @tap='DelPic(index)'></view>
|
</view>
|
<view class='pictrue acea-row row-center-wrapper row-column' @tap='uploadpic' v-if="refund_reason_wap_imgPath.length < 3">
|
<text class='iconfont icon-icon25201'></text>
|
<view>上传凭证</view>
|
</view>
|
</view>
|
</view>
|
<button class='returnBnt bg-color' form-type="submit">申请退款</button>
|
</view>
|
</view>
|
</form>
|
<!-- #ifdef MP -->
|
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
|
<!-- #endif -->
|
</view>
|
</template>
|
<script>
|
import { ordeRefundReason, orderRefundVerify, applyRefund} from '@/api/order.js';
|
import {
|
toLogin
|
} from '@/libs/login.js';
|
import {
|
mapGetters
|
} from "vuex";
|
export default {
|
components: {
|
},
|
data() {
|
return {
|
refund_reason_wap_img:[],
|
refund_reason_wap_imgPath:[],
|
orderInfo:{},
|
RefundArray: [],
|
index: 0,
|
orderId:0,
|
isAuto: false, //没有授权的不会自动授权
|
isShowAuth: false //是否隐藏授权
|
};
|
},
|
computed: mapGetters(['isLogin']),
|
watch:{
|
isLogin:{
|
handler:function(newV,oldV){
|
if(newV){
|
this.getOrderInfo();
|
this.getRefundReason();
|
}
|
},
|
deep:true
|
}
|
},
|
onLoad: function (options) {
|
if (!options.orderId) return this.$util.Tips({title:'缺少订单id,无法退款'},{tab:3,url:1});
|
this.orderId = options.orderId;
|
if (this.isLogin) {
|
this.getOrderInfo();
|
this.getRefundReason();
|
} else {
|
toLogin(this);
|
}
|
},
|
methods: {
|
onLoadFun:function(){
|
this.getOrderInfo();
|
this.getRefundReason();
|
},
|
/**
|
* 获取订单详情
|
*
|
*/
|
getOrderInfo:function(){
|
let that=this;
|
applyRefund(that.orderId).then(res=>{
|
that.$set(that,'orderInfo',res.data);
|
});
|
},
|
/**
|
* 获取退款理由
|
*/
|
getRefundReason:function(){
|
let that=this;
|
ordeRefundReason().then(res=>{
|
that.$set(that,'RefundArray',res.data);
|
})
|
},
|
|
/**
|
* 删除图片
|
*
|
*/
|
DelPic:function(e){
|
let index = e, that = this;
|
that.refund_reason_wap_imgPath.splice(index, 1);
|
},
|
/**
|
* 上传文件
|
*
|
*/
|
uploadpic:function(){
|
let that=this;
|
that.$util.uploadImageOne({url:'user/upload/image',name:'multipart', model:"product", pid:1}, function(res){
|
that.refund_reason_wap_imgPath.push(res.data.url);
|
});
|
},
|
|
/**
|
* 申请退货
|
*/
|
subRefund:function(e){
|
let that = this, value = e.detail.value;
|
//收集form表单
|
// if (!value.refund_reason_wap_explain) return this.$util.Tips({title:'请输入退款原因'});
|
orderRefundVerify({
|
text: that.RefundArray[that.index] || '',
|
refund_reason_wap_explain: value.refund_reason_wap_explain,
|
refund_reason_wap_img: that.refund_reason_wap_imgPath.join(','),
|
uni: that.orderId
|
}).then(res=>{
|
return this.$util.Tips({ title: '申请成功', icon: 'success' }, { tab: 5, url: '/pages/users/user_return_list/index?isT=1' });
|
}).catch(err=>{
|
return this.$util.Tips({ title: (err&&err.message)?err.message:err });
|
})
|
},
|
bindPickerChange: function (e) {
|
this.$set(this,'index',e.detail.value);
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.apply-return{
|
padding: 20rpx 30rpx 70rpx 30rpx;
|
}
|
.apply-return .list{background-color:#fff;margin-top:18rpx;padding:0 24rpx 70rpx 24rpx;}
|
.apply-return .list .item{min-height:90rpx;border-bottom:1rpx solid #eee;font-size:30rpx;color:#333;}
|
.apply-return .list .item .num{color:#282828;width:427rpx;text-align:right;}
|
.apply-return .list .item .num .picker .reason{width:385rpx;}
|
.apply-return .list .item .num .picker .iconfont{color:#666;font-size:30rpx;margin-top:2rpx;}
|
.apply-return .list .item.textarea{padding:24rpx 0;}
|
.apply-return .list .item textarea{height:100rpx;font-size:30rpx;}
|
.apply-return .list .item .placeholder{color:#bbb;}
|
.apply-return .list .item .title{height:95rpx;width:100%;}
|
.apply-return .list .item .title .tip{font-size:30rpx;color:#bbb;}
|
.apply-return .list .item .upload{padding-bottom:36rpx;}
|
.apply-return .list .item .upload .pictrue{border-radius: 14rpx; margin:22rpx 23rpx 0 0;width:156rpx;height:156rpx;position:relative;font-size:24rpx;color:#bbb;}
|
.apply-return .list .item .upload .pictrue:nth-of-type(4n){margin-right:0;}
|
.apply-return .list .item .upload .pictrue image{width:100%;height:100%;border-radius:14rpx;}
|
.apply-return .list .item .upload .pictrue .icon-guanbi1{position:absolute;font-size:45rpx;top:-10rpx;right:-10rpx;}
|
.apply-return .list .item .upload .pictrue .icon-icon25201{color:#bfbfbf;font-size:50rpx;}
|
.apply-return .list .item .upload .pictrue:nth-last-child(1){border:1rpx solid #ddd;box-sizing:border-box;}
|
.apply-return .returnBnt{font-size:32rpx;color:#fff;width:100%;height:86rpx;border-radius:50rpx;text-align:center;line-height:86rpx;margin:43rpx auto;}
|
</style>
|
