637 lines
19 KiB
Vue
Raw Normal View History

2025-04-01 09:03:51 +08:00
<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="info!=''" class="item-spacing"
style="display: flex; justify-content: space-between; font-size: 26rpx;">
<view style="color: #7A7A7A;">当前状态</view>
<span class="status"
v-if="info.serviceorder && info.serviceorder.status == 1 && info.serviceorder.service_stauts == 1"
style="font-size: 26rpx;color: #FF2323;">待机构处理</span>
<span class="status"
v-if="info.serviceorder && info.serviceorder.status == 4 && info.serviceorder.service_stauts == 7"
style="font-size: 26rpx;color: #FF2323;">售后通过结单中</span>
<span class="status"
v-if="info.serviceorder && info.serviceorder.status == 4 && info.serviceorder.service_stauts == 4"
style="font-size: 26rpx;color: #FF2323;">待用户确认</span>
<span class="status"
v-if="info.serviceorder && info.serviceorder.status == 7 && info.serviceorder.service_stauts == 4"
style="font-size: 26rpx;color: #FF2323;">售后结单完成</span>
<span class="status" v-if="info.status == 0" style="font-size: 26rpx;color: #008CFF;">待支付</span>
<span class="status" v-if="info.status == 3" style="font-size: 26rpx;color: #008CFF;">使用中</span>
<span class="status" v-if="info.status == 6" style="font-size: 26rpx;color: #FF2323;">已退款</span>
<span class="status" v-if="info.status == 9" style="font-size: 26rpx;color: #34DC12;">已完成</span>
</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: #71D0FF;" @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;" v-if="info.status != 3">
<view style="color: #7A7A7A;">退款原因</view>
<view style="color: #343434;">{{info.serviceorder.reason}}</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.detail ? formatTimestamp(info.detail.createtime) : '加载中...' }}
</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;" v-if="info.detail.feel == 0">{{info.detail.price}}</view>
<view style="color: #FF5F5F;" v-if="info.detail.feel == 1">免费</view>
</view>
<view class="line-row" v-if="(info.serviceorder && info.serviceorder.status == 4 && info.serviceorder.service_stauts == 4) || info.status == 6 || info.status == 9 || (info.serviceorder && info.serviceorder.status == 4 && info.serviceorder.service_stauts == 7)"></view>
<view class="item-spacing" style="display: flex; justify-content: space-between; font-size: 26rpx;" v-if="(info.serviceorder && info.serviceorder.status == 4 && info.serviceorder.service_stauts == 4) || info.status == 6 || info.status == 9 || (info.serviceorder && info.serviceorder.status == 4 && info.serviceorder.service_stauts == 7)">
<view style="color: #7A7A7A;">商家退款金额</view>
<view style="color: #FF2323;font-weight: 800;font-size: 36rpx;">{{'¥' + info.serviceorder.tbc_price}}</view>
</view>
</view>
<!-- <view class="flex flex-column" style="background-color: #ffffff;border-radius: 20rpx;padding:30rpx;margin-top: 42rpx;">
<span style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #7A7A7A;">用户驳回退款金额</span>
<view class="line-row" style="margin: 24rpx 0 18rpx 0;"></view>
<span style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 24rpx;color: #343434;">课程质量没有问题</span>
</view> -->
<view class="refund flex flex-column" v-if="info.status == 3 && info.detail.feel != 1">
<span class="title">退款金额</span>
<view class="price flex align-items">
<span></span>
<input class="uni-input" focus="true" v-model="price" type="digit" placeholder-class="plasty"
style="height: 60rpx;" />
</view>
<span class="line"></span>
<span class="text">退款金额可修改上限为课程购买价格(损耗百分比:{{loss_proportion}}%)</span>
<u--textarea v-model="reason" placeholder="请输入内容" count maxlength="150" height='100'></u--textarea>
</view>
</view>
<view class="buttonClack" v-if="info.status == 3 || (info.status == 4 && info.serviceorder.status == 1 && info.detail.feel != 1) ">
<view class="flex align-items" style="text-align: center;justify-content: space-around;">
<view style="width: 100%;" v-if="info.status == 3">
<view @click="cancelRefund"
style="margin: 0 auto;border: 2rpx solid #FF5F5F;color: #FF5F5F;width: 80%;height: 80rpx;border-radius: 401rpx;line-height: 80rpx;">
</view>
</view>
<view style="width: 100%;" v-if="info.status == 3">
<view @click="submitRefund"
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.serviceorder && info.serviceorder.status == 1 && info.serviceorder.service_stauts == 1">
<view @click="refuseShow = true"
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.serviceorder && info.serviceorder.status == 1 && info.serviceorder.service_stauts == 1">
<view @click="agreeShow = true"
style="margin: 0 auto;background-color: #008CFF;color: #ffffff;width: 80%;height: 80rpx;border-radius: 80rpx;line-height: 80rpx;">
</view>
</view>
</view>
</view>
<view class="buttonClack" v-if="info.detail.feel == 1 && info.status == 3">
<view class="flex align-items" style="text-align: center;justify-content: space-around;">
<view style="width: 100%;">
<view @click="quxiao()"
style="margin: 0 auto;border: 2rpx solid #FF5F5F;color: #FF5F5F;width: 80%;height: 80rpx;border-radius: 401rpx;line-height: 80rpx;">
</view>
</view>
</view>
</view>
<!-- 拒绝 -->
<u-popup :show="refuseShow" mode="center" :zIndex="99999" :custom-style="popupStyle" @close="refuseClose" @open="refuseOpen" :closeable="true">
<view class="center-box flex flex-column">
<span class="title">拒绝理由</span>
<span class="line"></span>
<view style="width: 630rpx;margin-left: 30rpx;margin-top: 31rpx;">
<u--textarea v-model="reasonText" placeholder="请输入内容" count maxlength="150" height='100'></u--textarea>
</view>
<view class="flex align-items btnList" style="justify-content: space-evenly;">
<span style="border-radius: 401rpx;border: 2rpx solid #008CFF;color: #008CFF;" @click.stop="qx()">取消</span>
<span style="border-radius: 401rpx;background: #008CFF;color: #FFFFFF;" @click.stop="next()">确认</span>
</view>
</view>
</u-popup>
<!-- 同意 -->
<u-popup :show="agreeShow" mode="center" :zIndex="99999" :custom-style="popupStyle" @close="agreeClose" @open="agreeOpen" :closeable="true">
<view class="center-box flex flex-column">
<span class="title">同意退款</span>
<span class="line"></span>
<span class="jine">退款金额
<span class="red">(必填)</span>
</span>
<view class="price flex align-items">
<span></span>
<input class="uni-input" focus="true" v-model="reasonPrice" type="digit" placeholder-class="plasty"
style="height: 60rpx;" />
</view>
<span class="line" style="width: 630rpx;margin-left: 30rpx;"></span>
<span class="text">退款金额可修改上限为课程购买价格</span>
<span class="text" style="margin-top: 16rpx;">课程购买价格
<span class="red">{{info.detail.price}}</span>
</span>
<view class="flex align-items btnList" style="justify-content: space-evenly;">
<span style="border-radius: 401rpx;border: 2rpx solid #008CFF;color: #008CFF;" @click.stop="TyQx()">取消</span>
<span style="border-radius: 401rpx;background: #008CFF;color: #FFFFFF;" @click.stop="Tynext()">确认</span>
</view>
</view>
</u-popup>
</view>
</template>
<script>
export default {
data() {
return {
price: '',
reason: '',
reasonPrice:'', //同意金额
list: '',
refuseShow: false,
agreeShow: false,
id: 0,
info: {},
classes_service_order_id: 0,
reasonText:'',
loss_proportion: '', //损耗
popupStyle: {
width: '690rpx',
// height: '564rpx',
borderRadious:'20rpx',
margin: '0 auto', // 水平居中
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
},
};
},
onLoad(op) {
this.classes_service_order_id = op.id;
// this.getRefundInfo();
this.getOrderInfo(op.id);
//classes_service_order_id
},
computed: {
},
methods: {
formatTimestamp(timestamp) {
const date = new Date(timestamp * 1000); // 乘以1000转换为毫秒
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
//免费课程取消
quxiao(){
uni.$u.http.post('/api/school/worker/order/cancel', {
order_no: this.info.order_no,
}).then(res => {
if (res.code == 1) {
uni.showToast({
title: '取消免费课程成功',
icon: 'none',
duration: 2000,
complete: function() {
setTimeout(function() {
uni.navigateBack(1)
}, 2000);
}
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}).catch(error => {
uni.showToast({
title: '请求失败,请稍后再试',
icon: 'none',
duration: 2000
});
});
},
// 取消退款
cancelRefund() {
uni.navigateBack(1)
},
refuseClose(){
this.refuseShow = false
this.reasonText = ''
},
refuseOpen(){
this.refuseShow = true
},
agreeClose(){
this.agreeShow = false
},
agreeOpen(){
this.agreeShow = true
},
// 取消
qx(){
this.refuseShow = false
this.reasonText = ''
},
TynextQx(){
this.agreeShow = fasle
},
Tynext(){
uni.$u.http.post('/api/school.worker.service_order/shop_confirmation', {
order_no: this.info.serviceorder.id,
price: this.reasonPrice,
status: 'yes'
}).then(res => {
if (res.code == 1) {
this.agreeShow = false
uni.showToast({
title: '已同意',
icon: 'none',
duration: 2000,
complete: function() {
setTimeout(function() {
uni.navigateBack(1)
}, 2000);
}
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}).catch(error => {
uni.showToast({
title: '请求失败,请稍后再试',
icon: 'none',
duration: 2000
});
});
},
// 驳回退款
next(){
uni.$u.http.post('/api/school.worker.service_order/shop_confirmation', {
order_no: this.info.serviceorder.id,
reject_reason: this.reasonText,
status: 'no'
}).then(res => {
if (res.code == 1) {
this.refuseShow = false
this.reasonText = ''
uni.showToast({
title: '已拒绝',
icon: 'none',
duration: 2000,
complete: function() {
setTimeout(function() {
uni.navigateBack(1)
}, 2000);
}
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}).catch(error => {
uni.showToast({
title: '请求失败,请稍后再试',
icon: 'none',
duration: 2000
});
});
},
// 上架发起退款
submitRefund() {
uni.$u.http.post('/api/school.worker.service_order/create', {
classes_order_id: this.id,
reason: this.reason,
price: this.price
}).then(res => {
if (res.code == 1) {
uni.showToast({
title: '发起成功',
icon: 'none',
duration: 2000,
complete: function() {
setTimeout(function() {
uni.navigateBack(1)
}, 2000);
}
});
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}).catch(error => {
uni.showToast({
title: '请求失败,请稍后再试',
icon: 'none',
duration: 2000
});
});
},
// 退款金额
getMoney(id) {
uni.$u.http.get('/api/school.worker.service_order/create', {
params: {
classes_order_id: id
}
}).then(res => {
if (res.code == 1) {
this.loss_proportion = res.data.order_data.loss_proportion
if (res.data.order_data.auto_recommend_price <= 0) {
this.price = res.data.order_data.sub_refundprice
} else {
this.price = res.data.order_data.auto_recommend_price
}
// this.price = res.data
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}).catch(error => {
uni.showToast({
title: '请求失败,请稍后再试',
icon: 'none',
duration: 2000
});
});
},
//订单详情
getOrderInfo(id) {
uni.$u.http.get('/api/school/worker/order/detail', {
params: {
id: id
}
}).then(res => {
if (res.code == 1) {
this.info = res.data.detail;
if (this.info.serviceorder && (this.info.status == 4 && this.info.serviceorder.status == 1 )) {
if (res.data.detail.serviceorder.auto_recommend_price <= 0) {
this.reasonPrice = res.data.detail.serviceorder.sub_refundprice
} else {
this.reasonPrice = res.data.detail.serviceorder.auto_recommend_price
}
}
if (res.data.detail.status == 3) {
this.id = res.data.detail.id
this.getMoney(res.data.detail.id)
}
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration: 2000
});
}
}).catch(error => {
uni.showToast({
title: '请求失败,请稍后再试',
icon: 'none',
duration: 2000
});
});
},
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;
}
.refund {
padding: 15rpx;
.title {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #343434;
}
.price {
margin-top: 32rpx;
height: 53rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 800;
font-size: 62rpx;
color: #FF5F5F;
}
input {
height: 53rpx;
}
.line {
width: 642rpx;
height: 1rpx;
background: #D9D9D9;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 17rpx 0 7rpx 0;
}
.text {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #7A7A7A;
margin-bottom: 42rpx;
}
}
/deep/.plasty {
height: 53rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 800;
font-size: 62rpx;
color: #FF5F5F;
}
.center-box{
width: 690rpx;
.title{
font-family: PingFang SC, PingFang SC;
font-weight: 800;
font-size: 42rpx;
color: #008CFF;
padding: 30rpx;
}
.text{
padding: 0 30rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #7A7A7A;
}
.jine{
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #343434;
}
.line{
width: 690rpx;
height: 1rpx;
background: #D9D9D9;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 11rpx 31rpx 0 0;
}
.price {
margin-top: 32rpx;
height: 53rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 800;
font-size: 62rpx;
color: #FF5F5F;
padding: 0 30rpx;
width: 630rpx;
}
.jine{
padding: 30rpx;
}
.red{
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #FF5F5F;
}
input {
height: 53rpx;
}
.btnList{
padding: 30rpx;
span{
width: 306rpx;
height: 80rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 800;
font-size: 34rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.line-row{
width: 630rpx;
height: 1rpx;
background: #D9D9D9;
border-radius: 0rpx 0rpx 0rpx 0rpx;
margin: 32rpx 0 38rpx 0;
}
</style>