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