1

wwl

5 天以前 a6cdbcfe28fcc40ebb4919f57d60fb20122e8e57

 pages/index.vue

@@ -1,436 +1,421 @@
<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>
  <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 {
      /* 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() {
import { getBannerList, isStartYy } from "@/api/system/banner";

            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
         },
      }
   }
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;
   }
.jiankangbox {
  margin-bottom: 32rpx;
}

   .jiankang {
      margin-bottom: 6rpx;
      background: linear-gradient(90deg, #FFFFFF 0%, #FCFFFE 100%);
      border-radius: 12rpx 12rpx 12rpx 12rpx;
   }
.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-item__content__text {
  padding-top: 8rpx !important;
}

   ::v-deep .u-collapse-content {
::v-deep .u-collapse-content {
  font-size: 26rpx !important;
  color: #565860 !important;
}

      font-size: 26rpx !important;
      color: #565860 !important;
   }
::v-deep .u-line {
  border: none !important;
}

   ::v-deep .u-line {
      border: none !important;
   }
::v-deep .u-cell__body {
  padding: 37rpx 31rpx 36rpx 43rpx !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-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-cell__title-text {
::v-deep .u-icon__icon {
  font-size: 32rpx !important;
}

      font-size: 28rpx;
      color: #373E58;
      line-height: 39rpx;
   }
.container {
  position: relative;
  min-height: 100vh;
  padding: 44rpx 24rpx 20rpx;
}

   ::v-deep .u-icon__icon {
      font-size: 32rpx !important;
   }
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
}

   .container {
      position: relative;
      min-height: 100vh;
      padding: 44rpx 24rpx 20rpx;
   }
.swiper-box {
  margin-bottom: 56rpx;
}

   .bg-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
      left: 50%;
      transform: translateX(-50%);
      object-fit: cover;
   }
.swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 310rpx;
}

   .swiper-box {
      margin-bottom: 56rpx;
   }
.title {
  font-weight: bold;
  font-size: 32rpx;
  color: #303339;
  line-height: 45rpx;
  margin-left: 24rpx;
  margin-bottom: 41rpx;
}

   .swiper-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 310rpx;
   }
.zhichi {
  font-weight: 300;
  font-size: 24rpx;
  color: #B4B4B4;
  line-height: 34rpx;
  text-align: center;
}

   .title {
      font-weight: bold;
      font-size: 32rpx;
      color: #303339;
      line-height: 45rpx;
      margin-left: 24rpx;
      margin-bottom: 41rpx;
   }
.gongnengbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 64rpx;

   .zhichi {
      font-weight: 300;
      font-size: 24rpx;
      color: #B4B4B4;
      line-height: 34rpx;
      text-align: center;
  .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;
    }

   .gongnengbox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 64rpx;
    .text {
      padding: 6rpx 5rpx;
      text-align: center;
    }
  }

      .item {
         width: 164rpx;
         height: 199rpx;
         padding: 24rpx 40rpx 0;
  .item-4 {
    .name-4 {
      color: #F5981F;
    }

         .name {
    .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;
    }
  }

            // 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;
         }
  .item-1 {
    .name-1 {
      color: #1482EF;
    }

         .text {
            padding: 6rpx 5rpx;
            text-align: center;
         }
      }
    .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-4 {
         .name-4 {
  .item-2 {
    .name-2 {
      color: #00AB80;
    }

            color: #F5981F;
         }
    .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;
    }
  }

         .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-3 {
    .name-3 {
      color: #00BCE4;
    }

      .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;
         }
      }

   }
    .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>