281 lines
6.9 KiB
Vue
281 lines
6.9 KiB
Vue
<template>
|
||
<full-page mainStyle="background:#f0f0f0" @reachBottom="loadMore()">
|
||
<view class="doctor" :class="{ 'doctor--elder': elderMode }">
|
||
<view class="info" :class="{ 'info--elder': elderMode }">
|
||
<view class="info-row" :class="{ 'info-row--elder': elderMode }">
|
||
<text class="name" :class="{ 'name--elder': elderMode }">系统推荐医生</text>
|
||
</view>
|
||
<view class="info-row" :class="{ 'info-row--elder': elderMode }">
|
||
<text :class="{ 'text--elder': elderMode }">系统推荐一名医生</text>
|
||
</view>
|
||
</view>
|
||
<view class="right" :class="{ 'right--elder': elderMode }">
|
||
<view class="select-btn" :class="{ 'select-btn--elder': elderMode }" @click="select()">选择</view>
|
||
<!-- <view class="consult-count" style="opacity: 0;">当前问诊人数：</view> -->
|
||
</view>
|
||
</view>
|
||
<view v-for="i in list" :key="i._id" class="doctor" :class="{ 'doctor--elder': elderMode }">
|
||
<image v-if="i.avatar" :src="i.avatar" class="avatar" :class="{ 'avatar--elder': elderMode }"
|
||
mode="scaleToFill" />
|
||
<view class="info" :class="{ 'info--elder': elderMode }">
|
||
<view class="info-row" :class="{ 'info-row--elder': elderMode }">
|
||
<text class="name" :class="{ 'name--elder': elderMode }">{{ i.doctorName }}</text>
|
||
<text :class="{ 'title--elder': elderMode }">{{ i.title }}</text>
|
||
</view>
|
||
<view class="info-row" :class="{ 'info-row--elder': elderMode }">
|
||
<text :class="{ 'hospital--elder': elderMode }">震元堂中医院</text>
|
||
<text v-if="i.deptName" :class="{ 'dept--elder': elderMode }"> | {{ i.deptName }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="right" :class="{ 'right--elder': elderMode }">
|
||
<view class="select-btn" :class="{ 'select-btn--elder': elderMode }" @click="select(i)">
|
||
<!-- ￥{{ i.serviceFee }} -->
|
||
选择
|
||
</view>
|
||
<view class="consult-count" :class="{ 'consult-count--elder': elderMode }">当前问诊人数：{{
|
||
i.pendingOrdersCount }}</view>
|
||
</view>
|
||
</view>
|
||
</full-page>
|
||
</template>
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
computed
|
||
} from "vue";
|
||
import {
|
||
onLoad,
|
||
onUnload
|
||
} from "@dcloudio/uni-app";
|
||
import {
|
||
getHlwDoctorList
|
||
} from "@/utils/api.js";
|
||
import {
|
||
toast
|
||
} from "@/utils/widget";
|
||
|
||
import fullPage from "@/components/full-page.vue";
|
||
|
||
// 长辈模式状态
|
||
const elderMode = ref(false);
|
||
|
||
// 长辈模式变化监听
|
||
function handleElderModeChange(isElder) {
|
||
elderMode.value = isElder;
|
||
console.log('doctor-list页面长辈模式已更新为:', isElder);
|
||
}
|
||
|
||
const loading = ref(false);
|
||
const page = ref(1);
|
||
const list = ref([]);
|
||
const more = ref(false);
|
||
// 对 list 进行排序 使得 pendingOrdersCount 最小的排在前面
|
||
const newList = computed(() =>
|
||
list.value.sort((a, b) => a.pendingOrdersCount - b.pendingOrdersCount)
|
||
);
|
||
|
||
function loadMore() {
|
||
if (more.value && !loading.value) {
|
||
page.value += 1;
|
||
getList();
|
||
}
|
||
}
|
||
|
||
function select(i = {}) {
|
||
uni.$emit("on-select-doctor", i);
|
||
uni.navigateBack();
|
||
}
|
||
async function getList() {
|
||
if (loading.value) return;
|
||
loading.value = true;
|
||
const {
|
||
data,
|
||
success,
|
||
message,
|
||
pages
|
||
} = await getHlwDoctorList({
|
||
page: page.value,
|
||
pageSize: 100,
|
||
doctorType: 'west',
|
||
});
|
||
const doctors = Array.isArray(data) ? data : [];
|
||
list.value = page.value === 1 ? doctors : [...list.value, ...doctors];
|
||
more.value = page.value < pages;
|
||
if (!success) {
|
||
toast(message || "查询医生失败");
|
||
}
|
||
loading.value = false;
|
||
}
|
||
onLoad(() => {
|
||
// 读取长辈模式状态
|
||
const savedElderMode = uni.getStorageSync('elderMode');
|
||
console.log('doctor-list页面从本地存储读取长辈模式状态:', savedElderMode);
|
||
|
||
if (savedElderMode !== null && savedElderMode !== undefined) {
|
||
elderMode.value = savedElderMode;
|
||
}
|
||
|
||
// 从全局状态读取
|
||
const app = getApp();
|
||
if (app && app.globalData && typeof app.globalData.elderMode === 'boolean') {
|
||
elderMode.value = app.globalData.elderMode;
|
||
console.log('doctor-list页面从全局状态读取长辈模式:', app.globalData.elderMode);
|
||
}
|
||
|
||
console.log('doctor-list页面最终长辈模式状态:', elderMode.value);
|
||
|
||
// 监听全局长辈模式变化事件
|
||
uni.$on('elderModeChanged', handleElderModeChange);
|
||
|
||
getList();
|
||
});
|
||
|
||
onUnload(() => {
|
||
uni.$off('elderModeChanged', handleElderModeChange);
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.doctor {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 30rpx;
|
||
background: white;
|
||
color: #333;
|
||
|
||
@at-root &+& {
|
||
border-top: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
margin-right: 20rpx;
|
||
background: red;
|
||
}
|
||
|
||
.info {
|
||
width: 0;
|
||
flex-grow: 1;
|
||
line-height: 40rpx;
|
||
color: #666;
|
||
font-size: 28rpx;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.info-row {
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
text {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.name {
|
||
margin-right: 12rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.right {
|
||
flex-shrink: 0;
|
||
margin-left: 20rpx;
|
||
min-width: 216rpx;
|
||
}
|
||
.select-btn {
|
||
min-width: 180rpx;
|
||
min-height: 60rpx;
|
||
font-size: 24rpx;
|
||
color: white;
|
||
padding: 8rpx 0;
|
||
background: $theme-brown-primary;
|
||
border-radius: 30rpx;
|
||
text-align: center;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.consult-count {
|
||
margin-top: 12rpx;
|
||
font-size: 24rpx;
|
||
color: $theme-brown-primary;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
/* 长辈模式样式 - 直接使用类名 */
|
||
.doctor--elder {
|
||
padding: 36rpx 40rpx !important; // 增加内边距
|
||
min-height: 120rpx !important; // 增加最小高度
|
||
border-top: 2rpx solid #e5e5e5 !important; // 加粗边框
|
||
}
|
||
|
||
.avatar--elder {
|
||
width: 100rpx !important; // 80 * 1.25
|
||
height: 100rpx !important; // 80 * 1.25
|
||
margin-right: 24rpx !important; // 20 * 1.2
|
||
}
|
||
|
||
.info--elder {
|
||
line-height: 56rpx !important; // 40 * 1.4
|
||
font-size: 39rpx !important; // 28 * 1.4
|
||
}
|
||
|
||
.info-row--elder {
|
||
font-size: 39rpx !important; // 28 * 1.4
|
||
line-height: 56rpx !important;
|
||
}
|
||
|
||
.name--elder {
|
||
font-size: 45rpx !important; // 32 * 1.4
|
||
margin-right: 16rpx !important; // 12 * 1.33
|
||
font-weight: bold !important;
|
||
}
|
||
|
||
.text--elder {
|
||
font-size: 39rpx !important; // 28 * 1.4
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
.title--elder {
|
||
font-size: 39rpx !important; // 28 * 1.4
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
.hospital--elder {
|
||
font-size: 39rpx !important; // 28 * 1.4
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
.dept--elder {
|
||
font-size: 39rpx !important; // 28 * 1.4
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
.right--elder {
|
||
margin-left: 24rpx !important; // 20 * 1.2
|
||
min-width: 260rpx !important; // 增加最小宽度
|
||
}
|
||
|
||
.select-btn--elder {
|
||
min-width: 216rpx !important; // 180 * 1.2
|
||
min-height: 75rpx !important; // 增加最小高度
|
||
padding: 12rpx 0 !important; // 8 * 1.5
|
||
border-radius: 36rpx !important; // 30 * 1.2
|
||
font-size: 34rpx !important; // 24 * 1.4
|
||
font-weight: bold !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
}
|
||
|
||
.consult-count--elder {
|
||
margin-top: 16rpx !important; // 12 * 1.33
|
||
font-size: 34rpx !important; // 24 * 1.4
|
||
font-weight: 500 !important;
|
||
}
|
||
</style> |