<template>
|
<view class="container">
|
<image class="bg-image" src="/static/images/index/bg.png" mode="scaleToFill"></image>
|
<!-- 轮播图 -->
|
<swiper class="swiper-box" circular :indicator-dots="indicatorDots" :current="swiperDotIndex"
|
:autoplay="autoplay" :interval="interval" indicator-active-color="#464F72">
|
<swiper-item v-for="(item, index) in datas" :key="index">
|
<view class="swiper-item" @click="clickBannerItem(item)">
|
<image :src="item" mode="aspectFill" :draggable="false" />
|
</view>
|
</swiper-item>
|
</swiper>
|
<div class="title">常用功能</div>
|
<div class="gongnengbox">
|
<div class="item item-4" style="position: relative;">
|
<image style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;"
|
src="/static/images/index/shouye4.png" mode="scaleToFill"></image>
|
<image
|
style="width: 53rpx; height: 64rpx; position: absolute; bottom: 0; left: 50%; transform: translate(-50%); z-index: -1;"
|
src="/static/images/index/yue.png" mode="scaleToFill"></image>
|
<div class="name name-4">健康预约</div>
|
<div class="text" @click="toReservation()">
|
<div class="text-4">去预约</div>
|
</div>
|
</div>
|
<div class="item item-1" style="position: relative;">
|
<image style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;"
|
src="/static/images/index/shouye1.png" mode="scaleToFill"></image>
|
<image
|
style="width: 89rpx; height: 72rpx; position: absolute; bottom: 0; left: 50%; transform: translate(-50%); z-index: -1;"
|
src="/static/images/index/zuo.png" mode="scaleToFill"></image>
|
<div class="name name-1">我的报告</div>
|
<div class="text" @click="goMyreport('/pagesA/ReportOverview/ReportOverview')">
|
<div class="text-1">去查看</div>
|
</div>
|
</div>
|
<div class="item item-2" @click="gorelatives('/pagesA/friendReport/friendReport')"
|
style="position: relative;">
|
<image style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;"
|
src="/static/images/index/shouye2.png" mode="scaleToFill"></image>
|
<image
|
style="width: 91rpx; height: 81rpx; position: absolute; bottom: 0; left: 53%; transform: translate(-50%); z-index: -1;"
|
src="/static/images/index/zhong.png" mode="scaleToFill"></image>
|
<div class="name name-2">亲友查询</div>
|
<div class="text">
|
<div class="text-2">去查看</div>
|
</div>
|
</div>
|
<div class="item item-3" style="position: relative;"
|
@click="showHospIntroduce('/pagesA/hospIntroduce/hospIntroduce')">
|
<div class="name name-3">机构简介</div>
|
<image style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;"
|
src="/static/images/index/shouye3.png" mode="scaleToFill"></image>
|
<image
|
style="width: 79.14rpx; height: 78.54rpx; position: absolute; bottom: 0; left: 50%; transform: translate(-50%); z-index: -1;"
|
src="/static/images/index/you.png" mode="scaleToFill"></image>
|
<div class="text">
|
<div class="text-3">去查看</div>
|
</div>
|
</div>
|
</div>
|
<div class="title">健康查体须知</div>
|
<div class="jiankangbox">
|
<div class="jiankang">
|
<u-collapse>
|
<u-collapse-item title="如何健康预约" icon="/static/images/index/检查记录.png">
|
<text class="u-collapse-content">在底部菜单栏中选择套餐，确认您选择的套餐，立即预约。或电话预约：拨打呼叫中心
|
09336410678转8097(工作时间：周一至周五，上午8:00-12:00，下午14:30-17:30)</text>
|
</u-collapse-item>
|
</u-collapse>
|
|
</div>
|
<div class="jiankang">
|
<u-collapse>
|
<u-collapse-item title="健康结果配送说明" icon="/static/images/index/检查记录.png">
|
<text class="u-collapse-content">在底部菜单栏中选择套餐，确认您选择的套餐，立即预约。或电话预约：拨打呼叫中心
|
09336410678转8097(工作时间：周一至周五，上午8:00-12:00，下午14:30-17:30)</text>
|
</u-collapse-item>
|
</u-collapse>
|
|
</div>
|
</div>
|
<div class="zhichi">@技术支持：路泰科技有限公司</div>
|
</view>
|
</template>
|
|
|
<script>
|
import {
|
getBannerList,
|
isStartYy
|
} from "@/api/system/banner";
|
export default {
|
/* onLoad: function() {
|
} */
|
components: {},
|
data() {
|
return {
|
datas: [],
|
value: ['0'],
|
accordionVal: '1',
|
content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
|
extraIcon: {
|
color: '#4cd964',
|
size: '26',
|
type: 'image'
|
},
|
autoplay: true,
|
interval: 2000,
|
token: "",
|
indicatorDots: true,
|
// current: true,
|
swiperDotIndex: 0,
|
}
|
},
|
//生命周期方法 —— 页面加载时
|
onLoad() {
|
this.token = this.$store.state.user.token
|
this.getList();
|
},
|
methods: {
|
/** 查询轮播图列表 */
|
getList() {
|
getBannerList(this.queryParams).then((response) => {
|
this.data = response.data;
|
this.data.forEach(item => {
|
let part = item.image.slice(23);
|
let parts = 'http://115.85.230.71:15002/' + part;
|
this.datas.push(parts)
|
})
|
});
|
},
|
add() {
|
if (this.content.length > 35) {
|
this.content = '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。'
|
} else {
|
this.content = '折叠内容主体，这是一段比较长内容。通过点击按钮修改后内容后，使组件高度发生变化，在次点击按钮恢复之前的内容和高度。'
|
}
|
// TODO 小程序中不支持自动更新 ，需要手动resize 更新组件高度
|
// #ifdef MP
|
this.$nextTick(() => {
|
this.$refs.collapse.resize()
|
})
|
// #endif
|
},
|
onClick(e) {
|
uni.showToast({
|
title: '列表被点击'
|
})
|
},
|
change(e) {
|
// console.log(e);
|
},
|
toReservation() {
|
|
if (this.token) {
|
uni.navigateTo({
|
url: '/pagesA/appointment/appointment'
|
})
|
// isStartYy().then((response) => {
|
// if (response.msg == "Y") {
|
// uni.navigateTo({
|
// url: '/pagesA/appointment/appointment'
|
// })
|
// } else {
|
// this.$modal.showToast('模块建设中~')
|
// }
|
// });
|
|
} else {
|
uni.navigateTo({
|
url: `/pages/login`
|
})
|
}
|
},
|
goMyreport(canshu) {
|
uni.navigateTo({
|
url: `/pagesB/mine/xuanzeyuanqv/xuanzeyuanqv?canshu=${canshu}`
|
})
|
},
|
gorelatives(canshu) {
|
uni.navigateTo({
|
url: `/pagesB/mine/xuanzeyuanqv/xuanzeyuanqv?canshu=${canshu}`
|
})
|
},
|
showHospIntroduce(canshu) {
|
uni.navigateTo({
|
url: `/pagesB/mine/xuanzeyuanqv/xuanzeyuanqv?canshu=${canshu}`
|
})
|
},
|
showFriendReport(canshu) {
|
if (this.token) {
|
uni.navigateTo({
|
url: `/pagesB/mine/xuanzeyuanqv/xuanzeyuanqv?canshu=${canshu}`
|
})
|
// uni.navigateTo({
|
// url: '/pagesA/friendReport/friendReport'
|
// })
|
} else {
|
uni.navigateTo({
|
url: `/pages/login`
|
})
|
}
|
|
},
|
report(canshu) {
|
if (this.token) {
|
uni.navigateTo({
|
url: `/pagesB/mine/xuanzeyuanqv/xuanzeyuanqv?canshu=${canshu}`
|
})
|
// uni.navigateTo({
|
// url: '/pagesA/ReportOverview/ReportOverview'
|
// })
|
} else {
|
uni.navigateTo({
|
url: `/pages/login`
|
})
|
}
|
|
},
|
clickBannerItem(item) {
|
console.info(item)
|
},
|
changeSwiper(e) {
|
this.current = e.detail.current
|
},
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.jiankangbox {
|
margin-bottom: 32rpx;
|
}
|
|
.jiankang {
|
margin-bottom: 6rpx;
|
background: linear-gradient(90deg, #FFFFFF 0%, #FCFFFE 100%);
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
}
|
|
::v-deep .u-collapse-item__content__text {
|
padding-top: 8rpx !important;
|
}
|
|
::v-deep .u-collapse-content {
|
|
font-size: 26rpx !important;
|
color: #565860 !important;
|
}
|
|
::v-deep .u-line {
|
border: none !important;
|
}
|
|
::v-deep .u-cell__body {
|
padding: 37rpx 31rpx 36rpx 43rpx !important;
|
}
|
|
::v-deep .u-icon__img {
|
width: 31rpx !important;
|
height: 36rpx !important;
|
margin-right: 17rpx !important;
|
}
|
|
::v-deep .u-cell__title-text {
|
|
font-size: 28rpx;
|
color: #373E58;
|
line-height: 39rpx;
|
}
|
|
::v-deep .u-icon__icon {
|
font-size: 32rpx !important;
|
}
|
|
.container {
|
position: relative;
|
min-height: 100vh;
|
padding: 44rpx 24rpx 20rpx;
|
}
|
|
.bg-image {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100vw;
|
height: 100vh;
|
z-index: -1;
|
left: 50%;
|
transform: translateX(-50%);
|
object-fit: cover;
|
}
|
|
.swiper-box {
|
margin-bottom: 56rpx;
|
}
|
|
.swiper-item {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
height: 310rpx;
|
}
|
|
.title {
|
font-weight: bold;
|
font-size: 32rpx;
|
color: #303339;
|
line-height: 45rpx;
|
margin-left: 24rpx;
|
margin-bottom: 41rpx;
|
}
|
|
.zhichi {
|
font-weight: 300;
|
font-size: 24rpx;
|
color: #B4B4B4;
|
line-height: 34rpx;
|
text-align: center;
|
|
}
|
|
.gongnengbox {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 64rpx;
|
|
.item {
|
width: 164rpx;
|
height: 199rpx;
|
padding: 24rpx 40rpx 0;
|
|
.name {
|
|
// font-weight: bold;
|
// font-size: 23rpx;
|
margin-bottom: 20rpx;
|
width: 100rpx;
|
height: 23rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: bold;
|
font-size: 24rpx;
|
line-height: 32rpx;
|
text-align: center;
|
// font-style: normal;
|
// text-transform: none;
|
}
|
|
.text {
|
padding: 6rpx 5rpx;
|
text-align: center;
|
}
|
}
|
|
.item-4 {
|
.name-4 {
|
|
color: #F5981F;
|
}
|
|
.text-4 {
|
background: linear-gradient(89deg, #F5981F 0%, #FFD092 100%);
|
border-radius: 19rpx 19rpx 19rpx 19rpx;
|
width: 84rpx;
|
height: 27rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 20rpx;
|
color: #F2F7FF;
|
line-height: 27rpx;
|
}
|
}
|
|
.item-1 {
|
.name-1 {
|
|
color: #1482EF;
|
/* First name in red */
|
}
|
|
.text-1 {
|
background: linear-gradient(89deg, #419FFD 0%, #8EC7FF 100%);
|
border-radius: 19rpx 19rpx 19rpx 19rpx;
|
width: 84rpx;
|
height: 27rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 20rpx;
|
color: #F2F7FF;
|
line-height: 27rpx;
|
}
|
}
|
|
.item-2 {
|
.name-2 {
|
color: #00AB80;
|
/* Second name in blue */
|
}
|
|
.text-2 {
|
|
background: linear-gradient(89deg, #07DBA5 0%, #3BE8BC 100%);
|
border-radius: 19rpx 19rpx 19rpx 19rpx;
|
width: 84rpx;
|
height: 27rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 20rpx;
|
color: #F2F7FF;
|
line-height: 27rpx;
|
}
|
}
|
|
.item-3 {
|
.name-3 {
|
color: #00BCE4;
|
/* Default color for third name, or customize as needed */
|
}
|
|
.text-3 {
|
background: linear-gradient(89deg, #2ABFF1 0%, #75DCFF 100%);
|
border-radius: 19rpx 19rpx 19rpx 19rpx;
|
width: 84rpx;
|
height: 27rpx;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-weight: 400;
|
font-size: 20rpx;
|
color: #F2F7FF;
|
line-height: 27rpx;
|
}
|
}
|
|
}
|
</style>
|
