512 lines
13 KiB
Vue
512 lines
13 KiB
Vue
<template>
|
|
<layout>
|
|
<uv-navbar
|
|
:fixed="false"
|
|
:title="title"
|
|
left-arrow
|
|
@leftClick="goBack"
|
|
/>
|
|
<div v-if="orderInfoData">
|
|
<div class="mb-20 ">
|
|
<card
|
|
v-for="(item, index) in goodsList"
|
|
class="p-20">
|
|
<Goods
|
|
row
|
|
imgWidth="200rpx"
|
|
info-padding="10rpx 40rpx"
|
|
:goods="item.cartInfo.productInfo"
|
|
>
|
|
<template #options>
|
|
<view class="goods-options">
|
|
<!-- sku select -->
|
|
<view class="sku-row flex">
|
|
<view
|
|
class="sku-info flex flex-jc__sb flex-ai__center"
|
|
>
|
|
<view class="info">
|
|
{{
|
|
item.cartInfo.productInfo && item.cartInfo.productInfo.attrInfo && item.cartInfo.productInfo.attrInfo.sku
|
|
}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- bottom -->
|
|
<view class="price-row flex flex-ai__center flex-jc__sb">
|
|
<!-- price -->
|
|
<view class="price-box flex flex-ai__end">
|
|
￥{{ item.cartInfo.truePrice }}
|
|
</view>
|
|
<view
|
|
class="cart-num flex flex-ai__center"
|
|
@click.stop>
|
|
<view
|
|
class="button"
|
|
@click="setCartNum(item,index,0)">-
|
|
</view>
|
|
<view class="input">
|
|
<input
|
|
type="text"
|
|
v-model="goodsCartNumList[index]"
|
|
@blur="(e)=>changeCartNumInput(e,item,index)" />
|
|
</view>
|
|
<view
|
|
class="button"
|
|
@click="setCartNum(item,index,1)">+
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</Goods>
|
|
</card>
|
|
</div>
|
|
|
|
<view class="y-list">
|
|
<uv-list border>
|
|
<uv-list-item
|
|
border
|
|
title="货物状态"
|
|
clickable
|
|
right-text="请选择"
|
|
show-arrow
|
|
v-if="refundType === 1"
|
|
>
|
|
<view class="y-list-content">
|
|
<view class="y-list-label">货物状态</view>
|
|
<view
|
|
class="y-list-select-placeholder"
|
|
@tap="openReceivingStatusPicker"
|
|
v-if="!data.receivingStatus"
|
|
>
|
|
请选择
|
|
</view>
|
|
<view
|
|
class="y-list-select"
|
|
@tap="openReceivingStatusPicker"
|
|
v-if="data.receivingStatus"
|
|
>
|
|
{{ data.receivingStatus }}
|
|
</view>
|
|
</view>
|
|
<uv-picker
|
|
ref="receivingStatusPicker"
|
|
:columns="receivingStatusClumns"
|
|
@confirm="receivingStatusConfirm"
|
|
></uv-picker>
|
|
</uv-list-item>
|
|
<uv-list-item
|
|
border
|
|
title="退款原因"
|
|
clickable
|
|
right-text="请选择"
|
|
show-arrow
|
|
@click=""
|
|
>
|
|
<view class="y-list-content">
|
|
<view class="y-list-label">退款原因</view>
|
|
<view
|
|
class="y-list-select-placeholder"
|
|
@tap="openReasonForApplicationPicker"
|
|
v-if="!data.reasonForApplication"
|
|
>
|
|
请选择
|
|
</view>
|
|
<view
|
|
class="y-list-select"
|
|
@tap="openReasonForApplicationPicker"
|
|
v-if="data.reasonForApplication"
|
|
>
|
|
{{ data.reasonForApplication }}
|
|
</view>
|
|
</view>
|
|
</uv-list-item>
|
|
</uv-list>
|
|
<uv-picker
|
|
ref="reasonForApplicationPicker"
|
|
:columns="reasonForApplication"
|
|
@confirm="reasonForApplicationConfirm"
|
|
></uv-picker>
|
|
</view>
|
|
<view class="y-list">
|
|
<uv-list border>
|
|
<uv-list-item border>
|
|
<view class="y-list-content">
|
|
<view class="y-list-label">退款金额</view>
|
|
<view class="y-list-value">
|
|
¥{{ totalPrice }}
|
|
</view>
|
|
</view>
|
|
</uv-list-item>
|
|
<uv-list-item border>
|
|
<view class="y-list-content">
|
|
<view class="y-list-label">退款积分</view>
|
|
<view class="y-list-value">
|
|
{{ totalIntegral }}
|
|
</view>
|
|
</view>
|
|
</uv-list-item>
|
|
<uv-list-item border>
|
|
<view class="y-list-content">
|
|
<view class="y-list-label">申请说明</view>
|
|
<view class="y-list-input">
|
|
<uv-input
|
|
placeholder="请输入内容"
|
|
border="none"
|
|
v-model="data.applicationInstructions"
|
|
></uv-input>
|
|
</view>
|
|
</view>
|
|
</uv-list-item>
|
|
</uv-list>
|
|
</view>
|
|
<view class="card noBorder full">
|
|
<view class="card-head">
|
|
<div class="card-title">上传凭证</div>
|
|
</view>
|
|
<view class="card-content">
|
|
<upload-file v-model="list" />
|
|
</view>
|
|
</view>
|
|
|
|
</div>
|
|
<div class="form-buttons">
|
|
<uv-button
|
|
round
|
|
block
|
|
type="primary"
|
|
@tap="handleApplyForAfterSales"
|
|
>
|
|
提交
|
|
</uv-button>
|
|
</div>
|
|
</layout>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
import { computed, ref } from 'vue'
|
|
import { applyForAfterSales, applyForAfterSalesInfo } from '@/api/order'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { useRouter } from "@/hooks/useRouter";
|
|
import { useInterface } from "@/hooks/useInterface";
|
|
import Goods from "@/components/goodsComponents/Goods.vue";
|
|
|
|
|
|
const {toast} = useInterface()
|
|
const {getParams, goBack, push} = useRouter()
|
|
const goodsList = ref([])
|
|
const goodsSelect = ref([])
|
|
const totalPrice = ref(0);
|
|
const totalIntegral = ref(0)
|
|
const orderInfoData = ref(null)
|
|
const reasonForApplicationPicker = ref(null)
|
|
const receivingStatusPicker = ref(null)
|
|
|
|
const refundType = ref(null)
|
|
const list = ref([])
|
|
const receivingStatusClumns = ref([[
|
|
'未收到货',
|
|
'已收到货'
|
|
]])
|
|
const reasonForApplication = ref([
|
|
[
|
|
"收货地址填错了",
|
|
"与描述不符",
|
|
"信息填错了，重新拍",
|
|
"收到商品损坏了",
|
|
"未按预定时间发货",
|
|
"其它原因"
|
|
]
|
|
])
|
|
|
|
const data = ref({
|
|
"orderId": "",
|
|
// 服务类型 0仅退款1退货退款 serviceType;
|
|
"serviceType": '',
|
|
// 申请原因
|
|
"reasonForApplication": "",
|
|
// 申请说明
|
|
"applicationInstructions": "",
|
|
// 申请说明图片
|
|
"applicationDescriptionPicture": "",
|
|
"productParamList": [],
|
|
receivingStatus: null
|
|
})
|
|
|
|
|
|
const title = computed(() => {
|
|
return refundType.value === 0 ? `申请退款` : '申请退货退款';
|
|
});
|
|
|
|
// 打开退款原因窗口
|
|
const openReasonForApplicationPicker = () => {
|
|
reasonForApplicationPicker.value.open();
|
|
}
|
|
|
|
// 退款原因窗口确认
|
|
const reasonForApplicationConfirm = (e) => {
|
|
data.value.reasonForApplication = e.value[0]
|
|
reasonForApplicationPicker.value.close();
|
|
}
|
|
|
|
// 打开货物状态窗口
|
|
const openReceivingStatusPicker = () => {
|
|
receivingStatusPicker.value.open();
|
|
}
|
|
|
|
// 货物状态窗口确认
|
|
const receivingStatusConfirm = (e) => {
|
|
data.value.receivingStatus = e.value[0]
|
|
receivingStatusPicker.value.close();
|
|
}
|
|
|
|
const goodsCartNumList = ref([])
|
|
|
|
|
|
const setCartNum = (goods, index, type) => {
|
|
if (type === 0) {
|
|
// -
|
|
if (goodsCartNumList.value[index] <= 1) {
|
|
goodsCartNumList.value[index] = 1
|
|
} else {
|
|
--goodsCartNumList.value[index]
|
|
}
|
|
} else {
|
|
console.log(goodsCartNumList.value[index], goods.cartInfo.cartNum, goodsCartNumList.value[index] >= goods.cartInfo.cartNum)
|
|
if (goodsCartNumList.value[index] >= goods.cartInfo.cartNum) {
|
|
goodsCartNumList.value[index] = goods.cartInfo.cartNum
|
|
} else {
|
|
++goodsCartNumList.value[index]
|
|
}
|
|
}
|
|
handleOrderInfo()
|
|
}
|
|
|
|
const changeCartNumInput = (e, goods, index) => {
|
|
const value = Number(e.detail.value)
|
|
if (value <= 0) {
|
|
goodsCartNumList.value[index] = 0
|
|
} else if (value >= goodsCartNumList.value[index]) {
|
|
goodsCartNumList.value[index] = goods.cartInfo.cartNum
|
|
} else {
|
|
goodsCartNumList.value[index] = value
|
|
}
|
|
handleOrderInfo()
|
|
}
|
|
|
|
|
|
const handleOrderInfo = async () => {
|
|
const productDetails = goodsList.value.map((goods, index) => {
|
|
return {
|
|
goods: goods.cartInfo.productAttrUnique,
|
|
number: goodsCartNumList.value[index]
|
|
}
|
|
})
|
|
|
|
const option = {
|
|
key: key.value,
|
|
productDetails
|
|
}
|
|
const res = await applyForAfterSalesInfo(option)
|
|
orderInfoData.value = res
|
|
goodsList.value = res.filter(item => goodsSelect.value.includes(item.cartInfo.productAttrUnique))
|
|
if (goodsCartNumList.value.length < goodsList.value.length) {
|
|
goodsCartNumList.value = goodsList.value.map(goods => goods.cartInfo.cartNum)
|
|
}
|
|
|
|
let price = 0
|
|
let integral = 0
|
|
let productParamList = []
|
|
goodsList.value.forEach((item, index) => {
|
|
price += item.refundablePrice * goodsCartNumList.value[index]
|
|
integral += item.refundableIntegral * goodsCartNumList.value[index]
|
|
productParamList.push({
|
|
productId: item.productId,
|
|
productAttrUnique: item.cartInfo.productAttrUnique
|
|
})
|
|
})
|
|
|
|
totalPrice.value = price.toFixed(2)
|
|
totalIntegral.value = integral.toFixed(2)
|
|
data.value.orderId = res[0].orderId
|
|
data.value.serviceType = refundType.value
|
|
data.value.productParamList = productParamList
|
|
}
|
|
|
|
|
|
const handleApplyForAfterSales = async () => {
|
|
if (!data.value.receivingStatus && refundType.value === 1) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: '请选择货物状态',
|
|
duration: 2000
|
|
});
|
|
return
|
|
}
|
|
if (!data.value.reasonForApplication) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: '请选择申请原因',
|
|
duration: 2000
|
|
});
|
|
return
|
|
}
|
|
if (!data.value.applicationInstructions) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: '请选择申请说明',
|
|
duration: 2000
|
|
});
|
|
return
|
|
}
|
|
data.value.receivingStatus = data.value.receivingStatus === '未收到货' ? 0 : 1
|
|
// 设置退货数量
|
|
data.value.productParamList.forEach((item, index) => {
|
|
item.number = goodsCartNumList.value[index]
|
|
})
|
|
|
|
const res = await applyForAfterSales({
|
|
...data.value,
|
|
applicationDescriptionPicture: list.value.map(v => {
|
|
return v.url
|
|
}).join(',')
|
|
})
|
|
toast({
|
|
title: '申请成功，请等待审核'
|
|
})
|
|
push({url: '/pages/refundInfo/refundInfo'}, {
|
|
type: 'redirectTo',
|
|
data: {
|
|
id: res,
|
|
},
|
|
})
|
|
}
|
|
|
|
const key = ref('')
|
|
onLoad((options) => {
|
|
const params = getParams(options)
|
|
key.value = params.id
|
|
handleOrderInfo()
|
|
goodsSelect.value = params.goods
|
|
refundType.value = params.refundType
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.shopping-checkbox {
|
|
}
|
|
|
|
.shopping-action {
|
|
padding-left: 34rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
&-checkbox {
|
|
flex: 1
|
|
}
|
|
|
|
&-total {
|
|
line-height: 48rpx;
|
|
font-size: 34rpx;
|
|
color: #333333;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
&-btn {
|
|
width: 224rpx;
|
|
}
|
|
}
|
|
|
|
.p-20 {
|
|
padding: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// 商品SKU 数量等操作条
|
|
.goods-options {
|
|
width: 100%;
|
|
|
|
.sku-row {
|
|
margin-bottom: 30rpx;
|
|
|
|
.sku-info {
|
|
@include usePadding(10, 4);
|
|
border: 1rpx solid #ccc;
|
|
border-radius: 5rpx;
|
|
font-size: 24rpx;
|
|
transition: all .3s;
|
|
max-width: 100%;
|
|
|
|
|
|
.info {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&:active {
|
|
scale: 1.1;
|
|
}
|
|
|
|
.icon {
|
|
margin-left: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.price-row {
|
|
width: 100%;
|
|
|
|
.price-box {
|
|
font-size: 30rpx;
|
|
color: $primary-color;
|
|
|
|
.old-price {
|
|
font-size: 20rpx;
|
|
color: $tips-color;
|
|
text-decoration: line-through;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.cart-num {
|
|
font-size: 24rpx;
|
|
|
|
.input {
|
|
width: 120rpx;
|
|
|
|
|
|
input {
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
font-size: 32rpx;
|
|
width: 34rpx;
|
|
aspect-ratio: 1/1;
|
|
border-radius: 5rpx;
|
|
border: 2rpx solid #cccccc;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all .3s;
|
|
|
|
&:active {
|
|
scale: 1.2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|