xkyy/xk-client-wx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI优化

Browse Source
This commit is contained in:
李琦
2026-02-02 16:10:46 +08:00
parent ca03f17f28
commit a130f428b9
8 changed files with 356 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
pages/Inquiries/Inquiries.vue
View File

@@ -172,9 +172,64 @@
type: "",
}
},
onLoad(e) {
async onLoad(e) {
this.type = e.type
// console.log(e, 'idd');
// 当 type === 2 (诊所在线问诊) 时，直接获取委托诊所和医生信息并跳转到挂号页面
if (this.type === '2') {
try {
const storeId = uni.getStorageSync('store_id') || '11001';
const { getClinicOnlineConsultationInfoApi } = await import('@/request/api/product');
const configRes = await getClinicOnlineConsultationInfoApi({ store_id: storeId });
if (configRes.data?.code === 0 || configRes.data?.code === '0') {
const result = configRes.data?.result;
if (result?.can_use && result?.delegate_doctor_id) {
// 直接跳转到就诊人选择页面，传递医生ID和挂号类型
uni.redirectTo({
url: `/subPackages/doctor/doctor-userinfo?id=${result.delegate_doctor_id}&r_type=2&delegate_store_id=${result.delegate_store_id || storeId}`
});
return;
} else {
uni.showToast({
title: result?.message || '该门店暂不支持在线问诊功能',
icon: 'none',
duration: 2000
});
// 返回上一页
setTimeout(() => {
uni.navigateBack();
}, 2000);
return;
}
} else {
uni.showToast({
title: configRes.data?.message || '获取在线问诊信息失败',
icon: 'none',
duration: 2000
});
// 返回上一页
setTimeout(() => {
uni.navigateBack();
}, 2000);
return;
}
} catch (error) {
console.error('获取在线问诊信息失败:', error);
uni.showToast({
title: '获取在线问诊信息失败',
icon: 'none',
duration: 2000
});
// 返回上一页
setTimeout(() => {
uni.navigateBack();
}, 2000);
return;
}
}
},
methods: {
closeDropdown() {

45
pages/home/home.vue
View File

@@ -72,7 +72,7 @@
</view>
<image src="../../static/home/bg1.png" class="nav-icon-img-64" mode="aspectFit"></image>
</view>
<view class="nav-card" @click="goYard(3)">
<view class="nav-card" @click="goYard(2)">
<view class="nav-content">
<view class="nav-title" style="color:#00B578">在线复诊</view>
<view class="nav-desc">在线选药 极速达</view>
@@ -317,6 +317,49 @@ export default {
}
},
async goYard(type) {
// 当 type === 2 (诊所在线问诊) 时，直接获取委托诊所和医生信息并跳转到挂号页面
if (type === 2) {
try {
const storeId = uni.getStorageSync('store_id') || '11001';
const { getClinicOnlineConsultationInfoApi } = await import('@/request/api/product');
const configRes = await getClinicOnlineConsultationInfoApi({ store_id: storeId });
if (configRes.data?.code === 0 || configRes.data?.code === '0') {
const result = configRes.data?.result;
if (result?.can_use && result?.delegate_doctor_id) {
// 直接跳转到就诊人选择页面，传递医生ID和挂号类型
uni.navigateTo({
url: `/subPackages/doctor/doctor-userinfo?id=${result.delegate_doctor_id}&r_type=2&delegate_store_id=${result.delegate_store_id || storeId}`
});
return;
} else {
uni.showToast({
title: result?.message || '该门店暂不支持在线问诊功能',
icon: 'none',
duration: 2000
});
return;
}
} else {
uni.showToast({
title: configRes.data?.message || '获取在线问诊信息失败',
icon: 'none',
duration: 2000
});
return;
}
} catch (error) {
console.error('获取在线问诊信息失败:', error);
uni.showToast({
title: '获取在线问诊信息失败',
icon: 'none',
duration: 2000
});
return;
}
}
// 当 type === 3 (在线复诊) 时，需要先检查门店是否支持在线问诊功能
if (type === 3) {
try {

14
request/api/product.js
View File

@@ -63,6 +63,20 @@ export async function checkOnlineConsultationConfigApi(params) {
return await get(url, restParams, 3)
}
/**
* 获取诊所在线问诊信息（委托诊所和委托医生）
* @param params { store_id: number, guest?: number } - guest: 0=普通接口, 1=Guest接口
* @returns {Promise<*>}
*/
export async function getClinicOnlineConsultationInfoApi(params) {
const { guest = 0, ...restParams } = params;
// guest=1 时调用 Guest 接口，guest=0 时调用普通接口
const url = guest === 1
? '/guest/guest-platform/get-clinic-online-consultation-info'
: '/store/get-clinic-online-consultation-info';
return await get(url, restParams, 3)
}
/**
* 获取药品分类列表
* @param params { zone_type: string }

3
store/chat/chat.js
View File

@@ -326,6 +326,9 @@ const ChatManager = {
if (parsed.type === 'price_update') {
return parsed.message || '[价格更新]';
}
if (parsed.type === 'price_adjust') {
return parsed.message || '[价格调整]';
}
return '[系统消息]';
} catch (e) {
return '[系统消息]';

4
subPackages/chat/chat.vue
View File

@@ -79,6 +79,7 @@
@viewRegister="viewRegister"
@viewPrescription="viewPrescription"
@goToOrderMedicine="goToOrderMedicine"
@viewOrder="viewOrder"
/>
</view>
@@ -770,7 +771,8 @@ export default {
getRegisterStatusText(status) { const map = { 0: '待就诊', 1: '已缴费', 2: '已就诊', 3: '已取消', 4: '已退费' }; return map[status] || '未知状态'; },
viewPrescription(id, orderNo) { uni.navigateTo({ url: "/subPackages/my/myrecord-detail?id=" + id + '&no=' + orderNo }); },
goToOrderMedicine(id, orderNo) { uni.navigateTo({ url: "/subPackages/my/my-drug/drug-info?id=" + id + '&order_type=prescription' }); },
viewRegister(id, orderNo) { uni.navigateTo({ url: "/subPackages/register/register-detail?id=" + id + '&no=' + orderNo }); }
viewRegister(id, orderNo) { uni.navigateTo({ url: "/subPackages/register/register-detail?id=" + id + '&no=' + orderNo }); },
viewOrder(orderId, orderNo) { uni.navigateTo({ url: "/subPackages/my/my-drug/drug-info?id=" + orderId }); }
}
};
</script>

237
subPackages/chat/components/MessageBubble.vue
View File

@@ -7,7 +7,6 @@
<view class="content-wrapper">
<!-- 文本/语音/视频/图片 气泡 -->
<!-- 注意：类型 9 如果是 price_update 特殊样式，不使用普通气泡背景，所以单独处理 -->
<view class="message-bubble"
:class="['type-' + msg.message_type, { 'no-padding': isMediaOrCard || isSystemPriceUpdate }]"
>
@@ -23,20 +22,28 @@
@click="$emit('previewImage', parsedContent)">
</image>
<!-- 2. 语音 -->
<view v-else-if="msg.message_type === 2" class="audio-content" @click="$emit('playAudio', msg)">
<!-- 2. 语音 (优化：动态宽度 + 播放动画) -->
<view v-else-if="msg.message_type === 2"
class="audio-content"
:style="{ width: getAudioWidth(msg.duration) }"
@click="$emit('playAudio', msg)">
<!-- 我发的：时长在左，图标在右 -->
<block v-if="isMine">
<text class="duration">{{ msg.duration }}''</text>
<view class="wifi-symbol mine">
<u-icon name="volume-fill" size="18" color="#fff"></u-icon>
<view class="voice-icon-wrap mine" :class="{ 'playing': isPlaying }">
<u-icon name="volume-fill" size="20" color="#fff"></u-icon>
</view>
</block>
<!-- 别人发的：图标在左，时长在右 -->
<block v-else>
<view class="wifi-symbol other" :class="{'active': isPlaying}">
<u-icon name="volume" size="18" color="#333"></u-icon>
<view class="voice-icon-wrap other" :class="{ 'playing': isPlaying }">
<u-icon name="volume-fill" size="20" color="#333"></u-icon>
</view>
<text class="duration">{{ msg.duration }}''</text>
</block>
</view>
<!-- 3. 视频 -->
@@ -46,20 +53,77 @@
class="media-content video">
</video>
<!-- 9. 系统消息 (特殊处理) -->
<!-- 9. 系统消息 (优化：回归原生服务通知风格) -->
<block v-else-if="msg.message_type === 9">
<!-- 情况A: 价格变动通知 (卡片样式) -->
<view v-if="parsedContent.type === 'price_update'" class="system-message-card">
<view class="price-update-notice">
<u-icon name="info-circle-fill" size="18" color="#fa8c16"></u-icon>
<text class="notice-text">{{ parsedContent.message }}</text>
<!-- 改价通知卡片 -->
<view
v-if="parsedContent.type === 'price_update' || parsedContent.type === 'price_adjust'"
class="service-notify-card"
@click="parsedContent.order_id && $emit('viewOrder', parsedContent.order_id, parsedContent.order_no)"
>
<!-- 卡片头部 -->
<view class="sn-header">
<text class="sn-title">{{ parsedContent.type === 'price_update' ? '订单改价通知' : '费用调整提醒' }}</text>
</view>
<view class="price-detail">
<text>订单号：{{ parsedContent.order_no }}</text>
<text>应付金额：¥{{ parsedContent.total_pay_price }}</text>
<!-- 卡片内容区：标准键值对列表 -->
<view class="sn-body">
<!-- 场景A: 运费/总价更新 -->
<block v-if="parsedContent.type === 'price_update'">
<view class="sn-row">
<text class="sn-label">变动说明</text>
<text class="sn-value">{{ parsedContent.message }}</text>
</view>
<view class="sn-row">
<text class="sn-label">最新应付</text>
<text class="sn-value price">¥{{ parsedContent.total_pay_price }}</text>
</view>
<view class="sn-row">
<text class="sn-label">订单编号</text>
<text class="sn-value sub">{{ parsedContent.order_no }}</text>
</view>
</block>
<!-- 场景B: 单品/明细调整 -->
<block v-else-if="parsedContent.type === 'price_adjust'">
<view class="sn-row">
<text class="sn-label">调整项目</text>
<text class="sn-value truncate">{{ parsedContent.drug_name || '医疗服务' }}</text>
</view>
<view class="sn-row">
<text class="sn-label">价格变动</text>
<view class="sn-value-group">
<text class="old">¥{{ parsedContent.old_price }}</text>
<u-icon name="arrow-right" size="10" color="#999" style="margin:0 4rpx;"></u-icon>
<text class="new">¥{{ parsedContent.new_price }}</text>
</view>
</view>
<!-- 情况B: 普通系统文本 -->
<view class="sn-row">
<text class="sn-label">变动金额</text>
<text class="sn-value" :class="parsedContent.adjust_amount >= 0 ? 'color-orange' : 'color-green'">
{{ parsedContent.adjust_amount >= 0 ? '增加' : '减少' }} ¥{{ Math.abs(parsedContent.adjust_amount) }}
</text>
</view>
<view class="sn-row">
<text class="sn-label">当前总额</text>
<text class="sn-value strong">¥{{ parsedContent.total_pay_price }}</text>
</view>
</block>
</view>
<!-- 底部操作栏 -->
<view class="sn-footer">
<text>查看详情</text>
<u-icon name="arrow-right" size="12" color="#ccc"></u-icon>
</view>
</view>
<!-- 普通系统文本 (保持原样) -->
<view v-else class="system-inner">
<text>{{ msg.message_content }}</text>
</view>
@@ -88,19 +152,14 @@
<view class="title-group"><u-icon name="file-text-fill" size="16" color="#64748B"></u-icon><text class="card-title">患者就诊经历</text></view>
</view>
<view class="card-body">
<!-- 补全: 药品名称 -->
<view class="info-row" v-if="parsedContent.drug_name">
<text class="label">药品名称</text>
<text class="value">{{ parsedContent.drug_name }}</text>
</view>
<!-- 症状描述 -->
<view class="text-block" v-if="parsedContent.illness_info">
<text class="block-label">症状描述</text>
<text class="block-content">{{ parsedContent.illness_info }}</text>
</view>
<!-- 补全: 详细状态 -->
<view class="info-row"><text class="label">是否就诊过</text><text class="value">{{ parsedContent.has_visited === '1' ? '是' : '否' }}</text></view>
<view class="info-row"><text class="label">是否使用过药品</text><text class="value">{{ parsedContent.has_used_drug === '1' ? '是' : '否' }}</text></view>
</view>
@@ -186,7 +245,7 @@ export default {
},
// 是否是系统消息且为价格变动（需要独立卡片样式）
isSystemPriceUpdate() {
return this.msg.message_type === 9 && this.parsedContent.type === 'price_update';
return this.msg.message_type === 9 && (this.parsedContent.type === 'price_update' || this.parsedContent.type === 'price_adjust');
},
isCardType() {
return [4, 10, 11, 12, 13].includes(this.msg.message_type);
@@ -205,6 +264,14 @@ export default {
}
},
methods: {
// 计算语音条宽度 (Min: 100rpx, Max: 350rpx, Unit: 10rpx/sec)
getAudioWidth(duration) {
const min = 120;
const max = 350;
const unit = 12;
let w = min + (parseInt(duration) || 0) * unit;
return Math.min(w, max) + 'rpx';
},
getStatusText(status) { const map = { 0: '待审核', 1: '已审核', 2: '未通过' }; return map[status] || '状态未知'; },
getRegisterStatusText(status) { const map = { 0: '待就诊', 1: '已缴费', 2: '已就诊', 3: '已取消', 4: '已退费' }; return map[status] || '状态未知'; },
}
@@ -219,7 +286,8 @@ $bg-other: #FFFFFF;
$text-main: #333333;
$text-sub: #666666;
$radius-bubble: 12rpx;
$max-width: 500rpx;
$price-color: #FF4D4F; // 价格红
$success-color: #059669;
.bubble-container {
display: flex;
@@ -306,13 +374,51 @@ $max-width: 500rpx;
&.video { width: 300rpx; height: 170rpx; }
}
// 语音
// ========== 语音条样式 (Audio) ==========
.audio-content {
display: flex; align-items: center; gap: 12rpx; min-width: 100rpx;
.duration { font-size: 28rpx; }
display: flex; align-items: center;
// 宽度由 style 动态控制，这里不要锁死 width
justify-content: space-between;
.duration {
font-size: 26rpx;
white-space: nowrap;
}
// ========== 卡片样式 ==========
.voice-icon-wrap {
display: flex; align-items: center; justify-content: center;
width: 44rpx; height: 44rpx;
// 对方发的消息，图标在左，波纹向右(默认)
&.other {
margin-right: 6rpx;
}
// 我发的消息，图标在右，波纹需要转向左侧 (rotate 180)
&.mine {
margin-left: 6rpx;
transform: rotate(180deg);
}
// 播放时的动画：呼吸/波动效果
&.playing {
animation: voice-pulse 1.2s infinite ease-in-out;
}
}
}
// 语音播放动画关键帧
@keyframes voice-pulse {
0% { opacity: 1; transform: scale(1) rotate(var(--rotate-angle, 0deg)); }
50% { opacity: 0.4; transform: scale(0.92) rotate(var(--rotate-angle, 0deg)); }
100% { opacity: 1; transform: scale(1) rotate(var(--rotate-angle, 0deg)); }
}
// 为了解决 rotate 和 scale 同时作用的问题，分别定义 mine 和 other
.voice-icon-wrap.mine.playing { --rotate-angle: 180deg; animation: voice-pulse 1.2s infinite ease-in-out; }
.voice-icon-wrap.other.playing { --rotate-angle: 0deg; animation: voice-pulse 1.2s infinite ease-in-out; }
// ========== 卡片样式 (通用) ==========
.card-content {
background: #fff;
border-radius: 16rpx;
@@ -362,11 +468,76 @@ $max-width: 500rpx;
}
}
// 系统消息样式
.system-message-card {
background: #FFFBEB; border: 1rpx solid #FEF3C7; border-radius: 16rpx; padding: 20rpx; width: 480rpx;
.price-update-notice { display: flex; align-items: center; gap: 10rpx; margin-bottom: 10rpx; .notice-text { color: #D97706; font-size: 26rpx; font-weight: 600; } }
.price-detail { display: flex; flex-direction: column; gap: 6rpx; font-size: 22rpx; color: #78350F; padding-left: 46rpx; }
// ========== 原生风格服务通知 (Service Notify Card) ==========
// 这是一个非常经典、耐看的布局，模仿微信/支付宝的服务通知
.service-notify-card {
background: #FFFFFF;
border-radius: 12rpx; // 稍微调小圆角，更正式
width: 480rpx;
border: 1rpx solid #eaeaea; // 纯粹的边框
overflow: hidden;
position: relative;
// 头部：极简
.sn-header {
padding: 24rpx 24rpx 16rpx 24rpx;
border-bottom: 1rpx solid #f5f5f5;
.sn-title {
font-size: 30rpx;
font-weight: 600;
color: #333;
}
}
// 内容区：标准的左key右value列表
.sn-body {
padding: 20rpx 24rpx;
display: flex; flex-direction: column; gap: 16rpx;
.sn-row {
display: flex; justify-content: space-between; align-items: flex-start;
line-height: 1.4;
.sn-label {
font-size: 26rpx; color: #999; // 经典的标签灰
min-width: 110rpx; // 保证对齐
}
.sn-value {
font-size: 26rpx; color: #333; text-align: right; flex: 1;
&.truncate {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320rpx;
}
&.price { color: #333; font-weight: 600; font-size: 28rpx; } // 普通金额强调
&.sub { color: #999; font-family: monospace; }
&.strong { color: #333; font-weight: bold; font-size: 30rpx; }
// 涨跌颜色
&.color-orange { color: #fa8c16; }
&.color-green { color: #52c41a; }
}
// 价格变化组合
.sn-value-group {
display: flex; align-items: center; justify-content: flex-end;
.old { color: #999; text-decoration: line-through; font-size: 24rpx; }
.new { color: #333; font-weight: 600; font-size: 26rpx; }
}
}
}
// 底部：通用的查看详情
.sn-footer {
border-top: 1rpx solid #f5f5f5;
padding: 18rpx 24rpx;
display: flex; justify-content: space-between; align-items: center;
font-size: 24rpx; color: #666;
background: #fff;
&:active {
background: #f9f9f9; // 仅底栏有点击态
}
}
}
.system-inner {

5
subPackages/doctor/doctor-userinfo.vue
View File

@@ -342,9 +342,12 @@ export default {
mask: true
});
// 如果是购药类型(register_type=3)且有委托诊所ID，则使用委托诊所ID；否则使用当前门店ID
const storeId = (this.registerType === '3' && this.delegateStoreId)
const storeId = (this.registerType != '0' && this.delegateStoreId)
? this.delegateStoreId
: (uni.getStorageSync('store_id') || '11001');
// const storeId = ((this.registerType === '3' || this.registerType == '2') && this.delegateStoreId)
// ? this.delegateStoreId
// : (uni.getStorageSync('store_id') || '11001');
registe({
method: "post",
data: {

33
subPackages/register/register.vue
View File

@@ -172,7 +172,9 @@
// 原有逻辑：已有 register_id
this.register_id = e.id;
this.rInfo = e.r_info ? (typeof e.r_info === 'string' ? JSON.parse(decodeURIComponent(e.r_info)) : e.r_info) : {};
this.currentDoctorId = e.doctor_id ? ('doctor-' + e.doctor_id.replace('doctor-', '')) : 'doctor-39';
// 修复：如果 doctor_id 为空字符串，也使用默认值；如果 doctor_id 存在且不为空，则使用它
const doctorId = e.doctor_id && e.doctor_id.trim() !== '' ? e.doctor_id : null;
this.currentDoctorId = doctorId ? ('doctor-' + doctorId.replace('doctor-', '')) : 'doctor-39';
uni.setStorageSync('register_id', this.register_id);
// 获取挂号信息
@@ -195,6 +197,10 @@
if (res.data.errcode == 0) {
that.registList = res.data.data.list[0]
that.registerType = that.registerMap[that.registList.register_type];
// 如果挂号信息中有医生ID，更新 currentDoctorId
if (that.registList.service_user_id) {
that.currentDoctorId = 'doctor-' + that.registList.service_user_id;
}
}
})
},
@@ -202,19 +208,36 @@
async handleOnlineConsultationAfterPayment() {
let that = this;
try {
// 1. 获取医生ID（从 currentDoctorId 中提取）
const doctorId = that.currentDoctorId.replace('doctor-', '');
// 1. 获取医生ID（优先从挂号信息中获取，否则从 currentDoctorId 中提取）
let doctorId = '';
if (that.registList && that.registList.service_user_id) {
doctorId = String(that.registList.service_user_id);
} else {
doctorId = that.currentDoctorId.replace('doctor-', '');
}
// 如果医生ID仍然为空，报错
if (!doctorId || doctorId === '') {
uni.hideLoading();
uni.showToast({
title: '医生ID不能为空：' + doctorId,
icon: 'none'
});
return;
}
// 2. 获取患者ID
const patientId = that.currentUserId.replace('user-', '');
// 3. 创建或获取聊天房间 (type=3 表示在线复诊/购药)
// 3. 创建或获取聊天房间
// type=2 表示诊所在线复诊，type=3 表示药店在线复诊/购药
const roomType = (that.registList && that.registList.register_type === 2) ? 2 : 3;
const roomRes = await request('/xkApi/online-consultation/get-or-create-chat-room', {
method: 'POST',
data: {
doctor_id: doctorId,
patient_id: patientId,
type: 3
type: roomType
}
}, 1);