|
@@ -1,33 +1,52 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <view class="banner-box">
|
|
|
- <u-swiper :list="swiperList" @change="change" @click="toLinkPage" radius="0" height="340rpx"></u-swiper>
|
|
|
- </view>
|
|
|
- <view class="hospital-box">
|
|
|
- <view class="hospital-list">
|
|
|
- <view class="hospital-item" v-for="item,index in hospitalList" :key="index">
|
|
|
- <image :src="item.logoUrl" mode="aspectFill" />
|
|
|
- <view class="hospital-info">
|
|
|
- <view class="info-top">
|
|
|
- <view class="hospital-name">{{item.name || '-'}}</view>
|
|
|
- <view class="hospital-distance">{{item.relativeDistance || 0}}{{item.distanceUnit}}</view>
|
|
|
- </view>
|
|
|
- <view class="info-bottom">
|
|
|
- <view class="info-bottom-l">
|
|
|
- <span class="hospital-address">
|
|
|
- <u-icon name="map-fill" color="#999999" size="14"></u-icon>
|
|
|
- <span class="address">{{item.address || '-'}}</span>
|
|
|
- </span>
|
|
|
- <!-- <view class="hospital-area">所在区:{{item.areaName || '-'}}</view> -->
|
|
|
+ <template v-if="swiperList.length == 0">
|
|
|
+ <u-skeleton rows="1" class="skeleton-full" loading :rowsHeight="170" :title="false"></u-skeleton>
|
|
|
+ <view style="margin: 30rpx 0">
|
|
|
+ <u-skeleton rows="2" title loading avatar avatarSize="120" avatarShape="square" :rowsHeight="28"
|
|
|
+ :titleHeight="32"></u-skeleton>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view class="banner-box">
|
|
|
+ <u--image v-if="swiperList.length == 1" :src="swiperList[0]" mode="aspectFill" :fade="true"
|
|
|
+ duration="450" :lazy-load="true" width="100%" height="340rpx"></u--image>
|
|
|
+ <u-swiper v-else :list="swiperList" @change="change" @click="toLinkPage" :autoplay="false" radius="0"
|
|
|
+ height="340rpx"></u-swiper>
|
|
|
+ </view>
|
|
|
+ <view class="hospital-box">
|
|
|
+ <view class="hospital-list">
|
|
|
+ <view class="hospital-item" v-for="item,index in hospitalList" :key="index">
|
|
|
+ <u--image :src="item.logoUrl" mode="aspectFill" :fade="true" duration="450" :lazy-load="true"
|
|
|
+ width="262rpx" height="200rpx"></u--image>
|
|
|
+ <view class="hospital-info">
|
|
|
+ <view class="info-top">
|
|
|
+ <view class="hospital-name">{{item.name || '-'}}</view>
|
|
|
+ <view class="hospital-distance">{{item.relativeDistance || 0}}{{item.distanceUnit}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-bottom">
|
|
|
+ <view class="info-bottom-l">
|
|
|
+ <span class="hospital-address">
|
|
|
+ <u-icon name="map-fill" color="#999999" size="14"></u-icon>
|
|
|
+ <span class="address">{{item.address || '-'}}</span>
|
|
|
+ </span>
|
|
|
+ <!-- <view class="hospital-area">所在区:{{item.areaName || '-'}}</view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="hospital-btn" @click="toPlaceOrder(item)">去下单</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="btn-box">
|
|
|
- <view class="hospital-btn" @click="toPlaceOrder(item)">去下单</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="footer-box">
|
|
|
+ <image src="/static/icon-home.png" mode="aspectFill"></image>
|
|
|
+ <span class="tip">润康优护为你提供服务</span>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+
|
|
|
+ </template>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -57,22 +76,40 @@
|
|
|
total: 0,
|
|
|
};
|
|
|
},
|
|
|
- onLoad() {
|
|
|
+ async onLoad() {
|
|
|
//获取当前定位信息
|
|
|
- uni.getLocation({
|
|
|
- type: 'gcj02',
|
|
|
- success: (res) => {
|
|
|
- console.log('当前位置的经度:' + res.longitude);
|
|
|
- console.log('当前位置的纬度:' + res.latitude);
|
|
|
- this.coordinates = res.longitude + ',' + res.latitude;
|
|
|
- this.getList();
|
|
|
- }
|
|
|
- });
|
|
|
+ // uni.getLocation({
|
|
|
+ // type: 'gcj02',
|
|
|
+ // success: (res) => {
|
|
|
+ // console.log('当前位置的经度:' + res.longitude);
|
|
|
+ // console.log('当前位置的纬度:' + res.latitude);
|
|
|
+ // this.coordinates = res.longitude + ',' + res.latitude;
|
|
|
+ // this.getList();
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ this.realoadData();
|
|
|
},
|
|
|
onShow() {
|
|
|
- this.getBannerList();
|
|
|
+ wx.showShareMenu({
|
|
|
+ withShareTicket: true,
|
|
|
+ menus: ['shareAppMessage', 'shareTimeline']
|
|
|
+ });
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
+ async realoadData() {
|
|
|
+ let data = await this.$utils.getLocation();
|
|
|
+ if (data) {
|
|
|
+ console.log('当前位置的经度:' + data.long);
|
|
|
+ console.log('当前位置的纬度:' + data.lat);
|
|
|
+ this.coordinates = data.long + ',' + data.lat;
|
|
|
+ this.getList();
|
|
|
+ } else {
|
|
|
+ this.coordinates = undefined;
|
|
|
+ this.getList();
|
|
|
+ }
|
|
|
+ this.getBannerList();
|
|
|
+ },
|
|
|
getList() {
|
|
|
let that = this;
|
|
|
uni.showLoading({
|
|
@@ -80,19 +117,16 @@
|
|
|
mask: true,
|
|
|
});
|
|
|
let param = {
|
|
|
- // pageNo: that.pageNo,
|
|
|
- // pageSize: that.pageSize,
|
|
|
coordinates: that.coordinates
|
|
|
};
|
|
|
getHospitalList(param).then(res => {
|
|
|
let data = res.data;
|
|
|
if (data) {
|
|
|
- this.hospitalList.push(...data); //在列表后面新增新获取的数据
|
|
|
- // this.total = data.total; //获取数据总页数
|
|
|
- if (this.hospitalList.length >= this.total) {
|
|
|
- this.status = 'nomore';
|
|
|
- return;
|
|
|
- }
|
|
|
+ this.hospitalList = data; //在列表后面新增新获取的数据
|
|
|
+ // if (this.hospitalList.length >= this.total) {
|
|
|
+ // this.status = 'nomore';
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
} else {
|
|
|
that.status = 'nomore';
|
|
|
}
|
|
@@ -131,9 +165,9 @@
|
|
|
//下拉刷新
|
|
|
onPullDownRefresh() {
|
|
|
this.pageNo = 1;
|
|
|
+ this.swiperList = [];
|
|
|
this.hospitalList = [];
|
|
|
- this.getList();
|
|
|
- this.getBannerList();
|
|
|
+ this.realoadData();
|
|
|
uni.stopPullDownRefresh();
|
|
|
},
|
|
|
//上拉加载
|
|
@@ -145,6 +179,21 @@
|
|
|
this.currents = index;
|
|
|
},
|
|
|
|
|
|
+ /**
|
|
|
+ * 用户点击右上角分享
|
|
|
+ */
|
|
|
+ onShareAppMessage: function() {
|
|
|
+ const nickName = '您的好友'
|
|
|
+ const title = '润护通为您提供服务',
|
|
|
+ path = `/pages/tabBar/index`
|
|
|
+ // imageUrl = 'https://www.baidu.com.cn/img/20211108/activity.png'
|
|
|
+ return {
|
|
|
+ title,
|
|
|
+ path
|
|
|
+ // imageUrl
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
}
|
|
|
}
|
|
@@ -152,6 +201,9 @@
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.container {
|
|
|
+ background-color: #fff;
|
|
|
+ min-height: 100vh;
|
|
|
+
|
|
|
.banner-box {
|
|
|
width: 100%;
|
|
|
height: 340rpx;
|
|
@@ -160,35 +212,44 @@
|
|
|
width: 100%;
|
|
|
height: 340rpx !important;
|
|
|
}
|
|
|
+
|
|
|
+ .u--image {
|
|
|
+ width: 100%;
|
|
|
+ height: 340rpx !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.hospital-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: calc(100vh - 340rpx);
|
|
|
background-color: #fff;
|
|
|
|
|
|
.hospital-list {
|
|
|
- padding: 0 30rpx;
|
|
|
+ padding: 0 30rpx 40rpx;
|
|
|
+ flex: 1;
|
|
|
|
|
|
.hospital-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
padding: 30rpx 0;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- border-bottom: 1rpx solid #E8E8E8;
|
|
|
+ border-bottom: 1rpx solid #f0f0f0;
|
|
|
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
+ // &:last-child {
|
|
|
+ // border-bottom: none;
|
|
|
+ // }
|
|
|
|
|
|
- image {
|
|
|
- width: 262rpx;
|
|
|
- height: 200rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- margin-right: 17rpx;
|
|
|
- }
|
|
|
+ // image {
|
|
|
+ // width: 262rpx;
|
|
|
+ // height: 200rpx;
|
|
|
+ // border-radius: 20rpx;
|
|
|
+ // margin-right: 17rpx;
|
|
|
+ // }
|
|
|
|
|
|
.hospital-info {
|
|
|
flex: 1;
|
|
|
+ margin-left: 17rpx;
|
|
|
|
|
|
.info-top {
|
|
|
display: flex;
|
|
@@ -295,5 +356,41 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .footer-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ // position: fixed;
|
|
|
+ // bottom: 0;
|
|
|
+ // left: 0;
|
|
|
+ width: 100%;
|
|
|
+ padding: 32rpx 0;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 25rpx;
|
|
|
+ height: 25rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ margin-left: 7rpx;
|
|
|
+ color: #B3B3B3;
|
|
|
+ font-size: 26rpx;
|
|
|
+ line-height: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /* 骨架屏容器样式 */
|
|
|
+ .skeleton-full {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 关键:使用深度选择器修改骨架屏内部样式 */
|
|
|
+ ::v-deep .u-skeleton__wrapper__content__rows {
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
|
</style>
|