342 lines
7.1 KiB
Vue
342 lines
7.1 KiB
Vue
<template>
|
||
<view class="app">
|
||
<view class="top">
|
||
<view class="title">
|
||
<image src="../../static/fuwu.png" mode=""></image>
|
||
<view class="text" v-if="itemlist.nurseItemName">
|
||
{{itemlist.nurseItemName}}
|
||
</view>
|
||
<view class="righttext">
|
||
<span v-if="itemlist.orderCommissionAmount&&itemlist.orderCommissionAmount>=0">
|
||
￥{{itemlist.orderCommissionAmount}}
|
||
</span>
|
||
<span v-else>
|
||
￥ 0
|
||
</span>
|
||
</view>
|
||
</view>
|
||
<view class="content">
|
||
<view class="time">
|
||
时间：
|
||
<span v-if="itemlist.serviceDate">{{itemlist.serviceDate}}</span>
|
||
<span style='padding-left: 10rpx;'
|
||
v-if="itemlist.serviceStartTime">{{itemlist.serviceStartTime}}</span>
|
||
</view>
|
||
<view class="address">
|
||
地点：
|
||
<span v-if="itemlist.serviceAddress">{{itemlist.serviceAddress}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="top">
|
||
<view class="title">
|
||
<image src="../../static/user.png" mode=""></image>
|
||
<view class="text">
|
||
用户信息
|
||
</view>
|
||
</view>
|
||
<view class="content" style="margin-top: 20rpx;">
|
||
<view class="item">
|
||
姓名：
|
||
<span v-if="itemlist.patientName">{{itemlist.patientName}}</span>
|
||
</view>
|
||
<view class="item">
|
||
年龄：
|
||
<span v-if="itemlist.age>=0">{{itemlist.age}}</span>
|
||
</view>
|
||
<view class="item">
|
||
电话：
|
||
<span v-if="itemlist.phone">{{itemlist.phone}}</span>
|
||
</view>
|
||
<view class="item address" @tap='goMap'>
|
||
<view class="text" style="line-height: 60rpx;">
|
||
住址：
|
||
<span v-if="itemlist.serviceAddress">{{itemlist.serviceAddress}}</span>
|
||
</view>
|
||
<view class="daohang">
|
||
<image src="../../static/daohang.png" mode=""></image>
|
||
<span class='p'>导航</span>
|
||
</view>
|
||
</view>
|
||
<view class="item">
|
||
是否失能：{{itemlist.disablingCondition=="NOT_DISABLED"?'未失能':''}}
|
||
{{itemlist.disablingCondition=="DISABLED"?'已失能':''}}
|
||
</view>
|
||
<view class="item" v-if="itemlist.disablingCondition=='DISABLED'">
|
||
失能情况：
|
||
<span v-if="itemlist.disablingReason">{{itemlist.disablingReason}}</span>
|
||
</view>
|
||
<view class="item">
|
||
身体健康状况：
|
||
<span v-if="itemlist.diseaseName">{{itemlist.diseaseName}}</span>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pictures top">
|
||
<view class="title">
|
||
<image src="../../static/ziliao.png" mode=""></image>
|
||
<view class="text">
|
||
相关资料
|
||
</view>
|
||
</view>
|
||
<view class="picture">
|
||
<view class="attendantImg">
|
||
护理员到岗照片
|
||
</view>
|
||
<view class="uppicture">
|
||
<image :src="baseurl + itemlist.onDutyPictureUrl" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="picture">
|
||
<view class="attendantImg">
|
||
服务结束照片
|
||
</view>
|
||
<view class="uppicture">
|
||
<image :src="baseurl + itemlist.serviceEndPictureUrl" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view class="picture" style="height: 730rpx;">
|
||
<view class="attendantImg" style="border-bottom: 1rpx solid #BAB7B8;">
|
||
用户签名
|
||
</view>
|
||
<view class="uppicture">
|
||
<image :src="baseurl + itemlist.userSignaturePictureUrl" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
taskDetails
|
||
} from '@/api/taskDetails/taskDetails.js'
|
||
import baseurl from '@/api/baseurl.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
itemlist: null, //信息list
|
||
baseurl: null,
|
||
tude: { //经纬度
|
||
latitude: '',
|
||
longitude: '',
|
||
},
|
||
}
|
||
},
|
||
methods: {
|
||
//获取经纬度
|
||
goMap() {
|
||
let that = this
|
||
uni.request({
|
||
url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=',
|
||
method: 'GET',
|
||
data: {
|
||
key: 'TXGBZ-VGEWW-LJHRR-3CDLI-N57YO-YQBHJ', //高德地图key
|
||
address: this.itemlist.serviceAddress // 详细地址
|
||
},
|
||
success: function(res) {
|
||
that.tude.latitude = res.data.result.location.lat
|
||
that.tude.longitude = res.data.result.location.lng
|
||
that.getlocations();
|
||
},
|
||
fail(err) {}
|
||
})
|
||
},
|
||
//跳转导航
|
||
getlocations() {
|
||
let that = this
|
||
uni.openLocation({
|
||
latitude: Number(that.tude.latitude),
|
||
longitude: Number(that.tude.longitude),
|
||
})
|
||
},
|
||
},
|
||
onLoad(options) {
|
||
this.baseurl = baseurl
|
||
taskDetails(options.orderNo).then(res => {
|
||
this.itemlist = res.data
|
||
})
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.app {
|
||
font-size: 36rpx;
|
||
padding: 0 0 100rpx;
|
||
|
||
.top {
|
||
padding-bottom: 40rpx;
|
||
background-color: #fff;
|
||
width: 96%;
|
||
margin: 15rpx auto 0;
|
||
color: #333333;
|
||
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||
border-radius: 5rpx;
|
||
|
||
.title {
|
||
border-bottom: 1rpx solid #E6E6E6;
|
||
display: flex;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.righttext {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 34rpx;
|
||
color: #EA706A;
|
||
}
|
||
|
||
.text {
|
||
font-size: 34rpx;
|
||
line-height: 100rpx;
|
||
padding-left: 18rpx;
|
||
}
|
||
|
||
image {
|
||
margin: 50rpx 0 0 35rpx;
|
||
transform: translateY(-50%);
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
margin-left: 50rpx;
|
||
font-size: 30rpx;
|
||
|
||
.item {
|
||
line-height: 60rpx;
|
||
}
|
||
|
||
.time {
|
||
line-height: 90rpx;
|
||
}
|
||
|
||
.address {
|
||
position: relative;
|
||
line-height: 45rpx;
|
||
|
||
.text {
|
||
width: 80%;
|
||
}
|
||
|
||
.daohang {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
right: 10rpx;
|
||
display: inline-block;
|
||
width: 100rpx;
|
||
}
|
||
|
||
.p {
|
||
padding-left: 30rpx;
|
||
font-size: 24rpx;
|
||
color: #EA706A;
|
||
}
|
||
|
||
image {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0rpx;
|
||
transform: translateY(-40%);
|
||
width: 25rpx;
|
||
height: 25rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pictures {
|
||
width: 96%;
|
||
margin: 15rpx auto;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
||
border-radius: 5rpx;
|
||
|
||
.picture {
|
||
width: 100%;
|
||
height: 630rpx;
|
||
|
||
.attendantImg {
|
||
color: #000000;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
margin-left: 30rpx;
|
||
|
||
span {
|
||
color: #BAB7B8;
|
||
}
|
||
}
|
||
|
||
.uppicture {
|
||
border: 1rpx dashed #818181;
|
||
width: 90%;
|
||
height: 500rpx;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.choice {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
::v-deep .u-list-item[data-v-49deb6f2] {
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
span {
|
||
font-size: 35rpx;
|
||
color: #969394;
|
||
}
|
||
}
|
||
|
||
.user {
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
color: #969394;
|
||
margin-left: 30rpx;
|
||
|
||
image {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.receive {
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
color: #969394;
|
||
margin-left: 30rpx;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.submit {
|
||
width: 496rpx;
|
||
height: 58rpx;
|
||
background: #4271B9;
|
||
border-radius: 5rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 58rpx;
|
||
background: #4C7BC9;
|
||
margin: 90rpx auto;
|
||
}
|
||
}
|
||
</style>
|