594 lines
19 KiB
Vue
594 lines
19 KiB
Vue
<template>
|
|
<view style="background: #F1F2F8;min-height: 100vh;">
|
|
<view style="padding: 30rpx 30rpx 250rpx 30rpx;">
|
|
<view style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx">
|
|
<view style="display: flex;align-self: center;align-items: start;">
|
|
<view style="width: 45%;">
|
|
<image :src="info.detail.headimage" style="width: 280rpx; height: 200rpx;" mode="aspectFill">
|
|
</image>
|
|
</view>
|
|
<view style="padding-left: 20rpx;">
|
|
<view style="font-size: 36rpx;font-weight: 600;">{{info.detail.title}}</view>
|
|
<view style="font-size: 26rpx;color: #7A7A7A;margin-top: 15rpx;">
|
|
<image src="/static/center/address.png"
|
|
style="width: 40rpx;height: 40rpx;vertical-align: middle;"></image>
|
|
<text style="vertical-align: middle;">{{info.detail.address}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="height: 1px;width: 70%;background: #D9D9D9;margin: 45rpx auto;"></view>
|
|
<view v-if="infoRefund!=''" class="item-spacing"
|
|
style="display: flex; justify-content: space-between; font-size: 26rpx;">
|
|
<view style="color: #7A7A7A;">当前状态</view>
|
|
<view style="color: #FF6D6D;" v-if="infoRefund.service_stauts==1">机构处理中</view>
|
|
<view style="color: #FF6D6D;" v-if="infoRefund.service_stauts==4">待用户确认</view>
|
|
</view>
|
|
<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;">
|
|
<view style="color: #7A7A7A;">课程机构</view>
|
|
<view style="color: #343434;">{{info.shop.name}}</view>
|
|
</view>
|
|
<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;">
|
|
<view style="color: #7A7A7A;">讲师/电话</view>
|
|
<view style="color: #343434;" @click="callPhone(info.shop.tel)">
|
|
<text style="vertical-align: middle;">{{info.detail.teacher.name}}/{{info.shop.tel}}</text>
|
|
<image src="/static/tel.png" style="width: 40rpx;height: 40rpx;vertical-align: middle;"></image>
|
|
</view>
|
|
</view>
|
|
<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;">
|
|
<view style="color: #7A7A7A;">订单号</view>
|
|
<view style="color: #343434;">{{info.order_no}}</view>
|
|
</view>
|
|
<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;">
|
|
<view style="color: #7A7A7A;">购买时间</view>
|
|
<view style="color: #343434;">{{info.paytime_text}}</view>
|
|
</view>
|
|
<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;">
|
|
<view style="color: #7A7A7A;">全部课时</view>
|
|
<view style="color: #343434;">{{info.detail.classes_num}}</view>
|
|
</view>
|
|
<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;">
|
|
<view style="color: #7A7A7A;">已用课时</view>
|
|
<view style="color: #343434;">{{info.detail.use_num}}</view>
|
|
</view>
|
|
<view style="display: flex; justify-content: space-between; font-size: 26rpx;">
|
|
<view style="color: #7A7A7A;">购买价格</view>
|
|
<view style="color: #FF5F5F;">￥{{info.payprice}}</view>
|
|
</view>
|
|
<template v-if="infoRefund!=''&&infoRefund.service_stauts==4">
|
|
<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
|
|
<view style="display: flex; justify-content: space-between; font-size: 26rpx;">
|
|
<view style="color: #7A7A7A;">商家退款金额</view>
|
|
<view style="color: #FF2323;font-size: 40rpx;font-weight: 600;">
|
|
￥{{infoRefund.auto_recommend_price}}</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<view v-if="infoRefund=='' && info.detail.feel == 0 "
|
|
style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx;margin-top: 30rpx;">
|
|
<view class="flex align-items space-between" style="font-size: 26rpx;color: #7A7A7A;">
|
|
<view>
|
|
<text>退款原因</text>
|
|
<text style="color: #FF5F5F;">（必选)</text>
|
|
</view>
|
|
<view @click="refundShow=true">
|
|
<text style="vertical-align: middle;">选择原因</text>
|
|
<image src="/static/index/right.png"
|
|
style="width: 30rpx;height: 30rpx;vertical-align: middle;margin-left: 10rpx;">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view v-if="myReason!=''">
|
|
<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
|
|
<view style="font-size: 26rpx;">{{myReason}}</view>
|
|
</view>
|
|
</view>
|
|
<template v-if="infoRefund!=''">
|
|
<view style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx;margin-top: 30rpx;">
|
|
<view class="flex align-items space-between" style="font-size: 26rpx;color: #7A7A7A;">
|
|
<view>
|
|
<text>退款原因</text>
|
|
</view>
|
|
<view style="font-size: 26rpx;">
|
|
{{infoRefund.reason}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view v-if="infoRefund.sales_type==1"
|
|
style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx;margin-top: 30rpx;">
|
|
<view class="flex align-items space-between" style="font-size: 26rpx;color: #7A7A7A;">
|
|
<view>
|
|
<text>机构驳回退款原因</text>
|
|
</view>
|
|
</view>
|
|
<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
|
|
<view style="font-size: 26rpx;">{{infoRefund.reject_reason}}</view>
|
|
</view>
|
|
<view v-if="infoRefund.sales_type==4"
|
|
style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx;margin-top: 30rpx;">
|
|
<view class="flex align-items space-between" style="font-size: 26rpx;color: #7A7A7A;">
|
|
<view>
|
|
<text>用户驳回退款原因</text>
|
|
</view>
|
|
</view>
|
|
<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
|
|
<view style="font-size: 26rpx;">{{infoRefund.reject_reason}}</view>
|
|
<view style="margin-top: 20rpx;">
|
|
<u-grid :border="false" @click="click" :col="3" align="center">
|
|
<u-grid-item v-for="(item,index) in infoRefund.reject_images">
|
|
<image :src="item" style="width: 200rpx;height: 200rpx;border-radius: 20rpx;"
|
|
mode="aspectFill">
|
|
</image>
|
|
</u-grid-item>
|
|
</u-grid>
|
|
</view>
|
|
</view>
|
|
<view v-if="infoRefund.sales_type==7"
|
|
style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx;margin-top: 30rpx;">
|
|
<view class="flex align-items space-between" style="font-size: 26rpx;color: #7A7A7A;">
|
|
<view>
|
|
<text>平台驳回退款原因</text>
|
|
</view>
|
|
</view>
|
|
<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
|
|
<view style="font-size: 26rpx;">{{infoRefund.reject_reason}}</view>
|
|
</view> -->
|
|
</template>
|
|
</view>
|
|
<view class="buttonClack">
|
|
<view class="flex align-items" style="text-align: center;justify-content: space-around;">
|
|
<view style="width: 100%;" v-if="info.status=='4'">
|
|
<view @click="cancelOrder"
|
|
style="margin: 0 auto;color: #ffffff;;background-color: #008CFF;width: 80%;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
|
|
取 消</view>
|
|
</view>
|
|
<view style="width: 100%;" v-if="info.status=='3' && info.detail.feel == 0">
|
|
<view @click="submitAdd"
|
|
style="margin: 0 auto;background-color: #008CFF;color: #ffffff;width: 80%;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
|
|
申 请 售 后</view>
|
|
</view>
|
|
<view style="width: 100%;" v-if="info.status=='3' && info.detail.feel == 1">
|
|
<view
|
|
style="margin: 0 auto;background-color:#b5b5b5;color: #ffffff;width: 80%;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;font-size:30rpx;">
|
|
免费课程无法平台取消,请联系讲师手动取消
|
|
</view>
|
|
</view>
|
|
<!-- <template v-if="infoRefund.service_stauts==4">
|
|
<view>
|
|
<view @click="refuseShowOpen('no')"
|
|
style="border:2rpx solid #008CFF;color: #008CFF;;background-color: #ffffff;width: 300rpx;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
|
|
不同意</view>
|
|
</view>
|
|
<view>
|
|
<view @click="refuseShowOpen('yes')"
|
|
style="color: #ffffff;;background-color: #008CFF;width: 300rpx;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
|
|
同意</view>
|
|
</view>
|
|
</template> -->
|
|
</view>
|
|
</view>
|
|
<u-popup :show="refundShow" :round="10" :closeOnClickOverlay="true" @close="delShow">
|
|
<view style="padding: 30rpx 30rpx 0rpx 30rpx;">
|
|
<view>
|
|
<text style="font-size: 32rpx;">退款原因</text>
|
|
<text style="color: #FF5F5F;font-size: 24rpx;">（必选)</text>
|
|
</view>
|
|
<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
|
|
<view>
|
|
<u-radio-group v-model="radioValue" placement="column" activeColor="#008CFF">
|
|
<u-radio v-for="(item,index) in radioList" :name="index" :label="item"
|
|
:customStyle="{marginBottom: '20rpx'}"></u-radio>
|
|
</u-radio-group>
|
|
<view>
|
|
<u--textarea v-model="otherText" placeholder="请填写退款原因" :maxlength="150" count></u--textarea>
|
|
</view>
|
|
</view>
|
|
<view style="padding-top: 30rpx;">
|
|
<view @click="chickRadio"
|
|
style="text-align: center;margin: 0rpx auto; margin-bottom: 21rpx; background-color: #008CFF;color: #ffffff;width: 90%;height: 90rpx;border-radius: 90rpx;line-height: 90rpx;">
|
|
确 认</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- <u-popup :show="refuseShow" :round="10" mode="center" :customStyle="{width:'90%'}" :closeOnClickOverlay="false">
|
|
<view style="padding: 30rpx 30rpx 0rpx 30rpx;">
|
|
<view class="flex space-between align-items">
|
|
<view>
|
|
<text style="font-size: 40rpx;color: #008CFF;font-weight: 600;">详情</text>
|
|
</view>
|
|
<view @click="delShow">
|
|
<u-icon name="close" color="#008CFF" size="20px"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view style="height: 1px;width: 100%;background: #D9D9D9;margin: 20rpx auto;"></view>
|
|
<view>
|
|
<view>
|
|
<u--textarea v-model="otherText" placeholder="请填写拒绝理由" :maxlength="150" count></u--textarea>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view style="color: #7A7A7A;font-size: 24rpx;padding: 20rpx 0rpx;">图片补充(最多上传三张)</view>
|
|
<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="3"
|
|
:previewFullImage="true" width="180rpx" height="180rpx">
|
|
<image src="/static/index/upload.png" style="width: 180rpx;height: 180rpx;">
|
|
</u-upload>
|
|
</view>
|
|
<view class="flex align-items"
|
|
style="text-align: center;justify-content: space-around;padding-top: 30rpx;">
|
|
<view>
|
|
<view @click="refuseShow = false"
|
|
style="border:2rpx solid #008CFF;color: #008CFF;;background-color: #ffffff;width: 300rpx;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
|
|
取 消</view>
|
|
</view>
|
|
<view>
|
|
<view @click="userConfirmation()"
|
|
style="color: #ffffff;;background-color: #008CFF;width: 300rpx;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
|
|
确 认</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
refundShow: false,
|
|
radioValue: '',
|
|
//拒绝理由
|
|
otherText: '',
|
|
refuseShow: false,
|
|
fileList: [],
|
|
list: '',
|
|
id: 0,
|
|
info: {},
|
|
infoRefund: '',
|
|
myReason: '',
|
|
radioList: ['没有时间上课', '课程内容不符合预期', '位置不便', '其他课程时间冲突', '课程延期', '其他'],
|
|
classes_service_order_id: 0,
|
|
user_status: '',
|
|
};
|
|
|
|
},
|
|
onLoad(op) {
|
|
this.id = op.id;
|
|
this.getOrderInfo();
|
|
//classes_service_order_id
|
|
|
|
},
|
|
methods: {
|
|
refuseShowOpen(status) {
|
|
var that = this;
|
|
this.user_status = status;
|
|
if (status = 'no') {
|
|
this.refuseShow = true;
|
|
} else {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要同意吗？',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
that.userConfirmation();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
//用户处理售后接口
|
|
userConfirmation() {
|
|
uni.$u.http.post('/api/school.service_order/user_confirmation', {
|
|
order_no: this.classes_service_order_id,
|
|
status: this.user_status,
|
|
reject_reason: this.otherText,
|
|
reject_images: this.list,
|
|
}).then(res => {
|
|
console.log(res);
|
|
if (res.code == 1) {
|
|
uni.showToast({
|
|
title: '提交成功！',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
this.getOrderInfo();
|
|
}
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
title: '请求失败，请稍后再试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
//取消订单确认
|
|
cancelOrder() {
|
|
var that = this;
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定要撤销售后订单吗？',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
that.cancelOrderDo();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//取消订单
|
|
cancelOrderDo() {
|
|
uni.$u.http.post('/api/school.service_order/cancel', {
|
|
order_no: this.classes_service_order_id,
|
|
}).then(res => {
|
|
console.log(res);
|
|
if (res.code == 1) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
this.infoRefund = '';
|
|
this.getOrderInfo();
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
title: '请求失败，请稍后再试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
//选择退款原因
|
|
chickRadio() {
|
|
var reason = "";
|
|
if (this.radioValue === '') {
|
|
uni.showToast({
|
|
title: '请选择原因！',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
} else {
|
|
if (this.radioValue != 5) {
|
|
reason = this.radioList[this.radioValue];
|
|
} else {
|
|
reason = this.otherText;
|
|
}
|
|
}
|
|
this.refundShow = false;
|
|
this.myReason = reason;
|
|
},
|
|
//提交售后订单
|
|
submitAdd() {
|
|
console.log(this.radioValue);
|
|
var reason = "";
|
|
if (this.radioValue === '') {
|
|
uni.showToast({
|
|
title: '请选择原因！',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
} else {
|
|
if (this.radioValue != 5) {
|
|
reason = this.radioList[this.radioValue];
|
|
} else {
|
|
reason = this.otherText;
|
|
}
|
|
}
|
|
uni.$u.http.post('/api/school.service_order/create', {
|
|
classes_order_id: this.id,
|
|
reason: reason,
|
|
}).then(res => {
|
|
console.log(res);
|
|
if (res.code == 1) {
|
|
// uni.showToast({
|
|
// title: res.msg,
|
|
// icon: 'none',
|
|
// duration: 2000
|
|
// });
|
|
// this.getOrderInfo();
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000,
|
|
})
|
|
setTimeout(function() {
|
|
uni.redirectTo({
|
|
url: "/pages/afterSales/info?id=" + res.data
|
|
.order_info.id
|
|
})
|
|
}, 2000);
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
title: '请求失败，请稍后再试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
//订单详情
|
|
getOrderInfo() {
|
|
uni.$u.http.get('/api/school/order/detail', {
|
|
params: {
|
|
id: this.id
|
|
}
|
|
}).then(res => {
|
|
this.info = res.data.detail;
|
|
// if (res.data.detail.classes_service_order_id != 0 && res.data.detail
|
|
// .classes_service_order_id != null && res.data.detail.classes_service_order_id != '') {
|
|
// this.classes_service_order_id = res.data.detail.classes_service_order_id;
|
|
// this.getRefundInfo(res.data.detail.classes_service_order_id);
|
|
// }
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
title: '请求失败，请稍后再试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
//售后详情
|
|
getRefundInfo(classes_service_order_id) {
|
|
uni.$u.http.get('/api/school.service_order/detail', {
|
|
params: {
|
|
id: classes_service_order_id
|
|
}
|
|
}).then(res => {
|
|
if (res.data.detail == null) {
|
|
this.infoRefund = '';
|
|
} else {
|
|
this.infoRefund = res.data.detail;
|
|
}
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
title: '请求失败，请稍后再试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
delShow() {
|
|
this.refundShow = false;
|
|
this.refuseShow = false;
|
|
},
|
|
// 删除图片
|
|
// deletePic(event) {
|
|
// console.log(event);
|
|
// const {
|
|
// index
|
|
// } = event;
|
|
|
|
// if (index >= 0 && index < this.fileList.length) {
|
|
// this.fileList.splice(index, 1);
|
|
// this.list = this.fileList.map(item => item.url).join(',');
|
|
// // 确保对应的 list 字段是一个数组
|
|
// let list = this.list;
|
|
// if (!Array.isArray(list)) {
|
|
// console.warn(`list is not an array, skipping splice operation`);
|
|
// } else {
|
|
// list.splice(index, 1);
|
|
// console.log(`Updated list`, list);
|
|
// }
|
|
// } else {
|
|
// console.error('Invalid index');
|
|
// }
|
|
// },
|
|
// 新增图片
|
|
// async afterRead(event) {
|
|
// let lists = [].concat(event.file);
|
|
// let fileListLen = this.fileList.length;
|
|
// lists.map((item) => {
|
|
// this.fileList.push({
|
|
// ...item,
|
|
// status: 'uploading',
|
|
// message: '上传中'
|
|
// });
|
|
// });
|
|
// for (let i = 0; i < lists.length; i++) {
|
|
// const result = await this.uploadFilePromise(lists[i].url);
|
|
// let item = this.fileList[fileListLen];
|
|
// this.fileList.splice(fileListLen, 1, Object.assign(item, {
|
|
// status: 'success',
|
|
// message: '',
|
|
// url: result
|
|
// }));
|
|
// fileListLen++;
|
|
// // 更新对应的list字段
|
|
// this.list = this.fileList.map(item => item.url).join(',');
|
|
// }
|
|
// },
|
|
//图片上传
|
|
// uploadFilePromise(url) {
|
|
// return new Promise((resolve, reject) => {
|
|
// let a = uni.uploadFile({
|
|
// url: 'https://testy.hschool.com.cn//api/common/upload', // 仅为示例，非真实的接口地址
|
|
// filePath: url,
|
|
// name: 'file',
|
|
// formData: {
|
|
// user: 'test'
|
|
// },
|
|
// header: {
|
|
// "token": uni.getStorageSync("token")
|
|
// },
|
|
// success: (res) => {
|
|
// resolve(JSON.parse(res.data).data.fullurl);
|
|
// },
|
|
// fail: (err) => {
|
|
// reject(err);
|
|
// }
|
|
// });
|
|
// });
|
|
// },
|
|
callPhone(phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: #F1F2F8;
|
|
}
|
|
|
|
.buttonClack {
|
|
padding-top: 20rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
background-color: #ffffff;
|
|
padding-bottom: calc(env(safe-area-inset-bottom));
|
|
box-shadow: 0rpx -6rpx 12rpx 0rpx rgba(111, 190, 255, 0.1);
|
|
}
|
|
|
|
.item-spacing {
|
|
padding-bottom: 30rpx;
|
|
}
|
|
|
|
.w-100 {
|
|
width: 100%;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.space-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.align-items {
|
|
align-items: center;
|
|
}
|
|
|
|
.flex-column {
|
|
flex-flow: column;
|
|
}
|
|
|
|
.justify-start {
|
|
justify-content: start;
|
|
}
|
|
|
|
.mar-top-30 {
|
|
margin-top: 30rpx;
|
|
}
|
|
</style> |