index.vue

<template>
  <div class="full-page">
    <div class="user-page">
      <div class="head">
        <div class="picture">
          <div class="avatar">
            <img :src="mainUserData.picture" />
          </div>
        </div>
        <div class="info">
          <div class="nickname">{{mainUserData.name}}</div>
        </div>
        <div class="more">
          <span class="more-btn" @click="goToMember">
            <i class="glyphicon glyphicon-home"></i> 家庭福利
          </span>
        </div>
      </div>
      <div class="user-body">
        <div class="tab-container">
          <mt-navbar v-model="active">
              <mt-tab-item v-for="(item, index) in FamilyData" :id="index" :key="index" @click.native="getAllVoucherByUserIdFn(item.userId)">
                {{item.userId === userId ? '我的福利' : item.name + '的福利'}}
              </mt-tab-item>
          </mt-navbar>
        </div>
        <div class="tab-content">
          <h4 v-if="!cardData || cardData.length <= 0" class="tips text-center">--- 暂无数据 ---</h4>
          <div class="line-list" v-if="cardData && cardData.length > 0" v-for="(item, index) in cardData" :key="index">
            <div class="label"><span>{{item.ruleName}}</span></div>
            <div class="mark">
              <span class="mark-circle">
                <span class="circle circle-default"></span>
              </span>
              <span class="line-vertical"></span>
            </div>
            <div class="item" @click="goToDetail(item.voucherId, item.makeId, item.voucherType, item.state)">
              <CardItem :data="item"></CardItem>
              <span class="status">
                <img src='../../assets/images/icon-failed.png' v-if="item.state==4" class="full-width"/>
                <img src='../../assets/images/icon-completed.png' v-if="item.state==2" class="full-width"/>
                <img src='../../assets/images/icon-end.png' v-if="item.state==3" class="full-width"/>
                <img src='../../assets/images/icon-waiting.png' v-if="item.state==0" class="full-width"/>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { getStore } from '@/util/store'
import { getAllVoucherByUserId, getUserInfoByUserId } from '@/api/apply/apply'
import { userRealStateById } from '@/api/basic/basic'
import CardItem from '@/components/cardItem'
import _iconMan from '@/assets/images/man.png'
import _iconWoman from '@/assets/images/woman.png'
export default {
  name: 'user',
  data () {
    return {
      userId: parseInt(this.$route.query.userId),
      active: 0,
      mainUserData: {
        name: '',
        sex: 1,
        picture: ''
      }, // 户主信息
      FamilyData: null, // 家庭成员数据
      cardData: null // 用户所有健康券数据
    }
  },
  created () {
    this.getFamilyByUserIdFn(this.userId)
  },
  mounted: function () {
  },
  computed: {
  },
  components: {
    CardItem
  },
  methods: {
    getFamilyByUserIdFn (id) { // 根据用户id获取该用户家庭成员信息
      let that = this
      getUserInfoByUserId(id).then(res => {
        if (res.code === 0) {
          that.FamilyData = res.data
          that.FamilyData.forEach(element => {
            if (element.masterMark === 1) {
              that.mainUserData.name = element.name
              that.mainUserData.sex = element.sex
              that.mainUserData.picture = element.sex === 1 ? _iconMan : element.sex === 2 ? _iconWoman : _iconMan
              that.getAllVoucherByUserIdFn(element.userId)
              return true
            }
          })
        }
      }).catch((error) => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    getAllVoucherByUserIdFn (id) { // 根据用户id获取该用户下所有健康券
      this.$Indicator.open()
      getAllVoucherByUserId(id).then(res => {
        this.$Indicator.close()
        if (res.code === 0) {
          this.cardData = res.data
        }
      }).catch((error) => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    goToMember () { // 跳转至家庭成员页
      this.$Indicator.open()
      userRealStateById(this.userId).then(res => {
        this.$Indicator.close()
        if (res.code === 0 && res.data) { // 已实名跳转至成员列表页、否则跳转至实名页
          this.$router.push({
            path: '/member/list',
            query: {
              userId: this.userId
            }
          })
        } else {
          this.$MessageBox.confirm('您还未进行实名认证，请先实名').then(action => {
            this.$router.push({ // 跳转至实名注册页
              path: '/member/addMain'
            })
          })
        }
      }).catch((error) => {
        this.$toast({
          message: error.message,
          position: 'center',
          duration: 3000
        })
      })
    },
    goToDetail (voucherId, makeId, voucherType, state) {
      if (state === 0) {
        this.$Toast({
          message: '该券还未发放，暂不可查看',
          position: 'center',
          duration: 3 * 1000
        })
        return
      }
      if (state === 3) {
        this.$Toast({
          message: '该券已过期，无法查看',
          position: 'center',
          duration: 3 * 1000
        })
        return
      }
      this.$router.push({
        path: '/voucherDetail',
        query: {
          voucherId: voucherId,
          makeId: makeId,
          voucherType: voucherType
        }
      })
    }
  }
}
</script>

<style scoped>
  .full-page {
    background-color: #ffffff;
  }
  .user-page .head{
    display:table;
    width:100%;
    color:#fff;
    background-color:#43d1be;
  }
  .user-page .head .picture{
    display:table-cell;
    vertical-align:middle;
    width:6em;
    padding: 1.4em 0 1.4em 1em;
  }
  .user-page .head .picture .avatar {
    border-radius: 50%;
    width: 4.2em;
    height: 4.2em;
  }
  .user-page .head .picture .avatar img {
    width: 100%;
  }
  .user-page .head .info {
    display:table-cell;
    vertical-align:middle;
    font-size: 1.1em;
  }
  .user-page .head .more {
    display:table-cell;
    vertical-align:middle;
    width:6.1em;
    text-align:right;
    padding-right: 1em;
  }
  .user-page .head .more > .more-btn {
    display:inline-block;
    width:6.1em;
    border-radius:10px;
    background-color:rgba(0, 0, 0, 0.2);
    padding:0.4em 0;
    text-align:center;
    border:1px solid rgba(255, 255, 255, 0.5);
    font-size: 1em;
  }

  .user-page .user-body > .tab-content .line-list {
    margin-bottom: 0.4em;
  }

  .tab-container {
    overflow-x: auto;
    width: 100%;
    padding: 15px 0;
  }
  .tab-container .mint-navbar {
    white-space: nowrap;
  }
  .tab-container .mint-navbar .mint-tab-item {
    background-color: #ffffff;
    margin-bottom: 0;
    border-radius: 15px;
    /* border: 1px solid #ccc; */
    box-shadow: 1px 1px 5px #cccccc;
    padding: 0 0.5em;
    margin: 0 0.5em;
    color: #80848f;
    max-width: 7em;
    height: 2em;
    font-size: 1em;
    flex:none;
  }

  .tab-container .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 0;
    color: #fff;
    background-color: #ffa353;
    margin-bottom: 0;
    border-radius: 15px;
    box-shadow: 1px 1px 5px #ffa353;
  }

  .user-page .user-body > .tab-content {
    padding: 0 0.8em;
  }

  .user-page .user-body > .tab-content > .tips {
    font-size: 1.1em;
    padding: 1em 0;
  }

  .line-list > .item {
    position: relative;
  }
  .line-list > .item > .status{
    position:absolute;
    display:inline-block;
    right: 0;
    bottom: 1.2em;
    width: 5em;
  }
  .line-list > .item > .status > img {
    width: 100%;
  }

  .line-list .card-item > .card-item-content > .card-item-table > .price .label {
    font-size: 2em;
  }
  .line-list .card-item > .card-item-content > .card-item-table > .info .title {
    margin-bottom: 5px;
  }
</style>