first commit
This commit is contained in:
PC-202306242200\Administrator
204
pages/users/goods_return/index.vue
Normal file
204
pages/users/goods_return/index.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<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";
|
||||
// #ifdef MP
|
||||
import authorize from '@/components/Authorize';
|
||||
// #endif
|
||||
export default {
|
||||
components: {
|
||||
// #ifdef MP
|
||||
authorize
|
||||
// #endif
|
||||
},
|
||||
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();
|
||||
}
|
||||
},
|
||||
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 });
|
||||
})
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user