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.
492 lines
10 KiB
492 lines
10 KiB
<template>
|
|
<view class="container">
|
|
<view class="homeBg">
|
|
<view class="selectHospital" @click="showHospital=true" :style="{top: statusBarHeight+'px'}">
|
|
<image style="width: 33rpx;height: 30rpx;" src="../../static/resource/icon/location.png" />
|
|
<view class="selectHospitalText">{{currentProject.name}}</view>
|
|
<image style="width: 21rpx;height: 13rpx;" src="../../static/resource/icon/icon_orange_arrow.png">
|
|
</view>
|
|
<swiper class="homeBgSwiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
|
|
:interval="interval" :duration="duration">
|
|
<swiper-item>
|
|
<image class="homeBgSwiperImg" src="../../static/resource/imgs/home_bg_1.png"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<image class="rightB" src="../../static/resource/imgs/extend.png"></image>
|
|
</view>
|
|
<view class="boxItem">
|
|
<view class="boxItembox">
|
|
<view class="boxItemboxItem" @click="tofind">
|
|
<view>
|
|
<text class="htitle">找住院护工</text>
|
|
<text>平台保证</text>
|
|
</view>
|
|
<view>
|
|
<image src="../../static/resource/icon/icon_hospital.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="boxItemboxItem" @click="toShowNone">
|
|
|
|
<view>
|
|
<text class="htitle">找居家护工</text>
|
|
<text>平台保证</text>
|
|
</view>
|
|
<view>
|
|
<image style="width: 85rpx;" src="../../static/resource/icon/icon_home_big.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="boxItemtext">
|
|
平台已服务<text>{{orderTotalCount}}</text>单
|
|
</view>
|
|
</view>
|
|
<view class="news">
|
|
<view class="newsHeader">
|
|
<image style="width: 126rpx;
|
|
height: 31rpx;" src="../../static/resource/imgs/zhishititle.png"></image>
|
|
</view>
|
|
<view class="newsContent">
|
|
<view @click="toDetail(item.id)" class="newsItem" v-for="(item,index) of news" :key="index">
|
|
<view class="newsImg">
|
|
<image style="width: 219rpx;height: 152rpx;width: 219rpx;
|
|
height: 152rpx;" :src="item.poster"></image>
|
|
</view>
|
|
<view class="newsTitle">
|
|
<text>{{item.title}}</text>
|
|
<text style="text-align: right;font-size: 24rpx;color: #F7723F;">{{item.published_at}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view @click="toAdmin" class="btnadmin">院办登录</view>
|
|
<tabbar :current-page="0"></tabbar>
|
|
<u-popup mode="center" v-model="showHospital" width="90%" closeable="true" border-radius="14">
|
|
<view class="popbox">
|
|
<view class="popHeader">
|
|
附近的医院
|
|
</view>
|
|
<view class="popcontent">
|
|
<scroll-view scroll-y="true" style="height: 400rpx;">
|
|
<view class="hitem" :data-item="item" @click="toSelectHospital" v-for="(item,index) in listAddr"
|
|
:key="index">
|
|
|
|
<view class="hitemtitle">
|
|
<view class="hitemname">{{item.name}} </view>
|
|
<view>距离您<text style="color: #F7723F;">{{item.distance}}</text>公里</view>
|
|
</view>
|
|
<view class="hitemfoot">
|
|
<image style="width: 33rpx;height: 30rpx;"
|
|
src="../../static/resource/icon/location.png" />
|
|
|
|
<text class="hitemaddr">{{item.address}}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabbar from "../../components/tabbar/tabbar.vue";
|
|
import util from "../../utils/util.js";
|
|
import QQMapWX from "../../utils/qqmap-wx-jssdk.min.js";
|
|
export default {
|
|
|
|
components: {
|
|
tabbar
|
|
},
|
|
data() {
|
|
|
|
return {
|
|
showHospital: false,
|
|
indicatorDots: true,
|
|
autoplay: true,
|
|
interval: 2000,
|
|
duration: 500,
|
|
statusBarHeight: 0,
|
|
navBarBoxHeight: 0,
|
|
imgUrls: [{
|
|
url: '/static/resource/imgs/home_bg_1.png'
|
|
},
|
|
{
|
|
url: '/static/resource/imgs/home_bg_1.png'
|
|
}
|
|
],
|
|
currentSwiper: 0,
|
|
autoplay: false,
|
|
news: [],
|
|
topNav: 40,
|
|
isShowLocation: false,
|
|
listAddr: [],
|
|
latitude: '',
|
|
longitude: '',
|
|
currentProject: null,
|
|
host: '',
|
|
loading: true,
|
|
orderTotalCount: 0
|
|
}
|
|
},
|
|
onShareAppMessage() {},
|
|
onLoad(options) {
|
|
var that = this;
|
|
if (options.from == "selectHospital") {
|
|
that.showHospital = true;
|
|
}
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function(e) {
|
|
that.latitude = e.latitude;
|
|
that.longitude = e.longitude;
|
|
that.loadhospital();
|
|
}
|
|
});
|
|
//获取手机状态栏高度
|
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
|
this.navBarBoxHeight = 80 + this.statusBarHeight * 2
|
|
},
|
|
onShow() {
|
|
|
|
this.loadVideos();
|
|
this.loadOrderCount();
|
|
},
|
|
onReady() {},
|
|
onHide() {},
|
|
methods: {
|
|
toDetail(id) {
|
|
uni.navigateTo({
|
|
url: '/packages/packagesInfo/pages/detail/index?id=' + id,
|
|
});
|
|
},
|
|
tofind() {
|
|
uni.switchTab({
|
|
url: "/pages/find/index"
|
|
})
|
|
},
|
|
toAdmin() {
|
|
uni.navigateTo({
|
|
url: "/pages/index/admin"
|
|
})
|
|
},
|
|
getGeoCoder() {
|
|
var that = this;
|
|
const tMap = new QQMapWX({
|
|
key: 'RA6BZ-4YLLR-HMZW4-WFR5N-6H6XQ-R6FVL'
|
|
});
|
|
var a = that.listAddr;
|
|
var list = [];
|
|
for (var b of a) {
|
|
list.push({
|
|
latitude: parseFloat(b.latitude),
|
|
longitude: parseFloat(b.longitude)
|
|
})
|
|
|
|
}
|
|
var lat = that.latitude;
|
|
var lon = that.longitude;
|
|
tMap.calculateDistance({
|
|
from: {
|
|
latitude: lat,
|
|
longitude: lon
|
|
},
|
|
to: list,
|
|
success: function(t) {
|
|
t = t.result;
|
|
for (var e = 0; e < t.elements.length; e++) {
|
|
that.listAddr[e].distance = t.elements[e].distance / 1000;
|
|
var n = that.listAddr[e];
|
|
if (n.distance < that.currentProject.distance) {
|
|
that.currentProject = n;
|
|
getApp().globalData.selectedProject = that.currentProject;
|
|
}
|
|
}
|
|
|
|
},
|
|
fail: function(t) {
|
|
console.error(t);
|
|
},
|
|
complete: function(t) {
|
|
console.log(t);
|
|
}
|
|
});
|
|
|
|
|
|
},
|
|
|
|
toShowNone: function() {
|
|
util.alert('功能暂未开放');
|
|
},
|
|
|
|
loadhospital() {
|
|
var that = this;
|
|
util.request({
|
|
api: 'customer/get-projects',
|
|
utilSuccess: function(t) {
|
|
var o = getApp().globalData.selectedProject;
|
|
that.currentProject = t[0]
|
|
that.listAddr = t;
|
|
that.getGeoCoder();
|
|
},
|
|
utilFail: function(t) {
|
|
util.alert(t);
|
|
}
|
|
});
|
|
},
|
|
|
|
toSelectHospital: function(t) {
|
|
var e = t.currentTarget.dataset.item;
|
|
getApp().globalData.selectedProject = e;
|
|
this.showHospital = false;
|
|
this.currentProject = e;
|
|
},
|
|
|
|
loadVideos: function() {
|
|
var that = this;
|
|
util.request({
|
|
api: 'customer/get-training-videos',
|
|
utilSuccess: function(e) {
|
|
for (var m of e.data) {
|
|
m.poster = util.HOST + m.poster;
|
|
}
|
|
that.news = e.data
|
|
that.loading = false
|
|
},
|
|
utilFail: function(t) {
|
|
util.alert(t);
|
|
}
|
|
});
|
|
},
|
|
|
|
loadOrderCount: function() {
|
|
var that = this;
|
|
util.request({
|
|
api: 'customer/get-orders-count',
|
|
utilSuccess: function(e) {
|
|
that.orderTotalCount = e.orders_count
|
|
},
|
|
utilFail: function(t) {
|
|
util.alert(t);
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
background-color: rgb(231, 245, 244) !important;
|
|
padding-bottom: 200rpx;
|
|
}
|
|
|
|
view {
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.homeBg {
|
|
position: relative;
|
|
z-index: 2;
|
|
background: #fff;
|
|
border-radius: 0rpx 80rpx;
|
|
box-shadow: 2rpx 0rpx 15rpx 0rpx #1E70B7;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
|
|
.rightB {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
z-index: 999;
|
|
bottom: -80rpx;
|
|
}
|
|
|
|
.homeBgSwiper {
|
|
|
|
width: 750rpx;
|
|
height: 700rpx;
|
|
}
|
|
|
|
.homeBgSwiperImg {
|
|
width: 750rpx;
|
|
height: 700rpx;
|
|
}
|
|
|
|
.boxItem {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 750rpx;
|
|
height: 466rpx;
|
|
margin-top: -76rpx;
|
|
background: linear-gradient(135deg, #ECD182 10%, #0EE2BA 80%);
|
|
border-radius: 0rpx 0rpx 80rpx 0rpx;
|
|
}
|
|
|
|
.btnadmin {
|
|
background: #0EE2BA;
|
|
color: #fff;
|
|
width: 690rpx;
|
|
margin: 20rpx auto;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
padding: 20rpx;
|
|
|
|
}
|
|
|
|
.boxItembox {
|
|
padding: 0rpx 51rpx;
|
|
display: flex;
|
|
padding-top: 161rpx;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.boxItemboxItem {
|
|
width: 312rpx;
|
|
height: 156rpx;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
border: 2rpx solid #FFFFFF;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 31rpx 28rpx;
|
|
}
|
|
|
|
.boxItemboxItem text {
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.boxItemboxItem .htitle {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.boxItemboxItem image {
|
|
|
|
width: 77rpx;
|
|
height: 77rpx;
|
|
}
|
|
|
|
.boxItemtext {
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
font-style: normal;
|
|
padding-top: 70rpx;
|
|
}
|
|
|
|
.boxItemtext text {
|
|
font-family: PingFangTC, PingFangTC;
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #F7723F;
|
|
line-height: 0rpx;
|
|
text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
|
|
/* 描边效果 */
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
|
|
.boxItemboxItem_on {
|
|
background: #fff;
|
|
}
|
|
|
|
.selectHospital {
|
|
width: 383rpx;
|
|
height: 61rpx;
|
|
background: rgba(0, 0, 0, 0.65);
|
|
border-radius: 31rpx 31rpx 31rpx 31rpx;
|
|
position: absolute;
|
|
top: 55px;
|
|
left: 30rpx;
|
|
z-index: 99;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 61rpx;
|
|
padding: 0px 20rpx;
|
|
}
|
|
|
|
.selectHospitalText {
|
|
width: 300rpx;
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
text-align: left;
|
|
margin: 0rpx 20rpx;
|
|
overflow: hidden; //超出的文本隐藏
|
|
text-overflow: ellipsis; //用省略号显示
|
|
white-space: nowrap; //不换行（文字不允许换行，单行文本）
|
|
}
|
|
|
|
.popbox {
|
|
padding: 0rpx 20rpx;
|
|
}
|
|
|
|
.popHeader {
|
|
padding: 30rpx 0rpx;
|
|
font-weight: 300;
|
|
font-size: 32rpx;
|
|
color: #303233;
|
|
}
|
|
|
|
.popcontent {
|
|
padding: 40rpx 20rpx;
|
|
}
|
|
|
|
.hitem {
|
|
width: 100%;
|
|
box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(103, 101, 101, 0.2);
|
|
border-radius: 20rpx;
|
|
background: #FFFFFF;
|
|
padding: 36rpx 20rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.hitemtitle {
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hitemfoot {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
|
|
}
|
|
|
|
.hitemfoot image {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.news {
|
|
padding: 33rpx 37rpx;
|
|
width: 690rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
margin: 50rpx auto;
|
|
}
|
|
|
|
.newsItem {
|
|
display: flex;
|
|
margin-top: 35rpx;
|
|
}
|
|
|
|
.newsTitle {
|
|
margin-left: 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 4rpx;
|
|
font-weight: 300;
|
|
font-size: 26rpx;
|
|
color: #303233;
|
|
line-height: 38rpx;
|
|
width: 100%;
|
|
}
|
|
</style> |