106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<template>
|
||
<!-- 就诊人/微信用户摘要单元格，点击打开患者视角详情 -->
|
||
<view class="up-cell" @click.stop="handleOpen">
|
||
<view class="up-row">
|
||
<image class="avatar" :src="userAvatar" mode="aspectFill" />
|
||
<view class="text">
|
||
<text class="lbl">微信用户</text>
|
||
<text class="val">{{ userNickname }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="up-row">
|
||
<view class="avatar placeholder" />
|
||
<view class="text">
|
||
<text class="lbl">就诊人</text>
|
||
<text class="val link">{{ patientName }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* 列表内紧凑展示微信用户 + 就诊人，点击抛出 open 事件供父级打开详情抽屉
|
||
*/
|
||
export default {
|
||
name: 'UserPatientCell',
|
||
props: {
|
||
/** 订单行或用户管理行：需含 user / user_patient / up_id / patient */
|
||
row: { type: Object, default: () => ({}) },
|
||
},
|
||
emits: ['open'],
|
||
computed: {
|
||
user() {
|
||
return this.row.user || {};
|
||
},
|
||
patient() {
|
||
return this.row.user_patient || this.row.userPatient || this.row.patient || {};
|
||
},
|
||
upId() {
|
||
if (typeof this.patient === 'object' && this.patient) {
|
||
return Number(this.patient.id || this.row.up_id || 0);
|
||
}
|
||
return Number(this.row.up_id || 0);
|
||
},
|
||
userNickname() {
|
||
return this.user.nickname || '—';
|
||
},
|
||
userAvatar() {
|
||
return this.user.avatarurl || 'https://xiaokang88.oss-cn-hangzhou.aliyuncs.com/xk-client-wx/static/mine/mr_tx.png';
|
||
},
|
||
patientName() {
|
||
if (typeof this.patient === 'string') return this.patient || '—';
|
||
return (this.patient && this.patient.name) || this.row.patient || '—';
|
||
},
|
||
},
|
||
methods: {
|
||
handleOpen() {
|
||
if (!this.upId) {
|
||
uni.showToast({ title: '缺少就诊人信息', icon: 'none' });
|
||
return;
|
||
}
|
||
this.$emit('open', { upId: this.upId, patientName: this.patientName });
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.up-cell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
.up-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
.avatar {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 50%;
|
||
background: #f3f4f6;
|
||
flex-shrink: 0;
|
||
}
|
||
.avatar.placeholder {
|
||
background: #e5e7eb;
|
||
}
|
||
.text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
}
|
||
.lbl {
|
||
font-size: 20rpx;
|
||
color: #9ca3af;
|
||
}
|
||
.val {
|
||
font-size: 24rpx;
|
||
color: #374151;
|
||
}
|
||
.val.link {
|
||
color: #6acdbb;
|
||
}
|
||
</style>
|