sishitongtang-worker/package_sub/pages/index/index.vue

<template>
  <view style="padding-bottom: 10rpx;">
    <!-- 用户信息 -->
    <view class="user-info" :style="{'margin-top':marginTop + 'px'}" @click="toSetting">
      <view class="head-img">
        <u-avatar :src="vuex_user.upload.url || (vuex_user.sex === '男' ? vuex_male_img : vuex_female_img)"
                  size="104"></u-avatar>
      </view>

      <view class="name">
        您好,{{ vuex_user.name }}
      </view>
    </view>

    <!-- 轮播图 -->
    <view class="swiper">
      <swiper :indicator-dots="false" @change="swiperChange">
        <swiper-item v-for="(item,index) in 3" :key="index">
          <view class="bkg">
            <u-image src="/static/home/swiper-pic.png" width="710" height="324"></u-image>
          </view>
          <view class="swiper-content">
            <view class="swiper-title">
              四世同堂服务管理
            </view>
            <view class="swiper-text">
              欢迎使用管理小程序
            </view>
            <view class="cir1"></view>
            <view class="cir2"></view>
            <view class="cir3"></view>
          </view>
          <view class="dots">
            <view v-for="(dot,index1) in 3" :key="index1" class="dot"
                  :class="{activeDot:swiperIndex === index1}"></view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <view class="grid">
      <u-grid :col="3" @click="pageTo">
        <u-grid-item v-for="(item, index) in grids" :index="item.url" :key="index">
          <u-icon :name="item.icon || 'list'" :size="46"></u-icon>
          <view class="grid-text">{{ item.label }}</view>
        </u-grid-item>
      </u-grid>
    </view>

    <privacyPopup ref="privacyPopup"></privacyPopup>
  </view>

</template>

<script>
import moment from "@/libs/moment.min.js"
import privacyPopup from "@/components/privacy-popup/privacy-popup.vue";
export default {
  components: {
    privacyPopup
  },
  data() {
    return {
      marginTop: 96,
      swiperIndex: 0,
      grids: [
        {
          label: "护理列表",
          url: "/package_sub/pages/schedule/schedule",
          icon: ""
        },
        {
          label: "客户列表",
          url: "/package_sub/pages/customer/customer",
          icon: "account-fill"
        },
        {
          label: "回访列表",
          url: "/package_sub/pages/callback/callback",
          icon: ""
        },
        {
          label: "督查列表",
          url: "/package_sub/pages/check/check",
          icon: ""
        },
        {
          label: "长护险回访",
          url: "/package_sub/pages/longInsurance/longInsurance"
        }
      ]
    }
  },
  methods: {
    pageTo (url) {
      if (url) {
        uni.navigateTo({
          url
        })
      }
    },
    swiperChange(e) {
      this.swiperIndex = e.detail.current
    },
    toSetting() {
      this.$u.throttle(() => {
        uni.navigateTo({
          url: "/pages/setting/setting"
        })
      })
    },

  },
  computed: {
    dateFormat() {
      return function(date, fmt = "YYYY-MM-DD") {
        if (date) {
          return moment(date).format(fmt)
        }
      }
    }
  },
  async onShow() {

  },
  created() {
    const res = uni.getSystemInfoSync()
    this.marginTop = res.statusBarHeight + 2
  }
}
</script>

<style scoped lang="scss">
// 继承类
.cir {
  background: #FFFFFF;
  border-radius: 100%;
}

.user-info {
  display: flex;
  align-items: center;

  //margin-top: 96rpx;

  .head-img {

    padding: 0 24rpx;
  }

  .name {
    width: 392rpx;
    height: 34rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #36596A;
    line-height: 34rpx;
  }
}

.search {
  width: 710rpx;
  height: 90rpx;
  background: #FFFFFF;
  border: 2rpx solid #FAFBFC;
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: 24rpx 24rpx 0 24rpx;

  .input-content {

    margin-left: 16rpx;
  }

  .icon {


    margin-right: 16rpx;
  }
}

.swiper {
  margin: 30rpx 20rpx 0 20rpx;

  swiper {
    width: 710rpx;
    height: 324rpx;
  }

  swiper-item {
    width: 710rpx;
    height: 324rpx;
    border-radius: 16rpx;

    position: relative;
  }

  .dots {
    display: flex;
    transform: translateX(-50%);

    position: absolute;
    left: 50%;
    bottom: 20rpx;

    .dot {
      width: 20rpx;
      height: 10rpx;
      border-radius: 10rpx;
      background-color: rgba(255, 255, 255, 0.4);

      margin: 0 6rpx;
    }

    .activeDot {
      width: 36rpx;
      background-color: #fff;
    }
  }

  .bkg {
    width: 710rpx;
    height: 324rpx;
    position: absolute;
    top: 0;
    left: 0;
  }

  .swiper-content {
    width: 710rpx;
    height: 324rpx;
    position: relative;

    .cir1 {
      @extend .cir;

      width: 230rpx;
      height: 230rpx;
      opacity: 0.06;

      position: absolute;
      top: 184rpx;
      right: 652rpx;
    }

    .cir2 {
      @extend .cir;
      width: 170rpx;
      height: 170rpx;
      opacity: 0.1;

      position: absolute;
      top: 278rpx;
      right: 552rpx;
    }

    .cir3 {
      @extend .cir;
      width: 244rpx;
      height: 244rpx;
      opacity: 0.06;

      position: absolute;
      bottom: 260rpx;
      right: 150rpx;
    }

    .swiper-title {
      width: 302rpx;
      height: 50rpx;
      font-size: 36rpx;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 50rpx;

      position: absolute;
      top: 94rpx;
      left: 44rpx;
    }

    .swiper-text {
      width: 500rpx;
      height: 40rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 40rpx;

      position: absolute;
      top: 164rpx;
      left: 44rpx;
    }
  }
}

.grid {
  width: 710rpx;
  margin: 40rpx auto 0;
  background: #FFFFFF;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
  border-radius: 10rpx;
}
</style>