路泰科技体检小程序UI设计新版本
1
wwl
5 天以前 a6cdbcfe28fcc40ebb4919f57d60fb20122e8e57
pages/index.vue
@@ -2,8 +2,15 @@
   <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
      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" />
@@ -13,47 +20,65 @@
      <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: 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>
          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: 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>
          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" @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>
      <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>
          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>
      <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>
          src="/static/images/index/you.png"
          mode="scaleToFill"
        ></image>
        <div class="name name-3">机构简介</div>
            <div class="text">
               <div class="text-3">去查看</div>
            </div>
@@ -64,36 +89,32 @@
         <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>
            <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>
            <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";
import { getBannerList, isStartYy } from "@/api/system/banner";
   export default {
      /* onLoad: function() {
      } */
      components: {},
      data() {
         return {
            datas: [],
@@ -109,13 +130,11 @@
            interval: 2000,
            token: "",
            indicatorDots: true,
            // current: true,
            swiperDotIndex: 0,
         }
    };
      },
      //生命周期方法 —— 页面加载时
      onLoad() {
         this.token = this.$store.state.user.token
    this.token = this.$store.state.user.token;
         this.getList();
      },
      methods: {
@@ -126,107 +145,88 @@
               this.data.forEach(item => {
                  let part = item.image.slice(23);
                  let parts = 'http://115.85.230.71:15002/' + part;
                  this.datas.push(parts)
               })
          this.datas.push(parts);
        });
            });
         },
         add() {
            if (this.content.length > 35) {
               this.content = '折叠内容主体,可自定义内容及样式,点击按钮修改内容使高度发生变化。'
        this.content = '折叠内容主体,可自定义内容及样式,点击按钮修改内容使高度发生变化。';
            } else {
               this.content = '折叠内容主体,这是一段比较长内容。通过点击按钮修改后内容后,使组件高度发生变化,在次点击按钮恢复之前的内容和高度。'
        this.content = '折叠内容主体,这是一段比较长内容。通过点击按钮修改后内容后,使组件高度发生变化,在次点击按钮恢复之前的内容和高度。';
            }
            // TODO 小程序中不支持自动更新 ,需要手动resize 更新组件高度
            // #ifdef MP
            this.$nextTick(() => {
               this.$refs.collapse.resize()
            })
        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`
               })
          url: '/pages/login'
        });
            }
         },
         goMyreport(canshu) {
            uni.navigateTo({
               url: `/pagesB/mine/xuanzeyuanqv/xuanzeyuanqv?canshu=${canshu}`
            })
        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}`
               })
               // uni.navigateTo({
               //    url: '/pagesA/friendReport/friendReport'
               // })
        });
            } else {
               uni.navigateTo({
                  url: `/pages/login`
               })
          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`
               })
          url: '/pages/login'
        });
            }
         },
         clickBannerItem(item) {
            console.info(item)
      console.info(item);
         },
         changeSwiper(e) {
            this.current = e.detail.current
      this.current = e.detail.current;
         },
      }
   }
};
</script>
<style lang="scss" scoped>
   .jiankangbox {
      margin-bottom: 32rpx;
@@ -243,7 +243,6 @@
   }
   ::v-deep .u-collapse-content {
      font-size: 26rpx !important;
      color: #565860 !important;
   }
@@ -263,7 +262,6 @@
   }
   ::v-deep .u-cell__title-text {
      font-size: 28rpx;
      color: #373E58;
      line-height: 39rpx;
@@ -318,7 +316,6 @@
      color: #B4B4B4;
      line-height: 34rpx;
      text-align: center;
   }
   .gongnengbox {
@@ -333,9 +330,6 @@
         padding: 24rpx 40rpx 0;
         .name {
            // font-weight: bold;
            // font-size: 23rpx;
            margin-bottom: 20rpx;
            width: 100rpx;
            height: 23rpx;
@@ -344,8 +338,6 @@
            font-size: 24rpx;
            line-height: 32rpx;
            text-align: center;
            // font-style: normal;
            // text-transform: none;
         }
         .text {
@@ -356,7 +348,6 @@
      .item-4 {
         .name-4 {
            color: #F5981F;
         }
@@ -375,9 +366,7 @@
      .item-1 {
         .name-1 {
            color: #1482EF;
            /* First name in red */
         }
         .text-1 {
@@ -396,11 +385,9 @@
      .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;
@@ -416,7 +403,6 @@
      .item-3 {
         .name-3 {
            color: #00BCE4;
            /* Default color for third name, or customize as needed */
         }
         .text-3 {
@@ -431,6 +417,5 @@
            line-height: 27rpx;
         }
      }
   }
</style>