<template>
  <div v-if="isShow" class="bg">
    <div class="mainBody">
      <div class="title1" v-if="!isShowButton"></div>
      <div class="title2" v-if="isShowButton"></div>
      <div class="bodyContent">
        <img :src="datas.joinInfo.userImg" />
        <div class="userId">用户<span style="margin-left: 6px;">{{ datas.joinInfo.nickName }}</span></div>
        <div class="condition" v-if="datas.joinInfo.joinCodeInfo.joinCode == '1002'">
          加入会员才能参与活动哦，感谢您的参与！
        </div>
        <div class="condition" v-else-if="datas.joinInfo.joinCodeInfo.joinCode == '1003'">
          {{ datas.joinInfo.requireLevel }}才能参与活动哦，感谢您的参与！
        </div>

        <div class="two-button" v-if="isShowButton">
          <button class="button1" v-lz-click="'4'" @click="btClick(1)">进店逛逛</button>
          <button class="button2" @click="btClick(2)">会员中心</button>
        </div>

        <div v-if="!isShowButton" class="one-button">
          <button class="button3" @click="btClick(3)">立即入会</button>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { goToOpenCard, goToShopPage } from "../../../util/tools.js";
import store from "../../../store/store";
export default {
  name: "joinVip",
  data() {
    return {
      isShow: true, //弹窗是否显示
      isShowButton: true, //显示不同按钮
    };
  },
  created() {
    console.log(this.datas);
    var joinData = this.datas.joinInfo.joinCodeInfo;
    // 1002,"不是会员无法参加"
    // 1003,"会员级别不足无法参加"

    if (joinData.joinCode == "1002") {
      this.isShowButton = false;
    } else if (joinData.joinCode == "1003") {
      this.isShowButton = true;
    }
    this.datas.joinInfo.nickName = this.datas.joinInfo.nickName.substr(0, 1) + "****" + this.datas.joinInfo.nickName.substr(-1, 1);
  },
  methods: {
    initData() {},
    btClick(type) {
      // console.log(type, "点击");
      if (type == 1) {
        let shopId = sessionStorage.getItem("shopId"); //store.state.shopId
        goToShopPage(shopId);
      } else if (type == 2) {
        goToOpenCard(this.datas.joinInfo.openCardUrl);
      } else if (type == 3) {
        goToOpenCard(this.datas.joinInfo.openCardUrl);
      }
    },
  },
};
</script>
<style scope='scope' lang="scss">
.bg {
  position: fixed;
  top: 0;
  background: #404040;
  width: 100%;
  height: 100vh;
  .mainBody {
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/176451/36/20711/68622/60f7fa7cE0e56aecf/aa8754102dc19767.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 7.6rem;
    width: 6rem;
    /* margin: 0 auto;
    margin-top: 2.5rem; */
    position: fixed;
    top: 20%;
    left: calc(50% - 6rem / 2);
    text-align: center;
  }
  .title1 {
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/169789/4/11934/37539/6049effaE782fada0/fae7834d808763f1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 1.2rem;
    width: 3.6rem;
    margin: 0 auto;
    margin-top: -0.5rem;
    /* position: absolute; */
    display: block;
  }
  .title2 {
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/164670/25/11163/37990/60483464E2bd908d2/3f222daa2b96b858.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 1.2rem;
    width: 3.6rem;
    margin: 0 auto;
    margin-top: -0.5rem;
    /* position: absolute; */
    display: block;
  }
  .bodyContent {
    margin-top: 0.8rem;
  }
  .bodyContent img {
    width: 1.8rem;
    height: 1.8rem;
    border: 3px solid #fcb83b;
    border-radius: 50%;
  }
  .userId {
    color: black;
    font-size: 0.2rem;
    font-weight: bold;
    margin-top: 0.2rem;
  }
  .condition {
    width: 4.8rem;
    margin: 0 auto;
    margin-top: 0.2rem;
    color: #e2231a;
    font-size: 0.34rem;
    font-weight: bolder;
  }
  .two-button {
    margin-top: 0.6rem;
  }
  .button1 {
    font-size: 0.4rem;
    width: 2.25rem;
    height: 0.9rem;
    background-color: #e2231a;
    border-radius: 5px;
    margin-right: 0.5rem;
    color: white;
  }
  .button2 {
    font-size: 0.4rem;
    width: 2.25rem;
    height: 0.9rem;
    background-color: #ff5b02;
    border-radius: 5px;
    color: #ffffff;
  }
  .one-button {
    margin-top: 0.6rem;
  }
  .button3 {
    font-size: 0.4rem;
    width: 4.9rem;
    height: 1rem;
    background-color: #e2231a;
    border-radius: 5px;
    color: #ffffff;
  }
}

</style>
