406 lines
8.5 KiB
Vue
406 lines
8.5 KiB
Vue
<template>
|
||
<view class="container safe-area-inset-bottom">
|
||
<MessageNotification />
|
||
<!-- 退款原因 -->
|
||
<view class="row-box">
|
||
<text>退款原因</text>
|
||
<view class="choose" @click="show = true">
|
||
{{info || '请选择'}}
|
||
<u-select v-model="show" :list="list" value-name="id" label-name="text" title="退款原因"
|
||
:safe-area-inset-bottom="true" @confirm="confirm">
|
||
</u-select>
|
||
<text class="iconfont icon-jiantou1" v-if="info==''"></text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 退款金额: -->
|
||
<view class="card">
|
||
<view class="price">
|
||
退款金额:
|
||
<text>￥{{RefundBaseList.total_pay_price}}</text>
|
||
</view>
|
||
<view class="y_price">含邮费 ￥{{RefundBaseList.trans_expenses}}</view>
|
||
<view class="explain">
|
||
<u-field v-model="txt" label="退款说明:" placeholder="请选填" type="textarea"
|
||
placeholder-style="color:'#999999'" :border-bottom="false">
|
||
</u-field>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 上传凭证 -->
|
||
<view class="card">
|
||
<view class="title">
|
||
上传凭证
|
||
</view>
|
||
<view class="btn_up">
|
||
<view class="pre-box" v-if="!showUploadList">
|
||
<view class="pre-item" v-for="(item, index) in lists" :key="index">
|
||
<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<u-upload :action="action" ref="uUpload" :show-upload-list="showUploadList" :custom-btn="true"
|
||
upload-text="点击上传" max-count="9" :header="headers" :form-data="formData">
|
||
<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
|
||
<u-icon name="camera" size="40" color="#C4C7CC"></u-icon>
|
||
<text>点击上传</text>
|
||
</view>
|
||
</u-upload>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="footer">
|
||
<text @click.stop="next()">提交</text>
|
||
</view>
|
||
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getRefundReson,
|
||
infoRefundBase,
|
||
postRefundBased
|
||
} from '../../request/api/api';
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
txt: "",
|
||
list: [{
|
||
value: '1',
|
||
label: '发错货'
|
||
},
|
||
{
|
||
value: '2',
|
||
label: '少发/漏发'
|
||
},
|
||
{
|
||
value: '3',
|
||
label: '拍错了'
|
||
},
|
||
{
|
||
value: '4',
|
||
label: '商品破损'
|
||
},
|
||
{
|
||
value: '5',
|
||
label: '不想要了'
|
||
},
|
||
],
|
||
|
||
// refund_types:[],
|
||
info: "",
|
||
action: "https://app.xiaokang88.com/member/v1/attachment/upload", // 演示地址
|
||
formData: {
|
||
store_id: uni.getStorageSync('store_id') || '11001'
|
||
},
|
||
showUploadList: false,
|
||
// 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
|
||
// 这里直接获取内部的lists变量即可
|
||
lists: [],
|
||
headers: {
|
||
authorization: "Bearer " + uni.getStorageSync('token'),
|
||
},
|
||
// img: "https://yanydy.oss-cn-hangzhou.aliyuncs.com/uploads/20230422/ae6a707e5a2269c51c6c316c14f327fe.png",
|
||
order_no: '',
|
||
RefundBaseList: {},
|
||
reasons: '',
|
||
order_id: '',
|
||
img: ""
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
this.order_id = op.id
|
||
this.getRefundBaseList()
|
||
},
|
||
methods: {
|
||
next() {
|
||
this.img = this.$refs.uUpload.lists.reduce((con, item) => {
|
||
con.push(item.response.data.url)
|
||
return con
|
||
}, [])
|
||
// console.log(this.lists);
|
||
this.postRefundBase()
|
||
},
|
||
|
||
// 上传
|
||
submit() {
|
||
// let files = [];
|
||
// // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
|
||
// files = this.$refs.uUpload.lists.filter(val => {
|
||
// return val.progress == 100;
|
||
// })
|
||
// this.$refs.uUpload.formData.store_id = uni.getStorageSync('store_id') || '11001';
|
||
// console.log(files, 'files')
|
||
|
||
|
||
// this.img = this.$refs.uUpload.lists.reduce((con, item) => {
|
||
// con.push(item.response.data.url)
|
||
// return con
|
||
// }, [])
|
||
|
||
console.log(this.lists, 'img');
|
||
},
|
||
// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
|
||
confirm(e) {
|
||
this.info = e[0].label
|
||
this.reasons = e[0].label
|
||
// console.log(e);
|
||
},
|
||
//获取退款原因
|
||
getRefundBaseList() {
|
||
getRefundReson({
|
||
method: "post",
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
}
|
||
}).then((res) => {
|
||
// console.log(res, 'list');
|
||
if (res.data.errcode == 0) {
|
||
// console.log(res);
|
||
this.list = res.data.data
|
||
}
|
||
|
||
})
|
||
},
|
||
|
||
// 退款详情
|
||
getInfoList() {
|
||
infoRefundBase({
|
||
method: "post",
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
order_id: this.order_id
|
||
}
|
||
}).then((res) => {
|
||
if (res.data.errcode == 0) {
|
||
// console.log(res.data);
|
||
this.RefundBaseList = res.data.data
|
||
}
|
||
|
||
})
|
||
},
|
||
//提交退款申请
|
||
postRefundBase() {
|
||
if (!this.reasons) {
|
||
uni.showToast({
|
||
title: '请输入退款原因',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
if (!this.txt) {
|
||
uni.showToast({
|
||
title: '请输入退款说明',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
return
|
||
}
|
||
postRefundBased({
|
||
method: "post",
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
order_id: this.order_id,
|
||
reason: this.reasons,
|
||
refund_images: this.img,
|
||
reamrk: this.txt
|
||
|
||
}
|
||
}).then((res) => {
|
||
// console.log(res, 'list');
|
||
if (res.data.errcode !== 0) {
|
||
this.$refs.uToast.show({
|
||
title: res.data.msg,
|
||
type: 'default',
|
||
icon: false
|
||
})
|
||
setTimeout(res => {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
}, 600)
|
||
return
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/subPackages/my/my-drug/drug-list?index=' + 2
|
||
})
|
||
}
|
||
|
||
})
|
||
},
|
||
},
|
||
onReady() {
|
||
// 得到整个组件对象，内部图片列表变量为"lists"
|
||
this.lists = this.$refs.uUpload.lists;
|
||
console.log(1);
|
||
},
|
||
mounted() {
|
||
this.getInfoList()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container {
|
||
width: 750rpx;
|
||
min-height: 100vh;
|
||
max-height: 100%;
|
||
background: #F5F5F5;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
padding-top: 20rpx;
|
||
|
||
.title {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
}
|
||
|
||
.row-box {
|
||
width: 750rpx;
|
||
height: 88rpx;
|
||
background: #FFFFFF;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 40rpx;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
}
|
||
|
||
.choose {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.iconfont {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card {
|
||
width: 750rpx;
|
||
background: #FFFFFF;
|
||
font-family: PingFang SC-Bold, PingFang SC;
|
||
padding: 34rpx 40rpx;
|
||
margin: 20rpx 0;
|
||
|
||
.price {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
color: #FC3636;
|
||
}
|
||
}
|
||
|
||
.y_price {
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
margin: 32rpx 0;
|
||
}
|
||
|
||
.explain {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #232323;
|
||
|
||
::v-deep .u-field {
|
||
padding: 0;
|
||
}
|
||
}
|
||
|
||
.btn_up {
|
||
margin-top: 20rpx;
|
||
|
||
.pre-box {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
.pre-item {
|
||
margin-bottom: 20rpx;
|
||
|
||
.pre-item-image {
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.wrap {
|
||
padding: 24rpx;
|
||
}
|
||
|
||
.slot-btn {
|
||
width: 128rpx;
|
||
height: 128rpx;
|
||
background: #F3F4F5;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
text {
|
||
width: 96rpx;
|
||
height: 34rpx;
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #A7ABB0;
|
||
line-height: 28rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
width: 750rpx;
|
||
height: 110rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2rpx solid #F2F3F5;
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: env(safe-area-inset-bottom);
|
||
|
||
text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 686rpx;
|
||
height: 86rpx;
|
||
background: #4175EE;
|
||
border-radius: 64rpx;
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
</style> |