<template>
  <view>
    <view v-show="is_end && is_receive == 0" class="community">
      <view class="community_top">
        <view class="community_t">
          <view class="t0">领取社群专属优惠券</view>
          <view class="t1">今日份小心意</view>
          <view class="t1">祝您欧气满满</view>
          <!--  is_end !== 1 不是进行中的 is_receive == 0 未领取-->
          <img
            :class="is_end !== 1 ? 'community_btn_end' : 'community_btn'"
            src="https://oushen2022.oss-cn-beijing.aliyuncs.com/images/48a94702558f7f86173c0dab46b5d002.png"
            alt=""
            @tap="bindCommunalSharing()"
          />
        </view>
      </view>
      <view class="community_bm"></view>
    </view>
    <view v-show="is_end && is_receive == 1" class="community community_get">
      <view class="community_top">
        <view class="community_t">
          <view class="t0">领取成功</view>
          <view class="t0">恭喜您获得优惠券</view>
          <view class="t3"
            >{{ reduce }}<text>{{ unit }}</text></view
          >
          <img
            class="community_btn_get"
            src="https://oushen2022.oss-cn-beijing.aliyuncs.com/images/59859a92de81cc377517c8b6e91fc242.png"
            alt=""
          />
        </view>
      </view>
      <view class="community_bm"></view>
    </view>
  </view>
</template>

<script>
import api from "@/lib/api/api";
import login from "@/lib/utils/login";
export default {
  name: "PageCommunity",
  data() {
    return {
      statusBarHeight: 0, // 自定义导航
      titleBarHeight: 0, // 自定义导航
      BarHeight: 0, // 自定义导航
      activity_id: 2,
      is_end: null,
      is_receive: 0,
      reduce: 0,
      unit: 0,
      userInfo: {},
    };
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.titleBarHeight =
      (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height;
    this.BarHeight = -(this.statusBarHeight + this.titleBarHeight + 18);
  },
  onLoad(query) {
    uni.showLoading({
      title: "加载中",
    });
    // 此处的二维码  ages/community/community?activity_id=9 ？？？
    if (query.scene) {
      const scene = decodeURIComponent(query.scene);
      this.activity_id = scene.split("=")[1];
    } else {
      this.activity_id = query.activity_id; // 开发环境
    }
    const uinfoStr = uni.getStorageSync("userinfo");
    if (uinfoStr) {
      this.userInfo = JSON.parse(uinfoStr);
    }
    this.checkSharing(this.activity_id);
  },
  methods: {
    // 检查活动是否结束
    checkCommunal(activity_id) {
      return new Promise((res, rej) => {
        api
          .checkCommunal(activity_id)
          .then((data) => {
            this.is_end = data.is_end;
            if (data.errno !== 10000) {
              uni.showToast({
                icon: "none",
                title: data.errmsg,
                duration: 3000,
              });
              return false;
            }
            res(data);
          })
          .catch((err) => {
            rej(err);
            uni.showToast({
              icon: "none",
              title: "出错啦，请稍后重试",
              duration: 3000,
            });
          });
      });
    },
    // 检查用户是否已领取
    communalSharing(activity_id) {
      return new Promise((res, rej) => {
        api
          .communalSharing(activity_id, this.userInfo.session)
          .then((data) => {
            if (data.errno == 10000) {
              this.is_receive = data.data.is_receive;
              this.reduce = data.data.reduce;
              this.unit = data.data.unit;
            } else if (data.errno !== 40001) {
              uni.showToast({
                icon: "none",
                title: data.errmsg,
                duration: 3000,
              });
              return false;
            }
            res(data);
          })
          .catch((err) => {
            rej(err);
            uni.showToast({
              icon: "none",
              title: "出错啦，请稍后重试",
              duration: 3000,
            });
          });
      });
    },
    // 去绑定前的检查
    async checkSharing(activity_id) {
      await this.checkCommunal(activity_id);
      await this.communalSharing(activity_id);
      uni.hideLoading();
    },
    // 绑定
    bindCommunalSharing() {
      if (this.is_end !== 1) return;
      if (!this.userInfo.session) {
        login.wxLogin((userInfo) => {
          this.userInfo = userInfo;
          this.doCommunalSharing();
        });
      } else {
        this.doCommunalSharing();
      }
      // if (this.is_end == 1 && this.is_receive == 0) { // 0-未结束 0-未领取
    },
    doCommunalSharing() {
      const params = {
        activity_id: parseInt(this.activity_id),
        session: this.userInfo.session,
      };
      api.bindCommunalSharing(params).then((data) => {
        if (data.errno == 10000) {
          uni.showToast({
            icon: "none",
            title: data.errmsg,
            duration: 3000,
          });
          this.is_receive = data.data.is_receive;
          this.reduce = data.data.reduce;
          this.unit = data.data.unit;
        } else {
          uni.showToast({
            icon: "none",
            title: data.errmsg,
            duration: 3000,
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.load_con {
  position: absolute;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.community {
  position: relative;
  background-image: url(https://oushen2022.oss-cn-beijing.aliyuncs.com/images/74c752ae1be26b6f63698eecf02c30a0.png);
  background-size: 100% auto;
  -moz-background-size: 100% auto;
  background-repeat: no-repeat;

  .community_top {
    width: 100%;
    height: 800rpx;

    .community_t {
      font-weight: 600;
      color: #ff6900;
      padding-top: 400rpx;
      text-align: center;
      letter-spacing: 2rpx;
    }

    .t0 {
      height: 50rpx;
      margin: 0 auto;
      font-size: 36rpx;
      line-height: 50rpx;
      margin-bottom: 24rpx;
    }

    .t1 {
      height: 40rpx;
      margin: 0 auto;
      font-size: 28rpx;
      line-height: 40rpx;
    }

    .t3 {
      height: 80rpx;
      line-height: 80rpx;
      margin: 0 auto;
      font-size: 80rpx;
      font-weight: 600;
      margin-top: 40rpx;
      margin-left: 38rpx;

      text {
        font-size: 36rpx;
        font-weight: 400;
        margin-left: 4rpx;
      }
    }

    .community_btn {
      display: block;
      width: 226rpx;
      height: 226rpx;
      border-radius: 50%;
      margin: 16rpx auto 0;
      animation-name: myframe;
      /*要使用的关键帧动画的名称*/
      animation-duration: 1s;
      /*动画持续一秒*/
      animation-iteration-count: infinite;
      /*循环播放*/
    }

    .community_btn_end {
      display: block;
      width: 226rpx;
      height: 226rpx;
      border-radius: 50%;
      margin-top: 16rpx;
      margin: 0 auto;
    }

    .community_btn_get {
      display: block;
      width: 136rpx;
      height: 136rpx;
      border-radius: 50%;
      margin-top: 16rpx;
      margin: 0 auto;
    }
  }

  .community_bm {
    width: 100%;
    height: 128rpx;
    position: absolute;
    bottom: -28rpx;
    left: 0;
    background-image: url("https://oushen2022.oss-cn-beijing.aliyuncs.com/images/8c6a44454181248f7f8814713283f68a.png");
    background-size: 100% 100%;
  }

  /*定义关键帧动画*/
  @keyframes myframe {
    0% {
      width: 222rpx;
      height: 222rpx;
    }

    100% {
      width: 226rpx;
      height: 226rpx;
    }
  }
}

.community_get {
  background-image: url("https://oushen2022.oss-cn-beijing.aliyuncs.com/images/2ebb4131231bf051a0adb41a4b6ad884.png");
  background-size: 100% 100%;
}
</style>
