yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【退款】 

1、发起退款界面 50%
pull/1/MERGE
YunaiV 2023-08-17 20:31:56 +08:00
parent 0bc8344505
commit e629285b51
2 changed files with 189 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api/trade/afterSale.js
View File

@ -3,3 +3,9 @@ import request from "@/utils/request.js";
export function getAfterSalePage(data) { export function getAfterSalePage(data) {
return request.get("app-api/trade/after-sale/page", data); return request.get("app-api/trade/after-sale/page", data);
} }
export function getAfterSaleReasonList(way) {
return request.get("app-api/trade/after-sale/get-reason-list", {
way
});
}

330
pages/users/goods_return/index.vue
View File

@ -2,96 +2,107 @@
<view> <view>
<form @submit="subRefund" report-submit='true'> <form @submit="subRefund" report-submit='true'>
<view class='apply-return'> <view class='apply-return'>
<view class='goodsStyle acea-row row-between borRadius14' v-for="(item,index) in orderInfo.orderInfoList" :key="index"> <view class='goodsStyle acea-row row-between borRadius14'>
<view class='pictrue'><image :src='item.image'></image></view> <view class='pictrue'>
<view class='text acea-row row-between'> <image :src='orderItem.picUrl' />
<view class='name line2'>{{item.storeName}}</view> </view>
<view class='money'> <view class='text acea-row row-between'>
<view>￥{{item.price}}</view> <view class='name line2'>{{ orderItem.spuName }}</view>
<view class='num'>x{{item.cartNum}}</view> <view class='money'>
</view> <view>￥{{(parseFloat(orderItem.price) / 100.0).toFixed(2)}}</view>
</view> <view class='num'>x{{ orderItem.count}}</view>
</view> </view>
</view>
</view>
<view class='list borRadius14'> <view class='list borRadius14'>
<view class='item acea-row row-between-wrapper'> <view class='item acea-row row-between-wrapper'>
<view>退货件数</view> <view>售后方式</view>
<view class='num'>{{orderInfo.totalNum}}</view> <!-- 如果未发货，则只能退款 -->
</view> <view class="" v-if="order.status === 20">仅退款</view>
<view class='item acea-row row-between-wrapper'> <picker v-else class='num' @change="wayChange"
<view>退款金额</view> :value="wayIndex" :range="ways">
<view class='num'>￥{{orderInfo.payPrice}}</view> <view class="picker acea-row row-between-wrapper">
</view> <view class='reason'>{{ ways[wayIndex] }}</view>
<view class='item acea-row row-between-wrapper' @tap="toggleTab('region')"> <text class='iconfont icon-jiantou'></text>
<view>退款原因</view> </view>
<picker class='num' @change="bindPickerChange" :value="index" :range="RefundArray"> </picker>
<view class="picker acea-row row-between-wrapper"> </view>
<view class='reason'>{{RefundArray[index]}}</view> <!-- TODO 芋艿：按照有赞的做法；未发货，不输入件数；已发货，可调整 -->
<text class='iconfont icon-jiantou'></text> <view class='item acea-row row-between-wrapper'>
</view> <view>退货件数</view>
</picker> <view class='num'>{{ orderItem.count }}</view>
</view> </view>
<view class='item textarea acea-row row-between'> <!-- TODO 芋艿：后端改成可以填写金额 -->
<view>备注说明</view> <view class='item acea-row row-between-wrapper'>
<textarea placeholder='填写备注信息，100字以内' class='num' name="refund_reason_wap_explain" placeholder-class='填写备注信息，100字以内'></textarea> <view>退款金额</view>
</view> <view class='num'>￥{{ (parseFloat(orderItem.payPrice) / 100.0).toFixed(2) }}</view>
<view class='item acea-row row-between' style="border: none;"> </view>
<view class='title acea-row row-between-wrapper'> <view class='item acea-row row-between-wrapper'>
<view>上传凭证</view> <view>退款原因</view>
<view class='tip'>( 最多可上传3张 )</view> <picker class='num' @change="bindPickerChange" :value="reasonIndex" :range="reasons">
</view> <view class="picker acea-row row-between-wrapper">
<view class='upload acea-row row-middle'> <view class='reason'>{{ reasons[reasonIndex] }}</view>
<view class='pictrue' v-for="(item,index) in refund_reason_wap_imgPath" :key="index"> <text class='iconfont icon-jiantou'></text>
<image :src='item'></image> </view>
<view class='iconfont icon-guanbi1 font-color' @tap='DelPic(index)'></view> </picker>
</view> </view>
<view class='pictrue acea-row row-center-wrapper row-column' @tap='uploadpic' v-if="refund_reason_wap_imgPath.length < 3"> <view class='item textarea acea-row row-between'>
<text class='iconfont icon-icon25201'></text> <view>备注说明</view>
<view>上传凭证</view> <textarea placeholder='填写备注信息，100字以内' class='num' name="refund_reason_wap_explain"
</view> placeholder-class='填写备注信息，100字以内' />
</view> </view>
</view> <view class='item acea-row row-between' style="border: none;">
<button class='returnBnt bg-color' form-type="submit">申请退款</button> <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' />
<view class='iconfont icon-guanbi1 font-color' @tap='DelPic(index)' />
</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' />
<view>上传凭证</view>
</view>
</view>
</view>
<button class='returnBnt bg-color' form-type="submit">提交</button>
</view> </view>
</view> </view>
</form> </form>
<!-- #ifdef MP -->
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
<!-- #endif -->
</view> </view>
</template> </template>
<script> <script>
import { ordeRefundReason, orderRefundVerify, applyRefund} from '@/api/order.js'; import { orderRefundVerify } from '@/api/order.js';
import { import { toLogin } from '@/libs/login.js';
toLogin import { mapGetters } from "vuex";
} from '@/libs/login.js'; import * as TradeOrderApi from '@/api/trade/order.js';
import { import * as AfterSaleApi from '@/api/trade/afterSale.js';
mapGetters export default {
} from "vuex";
// #ifdef MP
import authorize from '@/components/Authorize';
// #endif
export default {
components: {
// #ifdef MP
authorize
// #endif
},
data() { data() {
return { return {
refund_reason_wap_img:[], orderId: 0,
orderItemId: 0,
order: {}, // 订单
orderItem: {}, // 订单项
wayIndex: 0, // 选中 ways 的位置
ways: ['仅退款', '退款退货'], // 可选的售后方式
reasons: [], // 售后原因
reasonIndex: 0, // 选中 reasons 的位置
refund_reason_wap_img:[],
refund_reason_wap_imgPath:[], refund_reason_wap_imgPath:[],
orderInfo:{},
RefundArray: [],
index: 0,
orderId:0,
isAuto: false, //没有授权的不会自动授权
isShowAuth: false //是否隐藏授权
}; };
}, },
computed: mapGetters(['isLogin']), computed: mapGetters(['isLogin']),
watch:{ watch:{
isLogin:{ isLogin:{
handler:function(newV,oldV){ handler: function(newV, oldV) {
if(newV){ if(newV){
this.getOrderInfo(); this.getOrderInfo();
this.getRefundReason(); this.getRefundReason();
@ -101,84 +112,107 @@
} }
}, },
onLoad: function (options) { onLoad: function (options) {
if (!options.orderId) return this.$util.Tips({title:'缺少订单id,无法退款'},{tab:3,url:1}); if (!this.isLogin) {
this.orderId = options.orderId; toLogin();
if (this.isLogin) { return;
this.getOrderInfo(); }
this.getRefundReason(); if (!options.orderId || !options.orderItemId) {
} else { return this.$util.Tips({
toLogin(); title:'缺少订单id,无法退款'
} },{
}, tab: 3,
url:1
});
}
this.orderId = parseInt(options.orderId);
this.orderItemId = parseInt(options.orderItemId);
this.getOrderInfo();
this.getRefundReason();
},
methods: { methods: {
onLoadFun:function(){ onLoadFun:function() {
this.getOrderInfo(); this.getOrderInfo();
this.getRefundReason(); this.getRefundReason();
}, },
/** /**
* 获取订单详情 * 获取订单详情
* */
*/ getOrderInfo:function(){
getOrderInfo:function(){ TradeOrderApi.getOrderDetail(this.orderId).then(res => {
let that=this; // 设置订单信息
applyRefund(that.orderId).then(res=>{ const order = res.data;
that.$set(that,'orderInfo',res.data); this.order = order;
}); // 查询订单项信息
}, this.orderItem = order.items.find(item => item.id === this.orderItemId) || {};
/** }).catch(err => {
* 获取退款理由 return this.$util.Tips({
*/ title: err
getRefundReason:function(){ });
let that=this; })
ordeRefundReason().then(res=>{ },
that.$set(that,'RefundArray',res.data); /**
}) * 更改售后方式
}, */
wayChange: function(e) {
this.$set(this, 'wayIndex', e.detail.value);
this.getRefundReason();
},
/**
* 获得售后方式
*/
getWay: function () {
return this.wayIndex === 0 ? 10 : 20
},
/**
* 获取退款理由
*/
getRefundReason: function() {
const way = this.getWay();
AfterSaleApi.getAfterSaleReasonList(way).then(res => {
this.reasons = 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){
DelPic:function(e){ let that = this, value = e.detail.value;
let index = e, that = this; //收集form表单
that.refund_reason_wap_imgPath.splice(index, 1); // 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
uploadpic:function(){ }).then(res=>{
let that=this; return this.$util.Tips({ title: '申请成功', icon: 'success' }, { tab: 5, url: '/pages/users/user_return_list/index?isT=1' });
that.$util.uploadImageOne({url:'user/upload/image',name:'multipart', model:"product", pid:1}, function(res){ }).catch(err=>{
that.refund_reason_wap_imgPath.push(res.data.url); return this.$util.Tips({ title: err });
}); })
}, },
bindPickerChange: function (e) {
/** this.$set(this,'index',e.detail.value);
* 申请退货 }
*/
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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.apply-return{ .apply-return{
padding: 20rpx 30rpx 70rpx 30rpx; padding: 20rpx 30rpx 70rpx 30rpx;