luojigou_exhibition/src/pages/me/baby.vue

<template>
  <view class='baby'>
    <view v-if="baby">
      <view class="baby-info" @tap.stap="navTo('/pages/index/applyInfo?type=user')">
        <image :src="baby.headImg" mode="" />
        <view>
          <view class="name">{{ baby.babyName }}</view>
          <view class="babyBirthday">{{ babyBirthday }}</view>
        </view>
      </view>
    </view>
    <zd-empty v-else :src="'/static/img/common/empty_page.png'" desc="暂未添加宝贝"></zd-empty>
  </view>
</template>

<script>
import moment from '@/common/moment';
import { mapState } from 'vuex';
import zdEmpty from '@/components/zd-empty/index';

export default {
  data() {
    return {
      babyBirthday: '',
    }
  },

  computed: {
    ...mapState({
      baby: 'baby',
      onlineId: 'onlineId',
      offlineId: 'offlineId'
    })
  },
  components: {
    zdEmpty
  },
  onLoad(options) {
    // 来自微信小程序的跳转
    if (options && options.type === 'weapp') {
      // 获取报名信息
      this.$mStore.dispatch('getUserInfoOnline',{
        competitionChildId: this.onlineId
      })
        .then(async res => {
          const { baby } = res.data;
          const duration = moment.duration(moment().diff(baby.babyBirthday));
          this.babyBirthday = duration.years() + '年' + duration.months() + '月' + duration.days() + '天';
        }).catch(() => {
          console.log('catch');
        });
    }
    if (this.baby) {
      const duration = moment.duration(moment().diff(this.baby.babyBirthday));
      this.babyBirthday = duration.years() + '年' + duration.months() + '月' + duration.days() + '天';
    }
  },

  onShow() {},

  methods: {
    navTo(route) {
      this.$mRouter.push({route})
    }
  }

}
</script>

<style lang="scss">
.baby-info {
  width: 686upx;
  height: 166upx;
  background: #FFFFFF;
  border-radius: 20upx;
  border: 2upx solid #4CD84A;
  margin: 50upx auto 0;
  display: flex;
  align-items: center;
  image {
    width: 100upx;
    height: 100upx;
    border-radius: 50%;
    margin: 0 50upx 0 30upx;
  }
  .name {
    font-size: 32upx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #161616;
    line-height: 44upx;
  }
  .babyBirthday {
    font-size: 28upx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 40upx;
    margin-top: 4upx;
  }
}
</style>