<template>
|
<view class="appointment-container">
|
<!-- 顶部搜索栏 -->
|
<view class="search-bar">
|
<view class="search-box">
|
<text class="iconfont icon-search"></text>
|
<input type="text" :placeholder="$t('appointment.search.placeholder')" v-model="searchKey" />
|
</view>
|
</view>
|
|
<!-- 医院列表 -->
|
<view class="hospital-list">
|
<view
|
class="hospital-item card"
|
v-for="(hospital, index) in hospitals"
|
:key="index"
|
>
|
<image :src="hospital.image" mode="aspectFill" class="hospital-image" />
|
<view class="info">
|
<text class="name">{{ hospital.name }}</text>
|
<text class="address">{{ hospital.address }}</text>
|
<view class="tags">
|
<text v-for="(tag, idx) in hospital.tags" :key="idx">{{ tag }}</text>
|
</view>
|
<view class="footer">
|
<view class="rating">
|
<text class="score">{{ hospital.rating }}</text>
|
<text class="label">综合评分</text>
|
</view>
|
<view class="distance">
|
<text class="value">{{ hospital.distance }}km</text>
|
<text class="label">距离</text>
|
</view>
|
<button
|
class="book-btn primary-btn"
|
@tap.stop="selectHospital(hospital)"
|
>
|
立即预约
|
</button>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
|
const searchKey = ref('')
|
|
// 医院列表数据
|
const hospitals = ref([
|
{
|
id: 1,
|
name: '青岛镜湖医院',
|
address: '青岛连胜马路33号',
|
image: '/static/hospital/kiang-wu.png',
|
tags: ['综合医院', '24小时急诊', '特需门诊'],
|
rating: 4.8,
|
distance: 2.5
|
},
|
{
|
id: 2,
|
name: '青岛科大医院',
|
address: '青岛氹仔大学大马路',
|
image: '/static/hospital/must.png',
|
tags: ['大学医院', '专科门诊', '中医科'],
|
rating: 4.7,
|
distance: 5.8
|
}
|
])
|
|
// 选择医院
|
const selectHospital = (hospital) => {
|
// 保存当前选中的医院ID到全局状态
|
getApp().globalData.currentHospitalId = hospital.id
|
|
uni.navigateTo({
|
url: `/pages/department/index?hospitalId=${hospital.id}`,
|
fail: (err) => {
|
console.error('导航失败:', err)
|
// 如果导航失败，尝试使用 redirectTo
|
uni.redirectTo({
|
url: `/pages/department/index?hospitalId=${hospital.id}`,
|
fail: (err2) => {
|
console.error('重定向失败:', err2)
|
}
|
})
|
}
|
})
|
}
|
</script>
|
|
<style lang="scss">
|
.appointment-container {
|
min-height: 100vh;
|
background: $bg-color;
|
|
.search-bar {
|
position: sticky;
|
top: 0;
|
z-index: 100;
|
padding: 20rpx 30rpx;
|
background: #fff;
|
box-shadow: $shadow-sm;
|
}
|
|
.hospital-list {
|
padding: 20rpx;
|
|
.hospital-item {
|
margin-bottom: 20rpx;
|
|
.hospital-image {
|
width: 100%;
|
height: 300rpx;
|
border-radius: $radius-md;
|
margin-bottom: 20rpx;
|
}
|
|
.info {
|
.name {
|
font-size: 34rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 10rpx;
|
display: block;
|
}
|
|
.address {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-bottom: 16rpx;
|
display: block;
|
}
|
|
.tags {
|
margin-bottom: 20rpx;
|
|
text {
|
display: inline-block;
|
font-size: 22rpx;
|
color: $primary-color;
|
background: $primary-light;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
margin-right: 10rpx;
|
margin-bottom: 10rpx;
|
}
|
}
|
|
.footer {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding-top: 20rpx;
|
border-top: 1rpx solid #eee;
|
|
.rating, .distance {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.score, .value {
|
font-size: 32rpx;
|
color: $primary-color;
|
font-weight: bold;
|
margin-bottom: 4rpx;
|
}
|
|
.label {
|
font-size: 22rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.book-btn {
|
width: 160rpx;
|
height: 60rpx;
|
line-height: 60rpx;
|
font-size: 26rpx;
|
&:active {
|
opacity: 0.8;
|
transform: scale(0.95);
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
