|
|
<template>
|
|
|
<view class="page">
|
|
|
<image class="bkg" :src="info.cover?info.cover.url:''"></image>
|
|
|
<view class="cotainer">
|
|
|
<view class="hospital">
|
|
|
<view class="title">咨询科室：{{ info.name?info.name:'' }} - {{department_name?department_name:''}}</view>
|
|
|
<view class="hospital-title">患者信息</view>
|
|
|
<view class="hospital-form">
|
|
|
<view class="form-card form-card-1">
|
|
|
<u-form :model="form" :rules="rules" ref="uForm" :label-width="178" :error-type="['toast']">
|
|
|
<u-form-item label="姓名" prop="name" required>
|
|
|
<!-- <u-input v-model="form.name" placeholder="请填写姓名" /> -->
|
|
|
<u-input
|
|
|
:type="'select'"
|
|
|
placeholder="请选择人员"
|
|
|
:value="form.name"
|
|
|
:select-open="isShowArchive"
|
|
|
@click="isShowArchive = true"
|
|
|
/>
|
|
|
</u-form-item>
|
|
|
<u-form-item label="性别" prop="sex" required>
|
|
|
<view slot="right">
|
|
|
<view class="sexs">
|
|
|
<view v-for="item in list_sex" class="sexs-item" @click="confirmSex(item)"
|
|
|
:class="form.sex==item?'sexs-active':''">{{item}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-form-item>
|
|
|
<u-form-item label="出生年月" prop="birthday" required>
|
|
|
<u-input type="select" placeholder="请选择" v-model="form.birthday"
|
|
|
:select-open="isShowTime" @click="isShowTime = true" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="所在城市" prop="city">
|
|
|
<u-input v-model="form.city" placeholder="请填写所在城市" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="患者关系" prop="relationship" required>
|
|
|
<u-input type="select" placeholder="请选择" v-model="form.relationship"
|
|
|
:select-open="isShowRelationship" @click="isShowRelationship = true" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="手机号码" prop="mobile" required>
|
|
|
<u-input v-model="form.mobile" placeholder="请填写手机号码" type="number" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="咨询类别" prop="type" required>
|
|
|
<u-input type="select" placeholder="请选择" v-model="form.type" :select-open="isShowType"
|
|
|
@click="isShowType = true" />
|
|
|
</u-form-item>
|
|
|
<view class="form-card-2">
|
|
|
<u-form-item label="咨询信息" prop="content" label-position="top" :border-bottom="false">
|
|
|
<u-input border :custom-style="{ 'letter-spacing': '2rpx' }" border-color="#dad9d9"
|
|
|
placeholder="请简单描述您要咨询的内容(内容加密保护)" v-model="form.content"
|
|
|
type="textarea"></u-input>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
|
</u-form>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<u-button ripple shape="circle" :custom-style="orderBtnStyle" :throttle-time="2000"
|
|
|
@click="submit">提交咨询</u-button>
|
|
|
</view>
|
|
|
<!-- 出生年月 -->
|
|
|
<u-picker v-model="isShowTime" :params="{
|
|
|
year: true,
|
|
|
month: true,
|
|
|
day: true,
|
|
|
}" mode="time" @confirm="confirmTime"></u-picker>
|
|
|
<!-- 患者关系 -->
|
|
|
<u-select v-model="isShowRelationship" value-name="value" @confirm="confirmRelationship" label-name="label"
|
|
|
:list="list_relationship"></u-select>
|
|
|
<!-- 咨询类别 -->
|
|
|
<u-select v-model="isShowType" value-name="value" @confirm="confirmType" label-name="label"
|
|
|
:list="list_type"></u-select>
|
|
|
|
|
|
|
|
|
<!-- 选择就诊人，可以新增 -->
|
|
|
<u-popup
|
|
|
v-model="isShowArchive"
|
|
|
mode="bottom"
|
|
|
safe-area-inset-bottom
|
|
|
closeable
|
|
|
:border-radius="10"
|
|
|
:height="800"
|
|
|
>
|
|
|
<view class="service-list" style="padding-bottom: 120rpx">
|
|
|
<view
|
|
|
class="service-list-item"
|
|
|
v-for="(item, i) in list_archive"
|
|
|
:key="i"
|
|
|
@click="confirmArchive(item)"
|
|
|
>
|
|
|
<view class="service-list-item__namewrap">
|
|
|
<view class="service-list-item__name">
|
|
|
{{ item.name }}
|
|
|
</view>
|
|
|
<view class="service-list-item__price">
|
|
|
{{ item.mobile }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="service-list-item__address">
|
|
|
<text>{{ item.address }}</text>
|
|
|
<view class="icon">
|
|
|
<u-icon name="edit-pen" :size="40" color="#999999" @tap="editUser(item),$event.stopPropagation()"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="service-list-btn">
|
|
|
<u-button
|
|
|
shape="circle"
|
|
|
ripple
|
|
|
:custom-style="orderBtnStyle"
|
|
|
@click="addArchive"
|
|
|
>新增被服务人</u-button
|
|
|
>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<!-- 新增就诊人 -->
|
|
|
<service-archive
|
|
|
ref="serviceArchive"
|
|
|
@addSuccess="addSuccess"
|
|
|
></service-archive>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import serviceArchive from "@/component/serviceArchive/service-archive.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
serviceArchive,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
orderBtnStyle: {
|
|
|
'background-image': 'linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)',
|
|
|
'font-weight': '500',
|
|
|
'font-size': '27rpx',
|
|
|
'color': '#fff',
|
|
|
'width': '440rpx',
|
|
|
'height': '80rpx',
|
|
|
'line-height': '80rpx'
|
|
|
},
|
|
|
serve_hospital_id: '',
|
|
|
serve_hospital_department_id: '',
|
|
|
info: {},
|
|
|
department_name: '',
|
|
|
isShowArchive: false,
|
|
|
list_archive: [],
|
|
|
form: {
|
|
|
name: '',
|
|
|
sex: '男',
|
|
|
birthday: '',
|
|
|
city: '',
|
|
|
relationship: '',
|
|
|
mobile: '',
|
|
|
type: '',
|
|
|
content: '',
|
|
|
},
|
|
|
rules: {
|
|
|
name: [{
|
|
|
required: true,
|
|
|
message: "请填写姓名",
|
|
|
trigger: ["blur", "change"],
|
|
|
}],
|
|
|
sex: [{
|
|
|
required: true,
|
|
|
message: "请选择性别",
|
|
|
trigger: ["blur", "change"],
|
|
|
}],
|
|
|
birthday: [{
|
|
|
required: true,
|
|
|
message: "请选择出生日期",
|
|
|
trigger: ["blur", "change"],
|
|
|
}],
|
|
|
relationship: [{
|
|
|
required: true,
|
|
|
message: "请选择患者关系",
|
|
|
trigger: ["blur", "change"],
|
|
|
}],
|
|
|
mobile: [{
|
|
|
required: true,
|
|
|
message: "请填写手机号码",
|
|
|
trigger: ["blur", "change"],
|
|
|
},
|
|
|
{
|
|
|
// 自定义验证函数，见上说明
|
|
|
validator: (rule, value, callback) => {
|
|
|
return this.$u.test.mobile(value);
|
|
|
},
|
|
|
message: "手机号码不正确",
|
|
|
// 触发器可以同时用blur和change
|
|
|
trigger: ["change", "blur"],
|
|
|
}
|
|
|
],
|
|
|
type: [{
|
|
|
required: true,
|
|
|
message: "请选择咨询类别",
|
|
|
trigger: ["blur", "change"],
|
|
|
}],
|
|
|
},
|
|
|
isShowTime: false,
|
|
|
isShowRelationship: false,
|
|
|
list_sex: ['男', '女'],
|
|
|
list_relationship: [{
|
|
|
label: '本人',
|
|
|
value: '本人'
|
|
|
}, {
|
|
|
label: '家庭成员',
|
|
|
value: '家庭成员'
|
|
|
}, {
|
|
|
label: '亲戚朋友',
|
|
|
value: '亲戚朋友'
|
|
|
}, {
|
|
|
label: '其他',
|
|
|
value: '其他'
|
|
|
}],
|
|
|
isShowType: false,
|
|
|
list_type: [{
|
|
|
label: '挂号',
|
|
|
value: '挂号'
|
|
|
}, {
|
|
|
label: '陪诊',
|
|
|
value: '陪诊'
|
|
|
},{
|
|
|
label: '照护',
|
|
|
value: '照护'
|
|
|
}, {
|
|
|
label: '预约专家',
|
|
|
value: '预约专家'
|
|
|
}],
|
|
|
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
// if (this.$store.state.vuex_location !== 2) {
|
|
|
// this.$store.dispatch('getLocation')
|
|
|
// }
|
|
|
},
|
|
|
onReady() {
|
|
|
this.$refs.uForm.setRules(this.rules);
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
this.serve_hospital_id = options.id ? options.id : ''
|
|
|
this.serve_hospital_department_id = options.department_id ? options.department_id : ''
|
|
|
this.getUserArchive();
|
|
|
this.getDetail()
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
async getDetail() {
|
|
|
const res = await this.$u.api.serveHospitalDetail({
|
|
|
id: this.serve_hospital_id
|
|
|
})
|
|
|
this.info = res
|
|
|
res.serve_hospital_department.map(item => {
|
|
|
if (this.serve_hospital_department_id == item.id) {
|
|
|
this.department_name = item.name
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
async getUserArchive() {
|
|
|
const res = await this.$u.api.userArchive({
|
|
|
page: 1,
|
|
|
page_size: 999,
|
|
|
});
|
|
|
this.list_archive = res.data;
|
|
|
},
|
|
|
// 服务对象
|
|
|
confirmArchive(e) {
|
|
|
this.form.name = e.name
|
|
|
this.form.mobile = e.mobile
|
|
|
|
|
|
this.isShowArchive = false;
|
|
|
},
|
|
|
addArchive() {
|
|
|
this.$refs.serviceArchive.isShow = true;
|
|
|
},
|
|
|
editUser(item){
|
|
|
this.$refs.serviceArchive.form = item
|
|
|
this.$refs.serviceArchive.isShow = true;
|
|
|
},
|
|
|
delUser(item){
|
|
|
uni.showModal({
|
|
|
title:'确认删除该人员？',
|
|
|
success:async (res)=>{
|
|
|
if(res.confirm){
|
|
|
try {
|
|
|
if (!item?.id) return
|
|
|
const res = await this.$u.api.userArchiveDestroy({
|
|
|
id: item?.id
|
|
|
})
|
|
|
this.getUserArchive()
|
|
|
} catch (err) {
|
|
|
console.error(err)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
addSuccess(e) {
|
|
|
if (e) {
|
|
|
this.getUserArchive();
|
|
|
}
|
|
|
},
|
|
|
|
|
|
confirmSex(e) {
|
|
|
this.form.sex = e
|
|
|
},
|
|
|
confirmTime(e) {
|
|
|
this.form.birthday = `${e.year}-${e.month}-${e.day}`;
|
|
|
},
|
|
|
confirmRelationship(e) {
|
|
|
this.form.relationship = e[0].value;
|
|
|
},
|
|
|
confirmType(e) {
|
|
|
this.form.type = e[0].value;
|
|
|
},
|
|
|
submit() {
|
|
|
this.$refs.uForm.validate(async (valid) => {
|
|
|
if (valid) {
|
|
|
const res = await this.$u.api.serveHospitalForm({
|
|
|
serve_hospital_id: this.serve_hospital_id,
|
|
|
serve_hospital_department_id: this.serve_hospital_department_id,
|
|
|
...this.form
|
|
|
});
|
|
|
if (res) {
|
|
|
uni.showToast({
|
|
|
title: '提交成功',
|
|
|
duration: 1500,
|
|
|
icon:'none',
|
|
|
success() {
|
|
|
setTimeout(function() {
|
|
|
uni.redirectTo({
|
|
|
url:'/package_sub/pages/ServeOrder/ServeOrder'
|
|
|
})
|
|
|
}, 1500)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
} else {
|
|
|
console.log("验证失败");
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
},
|
|
|
computed: {
|
|
|
token() {
|
|
|
return this.vuex_token || uni.getStorageSync('lifeData')?.vuex_token
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.page {
|
|
|
position: relative;
|
|
|
background-color: #f5efee;
|
|
|
height: 100vh;
|
|
|
padding-bottom: 80rpx;
|
|
|
}
|
|
|
|
|
|
.bkg {
|
|
|
height: 540rpx;
|
|
|
width: 100vw;
|
|
|
position: absolute;
|
|
|
}
|
|
|
|
|
|
.cotainer {
|
|
|
|
|
|
padding-top: 460rpx;
|
|
|
padding-bottom: 80rpx;
|
|
|
background-color: #f5efee;
|
|
|
}
|
|
|
|
|
|
.hospital {
|
|
|
background-color: #fff;
|
|
|
border-radius: 10rpx;
|
|
|
filter: drop-shadow(2.192rpx 4.494rpx 5rpx rgba(33, 32, 32, 0.15));
|
|
|
margin: 25rpx;
|
|
|
margin-top: 0;
|
|
|
padding-bottom: 60rpx;
|
|
|
margin-bottom: 50rpx;
|
|
|
|
|
|
.title {
|
|
|
font-size: 28rpx;
|
|
|
color: #222222;
|
|
|
padding: 40rpx;
|
|
|
border-bottom: 1rpx solid rgba(33, 32, 32, 0.15);
|
|
|
}
|
|
|
|
|
|
&-title {
|
|
|
font-size: 28rpx;
|
|
|
padding: 40rpx;
|
|
|
color: #000;
|
|
|
padding-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
&-form {
|
|
|
.form-card {
|
|
|
padding: 0 60rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.sexs {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
&-item {
|
|
|
width: 130rpx;
|
|
|
height: 48rpx;
|
|
|
line-height: 48rpx;
|
|
|
color: #000000;
|
|
|
font-size: 24rpx;
|
|
|
text-align: center;
|
|
|
border-radius: 48rpx;
|
|
|
background-color: #e4e9f0;
|
|
|
margin-left: 10rpx
|
|
|
}
|
|
|
|
|
|
&-active {
|
|
|
color: #fff;
|
|
|
background: linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
::v-deep .form-card .u-input__input {
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
::v-deep .form-card-2 .u-input__input {
|
|
|
text-align: left;
|
|
|
}
|
|
|
}
|
|
|
.service-list {
|
|
|
padding-top: 80rpx;
|
|
|
|
|
|
&-item {
|
|
|
border: 2rpx solid #e6e6eb;
|
|
|
border-radius: 10rpx;
|
|
|
background-color: #ffffff;
|
|
|
margin: 0 25rpx;
|
|
|
padding: 28rpx 39rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
&__namewrap {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
&__address {
|
|
|
margin-top:10rpx;
|
|
|
width: 100%;
|
|
|
padding-left: 14rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
&__icon {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
// background: #f9f5e9;
|
|
|
// padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
&__name {
|
|
|
padding-left: 14rpx;
|
|
|
font-size: 28rpx;
|
|
|
color: #333333;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
&__price {
|
|
|
color: #c20d12;
|
|
|
font-weight: 500;
|
|
|
margin-left: auto;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-btn {
|
|
|
position: fixed;
|
|
|
bottom: 40rpx;
|
|
|
left: calc(50% - 144rpx);
|
|
|
}
|
|
|
|
|
|
&-item + &-item {
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
</style> |
