455 lines
9.6 KiB
Vue
455 lines
9.6 KiB
Vue
<template>
|
||
<view class="concent">
|
||
|
||
<view class="nursstation">
|
||
<text class="what">什么是护理站？</text>
|
||
<u-icon class="icon" name="arrow-right"></u-icon>
|
||
</view>
|
||
<view class="page-body" style="margin-top: -80rpx;">
|
||
<view class="page-section page-section-gap">
|
||
<map style="width:100%; height:40vh;" scale="17" :latitude="latitude" :longitude="longitude"
|
||
:markers="markers"></map>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="lists">
|
||
<text class="nurse">济南护万家护理有限公司</text>
|
||
<text class="distance">距离您800米</text>
|
||
<view class="background">
|
||
<view class="picture">
|
||
<image src="/static/logo.png" mode=""></image>
|
||
<text class="qyttext">泉医通</text>
|
||
<text class="lianmeng">济卫护理联盟NO.1</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="click">点击了解</view>
|
||
|
||
<!-- <view class="items"> -->
|
||
<!-- <view class="item" v-for="(item,index) in nearbylist" :key="index" @tap='godetails(item)'>
|
||
<image :src="baseurl+item.stationPictureUrl" mode=""></image>
|
||
<view class="texts">
|
||
<view class="text">
|
||
{{item.nurseStationName}}
|
||
</view>
|
||
<view class="" v-if="item.nurseStationLabelList!=null">
|
||
<view class="pepole" v-if="item.nurseStationLabelList.length!=0">
|
||
<text v-for="(uitem,uindex) in item.nurseStationLabelList" :key="uindex">
|
||
{{uitem.labelDescription}}{{' '}}
|
||
</text>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- <view class="address">
|
||
{{item.address}}
|
||
</view>
|
||
<view class="project">
|
||
{{item.nurseStationDescription}}
|
||
</view> -->
|
||
<!-- </view>
|
||
<image class="rightimg" src="../../static/jt.png" mode=""></image>
|
||
</view> -->
|
||
</view>
|
||
<view class="masks" style="" >
|
||
<view class="mask">
|
||
<view class="picture2">
|
||
<image src="../../static/locatinsmall.png"></image>
|
||
</view>
|
||
|
||
<view class="title">
|
||
请打开系统定位
|
||
</view>
|
||
|
||
<view class="btns">
|
||
<view class="btn1" @tap='cancel()'>取消</view>
|
||
<view class="btn2" @tap='getsite()'>去打开</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getPatientInfo
|
||
} from '@/api/details/index.js';
|
||
import {
|
||
list,
|
||
nearbyList
|
||
} from '@/api/site/index.js';
|
||
import baseurl from '@/api/baseurl.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
iptVal: '',
|
||
value: '',
|
||
type: 'text',
|
||
border: true,
|
||
nearbylist: [],
|
||
nurseTypeCode: '',
|
||
openid: '',
|
||
baseurl: '',
|
||
id: 0, // 使用 marker点击事件 需要填写id
|
||
title: 'map',
|
||
latitude: 36.661634,
|
||
longitude: 117.025323,
|
||
title: 'map',
|
||
markers: [],
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
mask: false,
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
this.pageNum++;
|
||
if (this.nurseTypeCode != undefined) {
|
||
nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseTypeCode, this.iptVal)
|
||
.then(res => {
|
||
if (res.total == this.nearbylist.length) {
|
||
|
||
} else {
|
||
res.rows.forEach(e => {
|
||
this.nearbylist.push(e)
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.request({
|
||
url: baseurl +
|
||
`/nurseApplet/nearbyNursingStation/nearbyList?pageSize=${this.pageSize}&pageNum=${this.pageNum}&homeLongitude=${this.longitude}&homeLatitude=${this.latitude}&nurseStationName=${this.iptVal}`, //仅为示例，并非真实接口地址。
|
||
success: (res) => {
|
||
if (res.data.total == this.nearbylist.length) {} else {
|
||
res.data.rows.forEach(e => {
|
||
this.nearbylist.push(e)
|
||
})
|
||
}
|
||
console.log(this.nearbylist)
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
|
||
watch: {
|
||
iptVal() {
|
||
this.requestinfo()
|
||
},
|
||
},
|
||
onShow() {},
|
||
onLoad(options) {
|
||
console.log(options)
|
||
console.log(baseurl)
|
||
this.baseurl = baseurl;
|
||
this.nurseTypeCode = options.nurseTypeCode
|
||
var that = this
|
||
uni.getStorage({
|
||
key: 'openid',
|
||
success(res) {
|
||
console.log(res)
|
||
that.openid = res.data
|
||
getPatientInfo(that.openid).then(res => {
|
||
// console.log(res)
|
||
if (res.code == 200) {
|
||
that.latitude = res.data.homeLatitude
|
||
that.longitude = res.data.homeLongitude
|
||
console.log(that.latitude, that.longitude)
|
||
if (!that.latitude) {
|
||
that.latitude = 36.661634
|
||
}
|
||
if (!that.longitude) {
|
||
that.longitude = 117.025323
|
||
}
|
||
that.markers.push({
|
||
id: 3,
|
||
latitude: res.data.homeLatitude,
|
||
longitude: res.data.homeLongitude,
|
||
width: 20,
|
||
height: 25,
|
||
iconPath: "../../static/location.png"
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
that.requestinfo()
|
||
},
|
||
methods: {
|
||
// getsite() {
|
||
// let data={};
|
||
// data.surl = '/pages/site/site'
|
||
// uni.navigateTo({
|
||
// url: `/pages/homePage/homePage`
|
||
// })
|
||
// },
|
||
// cancel() {
|
||
// this.mask = false
|
||
// uni.reLaunch({
|
||
// url: `/pages/site/site`
|
||
// })
|
||
// },
|
||
requestinfo() {
|
||
if (this.nurseTypeCode != undefined) {
|
||
nearbyList(this.pageSize, this.pageNum, this.longitude, this.latitude, this.nurseTypeCode, this.iptVal)
|
||
.then(res => {
|
||
this.nearbylist = res.rows
|
||
console.log(this.nearbylist)
|
||
})
|
||
} else {
|
||
uni.request({
|
||
url: baseurl +
|
||
`/nurseApplet/nearbyNursingStation/nearbyList?pageSize=${this.pageSize}&pageNum=${this.pageNum}&homeLongitude=${this.longitude}&homeLatitude=${this.latitude}&nurseStationName=${this.iptVal}`, //仅为示例，并非真实接口地址。
|
||
success: (res) => {
|
||
console.log(res)
|
||
this.nearbylist = res.data.rows
|
||
console.log(this.nearbylist)
|
||
}
|
||
});
|
||
}
|
||
},
|
||
godetails(item) {
|
||
uni.navigateTo({
|
||
url: `/pages/details/details?id=${item.nurseStationId}`
|
||
})
|
||
},
|
||
// listinfo() {
|
||
// list().then(res => {
|
||
// // console.log(res)
|
||
// })
|
||
// },
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.picture2{
|
||
// position: absolute;
|
||
display: block;
|
||
margin: 0 auto;
|
||
width: 70rpx;
|
||
height: 102rpx;
|
||
text-align: center;
|
||
}
|
||
.masks {
|
||
|
||
border-radius: 30px;
|
||
height: 100%;
|
||
width: 100%;
|
||
position: absolute;
|
||
opacity: 0.9;
|
||
top: 0;
|
||
z-index: 999;
|
||
}
|
||
.mask {
|
||
// margin-top: 50%;
|
||
position: relative;
|
||
width: 520rpx;
|
||
height: 348rpx;
|
||
background-color: #ffffff;
|
||
margin: 47% auto;
|
||
position: relative;
|
||
border-radius: 30rpx;
|
||
}
|
||
.title {
|
||
width: 254rpx;
|
||
height: 35rpx;
|
||
font-size: 37rpx;
|
||
// margin: 0 auto;
|
||
text-align: center;
|
||
margin-top: 10%;
|
||
margin-left: 30%;
|
||
font-family: Adobe Heiti Std;
|
||
font-weight: normal;
|
||
color: #000000;
|
||
// line-height: rpx;
|
||
// height: 100rpx;
|
||
// line-height: 100rpx;
|
||
// border-bottom: 1px solid #eeeeee;
|
||
// /* background-color: red; */
|
||
// font-size: 36rpx;
|
||
// margin: 0px auto;
|
||
// width: 100%;
|
||
// text-align: center;
|
||
// /* line-height: 80rpx; */
|
||
}
|
||
.text {
|
||
margin-top: 30rpx;
|
||
font-size: 30rpx;
|
||
width: 100%;
|
||
text-align: left;
|
||
/* padding-top: 40rpx; */
|
||
text-align: center;
|
||
|
||
}
|
||
.btn1 {
|
||
|
||
height: 62rpx;
|
||
line-height: 62rpx;
|
||
text-align: center;
|
||
// border-top: 1px solid #eeeeee;
|
||
// border-right: 1px solid #eeeeee;
|
||
// position: inherit;
|
||
margin-top: 10%;
|
||
margin-left: 10%;
|
||
background: #C5BFBF;
|
||
width: 198rpx;
|
||
border-radius: 23rpx;
|
||
|
||
}
|
||
.btn2 {
|
||
height: 62rpx;
|
||
line-height: 62rpx;
|
||
text-align: center;
|
||
// display: inline-block;
|
||
// position: absolute;
|
||
// bottom: 0;
|
||
position: absolute;
|
||
margin-top: -12%;
|
||
margin-left: 58%;
|
||
width: 198rpx;
|
||
background-color: #4486e8;
|
||
border-radius: 23rpx;
|
||
}
|
||
.lists{
|
||
position: relative;
|
||
margin: 0 auto;
|
||
background-color: #ffffff;
|
||
width: 698.8rpx;
|
||
height: 227.8rpx;
|
||
margin-top: -10%;
|
||
border-radius: 10rpx;
|
||
}
|
||
.background{
|
||
position: absolute;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
background-color: #4C7BC9;
|
||
margin-top: 4%;
|
||
margin-left: 10%;
|
||
border-radius: 30rpx;
|
||
}
|
||
image{
|
||
|
||
width: 86rpx;
|
||
height: 102rpx;
|
||
margin-top: 35%;
|
||
margin-left: 20%;
|
||
|
||
}
|
||
.qyttext{
|
||
// text-align: center;
|
||
// margin-top: 10%;
|
||
margin-left: 28%;
|
||
display: block;
|
||
|
||
// width: 30px;
|
||
// height: 10px;
|
||
font-size: 25rpx;
|
||
// font-family: Adobe Heiti Std;
|
||
// font-weight: normal;
|
||
color: #FFFFFF;
|
||
|
||
}
|
||
.lianmeng{
|
||
display: block;
|
||
margin-left: 5%;
|
||
font-size: 9px;
|
||
// font-family: Adobe Heiti Std;
|
||
// font-weight: normal;
|
||
color: #FFFFFF;
|
||
}
|
||
.click{
|
||
// position: absolute;
|
||
color: #ffffff;
|
||
float: right;
|
||
width: 167.3rpx;
|
||
height: 58.5rpx;
|
||
line-height: 58.5rpx;
|
||
// margin: 0 auto;
|
||
text-align: center;
|
||
background-color: #4C7BC9 ;
|
||
margin-top: 20%;
|
||
margin-right: 5%;
|
||
border-radius: 30rpx;
|
||
// margin-top: 6%;
|
||
// margin-left: 40%;
|
||
// border-radius: 10rpx;
|
||
}
|
||
.nurse{
|
||
position: absolute;
|
||
float: right;
|
||
margin-top: 5%;
|
||
font-size: 30rpx;
|
||
margin-left: 40%;
|
||
}
|
||
.icon{
|
||
height: 60rpx;
|
||
width: 80%;
|
||
line-height: 60rpx;
|
||
position: absolute;
|
||
|
||
margin-left: 55%;
|
||
// margin-top: 5%;
|
||
}
|
||
.distance{
|
||
position: absolute;
|
||
float: right;
|
||
margin-top: 12%;
|
||
font-size: 27rpx;
|
||
margin-left: 40%;
|
||
font-family: Adobe Heiti Std;
|
||
font-weight: normal;
|
||
color: #666666;
|
||
|
||
|
||
}
|
||
|
||
.nursstation {
|
||
position: fixed;
|
||
|
||
// margin:0 auto;
|
||
top: 0;
|
||
// background-color: white;
|
||
border: 1px solid #f0f0f0;
|
||
width: 80%;
|
||
height: 60rpx;
|
||
margin: 10rpx 0 10rpx 50%;
|
||
transform: translateX(-50%);
|
||
border-radius: 20rpx;
|
||
background-color: #ffffff;
|
||
z-index: 999;
|
||
|
||
|
||
// .input {
|
||
// margin: 0 auto;
|
||
// position: absolute;
|
||
// height: 50rpx;
|
||
// top: 5%;
|
||
// left: 12%;
|
||
// }
|
||
|
||
// .icon {
|
||
// background: url(@/static/sousuo.png) no-repeat;
|
||
// width: 40rpx;
|
||
// height: 40rpx;
|
||
// background-size: cover;
|
||
// position: absolute;
|
||
// top: 18%;
|
||
// left: 3%;
|
||
// }
|
||
|
||
}
|
||
.what {
|
||
height: 60rpx;
|
||
width: 80%;
|
||
line-height: 60rpx;
|
||
margin-left: 5%;
|
||
// text-align: left padding: 20%;
|
||
|
||
}
|
||
|
||
</style>
|