<template>
  <view>
    <view class="bg">
      <image class="bg_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/invitation.webp"></image>
      <image @click="back" class="bg_back" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/back.png"></image>
      <view class="bg_body">
        <view class="b_qr">
          <view class="qr_body">
            <view class="qr_code">
              <image :src="qr_img"></image>
            </view>
            <view class="qr_text">扫一扫，补贴正在路上</view>
            <view class="qr_tips">温馨提示：邀请新用户才有机会获得补贴哦</view>
          </view>
        </view>
        <view class="b_user">
          <view class="users">
            <image v-for="(item, index) in info.user_info" :key="item.uid" class="avatar" :src="item.avatar||'/static/images/f.png'"></image>
            <block v-if="info.user_info.length<4">
              <view v-for="item in 4-info.user_info.length" :key="item+'n'" class="avatar_no">
                <u-icon name="plus" color="#fff" size="40rpx"></u-icon>
              </view>
            </block>
          </view>
          <view class="u_tips">邀请新用户消费达目标金额，有机会领取补贴哦~</view>
          <view class="u_btn">
            <image v-if="status==0" class="btn_image" @click="open" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/ibtn1.webp"></image>
            <image v-if="status==1" class="btn_image" @click="open" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/ibtn2.webp"></image>
            <image v-if="status==2" class="btn_image" @click="opened" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/ibtn3.webp"></image>
          </view>
          <uni-popup ref="redPacket">
            <view class="red_packet">
              <block v-if="status==0">
                <view class="packet_img">
                  <image class="img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/red_packet1.webp"></image>
                  <view class="p_text">
                    <view class="big">抱歉！</view>
                    <view class="smoll">有好友消费未达目标金额</view>
                    <view class="smoll">无法领补贴哦~</view>
                  </view>
                </view>
                <image @click="close()" class="close_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/close.png"></image>
              </block>
              <block v-if="status==1">
                <view class="packet_img" @click="openRedPacket()">
                  <image class="img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/red_packet2.webp"></image>
                  <view class="p_text">
                    <view class="big">恭喜！</view>
                    <view class="smoll">成功获得实物通用补贴</view>
                    <view class="smoll">赶快打开吧~</view>
                  </view>
                </view>
                <image @click="close()" class="close_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/close.png"></image>
              </block>
              <block v-if="status==2">
                <view class="packet_img">
                  <image class="img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/red_packet3.webp"></image>
                  <view class="p_text" style="bottom: 60rpx;">
                    <view class="smoll">恭喜你！成功获得</view>
                    <view class="smoll red_count"><text class="count">{{red_packet.amount}}</text>元</view>
                    <view class="big2">购买指定商品可直接抵扣使用</view>
                    <view class="smoll">{{red_packet.end_time}}过期</view>
                    <image @click="close()" class="btn_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/put.webp"></image>
                  </view>
                </view>
                <image @click="close()" class="close_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/close.png"></image>
              </block>
            </view>
          </uni-popup>
        </view>
        <view class="b_in_list">
          <image class="body_head_img" mode="widthFix" src="https://lihai001.oss-cn-chengdu.aliyuncs.com/public/uploads/new_activity/irecoed.webp"></image>
          <view class="b_head">
            <view style="width: 120rpx;"></view>
            <view class="head_title" style="width: 200rpx;">名称</view>
            <view class="head_title" style="width: 130rpx;">ID</view>
            <view class="head_title" style="width: 120rpx;">目标金额</view>
            <view class="head_title" style="width: 120rpx;">状态</view>
          </view>
          <view class="b_content">
            <view class="content_list" v-for="(item, index) in info.user_info" :key="item.uid">
              <image class="avatar" :src="item.avatar||'/static/images/f.png'"></image>
              <view class="content_item" style="width: 180rpx;margin: 0 10rpx;">{{item.nickname}}</view>
              <view class="content_item" style="width: 130rpx;">{{item.uid}}</view>
              <view class="content_item" style="width: 120rpx;">{{item.target_amount}}<text class="mall">元</text></view>
              <view class="content_item" style="width: 120rpx;">
                <text v-if="item.is_finish" style="color: #18CE61;">已完成</text>
                <text v-else style="color: #FA5A29;">未完成</text>
              </view>
            </view>
            <!-- <view class="mall none">暂无记录</view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { storeActivityStatus, storeActivityReceive, storeActivityQrcode } from "@/api/activity.js"
import { Toast } from "../../../libs/uniApi";
import { getUserInfo } from '@/api/user.js';
export default {
  data() {
    return {
      info: {
        user_info: []
      },
      red_packet: {
        amount: '0.00',
        end_time: ''
      },
      status: 0, //0不可开， 1可开， 2已开
      qr_img: ''
    }
  },
  onLoad() {},
  onShow() {
    this.storeActivityQrcode();
    this.loadInfo();
  },
  methods: {
    back(){
      uni.navigateBack()
    },
    loadInfo(){
      storeActivityStatus().then(res=>{
        this.info = res.data;
        if(res.data.allow_receive) this.status = 1;
      })
    },
    opened(){
      Toast('已经领取过啦!');
    },
    open(){
      this.$refs.redPacket.open();
    },
    close(){
      this.$refs.redPacket.close();
    },
    storeActivityQrcode(){
      storeActivityQrcode().then(res=>{
        this.qr_img = res.data.url;
      })
    },
    // 打开补贴
    async openRedPacket(){
      this.$refs.redPacket.close();
      try{
        let {data} = await storeActivityReceive();
        this.$nextTick(()=>{
          this.red_packet = data;
          this.$u.sleep(800).then(()=>{
            this.status = 2;
            this.$u.sleep(100).then(()=>{
              this.open();
            })
          })
        })
      }catch(e){
        Toast(e)
      }
    }
  },
  onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
page{
  background-color: #ff864d;
}
.bg{
  position: relative;
  height: auto;
  .bg_img{
    width: 750rpx;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bg_back{
    height: 34rpx;
    width: 20rpx;
    position: absolute;
    top: calc(var(--status-bar-height) + 30rpx);
    left: 30rpx;
  }
  .bg_body{
    position: absolute;
    top: 414rpx;
    left: 0;
    .b_qr{
      width: 710rpx;
      height: 750rpx;
      margin: 0 20rpx;
      // background: linear-gradient(to top, #FFE3AE 0%, #FFF6EB 100%);
      background: #FFF6EB;
      border-radius: 50rpx;
      padding: 20rpx;
      .qr_body{
        width: 100%;
        height: 100%;
        border: 5rpx solid #ffd588;
        border-radius: 50rpx;
        text-align: center;
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        .qr_code{
          width: 510rpx;
          height: 510rpx;
          // background-color: #f8962e;
          margin: 0 auto;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .qr_text{
          font-size: 36rpx;
          color: #C44100;
          font-weight: 500;
        }
        .qr_tips{
          font-size: 26rpx;
          color: #C44100;
        }
      }
    }
    .b_user{
      margin-top: 30rpx;
      .users{
        display: flex;
        justify-content: center;
        .avatar{
          height: 100rpx;
          width: 100rpx;
          border-radius: 50%;
          margin: 15rpx;
        }
        .avatar_no{
          height: 100rpx;
          width: 100rpx;
          font-weight: 200;
          border-radius: 50%;
          border: 2rpx dashed #fff;
          margin: 15rpx;
          background-color: rgba(#fff, 0.3);
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .u_tips{
        color: #FFE5B3;
        font-size: 26rpx;
        text-align: center;
      }
      .u_btn{
        margin-top: 30rpx;
        margin-bottom: 20rpx;
        display: flex;
        justify-content: center;
        .btn_image{
          width: 403rpx;
          height: 113rpx;
        }
      }
      .red_packet{
        display: flex;
        flex-direction: column;
        align-items: center;
        .packet_img{
          width: 750rpx;
          position: relative;
          .img{
            width: 100%;
          }
          .p_text{
            position: absolute;
            bottom: 120rpx;
            width: 100%;
            text-align: center;
            color: #fff;
            .big{
              font-size: 38rpx;
              font-weight: 500;
              margin-bottom: 30rpx;
            }
            .smoll{
              font-size: 28rpx;
              margin-bottom: 20rpx;
            }
            .big2{
              font-size: 32rpx;
              font-weight: 500;
              margin-bottom: 30rpx;
            }
            .btn_img{
              width: 310rpx;
            }
            .red_count{
              margin-top: 80rpx;
              margin-bottom: 40rpx;
              .count{
                font-size: 80rpx;
              }
            }
          }
        }
        .close_img{
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
    .b_in_list{
      width: 710rpx;
      margin: 0 20rpx;
      height: auto;
      background-color: #fff;
      
      border-radius: 50rpx;
      padding: 20rpx;
      margin-bottom: 30rpx;
      display: flex;
      flex-direction: column;
      align-content: center;
      .body_head_img{
        width: 253rpx;
        margin: 0 auto;
      }
      .b_head{
        background-color: #fff2ed;
        border-radius: 20rpx;
        color: #854116;
        display: flex;
        margin-top: 28rpx;
        text-align: center;
        .head_title{
          width: 150rpx;
          padding: 20rpx 0;
          font-size: 28rpx;
        }
      }
      .b_content{
        .mall{
          font-size: 26rpx;
        }
        .content_list{
          background-color: #FFF6E9;
          border-radius: 20rpx;
          color: #C44100;
          padding-top: 20rpx;
          margin-top: 20rpx;
          font-size: 28rpx;
          display: flex;
          align-items: center;
          padding-bottom: 20rpx;
          text-align: center;
          .content_item{
            overflow: hidden;
          }
          .avatar{
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin-left: 16rpx;
          }
        }
        .none{
          text-align: center;
          padding: 20rpx;
        }
      }
    }
  }
  
}

</style>
