<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/Examiner/Examiner')">
|
<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')">
|
<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="name name-3">机构简介</div>
|
<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 {
|
data() {
|
return {
|
datas: [],
|
value: ['0'],
|
accordionVal: '1',
|
content: '折叠内容主体，可自定义内容及样式，点击按钮修改内容使高度发生变化。',
|
extraIcon: {
|
color: '#4cd964',
|
size: '26',
|
type: 'image'
|
},
|
autoplay: true,
|
interval: 2000,
|
token: "",
|
indicatorDots: 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 = '折叠内容主体，这是一段比较长内容。通过点击按钮修改后内容后，使组件高度发生变化，在次点击按钮恢复之前的内容和高度。';
|
}
|
// #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'
|
});
|
} else {
|
uni.navigateTo({
|
url: '/pages/login'
|
});
|
}
|
},
|
goMyreport(canshu) {
|
uni.navigateTo({
|
url: `/pagesB/mine/xuanzeyuanqv/xuanzeyuanqv?canshu=${canshu}&id=3`
|
});
|
},
|
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}`
|
});
|
} else {
|
uni.navigateTo({
|
url: '/pages/login'
|
});
|
}
|
},
|
report(canshu) {
|
if (this.token) {
|
uni.navigateTo({
|
url: `/pagesB/mine/xuanzeyuanqv/xuanzeyuanqv?canshu=${canshu}`
|
});
|
} 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 {
|
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;
|
}
|
|
.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;
|
}
|
|
.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;
|
}
|
|
.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;
|
}
|
|
.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>
|
