|
|
|
@@ -1,252 +1,248 @@ |
|
|
|
<!-- 申请退货 --> |
|
|
|
<template> |
|
|
|
<view class="box"> |
|
|
|
<form-builder |
|
|
|
:config="config" |
|
|
|
:formData="state.formData" |
|
|
|
@submit="submit" |
|
|
|
@radioChange="radioChange" |
|
|
|
/> |
|
|
|
</view> |
|
|
|
<view class="box"> |
|
|
|
<form-builder :config="config" :formData="state.formData" @submit="submit" @radioChange="radioChange" /> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
import { reactive } from "vue"; |
|
|
|
import { onLoad } from "@dcloudio/uni-app"; |
|
|
|
import { msg, confirm, getOrderStatusName } from "@/utils/utils"; |
|
|
|
import { request } from "@/utils/network/request"; |
|
|
|
import { getLogistics, orderReturn, outletList } from "@/utils/network/api"; |
|
|
|
import { stringToJson } from "@/utils/network/encryption"; |
|
|
|
import { getItem, StorageKeys } from "@/utils/storage"; |
|
|
|
import { reactive } from "vue"; |
|
|
|
import { onLoad } from "@dcloudio/uni-app"; |
|
|
|
import { msg, confirm, getOrderStatusName } from "@/utils/utils"; |
|
|
|
import { request } from "@/utils/network/request"; |
|
|
|
import { getLogistics, orderReturn, outletList } from "@/utils/network/api"; |
|
|
|
import { stringToJson } from "@/utils/network/encryption"; |
|
|
|
import { getItem, StorageKeys } from "@/utils/storage"; |
|
|
|
|
|
|
|
const config = { |
|
|
|
submitName: "申请退货", |
|
|
|
titleWidth: 160, |
|
|
|
divider: true, |
|
|
|
}; |
|
|
|
const config = { |
|
|
|
submitName: "申请退货", |
|
|
|
titleWidth: 160, |
|
|
|
divider: true, |
|
|
|
}; |
|
|
|
|
|
|
|
const state = reactive({ |
|
|
|
//订单信息 |
|
|
|
orderInfo: {} as any, |
|
|
|
//退货类型: OFFLINE-线下 ON_LINE-线上 |
|
|
|
returnMode: "ON_LINE", |
|
|
|
//网点列表 |
|
|
|
outlets: [], |
|
|
|
//表单数据 |
|
|
|
formData: [ |
|
|
|
{ |
|
|
|
title: "订单编号:", |
|
|
|
inputType: "number", |
|
|
|
type: 2, |
|
|
|
value: "id", |
|
|
|
hint: "订单编号", |
|
|
|
disabled: true, |
|
|
|
divider: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "订单车牌号:", |
|
|
|
type: 2, |
|
|
|
value: "vehiclePlate", |
|
|
|
hint: "订单车牌号", |
|
|
|
disabled: true, |
|
|
|
divider: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "订单状态:", |
|
|
|
type: 2, |
|
|
|
value: "orderStep", |
|
|
|
hint: "订单状态", |
|
|
|
disabled: true, |
|
|
|
divider: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "退货方式:", |
|
|
|
type: 7, |
|
|
|
value: "returnMode", |
|
|
|
star: true, |
|
|
|
required: true, |
|
|
|
divider: true, |
|
|
|
emptyHint: "请选择退货方式", |
|
|
|
itemData: [ |
|
|
|
{ |
|
|
|
checked: false, |
|
|
|
value: "ON_LINE", |
|
|
|
name: "线上", |
|
|
|
}, |
|
|
|
{ |
|
|
|
checked: false, |
|
|
|
value: "OFFLINE", |
|
|
|
name: "线下", |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
const state = reactive({ |
|
|
|
//订单信息 |
|
|
|
orderInfo: {} as any, |
|
|
|
//退货类型: OFFLINE-线下 ON_LINE-线上 |
|
|
|
returnMode: "ON_LINE", |
|
|
|
//网点列表 |
|
|
|
outlets: [], |
|
|
|
//表单数据 |
|
|
|
formData: [ |
|
|
|
{ |
|
|
|
title: "订单编号:", |
|
|
|
inputType: "number", |
|
|
|
type: 2, |
|
|
|
value: "id", |
|
|
|
hint: "订单编号", |
|
|
|
disabled: true, |
|
|
|
divider: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "订单车牌号:", |
|
|
|
type: 2, |
|
|
|
value: "vehiclePlate", |
|
|
|
hint: "订单车牌号", |
|
|
|
disabled: true, |
|
|
|
divider: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "订单状态:", |
|
|
|
type: 2, |
|
|
|
value: "orderStep", |
|
|
|
hint: "订单状态", |
|
|
|
disabled: true, |
|
|
|
divider: true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "退货方式:", |
|
|
|
type: 7, |
|
|
|
value: "returnMode", |
|
|
|
returnMode: "ON_LINE", |
|
|
|
star: true, |
|
|
|
required: true, |
|
|
|
divider: true, |
|
|
|
emptyHint: "请选择退货方式", |
|
|
|
itemData: [ |
|
|
|
{ |
|
|
|
checked: true, |
|
|
|
value: "ON_LINE", |
|
|
|
name: "线上", |
|
|
|
}, |
|
|
|
{ |
|
|
|
checked: false, |
|
|
|
value: "OFFLINE", |
|
|
|
name: "线下", |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
title: "物流公司:", |
|
|
|
type: 4, |
|
|
|
value: "returnLogisticsCompany", |
|
|
|
required: true, |
|
|
|
star: true, |
|
|
|
hint: "请输入", |
|
|
|
divider: true, |
|
|
|
itemData: [], |
|
|
|
hide: false, |
|
|
|
emptyHint: "请选择物流公司", |
|
|
|
mode: "search", |
|
|
|
searchPickerVisible: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "物流单号:", |
|
|
|
type: 2, |
|
|
|
value: "returnLogisticsNumber", |
|
|
|
required: true, |
|
|
|
maxlength: 20, |
|
|
|
hint: "请输入", |
|
|
|
emptyHint: "请输入物流单号", |
|
|
|
star: true, |
|
|
|
divider: true, |
|
|
|
hide: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "退货网点编号:", |
|
|
|
type: 4, |
|
|
|
value: "returnNetworkName", |
|
|
|
required: true, |
|
|
|
star: true, |
|
|
|
hint: "请输入", |
|
|
|
emptyHint: "请选择退货网点", |
|
|
|
divider: true, |
|
|
|
itemData: [], |
|
|
|
hide: true, |
|
|
|
mode: "search", |
|
|
|
searchPickerVisible: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "退货原因:", |
|
|
|
required: true, |
|
|
|
type: 5, |
|
|
|
vertical: 2, |
|
|
|
value: "returnReason", |
|
|
|
maxlength: 50, |
|
|
|
bg: true, |
|
|
|
star: true, |
|
|
|
hint: "请输入退货原因，限制50字以内", |
|
|
|
emptyHint: "请输入退货原因", |
|
|
|
}, |
|
|
|
], |
|
|
|
}); |
|
|
|
{ |
|
|
|
title: "物流公司:", |
|
|
|
type: 4, |
|
|
|
value: "returnLogisticsCompany", |
|
|
|
required: true, |
|
|
|
star: true, |
|
|
|
hint: "请输入", |
|
|
|
divider: true, |
|
|
|
itemData: [], |
|
|
|
hide: false, |
|
|
|
emptyHint: "请选择物流公司", |
|
|
|
mode: "search", |
|
|
|
searchPickerVisible: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "物流单号:", |
|
|
|
type: 2, |
|
|
|
value: "returnLogisticsNumber", |
|
|
|
required: true, |
|
|
|
maxlength: 20, |
|
|
|
hint: "请输入", |
|
|
|
emptyHint: "请输入物流单号", |
|
|
|
star: true, |
|
|
|
divider: true, |
|
|
|
hide: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "退货网点编号:", |
|
|
|
type: 4, |
|
|
|
value: "returnNetworkName", |
|
|
|
required: true, |
|
|
|
star: true, |
|
|
|
hint: "请输入", |
|
|
|
emptyHint: "请选择退货网点", |
|
|
|
divider: true, |
|
|
|
itemData: [], |
|
|
|
hide: true, |
|
|
|
mode: "search", |
|
|
|
searchPickerVisible: false, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "退货原因:", |
|
|
|
required: true, |
|
|
|
type: 5, |
|
|
|
vertical: 2, |
|
|
|
value: "returnReason", |
|
|
|
maxlength: 50, |
|
|
|
bg: true, |
|
|
|
star: true, |
|
|
|
hint: "请输入退货原因，限制50字以内", |
|
|
|
emptyHint: "请输入退货原因", |
|
|
|
}, |
|
|
|
], |
|
|
|
}); |
|
|
|
|
|
|
|
/* 获取所有的快递公司 */ |
|
|
|
const getLogisticsList = () => { |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: {}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
/* 获取所有的快递公司 */ |
|
|
|
const getLogisticsList = () => { |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: {}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
|
|
|
|
request(getLogistics, options).then((res) => { |
|
|
|
const data = stringToJson(res.bizContent); |
|
|
|
state.formData[4].itemData = data; |
|
|
|
}); |
|
|
|
}; |
|
|
|
request(getLogistics, options).then((res) => { |
|
|
|
const data = stringToJson(res.bizContent); |
|
|
|
state.formData[4].itemData = data; |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
/* 获取退货网点 */ |
|
|
|
const getOutletList = () => { |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: {}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
/* 获取退货网点 */ |
|
|
|
const getOutletList = () => { |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: {}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
|
|
|
|
request(outletList, options).then((res) => { |
|
|
|
state.outlets = stringToJson(res.bizContent); |
|
|
|
let nameList = []; |
|
|
|
state.outlets.map((item) => { |
|
|
|
nameList.push(item.name); |
|
|
|
}); |
|
|
|
state.formData[6].itemData = nameList; |
|
|
|
}); |
|
|
|
}; |
|
|
|
request(outletList, options).then((res) => { |
|
|
|
state.outlets = stringToJson(res.bizContent); |
|
|
|
let nameList = []; |
|
|
|
state.outlets.map((item) => { |
|
|
|
nameList.push(item.name); |
|
|
|
}); |
|
|
|
state.formData[6].itemData = nameList; |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
//radio改变 |
|
|
|
const radioChange = (e: any, item: any) => { |
|
|
|
if (item.value === "returnMode") { |
|
|
|
//退货方式 |
|
|
|
state.returnMode = item.returnMode; |
|
|
|
state.formData[4].hide = state.returnMode === "ON_LINE" ? false : true; |
|
|
|
state.formData[5].hide = state.returnMode === "ON_LINE" ? false : true; |
|
|
|
state.formData[6].hide = state.returnMode === "ON_LINE" ? true : false; |
|
|
|
} |
|
|
|
}; |
|
|
|
//radio改变 |
|
|
|
const radioChange = (e : any, item : any) => { |
|
|
|
if (item.value === "returnMode") { |
|
|
|
//退货方式 |
|
|
|
state.returnMode = item.returnMode; |
|
|
|
state.formData[4].hide = state.returnMode === "ON_LINE" ? false : true; |
|
|
|
state.formData[5].hide = state.returnMode === "ON_LINE" ? false : true; |
|
|
|
state.formData[6].hide = state.returnMode === "ON_LINE" ? true : false; |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
//提交退货申请 |
|
|
|
const submit = (e: any) => { |
|
|
|
confirm( |
|
|
|
"是否确认退货？", |
|
|
|
() => { |
|
|
|
const curOutlet = state.outlets.find( |
|
|
|
(out) => out.name === e.returnNetworkName |
|
|
|
); |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
|
id: state.orderInfo.id, |
|
|
|
returnMode: e.returnMode, |
|
|
|
// returnNetworkId: curOutlet == null ? "" : curOutlet.servicehallId, |
|
|
|
returnNetworkId: e.returnNetworkName, |
|
|
|
returnNetworkName: e.returnNetworkName, |
|
|
|
returnLogisticsCompany: e.returnLogisticsCompany, |
|
|
|
returnLogisticsNumber: e.returnLogisticsNumber, |
|
|
|
returnReason: e.returnReason, |
|
|
|
opId: getItem(StorageKeys.OpenId), |
|
|
|
}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
//提交退货申请 |
|
|
|
const submit = (e : any) => { |
|
|
|
confirm( |
|
|
|
"是否确认退货？", |
|
|
|
() => { |
|
|
|
const curOutlet = state.outlets.find( |
|
|
|
(out) => out.name === e.returnNetworkName |
|
|
|
); |
|
|
|
const options = { |
|
|
|
type: 2, |
|
|
|
data: { |
|
|
|
id: state.orderInfo.id, |
|
|
|
returnMode: e.returnMode, |
|
|
|
// returnNetworkId: curOutlet == null ? "" : curOutlet.servicehallId, |
|
|
|
returnNetworkId: e.returnNetworkName, |
|
|
|
returnNetworkName: e.returnNetworkName, |
|
|
|
returnLogisticsCompany: e.returnLogisticsCompany, |
|
|
|
returnLogisticsNumber: e.returnLogisticsNumber, |
|
|
|
returnReason: e.returnReason, |
|
|
|
opId: getItem(StorageKeys.OpenId), |
|
|
|
}, |
|
|
|
method: "POST", |
|
|
|
showLoading: true, |
|
|
|
}; |
|
|
|
|
|
|
|
request(orderReturn, options).then((res) => { |
|
|
|
confirm( |
|
|
|
"您申办的ETC订单已申请退货", |
|
|
|
() => { |
|
|
|
uni.$emit("refreshOrder"); |
|
|
|
uni.navigateBack(); |
|
|
|
}, |
|
|
|
"申请成功", |
|
|
|
false |
|
|
|
); |
|
|
|
}); |
|
|
|
}, |
|
|
|
"退货确认", |
|
|
|
true |
|
|
|
); |
|
|
|
}; |
|
|
|
request(orderReturn, options).then((res) => { |
|
|
|
confirm( |
|
|
|
"您申办的ETC订单已申请退货", |
|
|
|
() => { |
|
|
|
uni.$emit("refreshOrder"); |
|
|
|
uni.navigateBack(); |
|
|
|
}, |
|
|
|
"申请成功", |
|
|
|
false |
|
|
|
); |
|
|
|
}); |
|
|
|
}, |
|
|
|
"退货确认", |
|
|
|
true |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
onLoad((option) => { |
|
|
|
state.orderInfo = JSON.parse(option.data); |
|
|
|
state.formData[0].hint = state.orderInfo.orderId; |
|
|
|
state.formData[1].hint = state.orderInfo.vehiclePlate; |
|
|
|
state.formData[2].hint = getOrderStatusName(state.orderInfo.orderStep); |
|
|
|
onLoad((option) => { |
|
|
|
state.orderInfo = JSON.parse(option.data); |
|
|
|
state.formData[0].hint = state.orderInfo.orderId; |
|
|
|
state.formData[1].hint = state.orderInfo.vehiclePlate; |
|
|
|
state.formData[2].hint = getOrderStatusName(state.orderInfo.orderStep); |
|
|
|
|
|
|
|
//获取物流公司 |
|
|
|
getLogisticsList(); |
|
|
|
//获取物流公司 |
|
|
|
getLogisticsList(); |
|
|
|
|
|
|
|
//获取退货网点 |
|
|
|
getOutletList(); |
|
|
|
}); |
|
|
|
//获取退货网点 |
|
|
|
getOutletList(); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
page { |
|
|
|
background-color: #f3f3f3; |
|
|
|
padding-bottom: 30rpx; |
|
|
|
} |
|
|
|
page { |
|
|
|
background-color: #f3f3f3; |
|
|
|
padding-bottom: 30rpx; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.box { |
|
|
|
margin: 20rpx 0rpx; |
|
|
|
background-color: white; |
|
|
|
padding: 0 20rpx 20rpx; |
|
|
|
} |
|
|
|
.box { |
|
|
|
margin: 20rpx 0rpx; |
|
|
|
background-color: white; |
|
|
|
padding: 0 20rpx 20rpx; |
|
|
|
} |
|
|
|
</style> |
