groupon-wx/pages/order_addcart/wallet_accelerate/index.vue

<!-- #ifdef H5 -->
<template >
  <view class="wallet_accelerate" :style="colorStyle">
    <view class="received_header">
      <view class="img-area">
        <text>获取更多红色积分</text>
      </view>
      <view class="text-area-1">
        <text> 当前红色积分: </text>

        <text style="color: #ec912d; font-size: 36rpx"> 0.0 </text>
      </view>
      <view class="text-area-2">
        <text> 可兑换: </text>

        <text style="color: #eb4c63; font-size: 36rpx"> 0.0元 </text>
      </view>
      <view class="btn-area">
        <button>去下单</button>
      </view>
    </view>
    <view class="received_body">
      <view class="img-area">
        <text>邀请好友注册</text>
      </view>
      <view class="btn-area">
        <button>去邀请</button>
      </view>
      <view class="text-area-1">
        <text> 规则说明: </text>
      </view>
      <view class="text-area-2">
        1、完善个人资料 (+100信誉分)
        <br>
        2、邀请好友注册完善资料(+5信誉分)
        <br>
        3、每完成一次进货(+20信誉分)
        <br>
        4、减少进货场次(-30信誉分)
        <br>
        5、500信誉分以上完成一次进货+2信誉分，邀请好友注册完善资料+1信誉分
        <br>
        <br>
        6、100信誉分—199信誉分（每场限抢一单)
        <br>
        7、200信誉分—299信誉分（每场限抢二单)
        <br>
        8、300信誉分—399信誉分(每场限抢三单)
        <br>
        9、400信誉分—499信誉分（每场限抢四单)
        <br>
        10、500信誉分以上用户(每场限抢五单)
      </view>
    </view>
    <view class="received_body">
      <view class="img-area">
        <text>团队好友下单累计满15人</text>
      </view>
      <view class="btn-area">
        <button>去邀请</button>
      </view>
      <view class="text-area-1">
        <text> 规则说明: </text>
      </view>
      <view class="text-area-2">
        1、完善个人资料 (+100信誉分)
        <br>
        2、邀请好友注册完善资料(+5信誉分)
        <br>
        3、每完成一次进货(+20信誉分)
        <br>
        4、减少进货场次(-30信誉分)
        <br>
        5、500信誉分以上完成一次进货+2信誉分，邀请好友注册完善资料+1信誉分
        <br>
        <br>
        6、100信誉分—199信誉分（每场限抢一单)
        <br>
        7、200信誉分—299信誉分（每场限抢二单)
        <br>
        8、300信誉分—399信誉分(每场限抢三单)
        <br>
        9、400信誉分—499信誉分（每场限抢四单)
        <br>
        10、500信誉分以上用户(每场限抢五单)
      </view>
    </view>
  </view>
</template>

<script>	import {
  logListByUserId,
  todayStatistics
} from '@/api/home.js';
export default {
  components: {

  },
  data () {
    return {
      historyList: [],
      moneyObj: {
        lossTotalAmount: "0",
        receiveItemAmount: "0",
        receiveItemCount: 0,
        redEnvelopeItemCount: 0,
        remainItemCount: 0,
        totalReceivedRedEnvelopeAmount: "0",
        totalRedEnvelopeAmount: "0",
        totalRemainItemAmount: "0"
      },
    };
  },
  onPullDownRefresh () {
    this.logListByUserId()
    this.todayStatistics()
  },
  onLoad (options) {

  },
  created () {
    this.logListByUserId()
    this.todayStatistics()
  },
  methods: {
    todayStatistics () {
      todayStatistics().then(res => {
        this.moneyObj = res.data
      })
    },
    logListByUserId () {
      let that = this
      logListByUserId().then(res => {
        if (res.data.length > 0) {
          that.$set(that, "historyList", res.data)
        } else {
          that.$set(that, "historyList", [])
        }
        uni.stopPullDownRefresh();
      })
    },
  }
}
</script>

<style scoped lang="scss">
.wallet_accelerate {
  .received_header {
    height: 380rpx;
    position: relative;
    background: white;
    border-radius: 15px;
    margin: 10px;
    .img-area {
      text-align: center;
      color: white;
      position: relative;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: url("./矩形.png") no-repeat;
      width: 60%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 32rpx;
      background-size: 100% 100%;
    }
    .text-area-1 {
      width: 100%;
      height: 80rpx;
      position: relative;
      line-height: 80rpx;
      font-size: 32rpx;
      letter-spacing: 1px;
      padding-top: 20rpx;
      padding-left: 40rpx;
    }
    .text-area-2 {
      box-sizing: border-box;
      width: 100%;
      height: 50rpx;
      position: relative;
      line-height: 50rpx;
      font-size: 32rpx;
      letter-spacing: 1px;
      padding-top: 20rpx;
      padding-left: 40rpx;
    }
    .btn-area {
      position: relative;
      height: 170rpx;
      button {
        left: 50%;
        top: 60%;
        transform: translate(-50%, -60%);
        position: absolute;
        width: 35%;
        height: 70rpx;
        line-height: 70rpx;
        border-radius: 50rpx;
        font-size: 32rpx;
        border: 1px solid black;
      }
    }
  }
  .received_body {
    position: relative;
    background: white;
    border-radius: 15px;
    margin: 10px;
    .img-area {
      text-align: center;
      color: white;
      position: relative;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background: url("./矩形.png") no-repeat;
      width: 60%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 32rpx;
      background-size: 100% 100%;
    }
    .text-area-1 {
      width: 100%;
      height: 80rpx;
      position: relative;
      top: -10rpx;
      line-height: 80rpx;
      font-size: 32rpx;
      letter-spacing: 1px;
      padding-left: 40rpx;
    }
    .text-area-2 {
      box-sizing: border-box;
      width: 100%;
      position: relative;
      line-height: 40rpx;
      font-size: 32rpx;
      padding-top: 20rpx;
      padding-left: 40rpx;
      color: #999999;
      padding-bottom: 10px;
    }
    .btn-area {
      position: relative;
      height: 130rpx;
      button {
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        position: absolute;
        width: 35%;
        height: 70rpx;
        line-height: 70rpx;
        border-radius: 50rpx;
        font-size: 32rpx;
        border: 1px solid black;
      }
    }
  }
}
</style>
<!-- #endif -->