389 lines
9.2 KiB
Vue
389 lines
9.2 KiB
Vue
|
<template> <full-page mainStyle="background:#f0f0f0">
|
|||
|
|
<template v-if="item">
|
|||
|
|
<view v-if="refundInfo" :class="{ 'refund-info--elder': elderMode }" class="refund-info">
|
|||
|
|
<view :class="{ 'refund-title--elder': elderMode }" class="refund-title">{{ refundInfo.title }}</view>
|
|||
|
|
<view v-if="refundInfo.subTitle" :class="{ 'refund-subtitle--elder': elderMode }" class="refund-subtitle">{{ refundInfo.subTitle }}</view>
|
|||
|
|
<view v-if="refundInfo.time" :class="{ 'refund-subtitle--elder': elderMode }" class="refund-subtitle">{{ refundInfo.time }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view :class="{ 'order-head--elder': elderMode }" class="order-head">订单信息</view>
|
|||
|
|
<view :class="{ 'card--elder': elderMode }" class="card">
|
|||
|
|
<view :class="{ 'card_head--elder': elderMode }" class="card_head info-row">
|
|||
|
|
<view :class="{ 'doctor-info--elder': elderMode }" class="doctor-info">
|
|||
|
|
<text :class="{ 'doctor-name--elder': elderMode }">{{ item.doctorName }}</text>
|
|||
|
|
<text :class="{ 'dept--elder': elderMode }" class="dept">{{ item.deptName }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view :class="{ 'uni-primary--elder': elderMode }" class="uni-primary">{{ item.preOrderId ? "在线续方" : "在线复诊" }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view :class="{ 'card_body--elder': elderMode }" class="card_body">
|
|||
|
|
<view :class="{ 'info-text--elder': elderMode }">
|
|||
|
|
<text :class="{ 'label--elder': elderMode }" class="label">线下确诊疾病：</text>
|
|||
|
|
<text :class="{ 'content--elder': elderMode }">{{ item.diseases.join("、") }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view :class="{ 'desc--elder': elderMode }" class="desc">
|
|||
|
|
<text :class="{ 'label--elder': elderMode }" class="label">病情描述：</text>
|
|||
|
|
<text :class="{ 'content--elder': elderMode }">{{ item.description }}</text>
|
|||
|
|
</view> <view :class="{ 'info-text--elder': elderMode }">
|
|||
|
|
<text :class="{ 'label--elder': elderMode }" class="label">问诊人：</text>
|
|||
|
|
<text :class="{ 'content--elder': elderMode }">{{ item.name }} {{ item.sex }}
|
|||
|
|
{{ item.age ? item.age + "岁" : "" }}</text>
|
|||
|
|
</view> <view :class="{ 'date-text--elder': elderMode, 'date-line--elder': elderMode }" class="date-line">
|
|||
|
|
{{ item.createTime ? dayjs(item.createTime).format("YYYY-MM-DD HH:mm") : "" }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view :class="{ 'card_footer--elder': elderMode }" class="card_footer info-row">
|
|||
|
|
<view :class="{ 'fee-label--elder': elderMode }">退费金额</view>
|
|||
|
|
<view :class="{ 'fee--elder': elderMode }" class="fee">￥{{ item.settlement.total_fee }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view :class="{ 'order-head--elder': elderMode }" class="order-head order-head--gap">退费申请</view>
|
|||
|
|
<view v-if="refundInfo" :class="{ 'card--elder': elderMode }" class="card">
|
|||
|
|
<view :class="{ 'card_body--elder': elderMode }" class="card_body">
|
|||
|
|
<view :class="{ 'info-row--elder': elderMode }" class="info-row">
|
|||
|
|
<view :class="{ 'label--elder': elderMode }" class="label">申请时间</view>
|
|||
|
|
<view :class="{ 'content--elder': elderMode }">{{ refundInfo.date }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view :class="{ 'info-row--elder': elderMode }" class="info-row">
|
|||
|
|
<view :class="{ 'label--elder': elderMode }" class="label">退费原因</view>
|
|||
|
|
<view :class="{ 'content--elder': elderMode }">{{ refundInfo.reason }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="!refundInfo" :class="{ 'reason-container--elder': elderMode }" class="reason-container">
|
|||
|
|
<textarea v-model="reason" placeholder="请输入退费原因" :maxlength="200" :class="{ 'reason-textarea--elder': elderMode }" class="reason-textarea"></textarea>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<empty-data v-else />
|
|||
|
|
<template #footer>
|
|||
|
|
<footer-button v-if="!refundInfo && item" text="提交退费申请" @onClick="applyRefund" />
|
|||
|
|
</template>
|
|||
|
|
</full-page>
|
|||
|
|
</template>
|
|||
|
|
<script setup>
|
|||
|
|
import {
|
|||
|
|
ref,
|
|||
|
|
computed,
|
|||
|
|
onMounted,
|
|||
|
|
onUnmounted
|
|||
|
|
} from "vue";
|
|||
|
|
import {
|
|||
|
|
onLoad
|
|||
|
|
} from "@dcloudio/uni-app";
|
|||
|
|
import dayjs from "dayjs";
|
|||
|
|
import { applyRefundOrder } from "@/utils/api";
|
|||
|
|
import {
|
|||
|
|
toast,
|
|||
|
|
confirm,
|
|||
|
|
loading,
|
|||
|
|
hideLoading
|
|||
|
|
} from "@/utils/widget";
|
|||
|
|
|
|||
|
|
import emptyData from "@/components/empty.vue";
|
|||
|
|
import fullPage from "@/components/full-page.vue";
|
|||
|
|
import footerButton from "@/components/footer-button.vue";
|
|||
|
|
|
|||
|
|
// 大字版状态管理
|
|||
|
|
const elderMode = ref(false);
|
|||
|
|
|
|||
|
|
// 处理长辈模式变化
|
|||
|
|
const handleElderModeChange = () => {
|
|||
|
|
try {
|
|||
|
|
const storedElderMode = uni.getStorageSync('elderMode');
|
|||
|
|
elderMode.value = storedElderMode === 'true' || storedElderMode === true;
|
|||
|
|
|
|||
|
|
// 同步到全局数据
|
|||
|
|
const app = getApp();
|
|||
|
|
if (app && app.globalData) {
|
|||
|
|
app.globalData.elderMode = elderMode.value;
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取长辈模式状态失败:', error);
|
|||
|
|
elderMode.value = false;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
handleElderModeChange();
|
|||
|
|
// 监听长辈模式变化事件
|
|||
|
|
uni.$on('elderModeChanged', handleElderModeChange);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onUnmounted(() => {
|
|||
|
|
// 移除事件监听
|
|||
|
|
uni.$off('elderModeChanged', handleElderModeChange);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const item = ref(null)
|
|||
|
|
const reason = ref('')
|
|||
|
|
|
|||
|
|
const refundInfo = computed(() => {
|
|||
|
|
if (item.value && item.value.refundInfo) {
|
|||
|
|
const { status, reason, updateTime, rejectReason, createTime } = item.value.refundInfo;
|
|||
|
|
const date = dayjs(createTime).format('YYYY-MM-DD HH:mm');
|
|||
|
|
if (status === 'INIT') {
|
|||
|
|
return { title: '您已成功发起退费申请，请耐心等待处理', subTitle: '医生如同意您的申请，系统将退款给您。', date, reason }
|
|||
|
|
}
|
|||
|
|
if (status === 'PASS') {
|
|||
|
|
return { title: '您的退费申请已通过', time: `${dayjs(updateTime).format('YYYY-MM-DD HH:mm')}`, date, reason }
|
|||
|
|
}
|
|||
|
|
if (status === 'REJECT') {
|
|||
|
|
return { title: '您的退费申请已被拒绝', subTitle: `拒绝原因：${rejectReason || ''}`, time: `${dayjs(updateTime).format('YYYY-MM-DD HH:mm')}`, date, reason }
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return null
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
onLoad((e) => {
|
|||
|
|
const order = uni.getStorageSync('refund-order')
|
|||
|
|
try {
|
|||
|
|
item.value = order
|
|||
|
|
} catch (e) { }
|
|||
|
|
// uni.removeStorageSync('refund-order')
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
async function applyRefund() {
|
|||
|
|
if (reason.value.trim() === '') {
|
|||
|
|
toast('请输入退费原因')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
confirm('确定提交退费申请吗？').then(async () => {
|
|||
|
|
loading('正在提交申请')
|
|||
|
|
try {
|
|||
|
|
const { success, message, data } = await applyRefundOrder({
|
|||
|
|
id: item.value._id,
|
|||
|
|
orderId: item.value.orderId,
|
|||
|
|
reason: reason.value.trim(),
|
|||
|
|
})
|
|||
|
|
hideLoading()
|
|||
|
|
if (success) {
|
|||
|
|
item.value.refundInfo = data;
|
|||
|
|
toast('退费申请已提交')
|
|||
|
|
} else {
|
|||
|
|
toast(message)
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
hideLoading()
|
|||
|
|
toast(e.message)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.refund-info {
|
|||
|
|
padding: 30rpx;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
line-height: 50rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
padding: 40rpx;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refund-title {
|
|||
|
|
&--elder {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
line-height: 64rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.refund-subtitle {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
font-weight: normal;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
line-height: 56rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-head {
|
|||
|
|
padding: 30rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
margin-bottom: 1px;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
padding: 40rpx;
|
|||
|
|
font-size: 38rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-head--gap {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reason-container {
|
|||
|
|
padding: 24rpx 30rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
padding: 32rpx 40rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.reason-textarea {
|
|||
|
|
width: 650rpx;
|
|||
|
|
height: 400rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
line-height: 56rpx;
|
|||
|
|
height: 500rpx;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
background: white;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
margin-top: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
margin: 8rpx 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_head {
|
|||
|
|
padding: 24rpx 30rpx 0;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
padding: 32rpx 40rpx 0;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_footer {
|
|||
|
|
padding: 24rpx 30rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666;
|
|||
|
|
border-top: 1px solid #f0f0f0;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
padding: 32rpx 40rpx;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.doctor-info {
|
|||
|
|
font-weight: bold;
|
|||
|
|
max-width: 400rpx;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
overflow: hidden;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
max-width: 500rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
font-size: 38rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.doctor-name--elder {
|
|||
|
|
font-size: 38rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dept {
|
|||
|
|
margin-left: 10rpx;
|
|||
|
|
color: #666;
|
|||
|
|
font-weight: normal;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
margin-left: 14rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.uni-primary {
|
|||
|
|
&--elder {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&_body {
|
|||
|
|
padding: 24rpx 30rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
line-height: 48rpx;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
padding: 32rpx 40rpx;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
color: #666;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
margin-right: 20rpx;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
margin-right: 24rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content--elder {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-text--elder {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date-text--elder {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.date-line {
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.desc {
|
|||
|
|
&--elder {
|
|||
|
|
margin: 8rpx 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fee {
|
|||
|
|
color: red;
|
|||
|
|
|
|||
|
|
&--elder {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fee-label--elder {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|