h5-shangjinyaojiang/pages/me/index.vue

<template>
  <view class="content">
    <view class="bkg">
      <u-image mode="heightFix" width="100vw" height="27.55vh" :src="require('@/static/bkg.png')"></u-image>
    </view>

    <view class="title">
      个人中心
    </view>

    <view class="info">
      <view class="info-img">
        <u-image :height="188" shape="circle" width="100%" :src="userInfo.headimgurl || require('@/static/icon-none.png')"></u-image>
      </view>

      <view class="info-detail">
        <view class="info-detail__name">
          {{  userInfo.name ? userInfo.name : (userInfo.mobile ? `${userInfo.mobile.slice(0,3)}****${userInfo.mobile.slice(-4)}` : '') }}
        </view>
        <view class="info-detail__phone">
          <view class="icon">
            <u-icon mode="widthFix" :width="28" :height="24" name="/static/crown.png"></u-icon>
          </view>
          <view class="text">{{ userInfo.mobile ? `${userInfo.mobile.slice(0,3)}****${userInfo.mobile.slice(-4)}` : '' }}</view>
        </view>
      </view>
    </view>

    <view class="label">
      <view class="label-item">
        <view class="label-item__num">{{ userInfo.total_draw || 0 }}</view>
        <view class="label-item__text">抽奖次数</view>
      </view>
      <view class="label-item">
        <view class="label-item__num">{{ userInfo.total_draw_win || 0 }}</view>
        <view class="label-item__text">中奖次数</view>
      </view>
    </view>

    <view class="record">
      <view class="record-title">
        <u-icon :width="46" :height="48" name="/static/list-ok.png"></u-icon>

        <view class="record-title__text">中奖记录</view>
      </view>

      <view class="record-list">
        <view class="record-list__item" v-for="i in draws">
          <view class="left">
            <view class="left__title">{{ i.draw_prize ? i.draw_prize.name : '' }}</view>
            <view class="left__date">{{ i.draw_prize ? $moment(i.created_at).format('YYYY-MM-DD') : '' }}</view>
          </view>
          <view class="right">
            <u-button v-if="i.draw_prize.name !== '谢谢参与'" :ripple="true" shape="circle" :hair-line="false" :custom-style="btnStyle(i.is_send)">{{ btnText(i.is_send) }}</u-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      draws: [],

    }
  },
  methods: {

    async getInfo () {
      const res = await this.$u.api.getPrize()
      this.userInfo = res.user
      this.draws = res.prize
    }
  },
  computed: {
    btnStyle() {
      return function (is_send) {
        switch (is_send) {
          case 1:
            return {
              background: '#FB5F4C',
              color: '#fff',
              fontSize: '28rpx',
              width: '166rpx',
              height: '56rpx'
            };
          case 0:
            return {
              background: '#FFD553',
              color: '#fff',
              fontSize: '28rpx',
              width: '166rpx',
              height: '56rpx'
            }
        }
      }
    },
    btnText() {
      return function (is_send) {
        switch (is_send) {
          case 1:
            return "已到账";
          case 0:
            return "待领取";
        }
      }
    }
  },
  onShow() {
    this.getInfo()
  }
}
</script>

<style scoped lang="scss">

.bkg {

  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  &::before {
    content: '';
    background: rgb(252, 246, 243);

    z-index: -2;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
.title {
  text-align: center;
  line-height: 38rpx;
  font-size: 40rpx;
  font-weight: 400;
  color: #FFFFFF;
  background: transparent;

  padding-top: 4.14vh;
}

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

  padding: 3.16vh 0 0 56rpx;

  &-img {
    width: 188rpx;
    height: 188rpx;

  }

  &-detail {

    margin-left: 36rpx;

    &__name {
      line-height: 44rpx;
      font-size: 46rpx;
      font-weight: 400;
      color: #FFFFFF;
    }
    &__phone {
      border-radius: 30rpx;
      background: rgba(0,0,0,0.2);
      display: flex;
      align-items: flex-end;

      margin-top: 1.22vh;
      padding: 8rpx 20rpx 10rpx 16rpx;

      & .icon {
        height: 24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      & .text {
        line-height: 20rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #FFFFFF;

        padding-left: 12rpx;
      }
    }
  }
}

.label {
  background: #FFFFFF;
  border-radius: 6rpx;
  height: 150rpx;
  display: flex;

  margin: 4.14vh 30rpx 0 30rpx;

  &-item {
    flex: 1;
    text-align: center;
    position: relative;

    &:first-child::after {
      content: '';
      width: 2rpx;
      background: #000000;
      opacity: 0.1;

      position: absolute;
      right: -1rpx;
      top: 32rpx;
      bottom: 32rpx;
    }
    &__num {
      line-height: 36rpx;
      font-size: 46rpx;
      font-weight: 400;
      color: #464646;

      padding-top: 40rpx;
    }
    &__text {
      height: 26rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #B8B8B8;

      padding-top: 18rpx;
      padding-bottom: 30rpx;
    }
  }
}

.record {
  background: #FFFFFF;
  border-radius: 6rpx;

  margin: 1.4vh 30rpx 0;

  &-title {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #EDF1F7;

    padding: 20rpx 0 24rpx 36rpx;

    &__text {
      font-size: 26rpx;
      font-weight: 400;
      color: #464646;

      margin-left: 20rpx;
    }
  }

  &-list {


    &__item {
      display: flex;
      justify-content: space-between;

      padding: 28rpx 0rpx 36rpx 4rpx;
      margin: 0 30rpx 0 30rpx;

      & .left {

        &__title {
          font-size: 36rpx;
          font-weight: 400;
          color: #333333;
        }
        &__date {
          font-size: 26rpx;
          font-weight: 400;
          color: #B8B8B8;
        }
      }
      & .right {
        display: flex;
        align-items: flex-end;
      }

      & + view {
        border-top: 1rpx solid #EDF1F7;
      }
    }
  }
}
</style>