449 lines
8.4 KiB
Vue
449 lines
8.4 KiB
Vue
<template>
|
||
<view class="concent">
|
||
<view class="page-body" style="margin-top: -80rpx;">
|
||
<view class="nursetation" @tap='detailed()'>
|
||
<text class="what">什么是护理站？</text>
|
||
<u-icon class="icon" name="arrow-right"></u-icon>
|
||
<!-- <image src="../../static/jiantou.png" mode=""></image> -->
|
||
</view>
|
||
<view class="map">
|
||
<!-- <map style="width:100%; height:40vh;" scale="17" :latitude="latitude" :longitude="longitude"
|
||
:markers="markers"></map> -->
|
||
</view>
|
||
</view>
|
||
<view class="conNew">
|
||
<view class="addressContent">
|
||
<view class="lists" v-for="(item,index) in nearbylist" :key="index">
|
||
<text class="nurse">{{item.nurseStationName}}</text>
|
||
<text class="distance">距离您800米</text>
|
||
<view class="background">
|
||
|
||
<view class="picture">
|
||
<image src="/static/logo.png" mode=""></image>
|
||
</view>
|
||
|
||
<text class="qyttext">泉医通</text>
|
||
<text class="lianmeng">济卫护理联盟NO.1</text>
|
||
|
||
|
||
</view>
|
||
<view class="click" @tap='godetails()'>
|
||
点击了解
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="masks" style="" v-if="mask">
|
||
<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 {
|
||
nearbyList
|
||
} from '@/api/site/index.js';
|
||
import baseurl from '@/api/baseurl.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
nearbylist: [],
|
||
mask: true,
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
latitude: 36.661634,
|
||
longitude: 117.025323,
|
||
|
||
}
|
||
},
|
||
// 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() {
|
||
var that = this
|
||
this.requestinfo()
|
||
},
|
||
methods: {
|
||
|
||
requestinfo() {
|
||
if (this.nurseTypeCode != undefined) {
|
||
nearbyList()
|
||
.then(res => {
|
||
this.nearbylist = res.rows
|
||
console.log(this.nearbylist)
|
||
})
|
||
} else {
|
||
uni.request({
|
||
url: baseurl +
|
||
`/nurseApplet/nearbyNursingStation/nearbyList`, //仅为示例，并非真实接口地址。
|
||
success: (res) => {
|
||
console.log(res)
|
||
this.nearbylist = res.data.rows
|
||
console.log(this.nearbylist)
|
||
}
|
||
});
|
||
}
|
||
},
|
||
godetails() {
|
||
// console.log("111");
|
||
uni.navigateTo({
|
||
url: `/pages/nursestation/nursestation`
|
||
})
|
||
},
|
||
detailed() {
|
||
uni.navigateTo({
|
||
url: `/pages/detail/detail`
|
||
})
|
||
},
|
||
// nurse() {
|
||
// uni.navigateTo({
|
||
// url: `/pages/nursestation/nursestation`
|
||
// })
|
||
// },
|
||
cancel() {
|
||
this.mask = false
|
||
// uni.reLaunch({
|
||
// url: `/pages/site/site`
|
||
// })
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.concent {
|
||
width: 100%;
|
||
height: 1000px;
|
||
background-color: #F4F5F7;
|
||
// box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
.conNew{
|
||
width: 100%;
|
||
height: 1000000px;
|
||
background-color: #F4F5F7;
|
||
// box-sizing: border-box;
|
||
position: relative;
|
||
// box-sizing: border-box;
|
||
// padding: 24px;
|
||
}
|
||
|
||
.addressContent {
|
||
position: absolute;
|
||
top: -91px;
|
||
// margin: 0 auto;
|
||
width: 100%;
|
||
// height: 100%;
|
||
// background: #F4F5F7;
|
||
// box-sizing: border-box;
|
||
padding: 24px;
|
||
}
|
||
|
||
.map {
|
||
width: 750rpx;
|
||
height: 544rpx;
|
||
background-color: red;
|
||
}
|
||
|
||
.picture2 image {
|
||
// position: absolute;
|
||
display: block;
|
||
margin: 0 auto;
|
||
width: 86rpx;
|
||
height: 102rpx;
|
||
// margin-top: 20%;
|
||
// 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;
|
||
color: #ffffff;
|
||
width: 198rpx;
|
||
border-radius: 23rpx;
|
||
|
||
}
|
||
|
||
.btn2 {
|
||
height: 62rpx;
|
||
line-height: 62rpx;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
// display: inline-block;
|
||
// position: absolute;
|
||
// bottom: 0;
|
||
position: absolute;
|
||
margin-top: -12%;
|
||
margin-left: 58%;
|
||
width: 198rpx;
|
||
background-color: #4486e8;
|
||
border-radius: 23rpx;
|
||
}
|
||
|
||
.lists {
|
||
// bottom: 5%;
|
||
// display: block;
|
||
// position: absolute;
|
||
// top: -191px;
|
||
// margin: 0 auto;
|
||
background-color: #ffffff;
|
||
// width: 698.8rpx;
|
||
width: 100%;
|
||
height: 227.8rpx;
|
||
margin-bottom: 3%;
|
||
border-radius: 20rpx;
|
||
z-index: 99999;
|
||
}
|
||
|
||
.background {
|
||
position: absolute;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
background-color: #4C7BC9;
|
||
margin-top: 4%;
|
||
margin-left: 10%;
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.background image {
|
||
|
||
width: 99rpx;
|
||
height: 99rpx;
|
||
// margin: 0 auto;
|
||
text-align: center;
|
||
margin-top: 5%;
|
||
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: 14rpx;
|
||
// font-family: Adobe Heiti Std;
|
||
// font-weight: normal;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.click {
|
||
// position: absolute;
|
||
color: #ffffff;
|
||
float: right;
|
||
width: 167.3rpx;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
// height: 58.5rpx;
|
||
// line-height: 58.5rpx;
|
||
// margin: 0 auto;
|
||
text-align: center;
|
||
background-color: #4C7BC9;
|
||
margin-top: 20%;
|
||
margin-right: 5%;
|
||
border-radius: 17px;
|
||
// margin-top: 6%;
|
||
// margin-left: 40%;
|
||
// border-radius: 10rpx;
|
||
}
|
||
|
||
.wenzi {
|
||
color: #ffffff;
|
||
text-align: center;
|
||
}
|
||
|
||
.nurse {
|
||
position: absolute;
|
||
float: right;
|
||
margin-top: 5%;
|
||
font-size: 30rpx;
|
||
margin-left: 40%;
|
||
}
|
||
|
||
.icon {
|
||
height: 60rpx;
|
||
width: 80%;
|
||
line-height: 60rpx;
|
||
position: absolute;
|
||
// float: right;
|
||
margin-left: 85%;
|
||
margin-top: -9%;
|
||
}
|
||
|
||
.distance {
|
||
position: absolute;
|
||
float: right;
|
||
margin-top: 12%;
|
||
font-size: 14rpx;
|
||
margin-left: 40%;
|
||
font-family: Adobe Heiti Std;
|
||
font-weight: normal;
|
||
color: #666666;
|
||
|
||
|
||
}
|
||
|
||
.nursestation image {
|
||
position: relative;
|
||
width: 16rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.nursetation {
|
||
position: relative;
|
||
// display: block;
|
||
// margin:0 auto;
|
||
top: 50px;
|
||
left: 0px;
|
||
float: left;
|
||
// background-color: white;
|
||
border: 1px solid #f0f0f0;
|
||
width: 80%;
|
||
height: 60rpx;
|
||
margin: 10rpx 0 10rpx 50%;
|
||
transform: translateX(-50%);
|
||
border-radius: 20rpx;
|
||
background-color: red;
|
||
z-index: 100;
|
||
|
||
}
|
||
|
||
.what {
|
||
display: block;
|
||
// margin: 0 auto;
|
||
position: absolute;
|
||
height: 50rpx;
|
||
top: 5%;
|
||
left: 12%;
|
||
// background-color: #4486e8;
|
||
position: relative;
|
||
height: 60rpx;
|
||
width: 80%;
|
||
line-height: 60rpx;
|
||
margin-left: 5%;
|
||
|
||
|
||
|
||
}
|
||
</style>
|