You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

397 lines
11 KiB

<template>
<view>
<cpn-navbar title="回访详情" :is-back="true"></cpn-navbar>
<view class="container">
<view class="nursing-list">
<view class="list-item">
<view class="top">
<view class="time">{{detail.visit_time}}</view>
<view class="status">
<view class="status-icon"
:class="{
icon1:detail.schedule_list ? detail.schedule_list.status === 0 : false,
icon2:detail.schedule_list ? detail.schedule_list.status === 2 : false,
icon3:detail.schedule_list ? detail.schedule_list.status === 1 : false
}">
</view>
<view v-if="detail.schedule_list && detail.schedule_list.status === 1" class="status-text">护理中</view>
<view v-else-if="detail.schedule_list && detail.status === 0" class="status-text">待护理</view>
<view v-else-if="detail.schedule_list && detail.schedule_list.status === 2" class="status-text">已护理</view>
</view>
</view>
<view class="line"></view>
<view style="padding: 20rpx 40rpx 0;font-size: 32rpx;line-height: 2;font-weight: 600;">
护理人
</view>
<view class="center" v-if="detail.schedule_list">
<view class="avatar">
<u-image :src="((detail.schedule_list.nurse && detail.schedule_list.nurse.idcard) ? getSexByIdcard(detail.schedule_list.nurse.idcard) : '无') === '男' ? vuex_male_img : vuex_female_img" height="104"
width="104" shape="circle"></u-image>
</view>
<view class="user-info">
<view class="name">{{ detail.schedule_list.nurse ? detail.schedule_list.nurse.name : "" }}</view>
<view class="tel">
<view>
<u-icon name="phone" size="28" color="#1479FF"></u-icon>
</view>
<view class="text">{{ detail.schedule_list.nurse ? detail.schedule_list.nurse.mobile : '无'}}</view>
</view>
</view>
<view class="sex">
<view class="sex-text">
{{ (detail.schedule_list.nurse && detail.schedule_list.nurse.idcard) ? getSexByIdcard(detail.schedule_list.nurse.idcard) : '无' }}
</view>
</view>
</view>
<view class="line" style="margin-top: 22rpx;"></view>
<view style="padding: 20rpx 40rpx 0;font-size: 32rpx;line-height: 2;font-weight: 600;">
被护理人
</view>
<view class="center" v-if="detail.schedule_list">
<view class="avatar">
<u-image :src="((detail.schedule_list.customer && detail.schedule_list.customer.idcard) ? getSexByIdcard(detail.schedule_list.customer.idcard) : '无') === '男' ? vuex_male_img : vuex_female_img" height="104"
width="104" shape="circle"></u-image>
</view>
<view class="user-info">
<view class="name">{{ detail.schedule_list.customer ? detail.schedule_list.customer.name : "" }}</view>
<view class="tel">
<view>
<u-icon name="phone" size="28" color="#1479FF"></u-icon>
</view>
<view class="text">{{ detail.schedule_list.customer ? detail.schedule_list.customer.phone : '无'}}</view>
</view>
<view class="address">
<view>
<u-icon name="map" size="28" color="#1479FF"></u-icon>
</view>
<view class="text">{{ detail.schedule_list.customer_address ? detail.schedule_list.customer_address.address : '无'}}</view>
</view>
</view>
<view class="sex">
<view class="sex-text">
{{ (detail.schedule_list.customer && detail.schedule_list.customer.idcard) ? getSexByIdcard(detail.schedule_list.customer.idcard) : '无' }}
</view>
</view>
</view>
<view class="line" style="margin-top: 22rpx;"></view>
<view class="bottom">
<view class="bottom-item">
<view class="bottom-item__title">服务满意度</view>
<view class="bottom-item__value">{{ satisfies.find(i => i.value === detail.satisfy) ? satisfies.find(i => i.value === detail.satisfy).label : '' }}</view>
</view>
<view class="bottom-item">
<view class="bottom-item__title">回访方式</view>
<view class="bottom-item__value">{{ ways.find(i => i.value === detail.way) ? ways.find(i => i.value === detail.way).label : '' }}</view>
</view>
<view class="bottom-item">
<view class="bottom-item__title">回访时间</view>
<view class="bottom-item__value">{{ detail.visit_time }}</view>
</view>
<view class="bottom-item">
<view class="bottom-item__title">是否接通</view>
<view class="bottom-item__value">{{ detail.is_coherent ? '是' : '否' }}</view>
</view>
<view class="bottom-item">
<view class="bottom-item__title">是否服务</view>
<view class="bottom-item__value">{{ detail.is_serve ? '是' : '否' }}</view>
</view>
<view class="bottom-item">
<view class="bottom-item__title">服务规范</view>
<view class="bottom-item__value">{{ detail.is_standard ? '规范' : '不规范' }}</view>
</view>
<view class="bottom-item">
<view class="bottom-item__title">备注</view>
<view class="bottom-item__value">{{ detail.remark }}</view>
</view>
<view class="bottom-item">
<view class="bottom-item__title">回访地址</view>
<view class="bottom-item__value">
{{ `${(detail.lng || detail.lat) ? ('(' + detail.lng + ',' + detail.lat + ')') : ''}${detail.address}` }}
</view>
</view>
<view class="bottom-item">
<view class="bottom-item__title">回访图片</view>
<view class="bottom-item__value">
<u-image :width="300"
:height="300"
style="margin-bottom: 10rpx"
:border-radius="8"
v-for="img in detail.files"
:key="img.id"
:src="img.url"
@click="showimg(img.url)"></u-image>
</view>
</view>
</view>
</view>
</view>
<u-button class="operate-item"
:custom-style="{ width: '90%', 'margin-left': '5%' }"
type="primary"
size="medium"
ripple
@click="pageTo('/package_sub/pages/addCallback/addCallback' + '?schedule_list_id=' + detail.schedule_list_id + '&id=' + detail.id)">编辑</u-button>
</view>
</view>
</template>
<script>
import { getSexByIdcard } from "@/common/util"
export default {
data() {
return {
id: "",
detail: {},
standards: [
{
label: "不规范",
value: 0
},
{
label: "规范",
value: 1
},
],
satisfies: [
{
label: "非常满意",
value: 1
},
{
label: "满意",
value: 2
},
{
label: "一般",
value: 3
},
{
label: "不满意",
value: 4
},
],
ways: [
{
label: "上门",
value: 1
},
{
label: "电话",
value: 2
}
],
};
},
methods: {
showimg(url) {
if (url)
this.$showimg({
imgs: [url],
current: 0
})
},
getSexByIdcard,
pageTo (url) {
uni.navigateTo({
url
})
},
async getDetail () {
const res = await this.$u.api.adminCallbackDetail(this.id)
console.log(res)
this.detail = res;
}
},
onLoad(option) {
this.id = option.id;
this.getDetail()
},
}
</script>
<style lang="scss">
.container {
padding-bottom: 20rpx;
}
.nursing-list {
margin-top: 20rpx;
.list-item {
width: 710rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
margin: 0 20rpx 26rpx 22rpx;
.top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 22rpx 0;
.time {
height: 40rpx;
font-size: 40rpx;
font-weight: 500;
color: #36596A;
line-height: 40rpx;
padding-left: 20rpx;
}
.status {
display: flex;
align-items: center;
.status-icon {
margin-right: 10rpx;
}
.status-text {
width: 84rpx;
height: 40rpx;
font-size: 28rpx;
font-weight: 500;
color: #36596A;
line-height: 40rpx;
margin-right: 20rpx;
}
}
}
.line {
width: 670rpx;
height: 2rpx;
border: 2rpx solid #EEEFF5;
margin: 0 auto;
}
.center {
display: flex;
justify-content: space-between;
padding-top: 24rpx;
.avatar {
padding-top: 4rpx;
padding-left: 20rpx;
}
.user-info {
flex: 1;
padding-left: 24rpx;
.name {
width: 270rpx;
height: 48rpx;
font-size: 32rpx;
font-weight: 500;
color: #333333;
}
.tel {
height: 40rpx;
font-size: 28rpx;
font-weight: 500;
color: #36596A;
line-height: 40rpx;
display: flex;
margin-top: 18rpx;
.text {
margin-left: 10rpx;
}
}
.address {
font-size: 28rpx;
font-weight: 500;
color: #36596A;
line-height: 40rpx;
display: flex;
margin-top: 14rpx;
.text {
margin-left: 10rpx;
}
}
}
.sex {
width: 40rpx;
height: 40rpx;
background: #FDECEC;
opacity: 0.5;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20rpx;
.sex-text {
width: 28rpx;
height: 34rpx;
font-size: 28rpx;
font-weight: 500;
color: #36596A;
line-height: 34rpx;
}
}
}
.bottom {
margin-top: 16rpx;
padding: 10rpx 60rpx 26rpx;
&-item {
display: flex;
justify-content: space-between;
line-height: 2;
padding-left: 30rpx;
position: relative;
&__title {
flex-shrink: 0;
flex-basis: 40%;
}
&__value {
word-break: break-all;
}
&::before {
content: "";
width: 12rpx;
height: 12rpx;
border-radius: 100%;
background: #3877f6;
position: absolute;
top: calc(28rpx - 6rpx);
left: 0;
}
}
}
}
}
</style>