450 lines
10 KiB
Vue
450 lines
10 KiB
Vue
<template>
|
||
<view class="refund">
|
||
<!-- 商品 -->
|
||
<view class="row">
|
||
<view v-for="(item, index) in productInfo.orderSkus" :key="index" @tap="navTo(`/pages/product/product?id=${item.spuId}&skuId=${item.skuId}`)"
|
||
class="carrier"
|
||
|
||
>
|
||
<view class="left" >
|
||
<image
|
||
class="image"
|
||
:src="item.skuImage"
|
||
></image>
|
||
</view>
|
||
<view class="mid">
|
||
<view class="title in2line">{{
|
||
item.skuName
|
||
}}</view>
|
||
<view class="data">
|
||
{{ item.skuSpecs || singleSkuText }}
|
||
</view>
|
||
<view class="bottom">
|
||
<text class="price" :class="'text-' + themeColor.name">{{ moneySymbol }}{{ item.price }} * {{ item.num }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="product-textarea">
|
||
<form @submit="handleOrderRefundApply">
|
||
|
||
<list-cell
|
||
@eventClick="chooseRefundReasonType"
|
||
title="退款原因"
|
||
:tips="refund_reason || '请选择'"
|
||
></list-cell>
|
||
<textarea
|
||
class="textarea"
|
||
v-model="refund_explain"
|
||
placeholder-style="color:#ccc; font-size: 26upx"
|
||
placeholder="宝贝不满足您的期待吗？请填写一下您的退货/退款理由吧"
|
||
/>
|
||
<view class="feedback-title">
|
||
<text>退款金额</text>
|
||
<text :class="'text-' + themeColor.name">{{ moneySymbol }}{{ productInfo.price }}</text>
|
||
</view>
|
||
<view class="feedback-content">
|
||
<text>成功退款后，该订单的金额会退回至原支付账户</text>
|
||
</view>
|
||
<view class="feedback-title">
|
||
<text>上传凭证(选填,提供至多9张截图,总大小10M以下)</text>
|
||
</view>
|
||
<view class="feedback-body feedback-uploader rf-uploader">
|
||
<view class="uni-uploader">
|
||
<view class="uni-uploader-head">
|
||
<view class="uni-uploader-title">点击预览图片</view>
|
||
<view class="uni-uploader-info">{{ imageList.length }}/9</view>
|
||
</view>
|
||
<view class="uni-uploader-body">
|
||
<view class="uni-uploader__files">
|
||
<block v-for="(image, index) in imageList" :key="index">
|
||
<view class="uni-uploader__file" style="position: relative;">
|
||
<rf-image class="uni-uploader__img" :src="image"></rf-image>
|
||
<view class="close-view" @tap="close(index)" :class="'bg-' + themeColor.name">x</view>
|
||
</view>
|
||
</block>
|
||
<view class="uni-uploader__input-box" v-if="imageList.length < 9">
|
||
<view class="uni-uploader__input" @tap="uploadImage"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button class="confirm-btn" formType="submit" :class="'bg-' + themeColor.name">
|
||
{{ parseInt(refundType, 10) === 1 ? '仅退款' : '退货退款' }}
|
||
</button>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
/**
|
||
* @des 发表评价
|
||
*
|
||
* @author 237524947@qq.com
|
||
* @date 2019-11-27 14:32
|
||
* @copyright 2019
|
||
*/
|
||
import { uploadImage ,orderDetail} from '@/api/userInfo';
|
||
import { applyrefund, applyreturn,queryorderforreturn,querybackdetail } from '@/api/product';
|
||
import listCell from '@/components/rf-list-cell';
|
||
export default {
|
||
data() {
|
||
return {
|
||
productInfo: {},
|
||
|
||
refundType: 1,
|
||
refund_reason: '',
|
||
refund_explain: '',
|
||
imageList: [],
|
||
orderId:0,
|
||
moneySymbol: this.moneySymbol,
|
||
refundTypeArr: [
|
||
{
|
||
value: '1',
|
||
name: '仅退款'
|
||
},
|
||
{
|
||
value: '2',
|
||
name: '退货退款'
|
||
}
|
||
],
|
||
singleSkuText: this.singleSkuText,
|
||
tapReasonIndex:0,
|
||
msgContents: [
|
||
'商品信息描述不符',
|
||
'不想买了',
|
||
'收货人信息有误',
|
||
'未按指定时间发货',
|
||
'其他',
|
||
'不想买了',
|
||
'商品质量问题',
|
||
'收到商品与描述不符',
|
||
'其他',
|
||
'系统自动申请'
|
||
]
|
||
};
|
||
},
|
||
components: {
|
||
listCell
|
||
},
|
||
computed: {
|
||
wordLimit() {
|
||
return 140 - this.refund_reason.length;
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.initData(options);
|
||
},
|
||
methods: {
|
||
// 数据初始化
|
||
async initData(options) {
|
||
let dataOp = JSON.parse(options.data);
|
||
console.log(options.refundType)
|
||
this.refundType = options.refundType;
|
||
this.orderId = dataOp.id;
|
||
|
||
await this.$http
|
||
.get(`${orderDetail}`, {
|
||
orderId:this.orderId
|
||
})
|
||
.then(r => {
|
||
this.productInfo =r;
|
||
|
||
console.log(r)
|
||
});
|
||
|
||
|
||
let title = '仅退款';
|
||
if (parseInt(this.refundType, 10) === 1) {
|
||
title = '仅退款';
|
||
} else {
|
||
title = '退货退款';
|
||
}
|
||
uni.setNavigationBarTitle({
|
||
title
|
||
});
|
||
},
|
||
// 快速输入
|
||
chooseRefundReasonType() {
|
||
uni.showActionSheet({
|
||
itemList: this.msgContents,
|
||
success: res => {
|
||
this.refund_reason = this.msgContents[res.tapIndex];
|
||
this.tapReasonIndex = res.tapIndex;
|
||
}
|
||
});
|
||
},
|
||
// 打开相册选图
|
||
uploadImage() {
|
||
const _this = this;
|
||
uni.chooseImage({
|
||
count: 9, // 最多一次可以选择的图片张数
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机
|
||
success: function(res) {
|
||
if (_this.imageList.length + res.tempFiles.length > 9) {
|
||
_this.$mHelper.toast('不要贪心哦，最多只可上传9张照片');
|
||
return;
|
||
}
|
||
_this.handleUploadFile(res.tempFilePaths);
|
||
}
|
||
});
|
||
},
|
||
// 依次上传图片
|
||
handleUploadFile(data) {
|
||
const _this = this;
|
||
data.forEach(item => {
|
||
_this.$http
|
||
.upload(uploadImage, { filePath: item, name: 'file' })
|
||
.then(r => {
|
||
_this.imageList.push(r);
|
||
});
|
||
});
|
||
},
|
||
// 删除已选中图片
|
||
close(e) {
|
||
this.imageList.splice(e, 1);
|
||
},
|
||
handleRefundTypeChange(e) {
|
||
this.refundType = e.detail.value;
|
||
},
|
||
// 跳转页面
|
||
navTo(route) {
|
||
this.$mRouter.push({ route });
|
||
},
|
||
// 退货/退款
|
||
async handleOrderRefundApply(e) {
|
||
const formData = e.detail.value;
|
||
if (parseInt(this.refundType, 10) === 1) {
|
||
formData.refundType = this.refundType;
|
||
}
|
||
formData['pics'] = JSON.stringify(this.imageList);
|
||
formData['desc'] = this.refund_explain;
|
||
formData['reason'] = this.refund_reason;
|
||
formData['orderId'] = this.orderId;
|
||
|
||
if (this.refundType.toString() === '1') {
|
||
|
||
await this.handleOrderRefundApplyOperation(this.productInfo.id, formData);
|
||
} else {
|
||
await this.handleOrderCustomerRefundApply(this.productInfo.id, formData);
|
||
}
|
||
},
|
||
async handleOrderRefundApplyOperation(id, formData) {
|
||
await this.$http
|
||
.get(`${applyrefund}`, {
|
||
id,
|
||
...formData
|
||
})
|
||
.then(() => {
|
||
this.$mHelper.toast('申请成功');
|
||
this.$mRouter.back();
|
||
});
|
||
},
|
||
async handleOrderCustomerRefundApply(id, formData) {
|
||
let returnSkus=[]
|
||
this.productInfo.orderSkus.forEach(sku => {
|
||
returnSkus.push({num: sku.num,
|
||
selfprice: sku.price,
|
||
skuId: sku.skuId});
|
||
})
|
||
await this.$http
|
||
.post(`${applyreturn}`, {
|
||
id,
|
||
returnSkus,
|
||
...formData
|
||
})
|
||
.then(r => {
|
||
if(r==1){
|
||
this.$mHelper.toast('申请成功');
|
||
this.$mRouter.back();
|
||
}else{
|
||
this.$mHelper.toast('申请失败');
|
||
|
||
}
|
||
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
page {
|
||
background: $color-white;
|
||
}
|
||
.refund {
|
||
background-color: $color-white;
|
||
/* #ifndef H5 */
|
||
height: 100vh;
|
||
/* #endif */
|
||
.row {
|
||
margin: 0 auto $spacing-lg;
|
||
width: calc(94%);
|
||
height: calc(22vw + 40upx);
|
||
border-radius: 15upx;
|
||
box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
z-index: 4;
|
||
border: 0;
|
||
.carrier {
|
||
@keyframes showMenu {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(-30%);
|
||
}
|
||
}
|
||
@keyframes closeMenu {
|
||
0% {
|
||
transform: translateX(-30%);
|
||
}
|
||
100% {
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
&.open {
|
||
animation: showMenu 0.25s linear both;
|
||
}
|
||
&.close {
|
||
animation: closeMenu 0.15s linear both;
|
||
}
|
||
background-color: #fff;
|
||
position: absolute;
|
||
width: 100%;
|
||
padding: 0 0;
|
||
height: 100%;
|
||
z-index: 3;
|
||
display: flex;
|
||
align-items: center;
|
||
.left {
|
||
width: 22vw;
|
||
height: 22vw;
|
||
margin-left: 20upx;
|
||
margin-right: 10upx;
|
||
.image {
|
||
border-radius: 10upx;
|
||
width: 22vw;
|
||
height: 22vw;
|
||
}
|
||
}
|
||
.mid {
|
||
text-align: left;
|
||
width: 100%;
|
||
margin: 10upx 10upx 0;
|
||
.title {
|
||
color: $font-color-dark;
|
||
height: 60upx;
|
||
line-height: 1.2;
|
||
font-size: $font-base;
|
||
}
|
||
.data {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 10upx 0 5upx;
|
||
font-size: $font-base;
|
||
color: $font-color-base;
|
||
.item {
|
||
flex: 1;
|
||
}
|
||
.iconfont {
|
||
color: $font-color-light;
|
||
margin-right: 10upx;
|
||
}
|
||
.status {
|
||
padding: 6upx 20upx;
|
||
background-color: $base-color;
|
||
opacity: 0.8;
|
||
color: $color-white;
|
||
font-size: $font-sm;
|
||
border-radius: 6upx;
|
||
}
|
||
}
|
||
.bottom {
|
||
line-height: 1.2;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: $font-sm;
|
||
color: $font-color-light;
|
||
.price {
|
||
font-size: $font-lg;
|
||
}
|
||
}
|
||
}
|
||
.data {
|
||
color: $font-color-light;
|
||
}
|
||
}
|
||
}
|
||
.product-textarea {
|
||
margin: $spacing-base 0 0;
|
||
.gender-item {
|
||
.gender-item-radio {
|
||
transform: scale(0.9);
|
||
}
|
||
.gender-item-text {
|
||
margin: 0 $spacing-base 0 $spacing-sm;
|
||
}
|
||
}
|
||
.refund-type {
|
||
margin: $spacing-base $spacing-lg;
|
||
}
|
||
.textarea {
|
||
width: 100%;
|
||
height: 150upx;
|
||
padding: 0 $spacing-lg;
|
||
}
|
||
}
|
||
.confirm-btn {
|
||
width: 630upx;
|
||
height: 76upx;
|
||
line-height: 76upx;
|
||
border-radius: 50px;
|
||
margin-top: 50upx;
|
||
font-size: $font-lg;
|
||
&:after {
|
||
border-radius: 100px;
|
||
}
|
||
}
|
||
/*问题反馈*/
|
||
.feedback-title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: $spacing-base $spacing-lg;
|
||
font-size: $font-base;
|
||
border-bottom: 1upx solid rgba(0, 0, 0, 0.05);
|
||
}
|
||
.feedback-content {
|
||
padding: $spacing-base $spacing-lg;
|
||
color: $font-color-light;
|
||
}
|
||
.feedback-body {
|
||
background: $color-white;
|
||
padding: $spacing-base $spacing-lg;
|
||
.gender-item {
|
||
margin-right: 20upx;
|
||
|
||
.gender-item-text {
|
||
padding-left: 10upx;
|
||
}
|
||
|
||
radio .wx-radio-input.wx-radio-input-checked {
|
||
background: $uni-color-primary;
|
||
border-color: $uni-color-primary;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style>
|