rebatedine-mini/src/pagesSub/commission/invite.vue

<!--
 * @Author: your name
 * @Date: 2021-03-18 11:16:06
 * @LastEditTime: 2021-03-29 15:02:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \rebatedine-mini\src\pagesSub\commission\invite.vue
-->
<template>
  <view class="main">
    <network-error />
    <view class="top">

      <feed class="top-feed"
            v-show="feedContent"
            :content="feedContent"></feed>

      <view class="container">
        <button class="button"
                v-if="!userInfo"
                @click="jumpToLogin">立即邀请</button>
        <button class="button"
                open-type="share"
                v-if="userInfo">立即邀请</button>
        <button class="button-disable">面对面扫码 敬请期待</button>
      </view>
    </view>
    <view class="middle">
      <view class="middle-top">
        <view class="middle-top-left">
          <view class="middle-top-left-top">
            <text class="number">{{(userInfo.total_amount/100).toFixed(1)}}</text>
            <text class="unit">元</text>
          </view>
          <text class="tips">累计收益</text>
        </view>
        <view class="middle-top-right">
          <view class="middle-top-right-top">
            <text class="number">{{userInfo.invite_count}}</text>
            <text class="unit">位</text>
          </view>
          <text class="tips">成功邀请</text>
        </view>
      </view>
      <view class="middle-middle">
        <button class="middle-middle-button"
                v-if="!userInfo"
                @click="jumpToLogin">
          <text class="text">立即邀请好友</text>
          <image class="icon"
                 src="~@/static/icon/icon_commission_go.png"></image>
        </button>
        <button class="middle-middle-button"
                open-type="share"
                v-if="userInfo">
          <text class="text">立即邀请好友</text>
          <image class="icon"
                 src="~@/static/icon/icon_commission_go.png"></image>
        </button>
        <view class="middle-middle-money"
              @click="jumpToCommission">
          <image class="icon"
                 src="~@/static/icon/icon_commission_book.png"></image>
          <text class="text">查看返利金</text>
        </view>
      </view>
    </view>
    <image mode="widthFix"
           class="award-info"
           :src="awardUrl"></image>
  </view>
</template>

<script>
import Feed from '../../components/feed'
import * as userApi from '../../api/userApi'
import * as commissionApi from '../../api/commissionApi'
export default {
  components: {
    Feed
  },
  data () {
    return {
      feeds: [],
      feedContent: null,
      feedTimer: null
    }
  },
  onUnload () {
    if (this.feedTimer) {
      clearInterval(this.feedTimer)
    }
  },
  onShow () {
    userApi.getUserInfoByToken().then(({ code, data }) => {
      if (code === 200) {
        this.$store.commit('updateUserInfo', data)
      }
    })
    this.feedTimer = setInterval(() => {
      if (this.feeds.length === 0) {
        commissionApi.getCommissionFeedList().then(({ code, data }) => {
          if (code === 200) {
            this.feeds = data
            if (this.feeds.length > 0) {
              const item = this.feeds.pop()
              this.feedContent = item.content
            }
          }
        })
      } else {
        const item = this.feeds.pop()
        this.feedContent = item.content
      }
    }, 3000)
  },
  onHide () {
    if (this.feedTimer) {
      clearInterval(this.feedTimer)
      this.feedTimer = null
    }
  },
  onShareAppMessage (res) {
    const title = '亲爱的，我请你趣吃霸王餐啦！赶紧查收！'
    return {
      title: title,
      path: this.getShareUrl(),
      imageUrl: 'https://image.qcbwc.cn/share/invite-share.png'
    }
  },
  onShareTimeline (res) {
    const title = '亲爱的，我请你趣吃霸王餐啦！赶紧查收！'
    return {
      title: title,
      path: this.getShareUrl(),
      imageUrl: 'https://image.qcbwc.cn/share/invite-share.png'
    }
  },
  methods: {
    change () {
      this.show = !this.show
    },
    getShareUrl () {
      let url = '/pages/index'
      if (this.userInfo) {
        url += '?invite_id=' + this.userInfo.id
      }
      return url
    },
    jumpToLogin () {
      uni.navigateTo({ url: '/pagesSub/other/login' })
    },
    jumpToCommission () {
      uni.navigateTo({
        url: '/pagesSub/commission/commission'
      })
    }
  },
  computed: {
    awardUrl () {
      return 'https://image.qcbwc.cn/background/invite_bottom.png?t=' + new Date().getTime()
    },
    userInfo () {
      return this.$store.state.userInfo
    }
  }
}
</script>
<style lang="scss" scoped>
.top {
  height: 1354rpx;
  background-image: url('https://image.qcbwc.cn/background/invite_top.png');
  background-size: 100%;
  .top-feed {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    margin-top: 274rpx;
  }
  .container {
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 956rpx;
    .button {
      height: 88rpx;
      line-height: 88rpx;
      width: 65%;
      background: linear-gradient(
        180deg,
        #fcf9c7 0%,
        #fcd890 52%,
        #fdbb61 100%
      );
      box-shadow: 0px 4rpx 20rpx 0px rgba(141, 14, 33, 0.31);
      border-radius: 44rpx;
      margin-bottom: 32rpx;
      font-size: 32rpx;
      color: #e40c0c;
      font-weight: 600;
    }
    .button-disable {
      height: 88rpx;
      width: 65%;
      line-height: 88rpx;
      border-radius: 44rpx;
      margin-bottom: 32rpx;
      font-size: 32rpx;
      font-weight: 600;
      background: #d3d4d5;
      box-shadow: 0px 4rpx 20rpx 0px rgba(141, 14, 33, 0.31);
      border-radius: 44rpx;
      color: #767778;
      font-weight: 600;
    }
  }
}
.middle {
  height: 624rpx;
  background-image: url('https://image.qcbwc.cn/background/invite_middle.png');
  background-size: 100%;
  &-top {
    position: absolute;
    display: flex;
    width: 90%;
    margin-left: 5%;
    margin-top: 130rpx;
    &-left {
      border-right: 2rpx solid #d3d4d5;
    }
    &-left,
    &-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      &-top {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        color: #ed2701;
        .number {
          font-size: 80rpx;
          font-weight: 600;
        }
        .unit {
          margin-bottom: 14rpx;
          font-size: 28rpx;
          margin-left: 4rpx;
          font-weight: 600;
        }
      }

      .tips {
        font-size: 28rpx;
        color: #98999a;
        font-weight: 400;
      }
    }
  }
  &-middle {
    position: absolute;
    margin-top: 404rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &-button {
      display: flex;
      width: 65%;
      height: 88rpx;
      line-height: 88rpx;
      justify-content: center;
      align-items: center;
      background: linear-gradient(
        180deg,
        #ff6160 0%,
        #ff2b39 52%,
        #ff0823 100%
      );
      box-shadow: 0px 4rpx 20rpx 0px rgba(141, 14, 33, 0.31);
      border-radius: 44rpx;
      .text {
        font-size: 32rpx;
        font-weight: 600;
        color: #fcebc6;
      }
      .icon {
        width: 36rpx;
        height: 36rpx;
        margin-left: 12rpx;
      }
    }

    &-money {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40rpx;
      .icon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 8rpx;
      }
      .text {
        color: #ff6632;
        font-size: 24rpx;
        font-weight: 400;
      }
    }
  }
}
.award-info {
  width: 100%;
}
</style>