You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
382 lines
10 KiB
382 lines
10 KiB
<template>
|
|
<view class="content">
|
|
<form @submit="submit" report-submit="true">
|
|
<view class="content-top">
|
|
<view class="img-list cart-list">
|
|
<checkbox-group class="cart-checkbox" @change="checkboxChange">
|
|
<view class="cart-checkbox-item" v-for="(item, key) in orderInfo.orderItemList" :key="key">
|
|
<label class="uni-list-cell uni-list-cell-pd">
|
|
<view class="cart-checkbox-c"><checkbox v-if="item.status != 30" :value="item.id" :checked="item.checked" color="#FF7159" /></view>
|
|
<view class="img-list-item">
|
|
<image class="img-list-item-l little-img have-none" :src="item.productPic" mode="aspectFill"></image>
|
|
<view class="img-list-item-r little-right">
|
|
<view class="little-right-t">
|
|
<view class="goods-name list-goods-name">{{ item.productName }}</view>
|
|
<view v-if="item.status == 30" class="list-goods-name red-price">已申请</view>
|
|
</view>
|
|
<view class="goods-item-c">
|
|
<view class="goods-buy">
|
|
<!-- 商品规格 -->
|
|
<view class="goods-salesvolume">{{ item.productPrice }} x{{ item.productQuantity }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</label>
|
|
</view>
|
|
</checkbox-group>
|
|
</view>
|
|
<view class="cell-group margin-cell-group">
|
|
<view class="cell-item">
|
|
<view class="cell-item-hd"><view class="cell-hd-title">服务类型</view></view>
|
|
<view class="cell-item-ft">
|
|
<view class="uni-form-item uni-column invoice-type">
|
|
<!-- <radio-group class="uni-list" @change="radioChange">
|
|
<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in type_list" :key="index">
|
|
<view>
|
|
<radio :id="item.name" :value="item.name" :checked="item.checked"></radio>
|
|
</view>
|
|
<view>
|
|
<label class="label-2-text" :for="item.name">
|
|
<text>{{item.value}}</text>
|
|
</label>
|
|
</view>
|
|
</label>
|
|
</radio-group> -->
|
|
<!-- #ifndef MP-ALIPAY -->
|
|
<radio-group class="uni-list" @change="radioChange">
|
|
<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in type_list" :key="index">
|
|
<view class="invoice-type-icon">
|
|
<radio class="a-radio" :id="item.name" :value="item.value" :checked="item.checked" :disabled="item.disabled"></radio>
|
|
</view>
|
|
<view class="invoice-type-c">
|
|
<label class="label-2-text" :for="item.name">
|
|
<text>{{ item.name }}</text>
|
|
</label>
|
|
</view>
|
|
</label>
|
|
</radio-group>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<jhlable></jhlable>
|
|
<!-- #endif -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cell-item">
|
|
<view class="cell-item-hd"><view class="cell-hd-title">退款金额</view></view>
|
|
<view class="cell-item-ft"><input class="cell-bd-input red-price" v-model="refund" :disabled="refund_input_noedit" /></view>
|
|
</view>
|
|
</view>
|
|
<view class="cell-group margin-cell-group">
|
|
<view class="cell-item right-img">
|
|
<view class="cell-item-hd"><view class="cell-hd-title">上传凭证</view></view>
|
|
</view>
|
|
<view class="">
|
|
<view class="evaluate-c-b">
|
|
<view class="goods-img-item" v-for="(item, key) in images" :key="key">
|
|
<image class="del" src="/static/image/del.png" mode="" @click="delImage(item)"></image>
|
|
<image class="" :src="item" mode="" @click="clickImg(item)"></image>
|
|
</view>
|
|
<view class="upload-img" v-show="isImage" @click="upImage">
|
|
<image class="icon" src="/static/image/camera.png" mode=""></image>
|
|
<view class="">上传照片</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="cell-group margin-cell-group">
|
|
<view class="cell-item right-img">
|
|
<view class="cell-item-hd"><view class="cell-hd-title">问题描述</view></view>
|
|
</view>
|
|
<view class="cell-textarea "><textarea v-model="reason" placeholder="请您在此描述问题(最多200字)" maxlength="200" /></view>
|
|
</view>
|
|
</view>
|
|
<view class="button-bottom"><button class="btn btn-b btn-square" formType="submit">提交</button></view>
|
|
</form>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
|
import Api from '@/common/api';
|
|
import jhlable from '@/components/jihai-lable.vue';
|
|
export default {
|
|
data() {
|
|
return {
|
|
type_list: [
|
|
{ value: '0', name: '换货', checked: true, disabled: false },
|
|
// { value: '1', name: '仅退款', checked: true, disabled: false },
|
|
// { value: '2', name: '退货', checked: false, disabled:false },
|
|
{ value: '3', name: '退货退款', checked: false, disabled: false }
|
|
],
|
|
orderInfo: [],
|
|
order_id: '',
|
|
items: [], //退货明细
|
|
item_ids: [], //选择的退货
|
|
aftersale_type: 1, //售后类型1退款，2退款退货
|
|
refund: 0, //退款金额，等于已支付的金额减去已退款的金额
|
|
refund_show: 0,
|
|
images: [], //图片
|
|
reason: '', //原因
|
|
image_max: 5, //用于前台判断上传图片按钮是否显示
|
|
refund_input_noedit: false,
|
|
mode: 'aspectFill',
|
|
submitStatus: false,
|
|
receiverId:''
|
|
};
|
|
},
|
|
components: { jhlable },
|
|
computed: {
|
|
isImage() {
|
|
let num = this.image_max - this.images.length;
|
|
if (num > 0) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 单选框点击切换
|
|
radioChange: function(evt) {
|
|
this.type_list.forEach(item => {
|
|
if (item.value === evt.target.value) {
|
|
item.checked = true;
|
|
this.aftersale_type = evt.target.value;
|
|
} else {
|
|
item.checked = false;
|
|
}
|
|
});
|
|
if (this.type_list[0].checked) {
|
|
this.refund_input_noedit = true;
|
|
} else {
|
|
this.refund_input_noedit = false;
|
|
}
|
|
},
|
|
|
|
//订单商品信息
|
|
async getOrderInfo() {
|
|
debugger;
|
|
let params = { id: this.order_id };
|
|
this.orderInfo = await Api.apiCall('get', Api.order.orderDetail, params);
|
|
this.refund_show = this.orderInfo.payAmount;
|
|
this.receiverId = this.orderInfo.receiverId;
|
|
console.log(this.receiverId)
|
|
},
|
|
|
|
//退货商品选择
|
|
checkboxChange(e) {
|
|
let nums = 0;
|
|
this.item_ids = [];
|
|
for (var i = 0; i < e.detail.value.length; i++) {
|
|
let k = e.detail.value[i];
|
|
for (var j = 0; j < this.orderInfo.orderItemList.length; j++) {
|
|
if (this.orderInfo.orderItemList[j].id == k) {
|
|
this.item_ids = this.item_ids.concat(k);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
//提交
|
|
async submit(e) {
|
|
this.submitStatus = true;
|
|
/* let images = [];
|
|
for(var i = 0; i<this.images.length; i++) {
|
|
images = images.concat(this.images[i].image_id);
|
|
} */
|
|
|
|
//判断退款金额
|
|
let reg = /^[0-9]+(.[0-9]{1,2})?$/;
|
|
if (!reg.test(this.refund)) {
|
|
this.$common.errorToShow('请输入正确金额');
|
|
this.submitStatus = false;
|
|
return false;
|
|
} else {
|
|
if (this.refund < 0) {
|
|
this.$common.errorToShow('退款金额不能小于0');
|
|
return false;
|
|
}
|
|
if (this.refund > this.refund_show) {
|
|
this.$common.errorToShow('退款金额过大');
|
|
this.submitStatus = false;
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (!this.item_ids || this.item_ids.length == 0) {
|
|
this.$common.errorToShow('请选择需要售后的商品');
|
|
return false;
|
|
}
|
|
//组装数据，提交数据
|
|
let data = {
|
|
orderId: this.order_id,
|
|
type: this.aftersale_type,
|
|
items: this.item_ids,
|
|
images: this.images,
|
|
returnAmount: this.refund,
|
|
desc: this.reason,
|
|
companyAddressId:this.receiverId
|
|
};
|
|
|
|
// #ifdef MP-WEIXIN
|
|
data['formId'] = e.detail.formId;
|
|
// #endif
|
|
|
|
let res = await Api.apiCall('post', Api.order.saveOmsOrderReturnApply, data);
|
|
if (res.code == 200) {
|
|
// this.$common.successToShow('提交成功', ress => {
|
|
// this.submitStatus = false;
|
|
// uni.navigateBack({
|
|
// delta: 1
|
|
// });
|
|
// });
|
|
uni.showToast({
|
|
title: "提交成功",
|
|
icon: "none"
|
|
});
|
|
} else {
|
|
this.$common.errorToShow(res.msg);
|
|
this.submitStatus = false;
|
|
uni.navigateBack({ delta: 1 });
|
|
}
|
|
},
|
|
|
|
//上传图片
|
|
upImage() {
|
|
let num = this.image_max - this.images.length;
|
|
if (num > 0) {
|
|
this.$otherApi.uploadFiles(res => {
|
|
//this.$otherApi.uploadImage(num, res => {
|
|
if (res.code == 200) {
|
|
this.images = this.images.concat(res.data);
|
|
this.$common.successToShow(res.msg);
|
|
} else {
|
|
this.$common.errorToShow(res.msg);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
//删除图片
|
|
delImage(e) {
|
|
let newImages = [];
|
|
for (var i = 0; i < this.images.length; i++) {
|
|
if (this.images[i].image_id != e.image_id) {
|
|
newImages.push(this.images[i]);
|
|
}
|
|
}
|
|
this.images = newImages;
|
|
},
|
|
// 图片点击放大
|
|
clickImg(img) {
|
|
// 预览图片
|
|
uni.previewImage({
|
|
urls: img.split()
|
|
});
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.order_id = e.order_id;
|
|
this.getOrderInfo();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '../../static/css/style.css';
|
|
|
|
.list-goods-name {
|
|
width: 100% !important;
|
|
}
|
|
.cart-checkbox-item {
|
|
position: relative;
|
|
}
|
|
.invoice-type .uni-list-cell {
|
|
display: inline-block;
|
|
font-size: 26upx;
|
|
color: #333;
|
|
position: relative;
|
|
margin-left: 50upx;
|
|
}
|
|
.invoice-type .uni-list-cell > view {
|
|
display: inline-block;
|
|
}
|
|
.invoice-type-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.invoice-type-c {
|
|
margin-left: 50upx;
|
|
line-height: 2;
|
|
}
|
|
.cell-item-ft .cell-bd-input {
|
|
text-align: right;
|
|
width: 500upx;
|
|
font-size: 28upx;
|
|
}
|
|
.right-img {
|
|
border-bottom: 0;
|
|
}
|
|
.cell-textarea {
|
|
padding: 0 26upx 20upx;
|
|
}
|
|
.cell-textarea textarea {
|
|
width: 100%;
|
|
height: 200upx;
|
|
font-size: 26upx;
|
|
color: #333;
|
|
}
|
|
.evaluate-c-b {
|
|
overflow: hidden;
|
|
padding: 0 20upx;
|
|
}
|
|
.upload-img {
|
|
width: 146upx;
|
|
height: 146upx;
|
|
margin: 14upx;
|
|
text-align: center;
|
|
color: #999999;
|
|
font-size: 22upx;
|
|
border: 2upx solid #e1e1e1;
|
|
border-radius: 4upx;
|
|
display: inline-block;
|
|
float: left;
|
|
padding: 24upx 0;
|
|
}
|
|
.goods-img-item {
|
|
width: 174upx;
|
|
height: 174upx;
|
|
padding: 14upx;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
.goods-img-item:nth-child(4n) {
|
|
margin-right: 0;
|
|
}
|
|
.goods-img-item image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.del {
|
|
width: 30upx !important;
|
|
height: 30upx !important;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 999;
|
|
}
|
|
|
|
.cell-group {
|
|
background-color: #fff;
|
|
}
|
|
.margin-cell-group {
|
|
margin: 20upx 0;
|
|
}
|
|
|
|
/* #ifdef MP-ALIPAY */
|
|
|
|
/* #endif */
|
|
</style>
|
|
|