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> |