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.

725 lines
15 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view>
<cpn-navbar title="护理详情" :isBack="true"></cpn-navbar>
<view>
<!-- 用户信息 -->
<view class="user-info" v-if="detail.customer">
<view class="top">
<view class="left">
<u-image :src="detail.customer.sex === '男' ? vuex_male_img : vuex_female_img" width="104"
height="104" shape="circle"></u-image>
</view>
<view class="center">
<view class="name">{{detail.customer.name}}</view>
<view class="infos">
<view class="age">{{ageComputed(detail.customer.birthday)}}
</view>
<view class="sex">{{detail.customer.sex}}</view>
<view class="organ">机构护理</view>
</view>
</view>
<view class="right">
<template v-if="detail.status === 0">
<view class="icon1"></view>
<view>待护理</view>
</template>
<template v-if="detail.status === 1">
<view class="icon3"></view>
<view>进行中</view>
</template>
<template v-if="detail.status === 2">
<view class="icon2"></view>
<view>已完成</view>
</template>
</view>
</view>
<view class="line"></view>
<view class="bottom">
<view class="client">
<u-icon name="/static/detail/people.png" width="26" height="26"></u-icon>
<view>委托人:{{detail.customer.contact_name}}</view>
</view>
<view class="address">
<u-icon name="map" width="28" height="28" color="#1479FF"></u-icon>
<view>{{ addressFormat(detail.customer.customer_address) }}</view>
</view>
<view class="phone">
<u-icon name="phone" width="28" height="28" color="#1479FF"></u-icon>
<view>{{detail.customer.phone}}</view>
</view>
</view>
<view class="re-location" @click="$u.throttle(refreshLoaction,1000)">
<view class="text">更新定位</view>
<u-image src="/static/detail/distance.png" height="34" width="34"></u-image>
</view>
</view>
<!-- 今日护理 -->
<view class="today-nursing" v-show="detail.status !== 0">
<view class="title">
今日护理
</view>
<view class="line"></view>
<view class="content">
<view class="content-item" v-for="(item,index) in skuList" :key='item.info.id'>
<u-checkbox :disabled="detail.status === 2" v-model="item.isSelect" shape="circle"
:name="item.form.name">
{{item.info.name}}
</u-checkbox>
<view class="input">
<u-input :disabled="detail.status === 2" v-model="item.form.time" :custom-style="inputStyle"
:placeholder="'需 '+item.info.time_lenth" placeholder-style="color:#A7AFBC;"
input-align="center" :clearable="false" type="number" height="40">
</u-input>
<view>分钟</view>
</view>
</view>
</view>
</view>
<!-- 打卡 -->
<view class="clock">
<view class="btn" v-if="detail.status === 1 && detail.logs_count < 3"
@click="$u.throttle(clockIn,1000)">
<view class="text1">过程打卡</view>
<view class="text2">{{detail.logs_count + 1}}</view>
</view>
<view class="btn" v-if="detail.status === 0 && flag" @click="$u.throttle(sign,1000)">
<view class="text1">签到</view>
<view class="text2">{{$u.timeFormat(time,'hh:MM:ss')}}</view>
</view>
<view class="btn" v-if="detail.status === 1" @click="$u.throttle(signOut,1000)">
<view class="text1">签退</view>
<view class="text2">{{$u.timeFormat(time,'hh:MM:ss')}}</view>
</view>
<view class="btn" v-if="detail.status === 0 && !flag" @click="$u.throttle(refreshLoaction,1000)">
<view class="text1">更新定位</view>
<view class="text2">{{$u.timeFormat(time,'hh:MM:ss')}}</view>
</view>
<view class="btn" v-if="detail.status === 2">
<view class="text1">护理已完成</view>
</view>
</view>
<!-- 打卡信息 -->
<view class="clock-info" v-if="location.lat && location.lng && location.time">
定位时间:{{$u.timeFormat(location.time,'hh:MM:ss')}} {{location.address}}
</view>
</view>
</view>
</template>
<script>
import {
ROOTPATH
} from '@/common/config.js'
import QQMapWX from '@/libs/qqmap-wx-jssdk.js'
export default {
data() {
return {
id: '',
flag: false, //未开始护理时,是否更新过定位(真为更新过定位)
qqmapsdk: null,
inputStyle: {
fontSize: "24rpx",
color: "#36596A",
width: "140rpx",
background: "#F9F9F9"
},
btnStyle: {
width: '100rpx',
height: '100rpx',
borderRadius: '100%',
background: 'blue'
},
location: {
lng: '',
lat: '',
time: '',
address: ''
},
form: {
schedule_list_id: '',
lat: '',
lng: '',
address: '',
type: '',
upload_list: [],
},
skuList: [],
detail: {},
time: new Date(),
timer: null,
}
},
methods: {
load() {
this.qqmapsdk = new QQMapWX({
key: 'D5EBZ-C3BWP-HZIDG-VO6BE-P2MN5-ESFZO'
});
},
async getDeatil(id) {
let res = await this.$u.api.nurseDetail({
id
})
this.detail = res
this.skuList = res.sku.map(item => {
return {
info: item.sku_info,
isSelect: item.time ? true : false,
form: {
id: item.id,
time: item.time || '',
sku_id: item.sku_id,
}
}
})
this.form.schedule_list_id = this.id
},
//获取当前定位信息
getLoaction() {
return new Promise((resolve, reject) => {
uni.getLocation().then(res => {
if (res[1]) {
this.location.lat = res[1]?.latitude
this.location.lng = res[1]?.longitude
this.location.time = this.time
this.form.lat = this.location.lat
this.form.lng = this.location.lng
this.qqmapsdk.reverseGeocoder({
location: {
latitude: this.location.lat,
longitude: this.location.lng
},
success: (res) => {
this.location.address = res.result.address
this.form.address = this.location.address
resolve(res)
},
fail: (err) => {
reject(err)
}
})
} else {
uni.showToast({
icon: 'none',
title: '操作频繁,请稍后再试'
})
reject(res)
}
})
})
},
//更新地址
refreshLoaction() {
this.getLoaction().then(res => {
uni.showToast({
icon: 'none',
title: '更新定位成功'
})
this.flag = true
})
},
//图片批量上传
async uploadImgs() {
let res = await uni.chooseImage({
sourceType: ['camera']
})
if (res[1]) {
let promiseAll = res[1].tempFilePaths.map(item => {
console.log(`${ROOTPATH}/api/nurse/upload-file`);
return new Promise((resolve, reject) => {
uni.uploadFile({
url: `${ROOTPATH}/api/nurse/upload-file`,
header: {
Authorization: `Bearer ${this.vuex_token}`
},
filePath: item,
name: 'file',
success: (res1) => {
resolve(res1)
},
fail: (err) => {
reject(err)
}
})
})
})
return Promise.all(promiseAll)
} else {
return Promise.reject(res[0].errMsg)
}
},
//打卡
clock(type) {
let title;
switch (type) {
case 1:
title = '签到成功'
break;
case 2:
title = `第${this.detail.logs_count+1}次打卡成功`
break;
case 3:
title = '签退成功'
break;
default:
title = '操作成功'
}
this.uploadImgs().then(res => {
this.form.upload_list = res.map(item => {
return {
upload_id: JSON.parse(item.data).id
}
})
this.form.type = type
console.log(this.form);
this.$u.api.processSave(this.form).then(res => {
uni.showToast({
icon: 'success',
title
})
this.getDeatil(this.id)
}).catch(err => {
uni.showToast({
title: '操作失败,请重试'
})
})
}).catch(err => {
uni.showToast({
icon: 'none',
title: '图片上传失败'
})
})
},
//保存服务项目
saveSku() {
return new Promise((resolve, reject) => {
let temp1 = this.skuList.filter(item => {
return item.isSelect
})
let temp2 = temp1.map(item => {
return item.form
})
this.$u.api.nurseSave({
id: this.id,
sku_time_list: temp2
}).then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
},
//签到
sign() {
this.clock(1)
},
//过程打卡
clockIn() {
//验证是否有选择服务项目并填写
let flag = false
for (let i of this.skuList) {
if (i.isSelect && i.form.time) {
flag = true
}
}
if (!flag) {
uni.showToast({
icon: 'none',
title: `请选择并填写服务项目与时间`
})
return
}
this.saveSku().then(res => {
this.clock(2)
}).catch(err => {
console.log(err);
uni.showToast({
icon: 'none',
title: '请重试'
})
})
},
//签退
signOut() {
if (this.detail.logs_count < 3) {
uni.showToast({
icon: 'none',
title: `请先完成3次打卡再签退。当前完成打卡次数${this.detail.logs_count}`
})
return
}
//验证是否有选择服务项目并填写
let flag = false
for (let i of this.skuList) {
if (i.isSelect && i.form.time) {
flag = true
}
}
if (!flag) {
uni.showToast({
icon: 'none',
title: `请选择并填写服务项目与时间`
})
return
}
//验证服务时间是否都已完成
let flag2 = 0
let tempArr = []
for (let i of this.skuList) {
if (i.isSelect && (i.form.time >= i.info.time_lenth)) {
flag2++
} else {
tempArr.push(i.info.name)
}
}
if (flag2 < this.skuList.length) {
uni.showToast({
icon: 'none',
title: `${tempArr.toString()}服务时间未满`
})
return
}
this.saveSku().then(() => {
this.clock(3)
}).catch(err => {
console.log(err);
uni.showToast({
icon: 'none',
title: '请重试'
})
})
}
},
computed: {
ageComputed() {
return function(birth) {
return new Date().getFullYear() - new Date(birth).getFullYear()
}
},
addressFormat() {
return function(addresses) {
return addresses.filter(item => {
item.default === 1
})[0]?.address || addresses[0]?.address || '无'
}
}
},
onLoad(option) {
this.getDeatil(option.id)
this.id = option.id
},
onShow() {
this.timer = setInterval(() => {
this.time = new Date()
}, 1000)
},
onHide() {
clearInterval(this.timer)
},
mounted() {
this.load()
//this.getLoaction()
}
}
</script>
<style scoped lang="scss">
.user-info {
width: 710rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
margin: 40rpx auto 0 auto;
position: relative;
.top {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-top: 34rpx;
padding-bottom: 30rpx;
.left {
padding-left: 20rpx;
}
.center {
flex: 1;
padding-left: 24rpx;
.name {
height: 48rpx;
font-size: 32rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #333333;
line-height: 24rpx;
}
.infos {
display: flex;
align-items: center;
padding-top: 20rpx;
.age {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #A7AFBC;
line-height: 34rpx;
}
.sex {
width: 40rpx;
height: 40rpx;
background: #FDECEC;
opacity: 0.5;
font-size: 28rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #36596A;
text-align: center;
line-height: 40rpx;
margin-left: 20rpx;
}
.organ {
width: 140rpx;
height: 40rpx;
background: #F9F9F9;
font-size: 28rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #36596A;
line-height: 40rpx;
text-align: center;
margin-left: 20rpx;
}
}
}
.right {
display: flex;
align-items: center;
padding-right: 20rpx;
}
}
.line {
width: 670rpx;
height: 2rpx;
border: 2rpx solid #EEEFF5;
margin: 30rpx auto 0 auto;
}
.bottom {
padding: 26rpx 0 34rpx 24rpx;
position: relative;
.bottom-item {
display: flex;
align-items: center;
font-size: 28rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #36596A;
&>view {
padding-left: 16rpx;
}
}
.client {
@extend .bottom-item;
}
.address {
@extend .bottom-item;
padding-top: 18rpx;
}
.phone {
@extend .bottom-item;
padding-top: 18rpx;
}
}
.re-location {
display: flex;
align-items: center;
position: absolute;
bottom: 36rpx;
right: 20rpx;
.text {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #A7AFBC;
line-height: 34rpx;
padding-right: 8rpx;
}
}
}
.today-nursing {
width: 710rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
margin: 20rpx auto 0 auto;
.title {
font-size: 32rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #333333;
padding: 24rpx 20rpx;
}
.line {
width: 670rpx;
height: 2rpx;
border: 2rpx solid #EEEFF5;
margin: 0 auto;
}
.content {
padding: 14rpx 20rpx 24rpx 20rpx;
.content-item {
height: 70rpx;
display: flex;
justify-content: space-between;
align-items: center;
.checkbox {}
.input {
display: flex;
align-items: center;
&>view {
height: 40rpx;
font-size: 28rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #36596A;
line-height: 40rpx;
padding-left: 20rpx;
}
}
}
}
}
.clock {
display: flex;
justify-content: space-evenly;
margin-top: 48rpx;
.btn {
width: 190rpx;
height: 190rpx;
background: #1479FF;
border-radius: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
&::before {
content: '';
height: 220rpx;
width: 220rpx;
border-radius: 100%;
background-color: rgba(20, 121, 255, 0.15);
position: absolute;
top: calc(50% - 110rpx);
left: calc(50% - 110rpx);
}
.text-class {
height: 46rpx;
font-size: 32rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #FFFFFF;
line-height: 46rpx;
}
.text1 {
@extend .text-class;
}
.text2 {
@extend .text-class;
}
}
}
.clock-info {
width: 650rpx;
font-size: 28rpx;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #36596A;
line-height: 40rpx;
margin: 46rpx auto;
}
::v-deep .u-checkbox__icon-wrap--disabled {
background: #1d5cba !important;
}
</style>