ZYT/zyt
2
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
Your Name
2026-03-18 14:53:09 +08:00
parent 338b104d50
commit 7832514f28
315 changed files with 7071 additions and 1136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TUICallKit-Vue3/pages/index/index.vue
+129 -93
View File
@@ -1,59 +1,59 @@
<template>
<view class="container">
<!-- 搜索栏 -->
<view class="search-section">
<!-- <view class="search-section">
<view class="search-bar">
<text class="search-icon">🔍</text>
<input class="search-input" placeholder="搜索药材、医生或症状..." type="text" />
<text class="search-filter">⚙</text>
</view>
</view>
</view> -->
<!-- 科室分类 -->
<view class="department-section">
<!-- 平台资质 -->
<view class="qualification-section">
<view class="section-header">
<text class="section-title">科室分类</text>
<text class="more-link" @click="navigateToDepartments">查看全部</text>
<text class="section-title">平台资质</text>
<!-- <text class="more-link" @click="navigateToQualifications">查看详情</text> -->
</view>
<view class="department-grid">
<view class="dept-col-left">
<view class="qualification-grid">
<view class="qual-col-left">
<view
class="department-card large"
@click="navigateToDepartment(departments[0])"
class="qualification-card large"
@click="navigateToQualification(qualifications[0])"
>
<view class="dept-card-inner dept-green">
<view class="dept-icon"><text class="icon-text">✦</text></view>
<text class="dept-name text-white">针灸</text>
<text class="dept-desc text-white-sub">调理气血</text>
<view class="qual-card-inner qual-primary">
<view class="qual-icon"><image src="/static/wjw.png" style="width: 100rpx; margin-left: -5px;" mode="widthFix"></image></view>
<text class="qual-name text-white">卫健委认证机构</text>
<text class="qual-desc text-white-sub">互联网诊疗资质备案</text>
</view>
</view>
</view>
<view class="dept-col-right">
<view class="qual-col-right">
<view
class="department-card small"
@click="navigateToDepartment(departments[1])"
class="qualification-card small"
@click="navigateToQualification(qualifications[1])"
>
<view class="dept-card-inner dept-beige">
<view class="dept-icon-wrap">
<view class="dept-icon"><text class="icon-text">●</text></view>
<view class="qual-card-inner qual-beige">
<view class="qual-icon-wrap">
<view class="qual-icon"><image src="/static/yy.png" style="width: 100rpx; margin-left: -10px;" mode="widthFix"></image></view>
</view>
<view>
<text class="dept-name">中药</text>
<text class="dept-desc">古法方剂</text>
<text class="qual-name">互联网医院</text>
<text class="qual-desc">持证合规运营</text>
</view>
</view>
</view>
<view
class="department-card small"
@click="navigateToDepartment(departments[2])"
class="qualification-card small"
@click="navigateToAllDoctors"
>
<view class="dept-card-inner dept-grey">
<view class="dept-icon-wrap">
<view class="dept-icon"><text class="icon-text">☯</text></view>
<view class="qual-card-inner qual-grey">
<view class="qual-icon-wrap">
<view class="qual-icon"><image src="/static/ys.png" style="width: 90rpx; margin-left: -5px;" mode="widthFix"></image></view>
</view>
<view>
<text class="dept-name">推拿</text>
<text class="dept-desc">中医按摩</text>
<text class="qual-name">执业医师认证</text>
<text class="qual-desc">持证医师在线问诊</text>
</view>
</view>
</view>
@@ -84,7 +84,7 @@
<text class="doctor-specialty">{{ doctor.specialty || doctor.title || '中医' }}</text>
<view class="doctor-price-row">
<text class="doctor-price">{{ doctor.price || '' }}</text>
<text class="doctor-unit">/次</text>
<text class="doctor-unit" v-if="doctor.title">{{doctor.title}}</text>
</view>
<view class="doctor-actions">
<view class="appointment-btn" @click.stop="selectDoctor(doctor)">预约</view>
@@ -102,18 +102,18 @@
</view>
<scroll-view class="encyclopedia-scroll no-scrollbar" scroll-x :show-scrollbar="false">
<view
v-for="article in articles"
v-for="(article, index) in articles"
:key="article.id"
class="article-card"
:class="{ 'article-card-secondary': article.id === 2 }"
:class="{ 'article-card-secondary': index % 2 === 1 }"
@click="navigateToArticle(article)"
>
<view class="article-image-wrap">
<image :src="article.cover" class="article-image" mode="aspectFill"></image>
<view class="article-gradient" :class="{ 'gradient-secondary': article.id === 2 }"></view>
<view class="article-tag" :class="{ 'tag-secondary': article.id === 2 }">{{ article.tag }}</view>
<view class="article-gradient" :class="{ 'gradient-secondary': index % 2 === 1 }"></view>
<view class="article-tag" :class="{ 'tag-secondary': index % 2 === 1 }">{{ article.tag }}</view>
</view>
<text class="article-title" :class="{ 'title-secondary': article.id === 2 }">{{ article.title }}</text>
<text class="article-title" :class="{ 'title-secondary': index % 2 === 1 }">{{ article.title }}</text>
<text class="article-desc">{{ article.desc }}</text>
</view>
</scroll-view>
@@ -124,26 +124,41 @@
<script setup>
import { ref, onMounted } from 'vue'
import { getCurrentInstance } from 'vue'
import { onShow, onShareAppMessage } from '@dcloudio/uni-app'
const { proxy } = getCurrentInstance()
const doctors = ref([])
const loading = ref(false)
const defaultAvatar = '/static/user/user.png'
// 科室分类
const departments = ref([
{ id: 1, name: '针灸', desc: '调理气血', icon: '✦', iconClass: 'icon-acupuncture', bgColor: 'linear-gradient(135deg, #2d5a3d 0%, #3d7a4d 100%)', dark: true, size: 'large', pattern: true },
{ id: 2, name: '中药', desc: '古法方剂', icon: '◉', iconClass: 'icon-herb', bgColor: '#F5E6D3', dark: false, size: 'small' },
{ id: 3, name: '推拿', desc: '中医按摩', icon: '☯', iconClass: 'icon-massage', bgColor: '#E8E4DF', dark: false, size: 'small' }
// 平台资质
const qualifications = ref([
{ id: 1, name: '卫健委认证机构', desc: '互联网诊疗资质备案', icon: '✓', dark: true, size: 'large' },
{ id: 2, name: '互联网医院', desc: '持证合规运营', icon: '', dark: false, size: 'small' },
{ id: 3, name: '执业医师认证', desc: '持证医师在线问诊', icon: '★', dark: false, size: 'small' }
])
// 健康百科
const articles = ref([
{ id: 1, title: '晨间生姜:脾胃健康的催化剂', desc: '了解每天早晨一片生姜如何改善您的新陈代谢...', tag: '膳食营养', cover: 'https://picsum.photos/seed/herb/300/180' },
{ id: 2, title: '四时呼吸:顺应节气养生', desc: '顺应节气，调养身心...', tag: '正念冥想', cover: 'https://picsum.photos/seed/nature/300/180' },
{ id: 3, title: '中医养生之道', desc: '传统智慧，现代健康...', tag: '养生保健', cover: 'https://picsum.photos/seed/health/300/180' }
])
const articles = ref([])
const fetchArticles = async () => {
try {
const response = await proxy.apiUrl({
url: '/api/article/lists',
method: 'GET',
data: { page_no: 1, page_size: 10 }
})
if (response && response.code === 1) {
articles.value = (response.data.lists || []).map(item => ({
...item,
cover: item.image,
tag: item.cid || ''
}))
}
} catch (error) {
console.error('获取文章列表失败:', error)
}
}
const selectDoctor = (doctor) => {
uni.navigateTo({
@@ -151,16 +166,21 @@ const selectDoctor = (doctor) => {
})
}
const navigateToDepartments = () => {
uni.showToast({ title: '科室列表', icon: 'none' })
const navigateToQualifications = () => {
uni.showToast({ title: '资质详情', icon: 'none' })
}
const navigateToDepartment = (item) => {
uni.showToast({ title: item.name, icon: 'none' })
const navigateToQualification = (item) => {
// 根据类型打开不同的协议页面
uni.navigateTo({
url: '/pages/Card/contact?type=health'
})
}
const navigateToAllDoctors = () => {
uni.showToast({ title: '更多医生', icon: 'none' })
uni.navigateTo({
url: '/doctor/pages/doctor/list/list'
})
}
const navigateToEncyclopedia = () => {
@@ -168,7 +188,7 @@ const navigateToEncyclopedia = () => {
}
const navigateToArticle = (article) => {
uni.showToast({ title: article.title, icon: 'none' })
uni.navigateTo({ url: `/doctor/pages/article/article?id=${article.id}` })
}
const fetchDoctors = async () => {
@@ -196,9 +216,28 @@ const fetchDoctors = async () => {
loading.value = false
}
}
const userinfo = async (code) => {
try {
// 通过 proxy 调用全局的 apiUrl
const res = await proxy.apiUrl({
url: '/api/user/info',
method: 'POST',
}, false) // 不显示加载中
uni.setStorageSync('userData', res.data)
} catch (err) {
}
}
onMounted(() => {
fetchDoctors()
fetchArticles()
userinfo()
})
</script>
@@ -289,28 +328,28 @@ $outline: #727970;
font-weight: 500;
}
// 科室分类 - grid 布局
.department-section {
// 平台资质 - grid 布局
.qualification-section {
margin-bottom: 64rpx;
}
.department-grid {
.qualification-grid {
display: flex;
gap: 32rpx;
}
.dept-col-left {
.qual-col-left {
flex: 1;
}
.dept-col-right {
.qual-col-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 32rpx;
}
.department-card {
.qualification-card {
&.large {
height: 100%;
min-height: 320rpx;
@@ -322,7 +361,7 @@ $outline: #727970;
}
}
.dept-card-inner {
.qual-card-inner {
border-radius: 24rpx;
padding: 40rpx;
height: 100%;
@@ -335,24 +374,24 @@ $outline: #727970;
overflow: hidden;
}
/* 针灸 - primary-container */
.dept-green {
/* 卫健委认证 - primary-container */
.qual-primary {
background: $primary-container;
color: $on-primary;
}
.dept-green .dept-icon .icon-text,
.dept-green .dept-name {
.qual-primary .qual-icon .icon-text,
.qual-primary .qual-name {
color: $on-primary;
}
.dept-green .dept-desc {
.qual-primary .qual-desc {
color: $on-primary-container;
font-size: 24rpx;
}
/* 中药 - secondary-container */
.dept-beige {
/* 互联网医院 - secondary-container */
.qual-beige {
background: $secondary-container;
color: $on-secondary-container;
flex-direction: row;
@@ -361,32 +400,28 @@ $outline: #727970;
padding: 32rpx;
}
.dept-beige .dept-icon-wrap {
background: rgba(255, 255, 255, 0.4);
padding: 16rpx;
border-radius: 16rpx;
}
.dept-beige .dept-icon .icon-text {
.qual-beige .qual-icon .icon-text {
font-size: 40rpx;
color: $on-secondary-container;
}
.dept-beige .dept-name {
.qual-beige .qual-name {
color: $on-secondary-container;
margin-bottom: 4rpx;
display: block;
}
.dept-beige .dept-desc {
.qual-beige .qual-desc {
color: $on-secondary-container;
opacity: 0.8;
font-size: 20rpx;
display: block;
}
/* 推拿 - surface-container-high */
.dept-grey {
/* 执业医师认证 - surface-container-high */
.qual-grey {
background: $surface-container-high;
color: $on-surface;
flex-direction: row;
@@ -395,43 +430,39 @@ $outline: #727970;
padding: 32rpx;
}
.dept-grey .dept-icon-wrap {
background: rgba(255, 255, 255, 0.6);
padding: 16rpx;
border-radius: 16rpx;
}
.dept-grey .dept-icon .icon-text {
.qual-grey .qual-icon .icon-text {
font-size: 40rpx;
color: $primary;
}
.dept-grey .dept-name {
.qual-grey .qual-name {
color: $on-surface;
display: block;
}
.dept-grey .dept-desc {
.qual-grey .qual-desc {
color: $on-surface-variant;
font-size: 20rpx;
display: block;
}
.dept-icon {
.qual-icon {
margin-bottom: 16rpx;
}
.dept-beige .dept-icon,
.dept-grey .dept-icon {
.qual-beige .qual-icon,
.qual-grey .qual-icon {
margin-bottom: 0;
}
.dept-icon .icon-text {
.qual-icon .icon-text {
font-size: 56rpx;
color: $on-primary;
}
.dept-name {
.qual-name {
font-size: 36rpx;
font-weight: 600;
color: $on-surface;
@@ -443,7 +474,7 @@ $outline: #727970;
}
}
.dept-desc {
.qual-desc {
font-size: 26rpx;
color: $on-surface-variant;
@@ -512,11 +543,13 @@ $outline: #727970;
font-size: 28rpx;
color: $on-surface-variant;
margin-bottom: 16rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.doctor-price-row {
margin-bottom: 16rpx;
}
.doctor-price {
font-size: 28rpx;
@@ -533,6 +566,9 @@ $outline: #727970;
.doctor-actions {
display: flex;
justify-content: flex-end;
position: relative;
right: 0;
bottom: 0;
}
.appointment-btn {