433 lines
9.4 KiB
Vue
433 lines
9.4 KiB
Vue
|
<template>
|
|||
|
|
<view class="contBox">
|
|||
|
|
<view class="oneBox box">
|
|||
|
|
<view class="item" v-for="item in goodsList" :key="item.id">
|
|||
|
|
<image :src="item.pic_url" mode="aspectFill"></image>
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="txtBox flex">
|
|||
|
|
<text class="name">{{item.goods_name}}</text>
|
|||
|
|
<view class="price">
|
|||
|
|
<text class="icon">￥</text>
|
|||
|
|
<text>{{item.price}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="sku flex">
|
|||
|
|
<text>{{item.sku_name}}</text>
|
|||
|
|
<text>x{{item.number}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="twoBox box">
|
|||
|
|
<view class="item flex" style="border-bottom: 1px solid #f5f5f5;">
|
|||
|
|
<view>退款方式</view>
|
|||
|
|
<view class="text">仅退款</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item flex" @click="showReason = true">
|
|||
|
|
<view>退款原因</view>
|
|||
|
|
<view style="display: flex;align-items: center;">
|
|||
|
|
<view class="text">{{columnsValue}}</view>
|
|||
|
|
<up-icon name="arrow-right" size="15" style="color: #98989F;" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="threeBox flex">
|
|||
|
|
<view>退款金额</view>
|
|||
|
|
<view class="price">￥{{refund_price}}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="fourBox">最多可退￥{{refund_price}}（含运费￥{{order.freight_price}}）。退款将返还实际支付金额</view>
|
|||
|
|
|
|||
|
|
<view class="spBox">
|
|||
|
|
<view class="sp">退款说明</view>
|
|||
|
|
<up-textarea v-model="message" count placeholder="选填，最多200字" style="font-size: 28rpx;" :height="70" :maxlength="200"></up-textarea>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="refundImg">
|
|||
|
|
<view class="tit">上传凭证</view>
|
|||
|
|
<view class="comment">
|
|||
|
|
<view class="imgBox">
|
|||
|
|
<view class="imgList" v-for="(item, i) in picList" :key="i">
|
|||
|
|
<image :src="item.url" mode="aspectFill" class="img"></image>
|
|||
|
|
<view @click="deleteImage(i)" class="close"><view class="heng"></view></view>
|
|||
|
|
</view>
|
|||
|
|
<view @click="uploadImage()" class="plus" v-if="picList.length == 3 ? false : true">
|
|||
|
|
<up-icon name="camera-fill" color="#E0E0E0" size="22" />
|
|||
|
|
<text>图片上传</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<text style="color:#98989F; font-size: 26rpx;">可上传3张图片</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="comment-btn" @click="submitBtn()">提交</view>
|
|||
|
|
|
|||
|
|
<div class="top" v-if="success">申请退款成功</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- 退款原因 -->
|
|||
|
|
<up-popup :show="showReason" :round="10" mode="bottom" close-on-click-overlay closeable @close="showReason = false">
|
|||
|
|
<view class="reasonbox">
|
|||
|
|
<view class="title">退款原因</view>
|
|||
|
|
<view class="list">
|
|||
|
|
<view class="row flex" v-for="(item, i) in reasonList" :key="i" @click="onConfirm(item, i)">
|
|||
|
|
<view class="tit">{{item}}</view>
|
|||
|
|
<up-icon v-if="i + 1 === reasonIndex" name="checkbox-mark" :color="Color" size="20" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</up-popup>
|
|||
|
|
|
|||
|
|
<!-- 隐私协议弹窗 -->
|
|||
|
|
<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { ref, reactive, toRefs } from 'vue'
|
|||
|
|
import { get, post } from '@/api/request.js'
|
|||
|
|
import api from '/api/index'
|
|||
|
|
import { showToast, judgePrivacy } from '@/components/common.js'
|
|||
|
|
import { Style } from '@/utils/list.js'
|
|||
|
|
import privacyPopup from '@/components/privacyPopup/index.vue'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
privacyPopup
|
|||
|
|
},
|
|||
|
|
setup() {
|
|||
|
|
const data = reactive({
|
|||
|
|
goodsList: [],
|
|||
|
|
refund_price: '',
|
|||
|
|
itemIds: [],
|
|||
|
|
success: false,
|
|||
|
|
reasonList: [
|
|||
|
|
'多拍/错拍/不想要',
|
|||
|
|
'未按约定时间发货',
|
|||
|
|
'配送时间太长',
|
|||
|
|
'协商一致退款',
|
|||
|
|
'其他'
|
|||
|
|
],
|
|||
|
|
message: '',
|
|||
|
|
picList: [],
|
|||
|
|
order: {},
|
|||
|
|
columnsValue: '请选择',
|
|||
|
|
urls: api.url + '/api/v1/upload',
|
|||
|
|
showReason: false,
|
|||
|
|
reasonIndex: 0,
|
|||
|
|
odeId: '',
|
|||
|
|
Color: uni.getStorageSync('theme_color'),
|
|||
|
|
priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
|
|||
|
|
showPrivacy: false
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const getValue = (val) => {
|
|||
|
|
data.message = val.detail
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const uploadImage = async () => {
|
|||
|
|
if(await judgePrivacy()) {
|
|||
|
|
data.showPrivacy = true
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
uni.chooseImage({
|
|||
|
|
success(res) {
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '正在上传...',
|
|||
|
|
mask: true
|
|||
|
|
})
|
|||
|
|
const tempFilePaths = res.tempFilePaths
|
|||
|
|
for (let i = 0; i < tempFilePaths.length; i++) {
|
|||
|
|
uni.uploadFile({
|
|||
|
|
url: data.urls,
|
|||
|
|
filePath: tempFilePaths[i],
|
|||
|
|
name: 'file',
|
|||
|
|
header: {
|
|||
|
|
Authorization: uni.getStorageSync('token') || '',
|
|||
|
|
accept: 'application/json',
|
|||
|
|
appid: api.appId
|
|||
|
|
},
|
|||
|
|
success(ress) {
|
|||
|
|
var img = JSON.parse(ress.data).data
|
|||
|
|
data.picList.push({
|
|||
|
|
url: img.link
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
uni.hideLoading()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const deleteImage = (i) => {
|
|||
|
|
data.picList.splice(i, 1)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const onConfirm = (event, index) => {
|
|||
|
|
data.columnsValue = event
|
|||
|
|
data.reasonIndex = index + 1
|
|||
|
|
data.showReason = false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const submitBtn = () => {
|
|||
|
|
if (!data.reasonIndex) {
|
|||
|
|
showToast('请选择退款原因')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '退款中...',
|
|||
|
|
mask: true
|
|||
|
|
})
|
|||
|
|
post(`/api/v1/orderRefund/batch/refund`, {
|
|||
|
|
order_item_ids: data.itemIds,
|
|||
|
|
user_pic_urls: data.picList,
|
|||
|
|
user_refund_reason: data.reasonIndex,
|
|||
|
|
user_refund_des: data.message
|
|||
|
|
}).then((res) => {
|
|||
|
|
data.success = true
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.redirectTo({
|
|||
|
|
url: '/pages/order/info/index?id=' + data.odeId
|
|||
|
|
})
|
|||
|
|
data.success = false
|
|||
|
|
}, 1000)
|
|||
|
|
uni.hideLoading()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getItemsInfo(id) {
|
|||
|
|
get(`/api/v1/orderRefund/items/${id}`).then((res) => {
|
|||
|
|
data.goodsList = res.data.order_items
|
|||
|
|
data.refund_price = res.data.refund_price
|
|||
|
|
data.itemIds = res.data.order_item_ids
|
|||
|
|
data.order = res.data.order
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
...toRefs(data),
|
|||
|
|
uploadImage,
|
|||
|
|
deleteImage,
|
|||
|
|
onConfirm,
|
|||
|
|
submitBtn,
|
|||
|
|
getValue,
|
|||
|
|
getItemsInfo
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.odeId = options.id
|
|||
|
|
this.getItemsInfo(options.order_id)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.top{
|
|||
|
|
position: fixed;
|
|||
|
|
top: 40%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%);
|
|||
|
|
background: rgba(0, 0, 0, 0.7);
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reasonbox{
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
min-height: 50vh;
|
|||
|
|
.title{
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #303030;
|
|||
|
|
font-weight: bold;
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|||
|
|
}
|
|||
|
|
.list{
|
|||
|
|
padding-bottom: 100rpx;
|
|||
|
|
.row{
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
.tit{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #707070;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.flex{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.contBox{
|
|||
|
|
padding: 24rpx;
|
|||
|
|
.box{
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 0 24rpx 10rpx 24rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
.oneBox{
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
.item{
|
|||
|
|
display: flex;
|
|||
|
|
height: 144rpx;
|
|||
|
|
padding: 24rpx 0;
|
|||
|
|
border-top: 1px solid #f5f5f5;
|
|||
|
|
&:first-child{
|
|||
|
|
border-top: none;
|
|||
|
|
}
|
|||
|
|
image {
|
|||
|
|
width: 144rpx;
|
|||
|
|
height: 100%;
|
|||
|
|
background: #cbcacb;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
}
|
|||
|
|
.right{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
.txtBox{
|
|||
|
|
color: #333;
|
|||
|
|
.name{
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
overflow: hidden;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
.icon{
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.sku{
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
margin-top: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.twoBox{
|
|||
|
|
.item{
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.threeBox{
|
|||
|
|
height: 86rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
color: #333;
|
|||
|
|
.price{
|
|||
|
|
color: v-bind('priceColor');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.spBox{
|
|||
|
|
padding: 20rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
.sp{
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fourBox{
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #98989f;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refundImg{
|
|||
|
|
padding: 20rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
background: #fff;
|
|||
|
|
.tit{
|
|||
|
|
color:#303030;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
width: 130rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.imgBox{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
.imgList{
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
margin: 0 20rpx 20rpx 0;
|
|||
|
|
position: relative;
|
|||
|
|
.img{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
.close{
|
|||
|
|
position: absolute;
|
|||
|
|
right: -15rpx;
|
|||
|
|
top: -20rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
background-color: rgba(0,0,0,0.6);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
.heng{
|
|||
|
|
display: block;
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 4rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin: 18rpx auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.plus{
|
|||
|
|
border: 1px solid #e1e1e1;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
width: 160rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin: 0 20rpx 20rpx 0;
|
|||
|
|
text{
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #DBDBDB;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.comment-btn{
|
|||
|
|
margin-top: 60rpx;
|
|||
|
|
width: 80%;
|
|||
|
|
background-color: v-bind('Color');
|
|||
|
|
color: #fff;
|
|||
|
|
height: 86rpx;
|
|||
|
|
line-height: 86rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 49rpx;
|
|||
|
|
margin-left: 10%;
|
|||
|
|
}
|
|||
|
|
</style>
|