<template>
  <div v-if="isShow" class="bg">
    <div class="mainBody" :style="{'background-image': 'url('+follow.followImg+')'}">
        <!-- :style="backgroundImage:url()" -->
      <div class="bodyContent">
        <div class="condition">
          <!-- 关注店铺才能参与活动哦！ -->
          <div class="p1">{{ datas.joinInfo.joinCodeInfo.joinDes }}</div>
        </div>

        <div v-if="code != 1006">
            <div class="p2">{{ shopname }}</div>
        </div>

        <div class="two-button" v-if="code == 1004">
          <button class="button3" :style="{background:follow.btnColor3}" @click="btClick(1)">关注店铺</button>
        </div>

        <div v-if="code == 1005">
          <button class="button3" :style="{background:follow.btnColor3}" @click="btClick(2)">
            关注店铺且立即入会
          </button>
        </div>

        <div v-if="code == 1006">
          <button class="button3" :style="{background:follow.btnColor3}" @click="btClick(3)">加入会员</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
let { followShop } = apis1;
import { goToOpenCard, goToShopPage } from "../../../util/tools.js";
import store from "../../../store/store";
export default {
  name: "joinVip",
  data() {
    return {
      isShow: true, //弹窗是否显示
      isShowButton: true, //显示不同按钮
      shopname: "",
      code: 0,
    };
  },
  created() {
    console.log(this.datas, 9999999);
    console.log(this.follow, 9999999);
    var joinData = this.datas.joinInfo.joinCodeInfo;
    this.shopname = this.datas.shopName;
    this.code = this.datas.joinInfo.joinCodeInfo.joinCode;
    console.log(this.code, 888888);
    this.datas.joinInfo.nickName =
      this.datas.joinInfo.nickName.substr(0, 1) +
      "****" +
      this.datas.joinInfo.nickName.substr(-1, 1);
  },
  methods: {
    initData() {},
    btClick(type) {
      if (type == 1) {
        followShop((data) => {
          if (data.resp_code == 0) {
            // location.reload();
            location.href = sessionStorage.getItem('oldUrl')
          }
        });
      } else if (type == 2) {
        followShop((data) => {
          if (data.resp_code == 0) {
            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/212927/18/15310/16973/6239995bE7411e548/b46adb46b3d236f4.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 5.88rem;
    width: 6.3rem;
    position: fixed;
    top: calc(50% - 5.88rem / 2);
    left: calc(50% - 6.3rem / 2);
    text-align: center;
  }
  .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;
  }
  .condition {
    width: 4.8rem;
    margin: 0 auto;
    margin-top: 0.2rem;
    color: #e2231a;
    font-size: 0.34rem;
    font-weight: bolder;
  }
  .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: 0rem;
  }
  .button3 {
    font-size: 0.4rem;
    width: 4.9rem;
    height: .8rem;
    background-color: #a1080f;
    border-radius: .4rem;
    color: #ffffff;
  }
  .shopnameTest {
    color: #e2231a;
    font-size: 14px;
    margin-top: 20px;
  }
  .p1{
    width: 4.8rem;
    margin: 0 auto;
    margin-top: 3.4rem;
    color: black;
    font-size: 0.3rem;
    font-weight: bolder;
  }
  .p2{
       width: 4.8rem;
    margin: 0 auto;
    margin-top: 0.15rem;
    color: #8c8c8c;
    font-size: 0.2rem;
  }
}
</style>
